Bagaimana seharusnya data dikirimkan antara Javascript sisi klien dan kode C # di belakang aplikasi ASP.NET?

Saya mencari cara paling efisien / standar untuk mengirimkan data antara kode JavaScript sisi klien dan kode C # di balik aplikasi ASP.NET. Saya telah menggunakan metode berikut untuk mencapai ini, tetapi mereka semua merasa sedikit fudge.

Untuk meneruskan data dari JavaScript ke kode C # adalah dengan mengatur variabel ASP tersembunyi dan memicu postback:

<asp:HiddenField ID="RandomList" runat="server" />

function SetDataField(data) {
      document.getElementById('<%=RandomList.ClientID%>').value = data;
}

Kemudian dalam kode C # saya mengumpulkan daftar:

protected void GetData(object sender, EventArgs e)
{
      var _list = RandomList.value;
}

Kembali ke arah lain, saya sering menggunakan ScriptManager untuk mendaftarkan fungsi dan meneruskan data selama Page_Load:

ScriptManager.RegisterStartupScript(this.GetType(), "Set","get("Test();",true);

atau saya menambahkan atribut ke kontrol sebelum posting kembali atau selama tahap inisialisasi atau pra-render:

Btn.Attributes.Add("onclick", "DisplayMessage("Hello");");

Metode-metode ini telah membantu saya dengan baik dan melakukan pekerjaan itu, tetapi mereka tidak merasa lengkap. Apakah ada cara yang lebih standar untuk mengirimkan data antara sisi klien JavaScript dan kode C # back-end?

Saya telah melihat beberapa posting seperti ini yang menggambarkan kelas HtmlElement; Apakah ini sesuatu yang harus saya perhatikan?

Anda dapat dengan mudah dan mudah memanggil metode halaman statis dari JavaScript seperti dalam contoh ini . Jika Anda perlu memanggil metode dari beberapa halaman, Anda dapat mengatur layanan web dan memanggilnya dari Javascript dengan cara yang sama. Contoh juga termasuk di bawah ini.

.aspx Code

<asp:ScriptManager ID="ScriptManager1" 
EnablePageMethods="true" 
EnablePartialRendering="true" runat="server" />

Kode di belakang Kode

using System.Web.Services;

[WebMethod]
public static string MyMethod(string name)
{
    return "Hello " + name;
}

Kode Javascript

function test() {
    alert(PageMethods.MyMethod("Paul Hayman"));
}

CATATAN: Metode halaman harus statis. Ini bisa menjadi masalah bagi Anda, tergantung pada apa yang coba dilakukan aplikasi. Namun, jika informasi tersebut didasarkan pada sesi sama sekali, dan Anda menggunakan semacam otentikasi bawaan, Anda dapat menempatkan atribut EnableSession pada dekorator WebMethod, dan itu akan memungkinkan Anda untuk mendapatkan di HttpContext.Current.User, Sesi, dll.

Saya akan merekomendasikan melihat jQuery. JQuery dapat digunakan untuk membuat panggilan AJAX kembali ke server, yang dapat data kembali dalam format apa pun yang Anda butuhkan - format yang baik bisa JSON, karena dapat digunakan secara langsung dalam javascript.

Untuk menarik data dari server ke javascript menggunakan jQuery , pengambilan berikut membuat permintaan asinkron ke http://youserver.com/my/uri dan menerima data dari server dalam fungsi yang disediakan.

$.get("my/uri", 
    function(data) { 
       // client side logic using the data from the server
    })

Mengirim data dari javascript ke server bekerja dengan cara yang sama:

$.post("my/uri", { aValue : "put any data for the server here" }
    function(data) { 
       // client side logic using the data returned from the server
    })

Microsoft telah memuji UpdatePanelkontrol untuk melakukan ajax sehingga bisa dibilang cara "standar". Saya pribadi tidak akan merekomendasikan menggunakannya, ia tidak memiliki set fitur kaya dan kontrol yang Anda miliki ketika menggunakan JavaScript secara langsung.

Inilah cara saya secara pribadi melakukannya:

Buat bidang tersembunyi untuk nilai sisi klien apa pun yang ingin Anda gunakan dalam postback halaman standar (yaitu ketika pengguna mengirim klik)

<asp:HiddenField ID="selectedProduct" runat="server" />

Dalam kode di belakang register kontrol yang ingin Anda gunakan sisi klien.

    /* Register the controls we want to use client side */

    string js = "var productBox = document.getElementById('" + selectedProduct.ClientID + "'); ";
    js += "var macCodeBoxBE = document.getElementById('" + beMacCode.ClientID + "'); ";


    ClientScript.RegisterStartupScript(this.GetType(), "prodBox", js, true);

Gunakan pustaka javascript * untuk melakukan postingan / get ajax Anda lalu gunakan JavaScript untuk memperbarui halaman berdasarkan respons

$.get("../ajax/BTBookAppointment.aspx?dsl=" + telNumberBox.value + "&date=" + requiredDate.value + "&timeslot=" + ddTimeslot.value, function (response, status, xhr) {

    if (response.indexOf("not available") > -1) {
        loaderImage.src = "../images/cross.png"
        output.innerHTML = response;
    } });

Tulis halaman "ajax" yang menentukan metode render untuk melakukan pekerjaannya.

protected override void Render(HtmlTextWriter writer)
{
    if (string.IsNullOrEmpty(Request["mac"])) { return; }
    if (string.IsNullOrEmpty(Request["dsl"])) { return; }
    DataLayer.Checkers.BTmacCheckResponse rsp = DataLayer.Checkers.Foo.CheckMAC(Request["dsl"], Request["mac"]);

    writer.Write(rsp.Valid.ToString());
}

* Ada banyak perpustakaan untuk dipilih, Anda bahkan dapat menggulirnya sendiri. Saya akan merekomendasikan jQuery , stabil dan memiliki set fitur yang luas.

JSON adalah cara praktik terbaik untuk menyelesaikan tugas. Jangan melihat masalah sebagai lewat antara "C # dan JavaScript". Cara berpikir ini mengarah ke keanehan kode seperti apa yang Anda miliki di pos asli.

Lebih umum, itu hanya melewati objek antara klien dan server dengan cara agnostik bahasa. JSON sangat bagus untuk tugas karena didukung secara luas dan mudah dibaca.

Untuk menetapkan tag input yang tidak memerlukan asp sisi server, Anda dapat menggunakan: (atau <% #%> untuk penyatuan data formulir)

html:

<input type="hidden" value='<%= RandomValues %>' name="RANDOM_VALUES" />

kontrol asp:

<asp:HiddenField ID="RandomList" runat="server" />

untuk mendapatkan nilai pada postback

Request.Form["RANDOM_VALUES"]

Jika itu, asp mengontrol input tersembunyi, Anda dapat menggunakan

Request.Form[RandomList.UniqueID]

Bagian yang rapi tentang Request.Form adalah jika Anda memiliki beberapa tag dengan atribut "nama" yang sama, itu akan mengembalikan hasilnya dalam CSV.