如何使用MVC和jQuery AJAX传递对象？

Question

经过多年的asp.net使用，我终于开始尝试学习MVC。在以前，我习惯于使用asp.net AJAX PageMethods，可以传递一个对象，该对象会自动解析为方法中参数所需的类型。

Javascript:

PageMethods.AddPerson({First:"John",Last:"Doe"});

代码后端：

[WebMethod]
public static Result AddPerson(Person objPerson)
{
    return Person.Save();
}

使用MVC和jQuery如何实现这个功能？只需要发送字符串并解析JSON对象吗？

- Kenneth J

Answer 1

这取决于你的表单数据多么复杂。让我们举一个jQuery的例子：

$.ajax({
    url: '\Persons\AddPerson', // PersonsController, AddPerson Action
    data: { First: "John", Last: "Doe" },
    type: 'POST',
    success: function(data, status)
    {
        alert('Method called successfully!');
    }
});

我们发布了两个数据。如果Person类有名为“First”和“Last”的两个属性，则默认的ASP.NET MVC模型绑定程序应该没有问题将此表单数据放入这些属性中（其他所有内容都将被默认设置）。

当然，您始终可以为Person类型创建自定义模型绑定程序，然后可以获取任何表单值并将其放入任何属性中，或调用某些其他类型的逻辑。

- Tejs

---

那么对于有多个参数的方法呢？ - Kenneth J

对于每个参数，MVC 将尝试将任何表单数据绑定到参数本身（如果它是简单类型）或该参数上的任何属性（如果它是复杂类型）。因此，如果您有两个参数，每个参数都有一个 First 属性，则两个参数都应该获得发布到服务器的“First”键中指定的值。如果您希望将其绑定到仅一个复杂类型，则还可以使用特定的命名语法。 - Tejs

我遇到了奇怪的结果，在FF中可以工作，但在IE中，在代码后端方法参数中得到一个所有字段都初始化为null的对象？ - Kenneth J

当您在代码中设置断点时，请检查Request.Form集合以查看已发布哪些键。在IE和FF之间，它可能是不同的。 - Tejs

Answer 2

我有一篇文章涵盖了关于向ASP.NET MVC操作方法发出AJAX调用的内容。它涵盖了以下组合：

• HTTP GET，POST
• jQuery方法$.get，$.getJSON，$.post
• 将参数发送到操作方法
• 从操作方法返回参数（字符串和JSON）
• 发布表单数据
• 通过AJAX加载MVC局部视图

使用jQuery向ASP.NET MVC操作方法发出AJAX调用

- rcravens

---

鲍勃，链接已经失效了。 - Lee Grissom

Answer 3

当您通过ajax将表单POST到控制器上的操作方法时，ModelBinder架构会启动以将提交的表单值解析为业务对象。您可以以几种不同的方式利用模型绑定。

public ActionResult MyAction(MyObject obj)
{
}

在上面的例子中，模型绑定器会隐式地尝试从请求接收到的信息创建一个MyObject对象。

public ActionResult MyAction(FormCollection stuff)
{
   MyObject obj = new MyObject();
   TryUpdateModel(obj);
}

在这里，我们明确地尝试将发布的表单数据绑定到我们创建的对象上。 ModelBinder 将尝试将发布的值与对象的属性匹配。

在这两种情况下，您都可以查询 ModelState 对象，以查看在将发布的值翻译成对象时是否出现任何错误。

有关模型绑定的介绍，请 在此处查看。

有关高级模型绑定到列表和字典，请 参见 Phil Haack 的文章。

- womp

Answer 4

你可以像这样做：

 var person = {};
 person["First"] = $("#FirstName").val();
 person["Last"] = $("#LastName").val();

 $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "/Admin/AddPerson",
      data: JSON.stringify(person),
      dataType: "json",
      success: function(result) {

      },
      error: function(result) {

      }
 });

然后在你的管理控制器上：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddRelease(Person p)
{
    // Code to add person            

}

JSON.stringify方法可以从这里获取。您也可以使用模型而不是Person对象作为参数，这样您就可以处理所有验证。

- jaltiere

---

$.ajax方法允许您异步地处理这个问题。 - jaltiere

Answer 5

我想我是个骗子，我做了以下的事情:

        $("#ProgressDialog").dialog({
            autoOpen: false,
            draggable: false,
            modal: true,
            resizable: false,
            title: "Loading",
            closeOnEscape: false//,

            //  open: function () { $(".ui-dialog-titlebar-close").hide(); } // Hide close button
        });
       $("form").live("submit", function (event) {
                event.preventDefault();
                var form = $(this);
                $("#ProgressDialog").dialog("open");
                $.ajax({
                    url: form.attr('action'),
                    type: "POST",
                    data: form.serialize(),//USE THIS to autoserialize!
                    success: function (data) {
                        $("#dialog").dialog({height:0});
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                    },
                    complete: function () {
                        $("#ProgressDialog").dialog("close");

                    }
                });
            });
        });

<div id="ProgressDialog" style="text-align: center; padding: 50px;">
    <img src="@Url.Content("~/Content/ajax-loader.gif")" width="128" height="15" alt="Loading" />
</div>

- hidden