Question

我正在尝试使用以下方法使用jQuery Ajax将数据发布到MVC操作。但在控制器内部，所有模型属性始终为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
我已经添加了上面的模型。这里是我点击保存时的序列化数据和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编码。这样做很可能是模型绑定器在处理请求时不重建模型的原因。

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

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

然后，我们使用相关帮助程序处理成功响应（具有HTTP-200状态代码的任何内容）和失败的响应（基本上是其他任何东西）。你在那些助手中做的做什么取决于你。

Answer 2

我认为你应该提交标准的HTML表单数据而不是JSON数据。因此改变线条：

data: JSON.stringify(dataToPost),
contentType: 'application/json; charset=utf-8'

到

data: dataToPost,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

注意：您也可以省略第二行，因为这是contentType的默认$.ajax根据jQuery documentation。

编辑1 这是对您的评论和编辑的回复。

我试图告诉您的是，您的Ajax发送的数据必须与您处理行动收到的数据的方式相匹配。您的模型属性为null的原因是这两个属性不匹配。

您没有发布您的操作代码，因此我们不知道您是如何处理数据的，但是现在从编辑1开始，您似乎正在处理作为JSON数据接收的数据，因为它在你发送了真正的JSON数据。

所以你必须做两件事之一：

1-发送真实的JSON数据：仅使用JSON.stringify并不意味着您的数据现在是适当的JSON数据。正如您所发现的那样，JSON.stringify只是用引号将您的字符串包装成一个有效的JSON字符串，就是这样。但这不是你的行动所期望的，它期待一个JSON对象。要发送JSON对象，您可能需要编写一个逐个获取表单字段并构建JSON对象的函数，然后调用此函数而不是JSON.stringify。

2-发送标准表格数据：这就是我在上面的答案中建议的内容。要使其工作，只需删除操作中将其作为JSON对象处理的所有代码。 MVC默认设计用于处理标准表单数据，因此您不需要任何其他处理。只需发送标准表格数据即可。

注意：Ajax 不需要以JSON格式发送/接收数据。 JSON格式对于在许多场景中交换数据非常有用，但您选择适合您特定场景的格式。例如，您的操作是仅为结果发回JSON对象：return Json("Success")。如果您只想发送简单的结果（成功与失败），您可以返回一个简单的字符串（例如return "Success"）或甚至是布尔/整数（例如return "True"或return "1"）。 Jason对象需要额外的处理来从字符串中解析它们。虽然这种处理非常快速有效，但如果您不需要发送其他信息，解析和处理简单数据类型（如字符串，布尔值或整数）仍然会快一些。

Answer 3

我只需要从帖子中删除内容类型并且不要将其字符串化并且它有效

$(function () {
  $("#Save").click(function (e) {
  var dataToPost = $("#MyForm").serialize()
  $.ajax(
  {
    type: "POST",
    data: dataToPost,
    url: "Working/Save"
  })
 })
})

Answer 4

我错误地将之前的答案文字移至pastebin，答案如下：

刚看完你的编辑，你的问题就是JSON看起来很有趣： “\” PERSONNAME =富＆安培;地址= 123 + +测试驱动器和放大器;美国= TX＆安培;状态= 1 \ “” 这不会转化为WorkingModel。

我的推荐是创建一个自定义JS对象并发布它。我刚刚启动了一个VS MVC项目并完成了它，一切正常：）

$(function() {
    $("#Save").click(function(e) {
        var personName = $("[name='PersonName']").val();
        var address = $("[name='Address']").val();
        var states = $("[name='States']").val();
        var status = $("[name='Status']").val();
        var dataToPost = {
            PersonName: personName,
            Address: address,
            States: states,
            Status: status
        };

        $.ajax(
        {
            type: "POST",
            data: JSON.stringify(dataToPost),
            url: "Save",
            contentType: 'application/json; charset=utf-8'
        });
    });
});

希望这有帮助！

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

4 个答案: