asp.net-mvc-3 - 在 jquery 中使用 AJAX Post 从强类型 MVC3 View 传递模型的正确方法

Question

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

我正在处理一个管理员 View ，管理员将在其中修改设备列表。其中一个功能是“更新”按钮，我想在将帖子发送到 MVC Controller 后使用 jquery 动态编辑网页上的条目。

我认为这种方法在单一管理设置中是“安全的”，其中网页与数据库不同步的问题最小。

我创建了一个强类型 View ，并希望使用 AJAX post 将模型数据传递给 MVC 控件。

在下面的帖子中，我发现了一些与我正在做的事情类似的东西: JQuery Ajax and ASP.NET MVC3 causing null parameters

我将使用上述帖子中的代码示例。

型号:

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

Controller :

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

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

View 中的脚本:

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