How to use Ajax in MVC 3?

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

Upvotes: 0

Answers (3)

Dipti Mehta

Reputation: 547

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/

Upvotes: 2

Robert Koritnik

Reputation: 105029

Asp.net MVC and Ajax

As @Dipti Mehta mentioned it there are Ajax helpers built into Asp.net MVC since V1, but I would like to point out that that is not the only way of doing it (and as I see things going not many developers use that capability).

So what else is there in terms of Ajax? Well. You can use the usual Html helpers and write rather simple jQuery code. This way you have total control over your client processing (whether it be special data formatting, preparing of complex object that should be sent to server etc.).

But basically I'd also like to point you to few blog posts, that will show you some very helpful everyday scenarios you may come across while developing Asp.net MVC + Ajax applications:

Upvotes: 1

maciek

Reputation: 659

about the serialization error...iirc it'll throw if you have lazy loaded properties in Product and the db connection is closed. You could do like return Json(new {product.a,product.b,product.c}) etc.

Upvotes: 2

How to use Ajax in MVC 3?

Answers (3)

Asp.net MVC and Ajax

Related Questions