小编典典

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

ajax

我正在尝试使用以下方法将使用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
我已经添加了上面的模型。stringify单击保存后,此处显示序列化数据和JSON 数据。

序列化数据

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

JSON.Stringify

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

我尝试添加HttpPost属性和[FromBody]没有运气的属性。

我认为不必将返回类型从更改ActionResultJsonResult

该URL也是正确的,因为调试器是在action方法中找到QuickWatch模型属性的位置。

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

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

阅读 219

收藏
2020-07-26

共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编码。这样做很可能是Modelbinder在处理请求时未重建模型的原因。

$.post是一个辅助功能,用于包装您所需的常规设置工作$.ajax-此处显示的版本希望将URL
POST到,并将数据POST到。如果您的jQuery代码在View的script元素中,则您可能要使用Url.Action()帮助程序-
它会根据您的路由规则构建正确的URL。如果您选择走这条路线,则将使用类似于以下内容的内容:

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

然后,我们使用相关的帮助程序来处理成功的响应(带有HTTP-200状态代码的任何内容)和失败的响应(基本上是其他任何内容)。你是什么
的那些助手最多是给你。

2020-07-26