如何在 MVC 3 中使用 Ajax？

Question

我想通过 Ajax 提交一个表单。此表单存储在局部视图中 - 因此整个局部视图表示单个表单。

我使用 foreach 循环生成了其中的十个表单：

 @foreach (Product p in Model.Products)
 {                     
    @Html.Partial("_EditProduct", p)                    
 }

这很好用。

在我的 _EditProduct 部分视图中：

@using (Ajax.BeginForm("Update", "Product", new AjaxOptions { UpdateTargetId = "updateStatus" })) {
     <span id="updateStatus">Update will go here</span> }

     // Product fields

        <div>                
             <input type="submit" value="Update" class="btn"/>
        </div>
    }

点击提交按钮发布到控制器：

[HttpPost]
public JsonResult Update(int id, FormCollection collection)
{
   ProductService pService = new ProductService();
   Product p =pService.Find(id);

   UpdateModel(p);
   return Json(p);            
}

这会更新产品，但由于序列化错误而返回崩溃。

主要问题是我很难在 MVC 3 上找到好的资源，尤其是 Ajax 部分。教程和博客似乎以非常不同的方式做所有事情。理想情况下，我希望尽可能多地使用 .NET 和 MVC 3 功能，而不是编写大量的 jQuery/JavaScript。

谢谢

编辑：补充一句，我想远离 MS Ajax Control Toolkit

Answer 1

关于序列化错误...如果您在 Product 中有延迟加载的属性并且数据库连接已关闭，则会抛出 iirc。你可以这样做 return Json(new {product.a,product.b,product.c}) 等。

Answer 2

自第一次发布以来，MVC 一直都有 Ajax 助手。这些允许您生成“启用 ajax”的 html 元素。但是，在 ASP.NET MVC 3 中，这些帮助程序得到了显着改进。他们不再依赖 MS-Ajax 客户端库来完成他们的工作，而是使用 jQuery 和 MVC3 附带的不显眼的 jQuery 扩展。他们还使用 HTML5 数据属性用元数据来注释特定元素，而不是定义内联脚本。

以上示例现在使用 MVC3 生成以下标记：

因此，包含 jQuery 和 jQuery.unobtrusive-ajax 脚本，如果启用，请使用 javascript 提交表单。

也可以看看http://dotmac.rationalmind.net/2011/03/basic-ajax-with-mvc3-razor/

Answer 3

Asp.net MVC 和 Ajax

正如@Dipti Mehta 所提到的，自 V1 以来，Asp.net MVC 中内置了 Ajax 助手，但我想指出这不是唯一的方法（而且我认为事情进展的并不多开发人员使用该功能）。

那么，在 Ajax 方面还有什么？好。您可以使用通常的 Html 助手并编写相当简单的 jQuery 代码。这样您就可以完全控制您的客户端处理（无论是特殊数据格式、准备应发送到服务器的复杂对象等）。

但基本上我还想向您指出几篇博客文章，它们将向您展示一些在开发 Asp.net MVC + Ajax 应用程序时可能遇到的非常有用的日常场景：

• Validation error handling in Asp.net MVC when using Ajax
• Model binding (be it using Ajax or not) to IList<T> in Asp.net MVC

• Sending complex Javascript objects using jQuery Ajax to Asp.net MVC

• other Asp.net MVC related posts