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


21

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?



Ini tergantung pada apa yang Anda maksudkan dengan mengirimkan data antara server dan klien. Jika data diketahui pada titik halaman diberikan kemudian menambahkan skrip untuk membuat data Anda atau menetapkan json melalui literal atau yang serupa atau variasi lainnya sangat masuk akal. Jika, OTOH, Anda mencoba memiliki halaman yang berinteraksi dengan server tanpa melakukan postback maka itu masalah yang sama sekali berbeda. Jelas melihat json.
Murph

Sebagai contoh. Jika saya meluncurkan tombol dari klien yang mendapat beberapa data dari file xml. Kemudian beberapa perhitungan dilakukan pada data dalam C #. Lalu saya ingin hasil selesai ditampilkan dalam tampilan grafis javascript yang cantik. Itulah satu postback di mana klien tidak tahu hasilnya sampai setelah postback dinaikkan.
cwc1983

Dari komentar itu Anda masih dapat melakukan semua pekerjaan di server - load / process / return - jadi, pada contoh pertama, saya akan melakukan hal itu. Format data sebagai json, sertakan json saat Anda merender halaman (secara literal akan membiarkan Anda melakukan ini). Ketika Anda berhasil, Anda mungkin ingin melakukan sesuatu yang lebih asinkron - tetapi ini akan menjadi json yang sama.
Murph

Terima kasih semuanya. Setelah membaca saran di sini dan melakukan penelitian tambahan, saya telah menemukan metode baru untuk mencapai apa yang ingin saya lakukan. Masalah utama yang saya dapatkan adalah bahwa ketika saya melakukan posting Ajax saya tidak bisa mendapatkan kode sisi klien untuk mengingat di mana program berada. Saya sekarang menggunakan JQuery $ Ajax.Post karena memberikan posting Sukses kembali ke data sesi tabungan klien.
cwc1983

Jawaban:


9

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.


Contoh yang bagus, ini bekerja dengan baik dan saya akan menggunakannya. Terima kasih!
Mausimo

3

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
    })

Terima kasih, ini bagus, tetapi saya secara khusus merujuk pada situasi di mana postback dilakukan sebelum klien mengetahui apa yang harus ditampilkan. Jika "hasil" dicapai melalui c # bagaimana saya kemudian "menyuntikkan" kembali ke klien.
cwc1983

3

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.


8
Saya cukup yakin ada tempat khusus di neraka bagi orang-orang yang memasang cuplikan JavaScript di server seperti itu
Raynos

1
@ Raynos Tidak ada yang salah dengan menghasilkan sisi server JavaScript.
Tom Squires

2
jika Anda ingin server melakukan sesuatu, Anda mengirim permintaan HTTP (menggunakan XHR) ke URI yang masuk akal dengan data yang masuk akal. Dari sana, server HTTP akan tahu apa yang harus dilakukan dengannya.
Raynos

JANGAN PUT APA SAJA JS DI SISI SERVER. ITU TERJADI PADA KLIEN. KARENA NAMA KLIEN SISI KODE. Ups kunci-kunci macet.
snowYetis

3

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.


2

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.