Làm thế nào dữ liệu nên được chuyển giữa mã Javascript và mã C # phía máy khách phía sau ứng dụng ASP.NET?

Tôi đang tìm cách truyền dữ liệu hiệu quả / tiêu chuẩn nhất giữa mã JavaScript phía máy khách và mã C # đằng sau một ứng dụng ASP.NET. Tôi đã sử dụng các phương pháp sau để đạt được điều này nhưng tất cả đều cảm thấy hơi khó hiểu.

Để truyền dữ liệu từ JavaScript sang mã C # bằng cách đặt các biến ASP ẩn và kích hoạt một postback:

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

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

Sau đó, trong mã C # tôi thu thập danh sách:

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

Quay trở lại theo cách khác, tôi thường sử dụng ScriptManager để đăng ký một hàm và truyền dữ liệu đó trong Page_Load:

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

hoặc tôi thêm thuộc tính vào các điều khiển trước khi đăng lại hoặc trong giai đoạn khởi tạo hoặc kết xuất trước:

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

Những phương pháp này đã phục vụ tôi tốt và thực hiện công việc, nhưng chúng không cảm thấy hoàn chỉnh. Có cách truyền dữ liệu chuẩn hơn giữa mã phía máy khách JavaScript và mã back-end C # không?

Tôi đã thấy một số bài đăng như thế này mô tả lớp HtmlEuity; đây có phải là cái gì đó tôi nên xem xét?

Bạn có thể đơn giản và dễ dàng gọi một phương thức trang tĩnh từ JavaScript như trong ví dụ này . Nếu bạn cần gọi phương thức từ nhiều trang, bạn có thể thiết lập một dịch vụ web và gọi nó từ Javascript theo cùng một cách. Ví dụ cũng bao gồm dưới đây.

Mã .aspx

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

Mã phía sau mã

using System.Web.Services;

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

Mã Javascript

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

LƯU Ý: Các phương thức trang phải tĩnh. Điều này có thể là vấn đề đối với bạn, tùy thuộc vào những gì ứng dụng đang cố gắng làm. Tuy nhiên, nếu thông tin hoàn toàn dựa trên phiên và bạn đang sử dụng một loại xác thực tích hợp nào đó, bạn có thể đặt thuộc tính EnableSession trên trình trang trí WebMethod và điều đó sẽ cho phép bạn truy cập tại HttpContext.Cản.User, Phiên, v.v.

Tôi khuyên bạn nên xem jQuery. JQuery có thể được sử dụng để thực hiện các cuộc gọi AJAX trở lại máy chủ, có thể lấy lại dữ liệu ở bất kỳ định dạng nào bạn cần - một định dạng tốt có thể là JSON, vì nó có thể được sử dụng trực tiếp trong javascript.

Để kéo dữ liệu từ máy chủ xuống javascript bằng jQuery , các lần tìm nạp sau đây đưa ra yêu cầu không đồng bộ tới http://youserver.com/my/uri và nhận dữ liệu từ máy chủ trong chức năng được cung cấp.

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

Gửi dữ liệu từ javascript đến máy chủ hoạt động tương tự:

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

Microsoft đã áp dụng UpdatePanelđiều khiển để thực hiện ajax vì vậy được cho là cách "chuẩn". Cá nhân tôi không khuyên bạn nên sử dụng nó, mặc dù nó không có bộ tính năng phong phú và kiểm soát mà bạn có khi sử dụng JavaScript trực tiếp.

Đây là cách cá nhân tôi làm:

Tạo các trường ẩn cho bất kỳ giá trị phía máy khách nào bạn muốn sử dụng trong một postback trang tiêu chuẩn (tức là khi người dùng nhấn gửi)

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

Trong mã phía sau đăng ký các điều khiển bạn muốn sử dụng phía máy khách.

    /* 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);

Sử dụng thư viện javascript * để thực hiện bài đăng / nhận ajax của bạn sau đó sử dụng JavaScript để cập nhật trang dựa trên phản hồi

$.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;
    } });

Viết một trang "ajax" riêng biệt ghi đè phương thức kết xuất để thực hiện công việc.

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

* Có rất nhiều thư viện để lựa chọn, thậm chí bạn có thể tự cuộn. Tôi sẽ giới thiệu jQuery , nó ổn định và có một bộ tính năng mở rộng.

JSON là cách thực hành tốt nhất để hoàn thành nhiệm vụ. Đừng xem vấn đề là sự chuyển giao giữa "C # và JavaScript". Cách suy nghĩ này dẫn đến những điều kỳ quặc về mã như những gì bạn có trong bài viết gốc.

Tổng quát hơn, nó chỉ chuyển các đối tượng giữa máy khách và máy chủ theo kiểu bất khả tri ngôn ngữ. JSON rất tốt cho nhiệm vụ vì nó được hỗ trợ rộng rãi và dễ đọc.

Để đặt thẻ đầu vào không cần asp máy chủ, bạn có thể sử dụng: (hoặc <% #%> cho biểu mẫu dữ liệu)

html:

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

kiểm soát asp:

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

để có được các giá trị trên postback

Request.Form["RANDOM_VALUES"]

Nếu nó, asp kiểm soát đầu vào ẩn, bạn có thể sử dụng

Request.Form[RandomList.UniqueID]

Phần gọn gàng về Request.Form là nếu bạn có nhiều thẻ có cùng thuộc tính "name", nó sẽ trả về kết quả trong CSV.