正确的方式来使用jQuery中的AJAX Post从强types的MVC3视图传递模型

我是一个新手程序员,所以请原谅我,如果我的一些“行话”是不正确的。 我有一个使用ASP.NET MVC3框架的项目。

我正在pipe理员视图中pipe理员将修改设备列表的工作。 其中一个function是“更新”button,我想要使用jQuery来dynamic地编辑网页上的条目后发送一个post到MVC控制器。

我认为这种方法在单个pipe理员设置中是“安全的”,对网页与数据库不同步的关注度最低。

我创build了一个强types的视图,并希望通过AJAXpost将模型数据传递给MVC控件。

在接下来的文章中,我发现了类似于我正在做的事情: JQuery Ajax和ASP.NET MVC3导致null参数

我将使用上面的post中的代码示例。

模型:

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

控制器:

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

脚本在视图中:

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

我还没有机会使用以上。 但我想知道这是否是“模型”数据返回到使用AJAX的MVC控件的“最佳”方法?

我应该关心暴露模型信息吗?

你可以跳过var声明和stringify。 否则,这将工作得很好。

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

我find了3个方法来实现这个:

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

行动:

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

JavaScript你可以用三种方法做到这一点:

1)查询string:

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

这里的数据是一个string。

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

2)对象数组:

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

这里的数据是一个键/值对的数组:

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

这里的数据是一个序列化的JSONstring。 请注意,名称必须与服务器中的参数名称匹配!

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

这是它为我工作的方式:

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

你有什么好 – 但是为了节省一些打字,你可以简单地使用你的数据


数据:$('#formId')。serialize()

有关详细信息,请参阅http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/ ,该语法非常基本。

如果使用MVC 5阅读这个解决scheme!

我知道特别要求MVC 3的问题,但是我偶然发现了MVC 5的这个页面,并且想要为我的情况发布一个解决scheme给任何其他人。 我尝试了上述解决scheme,但他们没有为我工作,行动filter从来没有达到,我不明白为什么。 我在我的项目中使用版本5,并结束了以下操作filter:

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

– 记下using System.Web.Mvcusing System.Web.Mvc.Filters ,而不是http库(我认为这是MVC v5改变的事情之一 –

然后,只需将filter[ValidateJSONAntiForgeryHeader]应用于您的操作(或控制器),并且它应该正确调用。

在我的布局页面正上方</body>我有@AntiForgery.GetHtml();

最后,在我的Razor页面中,我按如下方式进行ajax调用:

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