Modo corretto per utilizzare AJAX Post in jQuery per passare il modello dalla vista MVC3 fortemente tipizzata

Sono un programmatore web per principianti quindi per favore perdonami se alcuni dei miei “gergo” non sono corretti. Ho un progetto che utilizza ASP.NET utilizzando il framework MVC3.

Sto lavorando su una vista amministratore in cui l’amministratore modificherà un elenco di apparecchiature. Una delle funzioni è un pulsante di “aggiornamento” che voglio utilizzare jquery per modificare dynamicmente la voce sulla pagina Web dopo aver inviato un post al controller MVC.

Presumo che questo approccio sia “sicuro” in una singola impostazione di amministratore in cui vi è la minima preoccupazione che la pagina Web non sia sincronizzata con il database.

Ho creato una vista fortemente tipizzata e speravo di passare i dati del modello al controllo MVC utilizzando un post AJAX.

Nel post successivo, ho trovato qualcosa che è simile a quello che sto cercando di fare: JQuery Ajax e ASP.NET MVC3 causando parametri nulli

Userò il codice di esempio dal post precedente.

Modello:

public class AddressInfo { public string Address1 { get; set; } public string Address2 { get; set; } public string City { get; set; } public string State { get; set; } public string ZipCode { get; set; } public string Country { get; set; } } 

controller:

 public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpPost] public ActionResult Check(AddressInfo addressInfo) { return Json(new { success = true }); } } 

script in Visualizza:

  var ai = { Address1: "423 Judy Road", Address2: "1001", City: "New York", State: "NY", ZipCode: "10301", Country: "USA" }; $.ajax({ url: '/home/check', type: 'POST', data: JSON.stringify(ai), contentType: 'application/json; charset=utf-8', success: function (data.success) { alert(data); }, error: function () { alert("error"); } });  

Non ho ancora avuto la possibilità di usare quanto sopra. Ma mi chiedevo se questo era il metodo “migliore” per trasferire i dati del modello al controllo MVC usando AJAX?

Dovrei essere preoccupato di esporre le informazioni del modello?

È ansible saltare la dichiarazione var e il stringify. Altrimenti, funzionerà perfettamente.

 $.ajax({ url: '/home/check', type: 'POST', data: { Address1: "423 Judy Road", Address2: "1001", City: "New York", State: "NY", ZipCode: "10301", Country: "USA" }, contentType: 'application/json; charset=utf-8', success: function (data) { alert(data.success); }, error: function () { alert("error"); } }); 

Ho trovato 3 modi per implementarlo:

Classe C #:

 public class AddressInfo { public string Address1 { get; set; } public string Address2 { get; set; } public string City { get; set; } public string State { get; set; } public string ZipCode { get; set; } public string Country { get; set; } } 

Azione:

 [HttpPost] public ActionResult Check(AddressInfo addressInfo) { return Json(new { success = true }); } 

JavaScript puoi farlo in tre modi:

1) Stringa di query:

 $.ajax({ url: '/en/Home/Check', data: $('#form').serialize(), type: 'POST', }); 

I dati qui sono una stringa.

"Address1=blah&Address2=blah&City=blah&State=blah&ZipCode=blah&Country=blah"

2) Matrice di oggetti:

 $.ajax({ url: '/en/Home/Check', data: $('#form').serializeArray(), type: 'POST', }); 

I dati qui sono un array di coppie chiave / valore:

 =[{name: 'Address1', value: 'blah'}, {name: 'Address2', value: 'blah'}, {name: 'City', value: 'blah'}, {name: 'State', value: 'blah'}, {name: 'ZipCode', value: 'blah'}, {name: 'Country', value: 'blah'}] 

3) JSON:

 $.ajax({ url: '/en/Home/Check', data: JSON.stringify({ addressInfo:{//missing brackets Address1: $('#address1').val(), Address2: $('#address2').val(), City: $('#City').val(), State: $('#State').val(), ZipCode: $('#ZipCode').val()}}), type: 'POST', contentType: 'application/json; charset=utf-8' }); 

I dati qui sono una stringa JSON serializzata. Si noti che il nome deve corrispondere al nome del parametro nel server !!

 ='{"addressInfo":{"Address1":"blah","Address2":"blah","City":"blah","State":"blah", "ZipCode", "blah", "Country", "blah"}}' 

Questo è il modo in cui ha funzionato per me:

 $.post("/Controller/Action", $("#form").serialize(), function(json) { // handle response }, "json"); [HttpPost] public ActionResult TV(MyModel id) { return Json(new { success = true }); } 

quello che hai va bene – tuttavia per risparmiare un po ‘di digitazione, puoi semplicemente usare per i tuoi dati

 data: $ ('# formId'). serialize ()

vedere http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/ per i dettagli, la syntax è piuttosto semplice.

Se si utilizza MVC 5 leggere questa soluzione!

So che la domanda ha richiesto specificamente MVC 3, ma mi sono imbattuto in questa pagina con MVC 5 e volevo pubblicare una soluzione per chiunque altro nella mia situazione. Ho provato le soluzioni di cui sopra, ma non hanno funzionato per me, il filtro di azione non è mai stato raggiunto e non sono riuscito a capire perché. Sto usando la versione 5 nel mio progetto e ho finito con il seguente filtro azione:

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Filters; namespace SydHeller.Filters { public class ValidateJSONAntiForgeryHeader : FilterAttribute, IAuthorizationFilter { public void OnAuthorization(AuthorizationContext filterContext) { string clientToken = filterContext.RequestContext.HttpContext.Request.Headers.Get(KEY_NAME); if (clientToken == null) { throw new HttpAntiForgeryException(string.Format("Header does not contain {0}", KEY_NAME)); } string serverToken = filterContext.HttpContext.Request.Cookies.Get(KEY_NAME).Value; if (serverToken == null) { throw new HttpAntiForgeryException(string.Format("Cookies does not contain {0}", KEY_NAME)); } System.Web.Helpers.AntiForgery.Validate(serverToken, clientToken); } private const string KEY_NAME = "__RequestVerificationToken"; } } 

– Prendi nota using System.Web.Mvc e di using System.Web.Mvc e non delle librerie http (penso che sia una delle cose che sono cambiate con MVC v5.

Quindi applica il filtro [ValidateJSONAntiForgeryHeader] all’azione (o al controller) e dovrebbe essere richiamato correttamente.

Nella mia pagina di layout sopra sopra ho @AntiForgery.GetHtml();

Infine, nella mia pagina Razor, eseguo la chiamata ajax come segue:

 var formForgeryToken = $('input[name="__RequestVerificationToken"]').val(); $.ajax({ type: "POST", url: serviceURL, contentType: "application/json; charset=utf-8", dataType: "json", data: requestData, headers: { "__RequestVerificationToken": formForgeryToken }, success: crimeDataSuccessFunc, error: crimeDataErrorFunc });