Proper way to use AJAX Post in jquery to pass model from strongly typed MVC3 view

Question

I'm a novice web programmer so please forgive me if some of my "jargon" is not correct. I've got a project using ASP.NET using the MVC3 framework.

I am working on an admin view where the admin will modify a list of equipment. One of the functions is an "update" button that I want to use jquery to dynamically edit the entry on the webpage after sending a post to the MVC controller.

I presume this approach is "safe" in a single admin setting where there is minimal concern of the webpage getting out of sync with the database.

I've created a view that is strongly typed and was hoping to pass the model data to the MVC control using an AJAX post.

In the following post, I found something that is similar to what I am looking at doing: JQuery Ajax and ASP.NET MVC3 causing null parameters

I will use the code sample from the above post.

Model:

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 View:

<script type="text/javascript"> 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");     } }); </script> 

I have not had a chance to use the above yet. But I was wondering if this was the "best" method to pass the model data back to the MVC control using AJAX?

Should I be concerned about exposing the model information?

Answer 1

I found 3 ways to implement this:

C# class:

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

Action:

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

JavaScript you can do it three ways:

1) Query String:

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

Data here is a string.

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

2) Object Array:

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

Data here is an array of key/value pairs :

=[{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' }); 

Data here is a serialized JSON string. Note that the name has to match the parameter name in the server!!

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

Answer 2

You can skip the var declaration and the stringify. Otherwise, that will work just fine.

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