Comment créer une liste d’éléments dans Jquery et l’obtenir côté serveur?

J’essaie de faire une liste d’éléments (téléphones et personnes à charge pour un client), par exemple, l’utilisateur peut inclure certains numéros et en supprimer d’autres (peut-être les éditer si possible), comme une liste dans l’enregistrement du client. .

J’aimerais savoir comment puis-je le faire côté client et obtenir la liste côté serveur? Y at-il un plugin JQuery ou une meilleure pratique pour le faire?

PS: J’utilise ASP.Net MVC 2.

Je garde cet exemple pour commencer, il suffit de mettre les éléments appropriés dans les fichiers appropriés et de les modifier pour les adapter à ce que vous faites:

/ * Dans ce cas, j’utilise * /

available at: http://www.json.org/js.html function jsonObject() { }; var phoneListObject = new jsonObject(); function SaveJsonObject() { phoneListObject.Control = new jsonObject(); phoneListObject.Control.CustomerId = $("#CustomerId").val(); phoneListObject.Control.CustomerName = $("#CustomerName").val(); phoneListObject.ListBody.PhonesBlock = new jsonObject(); phoneListObject.ListBody.PhonesBlock.Phone = new Array(); $('#PhonesBlock .Phone').each(function(myindex) { phoneListObject.ListBody.PhonesBlock.Phone[myindex].PhoneNumber = $(".PhoneNumber input", this).val(); phoneListObject.ListBody.PhonesBlock.Phone[myindex].PhoneName = $(".PhoneName input", this).val(); }); }; $(function() { function SaveCurrentList() { SaveJsonObject(); var currentSet = phoneListObject; var formData = { FormData: currentSet }; phoneListJSON = JSON.ssortingngify(formData); var FormData = "{ FormData:" + JSON.ssortingngify(phoneListJSON) + "}"; SavePhoneListData(FormData); }; function SavePhoneListData(phonesData) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", data: phonesData, dataFilter: function(data) { var msg; if ((typeof (JSON) !== 'undefined') && (typeof (JSON.parse) === 'function')) msg = JSON.parse(data); else msg = eval('(' + data + ')'); if (msg.hasOwnProperty('d')) return msg.d; else return msg; }, url: "../../WebServices/ManagePhones.asmx/SaveJson", success: function(msg) { SaveSuccess(msg); }, complete: function(xhr, textresponse) { var err = eval("(" + xhr.responseText + ")"); }, error: function(msg) { }, failure: function(msg) { } }); }; $('#btnSave').click(function() { SaveCurrentList(); }); });

/ * json data snip * /

 {"FormData":{"Control":{"CustomerId":"12345y6","CustomerName":"Joe Customer"},"PhonesBlock":{"Phone":[{"PhoneNumber":"234-233-2322","PhoneName":"son harry"},{"PhoneNumber":"234-233-2323","PhoneName":"son frank"},{"PhoneNumber":"234-233-2320","PhoneName":"momk"}]}}}

/ XML des données de formulaire: /

   12345y6 Joe Customer    234-233-2322 son harry   234-233-2323 son frank   234-233-2321 momk

/ * Coupure de la mise en forme * /

signature de la méthode de service Web:

[WebMethod (EnableSession = true)] chaîne publique SaveJson (chaîne FormData) {}

Sérialiser les données dans un format tel que JSON, puis les envoyer au serveur sous forme de chaîne.

Quand j’ai dû l’apprendre, ces messages ont été extrêmement utiles.

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/ http://encosia.com/2008/03/27/using-jquery- consumr-aspnet-json-web-services /

Vous pouvez sérialiser un tableau javascript en une chaîne que ASP.Net peut désérialiser.

Il existe une norme appelée JSON qui est bonne, car elle n’ajoute pratiquement aucun bruit sur les données réelles (comme le fait le xml, incrémentant BEAUCOUP la quantité de données à transférer).

Vous pouvez ensuite utiliser la méthode $.ajax jquery pour envoyer ces données à un WebMethod que vous avez créé (voir les liens) et obtenir une réponse compréhensible.

EDIT : Si vous y étiez déjà, vous pouvez simplement utiliser la méthode JSON.ssortingngify() , en transmettant l’object / tableau à sérialiser.