Wie sollen Daten zwischen clientseitigem Javascript und C # -Code hinter einer ASP.NET-App übertragen werden?

21

Ich suche nach der effizientesten / Standardmethode zum Übertragen von Daten zwischen clientseitigem JavaScript-Code und C # -Code hinter einer ASP.NET-Anwendung. Ich habe die folgenden Methoden verwendet, um dies zu erreichen, aber sie fühlen sich alle ein bisschen verworren an.

Um Daten von JavaScript an den C # -Code zu übergeben, müssen Sie ausgeblendete ASP-Variablen festlegen und ein Postback auslösen:

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

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

Dann sammle ich im C # -Code die Liste:

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

Umgekehrt benutze ich oft einen der beiden ScriptManager, um eine Funktion zu registrieren und ihre Daten während Page Load weiterzugeben:

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

oder ich füge den Steuerelementen Attribute vor einem Beitrag zurück oder während der Initialisierungs- oder Vorbereitungsphase hinzu:

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

Diese Methoden haben mir gute Dienste geleistet und machen den Job, aber sie fühlen sich einfach nicht vollständig an. Gibt es eine Standardmethode zum Übertragen von Daten zwischen clientseitigem JavaScript und C # -Back-End-Code?

Ich habe einige Posts wie diesen gesehen , die die HtmlElement-Klasse beschreiben. Ist das etwas, worauf ich achten sollte?

cwc1983
quelle
5
json.org
Oded
Dies hängt davon ab, was Sie unter Datenübertragung zwischen Server und Client verstehen. Wenn die Daten zu dem Zeitpunkt bekannt sind, an dem die Seite gerendert wird, ist das Hinzufügen eines Skripts zum Erstellen Ihrer Daten oder das Festlegen von json über ein Literal oder eine ähnliche oder eine andere Variation durchaus sinnvoll. Wenn Sie, OTOH, versuchen, eine Seite zu erstellen, die mit dem Server interagiert, ohne ein Postback durchzuführen, ist das ein ganz anderes Problem. Schauen Sie sich auf jeden Fall json an.
Murph
Beispielsweise. Wenn ich einen Knopf vom Klienten startete, der einige Daten von einer xml Akte erhielt. Anschließend werden einige Berechnungen für die Daten in C # durchgeführt. Dann möchte ich, dass das fertige Ergebnis in einer hübschen grafischen Javascript-Anzeige angezeigt wird. Das ist ein Postback, bei dem der Kunde das Ergebnis erst kennt, nachdem das Postback ausgelöst wurde.
cwc1983
Mit diesem Kommentar können Sie immer noch die gesamte Arbeit auf dem Server ausführen - Laden / Verarbeiten / Zurückgeben -, also würde ich in erster Linie genau das tun. Formatieren Sie die Daten als json, einschließlich json, wenn Sie die Seite rendern (dies können Sie mit einem Literal tun). Wenn Sie das zum Laufen bringen, möchten Sie wahrscheinlich etwas Asynchroneres tun - aber es wird der gleiche JSON sein.
Murph
Vielen Dank an alle. Nachdem ich den Rat hier gelesen und einige zusätzliche Nachforschungen angestellt habe, habe ich eine neue Methode gefunden, um das zu erreichen, was ich tun wollte. Das Hauptproblem war, dass ich beim Ausführen eines Ajax-Posts den clientseitigen Code nicht abrufen konnte, um mich daran zu erinnern, wo sich das Programm befand. Ich verwende jetzt JQuery $ Ajax.Post, da es einen On-Success-Beitrag an den Client zurückgibt, der die Sitzungsdaten speichert.
CWC1983

Antworten:

9

Sie können einfach und problemlos eine statische Seitenmethode aus JavaScript aufrufen, wie in diesem Beispiel . Wenn Sie die Methode von mehreren Seiten aus aufrufen müssen, können Sie einen Webdienst einrichten und ihn auf dieselbe Weise über Javascript aufrufen. Beispiel siehe auch unten.

ASPX-Code

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

Code-Behind-Code

using System.Web.Services;

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

Javascript-Code

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

HINWEIS: Die Seitenmethoden müssen statisch sein. Dies kann für Sie problematisch sein, je nachdem, was die Anwendung versucht. Wenn die Informationen jedoch auf einer Sitzung basieren und Sie eine Art integrierte Authentifizierung verwenden, können Sie dem WebMethod-Dekorator ein EnableSession-Attribut hinzufügen. Auf diese Weise können Sie auf HttpContext.Current.User zugreifen. Sitzung usw.

Kasey Speakman
quelle
Tolles Beispiel, das funktioniert gut und ich werde es benutzen. Vielen Dank!
Mausimo
3

Ich würde empfehlen, sich jQuery anzuschauen. JQuery kann verwendet werden, um AJAX-Aufrufe an den Server zu senden, die Daten in jedem gewünschten Format zurückgeben können. Ein gutes Format könnte JSON sein, da es direkt in Javascript verwendet werden kann.

Um mit jQuery Daten vom Server auf Javascript herunter zu laden, senden die folgenden Abrufe eine asynchrone Anforderung an http://youserver.com/my/uri und empfangen die Daten vom Server in der angegebenen Funktion.

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

Das Senden von Daten aus Javascript an den Server funktioniert ähnlich:

$.post("my/uri", { aValue : "put any data for the server here" }
    function(data) { 
       // client side logic using the data returned from the server
    })
Christian Horsdal
quelle
Vielen Dank, das ist großartig, aber ich beziehe mich speziell auf Situationen, in denen ein Postback durchgeführt wird, bevor der Client weiß, was angezeigt werden soll. Wenn das "Ergebnis" durch c # erreicht wird, wie kann ich es dann wieder dem Client "injizieren".
cwc1983
3

Microsoft hat das UpdatePanelSteuerelement dazu veranlasst, Ajax zu verwenden, so dass dies wohl der "Standard" ist. Ich persönlich würde es jedoch nicht empfehlen, es hat nicht annähernd die reichhaltigen Funktionen und Steuerelemente, die Sie haben, wenn Sie JavaScript direkt verwenden.

So mache ich es persönlich:

Erstellen Sie ausgeblendete Felder für alle clientseitigen Werte, die Sie in einem Standardseiten-Postback verwenden möchten (z. B. wenn der Benutzer auf Senden klickt).

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

Registrieren Sie im Code dahinter die Steuerelemente, die Sie clientseitig verwenden möchten.

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

Verwenden Sie eine JavaScript-Bibliothek *, um Ihren Ajax-Beitrag zu verfassen / abzurufen, und verwenden Sie dann JavaScript, um die Seite basierend auf der Antwort zu aktualisieren

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

Schreiben Sie eine separate "Ajax" -Seite, die die Render-Methode überschreibt, um die Arbeit zu erledigen.

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

* Es gibt viele Bibliotheken zur Auswahl, Sie können sogar Ihre eigenen rollen. Ich würde jQuery empfehlen , es ist stabil und hat einen umfangreichen Funktionsumfang.

Tom Squires
quelle
8
Ich bin mir ziemlich sicher, dass es einen besonderen Ort in der Hölle für Leute gibt, die JavaScript-Schnipsel auf dem Server wie diesem
erstellen
1
@Raynos Es ist nichts Falsches daran, JavaScript-Serverseite zu generieren.
Tom Squires
2
Wenn Sie möchten, dass der Server etwas unternimmt, senden Sie eine HTTP-Anfrage (unter Verwendung von XHR) an einen vernünftigen URI mit vernünftigen Daten. Von dort weiß der HTTP-Server, was er damit machen soll.
Raynos
KEINE JS AUF DIE SERVER-SEITE SETZEN. ES GEHT AUF DEN KUNDEN. HENCE DER NAME CLIENT SIDE CODE. Hoppla, Feststelltaste steckt fest.
snowYetis
3

JSON ist die beste Methode, um die Aufgabe auszuführen. Betrachten Sie das Problem nicht als Übergang zwischen "C # und JavaScript". Diese Art des Denkens führt zu Code-Kuriositäten wie dem, was Sie im ursprünglichen Beitrag haben.

Im Allgemeinen werden Objekte nur sprachunabhängig zwischen dem Client und dem Server übertragen. JSON eignet sich hervorragend für diese Aufgabe, da es weitgehend unterstützt wird und leicht zu lesen ist.

P. Brian Mackey
quelle
2

Um ein Eingabe-Tag festzulegen, für das kein serverseitiges ASP erforderlich ist, können Sie Folgendes verwenden: (oder <% #%> für die Formulardatenbindung)

html:

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

Asp-Kontrolle:

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

um die Werte nachträglich abzurufen

Request.Form["RANDOM_VALUES"]

Wenn es eine versteckte Eingabe gibt, können Sie sie verwenden

Request.Form[RandomList.UniqueID]

Der nette Teil von Request.Form ist, dass, wenn Sie mehrere Tags mit demselben Attribut "name" haben, das Ergebnis in CSV zurückgegeben wird.

MackPro
quelle