W jaki sposób dane powinny być przekazywane między kodem JavaScript po stronie klienta a kodem C # za aplikacją ASP.NET?

Szukam najbardziej wydajnego / standardowego sposobu przesyłania danych między kodem JavaScript po stronie klienta a kodem C # za aplikacją ASP.NET. Użyłem następujących metod, aby to osiągnąć, ale wszystkie mają trochę krówki.

Aby przekazać dane z JavaScript do kodu C #, należy ustawić ukryte zmienne ASP i wywołać zwrotny:

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

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

Następnie w kodzie C # zbieram listę:

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

Wracając w drugą stronę, często używam ScriptManager do rejestrowania funkcji i przekazywania jej danych podczas ładowania strony:

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

lub dodaję atrybuty do kontrolek przed zwrotem postu lub podczas etapów inicjalizacji lub wstępnego renderowania:

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

Te metody dobrze mi służyły i wykonują swoją pracę, ale po prostu nie są kompletne. Czy istnieje bardziej standardowy sposób przekazywania danych między kodem JavaScript po stronie klienta a kodem zaplecza C #?

Widziałem kilka postów jak ten , które opisują HTMLElement klasę; czy powinienem to sprawdzić?

Możesz w prosty i łatwy sposób wywołać metodę strony statycznej z JavaScript, jak w tym przykładzie . Jeśli chcesz wywołać metodę z wielu stron, możesz skonfigurować usługę internetową i wywołać ją z Javascript w ten sam sposób. Przykład również zawarty poniżej.

Kod .aspx

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

Kod związany z kodem

using System.Web.Services;

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

Kod JavaScript

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

UWAGA: Metody strony muszą być statyczne. Może to być dla ciebie problematyczne, w zależności od tego, co aplikacja próbuje zrobić. Jeśli jednak informacje w ogóle opierają się na sesji, a używasz wbudowanego uwierzytelniania, możesz umieścić atrybut EnableSession w dekoratorze WebMethod, a to pozwoli ci uzyskać HttpContext.Current.User, Sesja itp.

Polecam rzucić okiem na jQuery. JQuery może służyć do wywoływania wywołań AJAX z powrotem na serwer, który może przesyłać dane z powrotem w dowolnym wymaganym formacie - dobrym formatem może być JSON, ponieważ można go użyć bezpośrednio w javascript.

Aby pobrać dane z serwera do javascript za pomocą jQuery , następujące pobrania wysyłają asynchroniczne żądanie do http://youserver.com/my/uri i odbierają dane z serwera w dostarczonej funkcji.

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

Wysyłanie danych z javascript na serwer działa podobnie:

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

Microsoft zaimplementował UpdatePanelkontrolę, aby wykonać ajax, więc jest to prawdopodobnie „standardowy” sposób. Jednak osobiście nie zalecałbym korzystania z niego, ponieważ nie ma nigdzie w pobliżu bogatego zestawu funkcji i kontroli, które masz przy bezpośrednim korzystaniu z JavaScript.

W ten sposób osobiście to robię:

Utwórz ukryte pola dla dowolnych wartości po stronie klienta, których chcesz używać w standardowym postback strony (tj. Kiedy użytkownik kliknie przesłać)

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

W kodzie poniżej zarejestruj kontrolki, których chcesz używać po stronie klienta.

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

Skorzystaj z biblioteki javascript *, aby wykonać swoją aukcję ajax / get, a następnie użyj JavaScript, aby zaktualizować stronę na podstawie odpowiedzi

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

Napisz oddzielną stronę „ajax”, która przesłania metodę renderowania do wykonania pracy.

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

* Istnieje wiele bibliotek do wyboru, możesz nawet tworzyć własne. Poleciłbym jQuery , jego stabilny i ma bogaty zestaw funkcji.

JSON to najlepszy sposób na wykonanie zadania. Nie patrz na problem jako przejście między „C # a JavaScript”. Ten sposób myślenia prowadzi do dziwactw w kodzie, takich jak w oryginalnym poście.

Mówiąc bardziej ogólnie, po prostu przekazuje obiekty między klientem a serwerem w sposób agnostyczny z języka. JSON doskonale nadaje się do tego zadania, ponieważ jest szeroko obsługiwany i łatwy do odczytania.

Aby ustawić tag wejściowy, który nie wymaga asp serwera, możesz użyć: (lub <% #%> dla wiązania danych formularzy)

HTML:

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

kontrola bolenia:

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

aby uzyskać wartości na postback

Request.Form["RANDOM_VALUES"]

Jeśli to, kontrola asp ukryte wejście, możesz użyć

Request.Form[RandomList.UniqueID]

Zgrabną częścią Request.Form jest to, że jeśli masz wiele tagów z tym samym atrybutem „name”, zwróci wynik w CSV.