web-dev-qa-db-fra.com

Comment les données doivent-elles être transmises entre le Javascript côté client et le code C # derrière une application ASP.NET?

Je recherche le moyen le plus efficace/standard de transmettre des données entre le code JavaScript côté client et le code C # derrière une application ASP.NET. J'ai utilisé les méthodes suivantes pour y parvenir, mais ils se sentent tous un peu un fudge.

Pour passer des données de JavaScript au code C #, définissez des variables cachées ASP et déclenchez une publication:

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

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

Ensuite, dans le code C #, je recueille la liste:

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

En revenant dans l'autre sens, j'utilise souvent l'un ou l'autre ScriptManager pour enregistrer une fonction et lui transmettre des données lors de

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

ou j'ajoute des attributs aux contrôles avant un post ou pendant les étapes d'initialisation ou de pré-rendu:

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

Ces méthodes m'ont bien servi et font le travail, mais elles ne se sentent pas complètes. Existe-t-il un moyen plus standard de transmettre des données entre JavaScript côté client et le code back-end C #?

J'ai vu des articles comme celui-ci qui décrivent la classe HtmlElement; est-ce quelque chose que je devrais examiner?

web-developmentc#.netjavascriptasp.net
21
cwc1983

Vous pouvez simplement et facilement appeler une méthode de page statique à partir de JavaScript comme dans cet exemple . Si vous devez appeler la méthode à partir de plusieurs pages, vous pouvez configurer un service Web et l'appeler à partir de Javascript de la même manière. Exemple également inclus ci-dessous.

Code .aspx

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

Code code-behind

using System.Web.Services;

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

Code Javascript

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

REMARQUE: les méthodes de page doivent être statiques. Cela pourrait être problématique pour vous, selon ce que l'application essaie de faire. Cependant, si les informations sont basées sur la session, et que vous utilisez une sorte d'authentification intégrée, vous pouvez mettre un attribut EnableSession sur le décorateur WebMethod, et cela vous permettra d'accéder à HttpContext.Current.User, Session, etc.

9
Kasey Speakman

Je recommanderais de jeter un œil à jQuery. JQuery peut être utilisé pour effectuer des appels AJAX au serveur, qui peut renvoyer les données dans le format dont vous avez besoin - un bon format pourrait être JSON, car il peut être utilisé directement en javascript.

Pour extraire les données du serveur vers javascript à l'aide de jQuery , les récupérations suivantes font une demande asynchrone à http://youserver.com/my/uri et reçoivent les données de le serveur dans la fonction fournie.

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

L'envoi de données de javascript au serveur fonctionne de la même manière:

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

JSON est la meilleure méthode pour accomplir la tâche. Ne regardez pas le problème comme un passage entre "C # et JavaScript". Cette façon de penser conduit à des bizarreries de code telles que ce que vous avez dans le message d'origine.

Plus généralement, il s'agit simplement de passer des objets entre le client et le serveur d'une manière indépendante du langage. JSON est idéal pour la tâche car il est largement pris en charge et facile à lire.

3
P.Brian.Mackey

Microsoft a implémenté le contrôle UpdatePanel pour faire ajax, ce qui est sans doute la méthode "standard". Je ne recommanderais pas personnellement de l'utiliser, cependant, il n'a rien à voir avec le riche ensemble de fonctionnalités et le contrôle que vous avez lorsque vous utilisez directement JavaScript.

Voici comment je le fais personnellement:

Créez des champs cachés pour toutes les valeurs côté client que vous souhaitez utiliser dans une publication de page standard (c'est-à-dire lorsque l'utilisateur frappe soumettre)

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

Dans le code derrière, enregistrez les contrôles que vous souhaitez utiliser côté client.

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

Utilisez une bibliothèque javascript * pour faire votre post ajax/get puis utilisez JavaScript pour mettre à jour la page en fonction de la réponse

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

Ecrivez une page "ajax" séparée qui écrase la méthode de rendu pour faire le travail.

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

* Il existe de nombreuses bibliothèques parmi lesquelles choisir, vous pouvez même lancer la vôtre. Je recommanderais jQuery , son stable et possède un ensemble complet de fonctionnalités.

3
Tom Squires

Pour définir une balise d'entrée qui n'a pas besoin d'asp côté serveur, vous pouvez utiliser: (ou <% #%> pour la liaison de données de formulaires)

html:

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

contrôle asp:

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

pour obtenir les valeurs sur postback

Request.Form["RANDOM_VALUES"]

Si son, asp contrôle l'entrée cachée, vous pouvez utiliser

Request.Form[RandomList.UniqueID]

La partie intéressante de Request.Form est que si vous avez plusieurs balises avec le même attribut "name", il retournera le résultat en CSV.

2
MackPro