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

Question

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

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

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

我创建了一个强类型视图，并希望使用 AJAX 帖子将模型数据传递给 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; }
}

控制器：

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

您所拥有的一切都很好 - 但是为了节省一些输入，您可以简单地用于您的数据

数据：$('#formId').serialize()

详见http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/，语法非常基础。

Answer 5

如果使用 MVC 5，请阅读此解决方案！

我知道专门针对 MVC 3 提出的问题，但我偶然发现了 MVC 5 的这个页面，并想为我遇到的其他任何人发布一个解决方案。我尝试了上述解决方案，但它们对我不起作用，从未达到动作过滤器，我不知道为什么。我在我的项目中使用了第 5 版，最终得到了以下操作过滤器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Filters;

namespace SydHeller.Filters
{
    public class ValidateJSONAntiForgeryHeader : FilterAttribute, IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            string clientToken = filterContext.RequestContext.HttpContext.Request.Headers.Get(KEY_NAME);
            if (clientToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Header does not contain {0}", KEY_NAME));
            }

            string serverToken = filterContext.HttpContext.Request.Cookies.Get(KEY_NAME).Value;
            if (serverToken == null)
            {
                throw new HttpAntiForgeryException(string.Format("Cookies does not contain {0}", KEY_NAME));
            }

            System.Web.Helpers.AntiForgery.Validate(serverToken, clientToken);
        }

        private const string KEY_NAME = "__RequestVerificationToken";
    }
}

-- 记下 using System.Web.Mvc 和 using System.Web.Mvc.Filters，而不是 http 库（我认为这是 MVC v5 改变的事情之一。--

然后只需将过滤器[ValidateJSONAntiForgeryHeader] 应用于您的操作（或控制器），它应该会被正确调用。

在</body> 正上方的布局页面中，我有@AntiForgery.GetHtml();

最后，在我的 Razor 页面中，我执行 ajax 调用如下：

var formForgeryToken = $('input[name="__RequestVerificationToken"]').val();

$.ajax({
  type: "POST",
  url: serviceURL,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: requestData,
  headers: {
     "__RequestVerificationToken": formForgeryToken
  },
     success: crimeDataSuccessFunc,
     error: crimeDataErrorFunc
});