javascript - 使用 jQuery 将数据发布到 MVC 操作方法

Question

我正在尝试使用以下方法使用 jQuery Ajax 将数据发布到 MVC 操作。但在 Controller 内部，所有模型属性始终为 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'
    })
  })
})

Controller

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

编辑1
我已经添加了上面的模型。当我点击保存时，这里是序列化数据和 JSON stringify 数据。

序列化数据

"PersonName=Foo&Address=123+Test+Drive&States=TX&Status=1"

在 JSON.Stringify 之后

"\"PersonName=Foo&Address=123+Test+Drive&States=TX&Status=1\""

我尝试添加 HttpPost 属性和 [FromBody] 属性，但没有成功。

我认为我不必将返回类型从 ActionResult 更改为 JsonResult。

此外，URL 是正确的，因为调试器正在操作方法内部，我可以在其中QuickWatch 模型属性。

请注意，如果我创建 JSON 对象并将其发布如下，它会起作用:

var dataToPost = {
    PersonName:'Foo',
    Address: '123 Test Drive',
    State: 'TX',
    Status: 1
 }

Answer 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 提交表单。

.serialize() 已经正确处理了表单编码，因此您不需要对表单值进行 JSON 编码。这样做很可能是模型绑定(bind)器在处理请求时未重建模型的原因。

$.post 是一个辅助函数，它包装了 $.ajax 所需的常见设置工作 - 此处显示的版本需要 URL 进行 POST，并且数据到 POST。如果您的 jQuery 代码位于 View 中的脚本元素中，那么您可能想要使用 Url.Action() 帮助程序 - 它会根据您的路由规则构建正确的 URL。如果你选择走那条路，你会使用类似于:

$.post('@Url.Action("Save", "Working")', dataToPost)

然后，我们使用相关的帮助程序处理成功的响应(任何带有 HTTP-200 状态代码的响应)和失败的响应(基本上是其他任何响应)。您在这些助手中做什么由您决定。