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

我尝试使用以下方法，使用jQueryAjax将数据发布到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" />

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

控制器

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

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

型号

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

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

数据，当我单击save时

序列化数据

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

由于我错了，将前面的答案文本移至，答案如下：

请阅读您的编辑，您的问题是JSON看起来很有趣：
“\”PersonName=Foo&Address=123+测试+驾驶&状态=TX&Status=1\”
这不会转化为工作模型

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

希望这有帮助
 我认为您应该提交标准HTML表单数据，而不是JSON数据。因此，请更改行：

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

到

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

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

我想告诉您的是，Ajax发送的数据必须与您处理操作接收的数据的方式相匹配。模型属性为空的原因是这两个属性不匹配

您没有为您的操作发布代码，因此我们不知道您是如何处理数据的，但是现在从您的编辑1来看，您似乎正在将接收到的数据作为JSON数据进行处理，因为当您发送真正的JSON数据时，它起到了作用

所以你必须做两件事中的一件：

1-发送真正的JSON数据：简单地使用
JSON.stringify
并不意味着您的数据现在是合适的JSON数据。正如您所发现的，
JSON.stringify
只是简单地用引号将字符串包装起来，使其成为有效的JSON字符串，仅此而已。但这不是您的操作所期望的，它期望的是一个JSON对象。要发送一个JSON对象，您可能需要逐个编写一个采用表单字段的函数并构建一个JSON对象，然后调用此函数而不是
JSON.stringify

2-发送标准表单数据：这就是我在上面的回答中所建议的。要使其工作，只需删除操作中作为JSON对象处理它的所有代码。MVC被设计为默认处理标准表单数据，所以您不需要任何额外的处理。只需将标准表单数据发送给它，它就会工作

注意：Ajax不需要发送/接收JSON格式的数据。JSON格式对于在许多场景中交换数据非常有用，但是您可以选择适合您特定场景的格式。例如，您的操作只是为了结果而发回一个JSON对象：
returnJSON（“Success”）
。如果只想发送简单结果（成功与失败），则可以返回简单字符串（例如
返回“成功”
）甚至布尔/整数（例如
返回“真”
或
返回“1”
）。Jason对象需要额外的处理才能从字符串中解析它们。虽然此处理非常快速高效，但如果不需要发送其他信息，解析和处理简单的数据类型（如字符串、布尔值或整数）仍然要快一些。
您的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编码。这样做很可能是modelbinder在处理请求时没有重建模型的原因

$.post
是一个帮助函数，它包装了
$.ajax
所需的常见设置工作-此处显示的版本需要发布到的URL和要发布的数据。如果jQuery代码位于视图中的脚本元素中，则可能需要使用
Url.Action（）
helper-它将根据路由规则构建正确的Url。如果您选择走这条路线，您将使用类似于：

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

然后，我们使用相关的帮助程序处理成功的响应（任何带有HTTP-200状态代码的响应）和失败的响应（基本上是任何其他响应）。你在这些助手中做什么取决于你。
我只需要从帖子中删除内容类型，不严格化它，它就工作了

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

显示模型或
WorkingModel
，并指出您在浏览器控制台中遇到的错误（我假设404是因为url不正确）删除
contentType:'application/json；charset=utf-8'
并使用
数据：dataToPost，
。您还应该使用
url:'@url.Action（“保存”、“工作”），
来确保您的url是相对于页面正确生成的it@StephenMuecke你重复了我在回答中的建议：）。这意味着我们以同样的方式思考，所以我们可以成为朋友：）。DotNetFiddle干得不错，我喜欢。请注意：
@Url.Action（“保存”、“工作”）
是