我正在尝试使用以下方法将使用jQuery Ajax的数据发布到MVC动作。但是在控制器内部,所有模型属性始终都是null。不知道我在这里想念的是什么。
null
.CSHTML
<form id="MyForm"> <input name="PersonName" type="text" /> <input name="Address" type="text" /> <select name="States" multiple="multiple"> <option value="TX">Texas</option> <option value="OK">Oklahoma</option> <option value="OH">Ohio</option> </select> <select name="Status"> <option value="1">Active</option> <option value="2">Deleted</option> <option value="3">Pending</option> </select> <input type="button" value="Save" id="Save" />
的JavaScript
$(function () { $("#Save").click(function (e) { var dataToPost = $("#MyForm").serialize() $.ajax( { type: "POST", data: JSON.stringify(dataToPost), url: "Working/Save", contentType: 'application/json; charset=utf-8' }) }) })
控制者
public class WorkingController : Controller { // GET: Working public ActionResult Index() { return View(); } public ActionResult Save(WorkingModel model) { // All model properties are null here???? return Json("Success"); } }
模型
public class WorkingModel { public string PersonName { get; set; } public string Address { get; set; } public string[] States { get; set; } public string Status { get; set; } }
EDIT1 我已经添加了上面的模型。stringify单击保存后,此处显示序列化数据和JSON 数据。
stringify
序列化数据
"PersonName=Foo&Address=123+Test+Drive&States=TX&Status=1"
后 JSON.Stringify
JSON.Stringify
"\"PersonName=Foo&Address=123+Test+Drive&States=TX&Status=1\""
我尝试添加HttpPost属性和[FromBody]没有运气的属性。
HttpPost
[FromBody]
我认为不必将返回类型从更改ActionResult为JsonResult。
ActionResult
JsonResult
该URL也是正确的,因为调试器是在action方法中找到QuickWatch模型属性的位置。
QuickWatch
请注意,如果我创建JSON对象并将其发布,如下所示,它将起作用:
var dataToPost = { PersonName:'Foo', Address: '123 Test Drive', State: 'TX', Status: 1 }
您的JavaScript / jQuery代码可以大大简化,这也许是最好的选择:
$(function () { $("#MyForm").on('submit', function (e) { e.preventDefault() // prevent the form's normal submission var dataToPost = $(this).serialize() $.post("Working/Save", dataToPost) .done(function(response, status, jqxhr){ // this is the "success" callback }) .fail(function(jqxhr, status, error){ // this is the ""error"" callback }) }) })
您应该处理onsubmit表单的事件,而不是onclick按钮的事件- 按钮以外的其他原因可能导致表单被提交。在这种情况下,由于我们要使用AJAX提交表单,因此我们想防止表单的默认提交行为。
onsubmit
onclick
.serialize()已经正确处理了表单的编码,因此您无需对表单值进行JSON编码。这样做很可能是Modelbinder在处理请求时未重建模型的原因。
.serialize()
$.post是一个辅助功能,用于包装您所需的常规设置工作$.ajax-此处显示的版本希望将URL POST到,并将数据POST到。如果您的jQuery代码在View的script元素中,则您可能要使用Url.Action()帮助程序- 它会根据您的路由规则构建正确的URL。如果您选择走这条路线,则将使用类似于以下内容的内容:
$.post
$.ajax
Url.Action()
$.post('@Url.Action("Save", "Working")', dataToPost)
然后,我们使用相关的帮助程序来处理成功的响应(带有HTTP-200状态代码的任何内容)和失败的响应(基本上是其他任何内容)。你是什么 做 的那些助手最多是给你。