在jquery中使用AJAX Post从强类型MVC3视图传递模型的正确方法

Question

我是一名新手网络程序员,所以如果我的一些"行话"不正确,请原谅我.我有一个使用ASP.NET使用MVC3框架的项目.

我正在管理视图,管理员将修改设备列表.其中一个功能是一个"更新"按钮,我想使用jquery在向MVC控制器发送帖子后动态编辑网页上的条目.

我认为这种方法在单个管理设置中是"安全的",其中对网页与数据库不同步的关注最少.

我创建了一个强类型的视图,并希望使用AJAX帖子将模型数据传递给MVC控件.

在下面的文章中,我发现了一些类似于我正在做的事情: JQuery Ajax和ASP.NET MVC3导致null参数

我将使用上面帖子中的代码示例.

模型:

public class AddressInfo 
{
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

控制器:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Check(AddressInfo addressInfo)
    {
        return Json(new { success = true });
    }
}

视图中的脚本:

<script type="text/javascript">
var ai = {
    Address1: "423 Judy Road",
    Address2: "1001",
    City: "New York",
    State: "NY",
    ZipCode: "10301",
    Country: "USA"
};

$.ajax({
    url: '/home/check',
    type: 'POST',
    data: JSON.stringify(ai),
    contentType: 'application/json; charset=utf-8',
    success: function (data.success) {
        alert(data);
    },
    error: function () {
        alert("error");
    }
});
</script>

我还没有机会使用上述内容.但我想知道这是否是使用AJAX将模型数据传递回MVC控件的"最佳"方法？

我应该关注公开模型信息吗？

Answer 1

我找到了3种方法来实现这个:

C#类:

public class AddressInfo {
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string ZipCode { get; set; }
    public string Country { get; set; }
}

行动:

[HttpPost]
public ActionResult Check(AddressInfo addressInfo)
{
    return Json(new { success = true });
}

JavaScript可以通过三种方式实现:

1)查询字符串:

$.ajax({
    url: '/en/Home/Check',
    data: $('#form').serialize(),
    type: 'POST',
});

这里的数据是一个字符串.

"Address1=blah&Address2=blah&City=blah&State=blah&ZipCode=blah&Country=blah"

2)对象数组:

$.ajax({
    url: '/en/Home/Check',
    data: $('#form').serializeArray(),
    type: 'POST',
});

这里的数据是键/值对的数组:

=[{name: 'Address1', value: 'blah'}, {name: 'Address2', value: 'blah'}, {name: 'City', value: 'blah'}, {name: 'State', value: 'blah'}, {name: 'ZipCode', value: 'blah'}, {name: 'Country', value: 'blah'}]

3)JSON:

$.ajax({
      url: '/en/Home/Check',
      data: JSON.stringify({ addressInfo:{//missing brackets
          Address1: $('#address1').val(),
          Address2: $('#address2').val(),
          City: $('#City').val(),
          State: $('#State').val(),
          ZipCode: $('#ZipCode').val()}}),
      type: 'POST',
      contentType: 'application/json; charset=utf-8'
});

这里的数据是序列化的JSON字符串.请注意,名称必须与服务器中的参数名称匹配!!

='{"addressInfo":{"Address1":"blah","Address2":"blah","City":"blah","State":"blah", "ZipCode", "blah", "Country", "blah"}}'

Answer 2

您可以跳过var声明和stringify.否则,这将工作得很好.

$.ajax({
    url: '/home/check',
    type: 'POST',
    data: {
        Address1: "423 Judy Road",
        Address2: "1001",
        City: "New York",
        State: "NY",
        ZipCode: "10301",
        Country: "USA"
    },
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        alert(data.success);
    },
    error: function () {
        alert("error");
    }
});

Answer 3

这是它对我有用的方式:

$.post("/Controller/Action", $("#form").serialize(), function(json) {       
        // handle response
}, "json");

[HttpPost]
public ActionResult TV(MyModel id)
{
    return Json(new { success = true });
}

Answer 4

你有什么是好的 - 但是为了节省一些打字,你可以简单地使用你的数据

data: $('#formId').serialize()

有关详细信息,请参阅http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/,语法非常基本.