使用jQuery将数据发送到MVC的动作方法

本文关键字：MVC 方法 jQuery 数据 使用 | 更新日期: 2023-09-27 18:12:08

我试图使用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"

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

使用jQuery将数据发送到MVC的动作方法

你的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所需的常见设置工作—这里显示的版本需要POST到的URL和POST到的数据。如果你的jQuery代码是在一个视图的脚本元素中，那么你可能想要使用Url.Action()助手——它会根据你的路由规则构建正确的URL。如果您选择走那条路，您将使用类似于:

的内容:
$.post('@Url.Action("Save", "Working")', dataToPost)
然后，我们使用相关的帮助程序处理成功的响应(带有HTTP-200状态码的任何内容)和失败的响应(基本上是任何其他内容)。在这些帮助程序中做什么取决于您。

我认为您应该提交标准的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文档

EDIT 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对象需要额外的处理才能从字符串中解析它们。虽然这种处理非常快速和有效，但如果不需要发送额外的信息，那么解析和处理简单的数据类型(如字符串、布尔值或整数)仍然要快一些。

我只需要从post中删除内容类型并且不将其字符串化，它就工作了

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

将之前的答案文本移到粘贴bin中，因为我错了，答案如下:

阅读你的编辑，你的问题是JSON的东西看起来很有趣:"'"PersonName = Foo&地址= 123 +测试+ Drive&国家= 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'
        });
    });
});

希望这对你有帮助!

相关文章：