A Sample Project

Let's look at a quick sample of how we can implement AJAX. Listing 1 has a shopping cart controller that displays a list of items added to the cart, the quantity and price, followed by a grand total. As the user updates the quantity or deletes items, the items are updated or deleted, and the totals reflect the updated cart.

Listing 1: Sample Shopping Cart View

There are many points of interest to study here. First, note that each item rendered from the shopping cart has two forms: one for deletion, and one for updating. If our shopping cart had 5 items in it, this would equate to 10 forms total, 5 delete form elements and 5 update form elements.

Clicking the delete button within the delete form posts the key of the object to delete to the Delete action method, removing the item from the cart and reloading the page. A similar process happens for updating records. Lastly, note the call to Html.Action at the end. We learned previously that this action method injects the response of another action method directly into the view. We'll see exactly what's returned later on.

Unobtrusive JavaScript at a Quick Glance

Before we get into the implementation, we need to have a brief understanding of unobtrusive JavaScript. The idea behind unobtrusive JavaScript is to make your application work with server-side links, buttons, and postback calls. While most applications would embed the JavaScript directly in a button, unobtrusive JavaScript approaches let the application works as it is, then uses JavaScript to change the way the application works to use AJAX. This way, if JavaScript fails to load or a script fails, we can rely on our existing server-side, postback-oriented implementation, but if JavaScript does work, we get a complete client-side implementation. To illustrate, imagine a button:

Listing 2: A LinkButton Definition

This button renders the following HTML (roughly, not exact):

Listing 3: Client-Side Definition

The idea is that we allow the server-side definition to render in this way. If nothing else runs, the server-side button posts data back to the server, then the view refreshes. The next step is to write JavaScript to affect the button while the page is loading, instead of at runtime. For instance, we could instead write the following code to change the button to call some other method or run some other code rather than posting back to the server:

Listing 4: Circumventing the Button Click

And we now prevented the standard submit behavior in favor of AJAX. If our client-side click handler code fails (maybe jQuery isn't defined or fails to download), the standard submit button works the previous way and posts to the server.

We could have embedded the client-side button and code directly in the UI, but then we would lose the dual benefit of both the server and the client. The caveat to this approach is that it is more work to implement it successfully and with minimal redundancy; unobtrusive JavaScript solutions are not always completely DRY (don't repeat yourself principle).

Deleting Records

Let's look back to web forms to get a picture of the process first. In ASP.NET web forms, a page performs the post of the delete button. The page runs its server-side lifecycle, triggering the delete button click. It would delete the product from the backend data store and rebind the UI. All of the surrounding controls do not need rebound since web forms utilizes ViewState.

If we wanted to add AJAX, we could wrap the UI control in an UpdatePanel, and thus any clicks of the delete button do not force a full postback to the server, but does execute the page's full lifecycle. There are other alternatives to this process certainly (JQuery is one), but this is the most common approach to adding AJAX.

The process for ASP.NET MVC works similarly: clicking the delete button posts back to the Delete action method, getting the ID of the product to delete (the ID was passed as a querystring parameter to the form). The view posts only the data related to the form and as such, any other changes made are not pushed to the backend (the other forms do not post back their data). The action method then returns the shopping cart view in its entirety with the updated quantity minus the deleted product. Any other related controls must be data bound. That's a lot of moving parts for a simple delete. AJAX can help take the edge off by making the process a little more streamlined. We are going to take a look at how AJAX makes this process even easier.

The following code prevents the default behavior of a submit button from posting back to the server, and adds a client-side click event:

Listing 5: Attaching To Submit Button for Deletes

The CSS class identifier for the submit button makes it easy to identify the actions to perform. Since we have multiple types of forms within the shopping cart, separating regions by using a DIV with a class, some other special designator is also a helpful idea when working with the client. Any special designations makes it easy to identify the region with a JQuery call; adding .DeleteAction identifies the delete button very easily in the JQuery selector. Other options for identifying regions of the view can be special HTML tags, unique ID's, unique CSS classes, and the like. Since the view repeats its UI, using a unique ID for an element and special HTML tags is out of the picture.

Once the delete succeeds, JavaScript code removes the product entry from the shopping cart UI (deletes the DIV tag containing the entry) saving us from a postback and data bind (one advantage of client-side JavaScript). Even if this process of refreshing the UI failed, the next time the user refreshes the page, the correct results display to the user. Lastly, the master total gets updated.

Listing 4 contains the two action methods to perform the delete, one with AJAX support and one without. Notice the two perform the same function, but differ by the response. When using AJAX, we are not refreshing the entire view, but only a portion of it, and as such can return a content string for whether the result succeeded or not. When a standard GET or POST request, we need to return the entire view to the caller.

Listing 6: Handling the Delete in the Controller

Updating Records

Updates work similarly, but vary slightly by function. Updates do not remove the product completely from the list, but instead update the subtotal for that product row, as well as the master total.

Listing 7: Attaching for Update

The master total also involves a request to the server to call the GetTotal action method. This method was also mentioned in Listing 1, where the Html.Action view method injects the dollar amount total into the view. We make use of that action method on both client-and server code, as shown in Listing 6.

Listing 8: Updating the Master Total

The process of updating the cart and updating the master total takes place on the server using the following action methods. The AJAX version of update returns the updated total, whereas the standard version returns the full view.

Listing 9: Updating and Getting the Total

Planning AJAX in Controllers

As you can see, to handle unobtrusive JavaScript isn't overly difficult, but does add some overhead and complexity to the structure of your application. There are a couple of ways to structure these complexities:

1. Handle both types of request within the controller's action method.

Listing 10: Handling AJAX in the Same Action Method

2. Separate standard and AJAX requests. You saw an example of the previous sections. A Delete action method responds to standard requests, but a Delete_Ajax action method responds to AJAX requests. Upon loading the page, JavaScript can switch the form URL's to point to the AJAX action method, if JavaScript is enabled, using the following script. Be careful that this doesn't affect another part of the URL; in my example, I guarantee Delete or Update is only in the action method name.

Listing 11: Replacing the standard action method with the AJAX action method

3. Use separate controllers, one to handle all standard requests and one for all AJAX requests. This is the most complex, requires extra care, but may be beneficial if you have a lot of action methods in a controller. The challenge comes with the routing capabilities.

Conclusion

AJAX is very cool, and ASP.NET MVC can utilize AJAX very easily. JQuery steps in, asynchronously posting our pages with only a few lines of code, and unobtrusive JavaScript steps in to ensure our application works for users who can use JavaScript and those who may disable it or other cases.

We looked at ways to handle the complexities of views that have multiple forms, and while ASP.NET MVC requires developers to manage the entire request, AJAX helps us lighten the load by doing more work on the client.

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou... This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
ASP.NET MVC 2.0 and AJAX Part 2	Prashant G	7/26/2010 3:20 AM
Can you please provide sample project implementing all these features. Thanks Reply | Permanent link
ASP.NET MVC 2.0 and AJAX Part 2	Prashant G	7/26/2010 3:21 AM
Can you please provide sample project Reply | Permanent link
Sample code	Erwin De Moel	8/16/2010 5:08 PM
I would also be very interested in a sample code project! :) Reply | Permanent link
Sample Code [Reply]	Brian Mains	8/16/2010 9:18 PM
Hello, Thanks for the requests for code.  I'm in the works of trying to create a common sample project for all my code-bases, and am going to figure out how to make it public.  I may deploy to code-plex, or somewhere else.  I'm not sure yet.  Anyway, I need to wrap up some things I'm working on before I do that, so it may be a little while yet. Sorry for the delay. Brian Reply | Permanent link
RE: Sample Code [Reply]	Erwin De Moel	8/17/2010 10:03 AM
Alright, great! :D I can't wait! :) Reply | Permanent link
Sample code?	Kurt Schroeder.com	11/30/2010 10:03 AM
Have you made any progress with the sample code? I'll take just the samples from article 1 & 2 here. Great Articles! Thanks Reply | Permanent link

---

Please login to rate or to leave a comment.