如何在MVC 3中使用Ajax？

Question

I have a form that I'd like to submit through Ajax. This form is stored in a partial view - so the entire partial view represents a single form.

I generate ten of these forms with a foreach loop:

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

This works fine.

In the _EditProduct partial view I have:

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

Clicking on a submit button posts to a controller:

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

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

This updates the product, but return crashes due to serialization error.

The main problem is that I struggle to find a good resource on MVC 3, especially the Ajax part. Tutorials and blogs seem to do everything in a very different way. Ideally I'd like to use as much of .NET and MVC 3 functionality as possible, rather than writing loads of jQuery/JavaScript.

Thank you

Edit: Just to add, I'd like to stay far away from MS Ajax Control Toolkit

Answer 1

MVC has always had Ajax helpers since its first release. These allow you to generate “ajax-enabled” html elements.However, in ASP.NET MVC 3 these helpers have been significantly improved. They no longer rely on the MS-Ajax client libraries to do their work – instead they use jQuery and the unobtrusive jQuery extensions that ship with MVC3. They also use HTML5 data- attributes to annotate a particular element with metadata rather than defining inline scripts.

The above example now generates the following markup with MVC3:

So, have jQuery and the jQuery.unobtrusive-ajax scripts included and use javascript to submit the form if it’s enabled.

Also have a look at http://dotmac.rationalmind.net/2011/03/basic-ajax-with-mvc3-razor/