Ajax with jQuery

element we created in listing 2) and then load into this element the contents of the URL we extracted from the link. This load method internally creates an Ajax request, calls the URL asynchronously, and inserts the response into the DOM.

When we run the application and click on the link, we should see the privacy policy inserted in to the page. If you use the Firefox web browser and also have the FireBug extension installed (from http://getfirebug.com) you can easily see the Ajax request being made, as illustrated in figure 1.

This is an example of unobtrusive JavaScript-all of the JavaScript code is kept out of the page in a separate file.

 
Progressive enhancement

The previous example also illustrates another technique called progressive enhancement. Progressive enhancement means that we begin with basic functionality (in this case, a simple hyperlink) and then layer additional behavior on top of this (our Ajax functionality). This way, if the user does not have JavaScript enabled in their browser, the link will gracefully degrade to its original behavior and instead send the user to the privacy policy page without using Ajax, as shown in figure 2.
 


Figure 2 The browser goes directly to the Privacy Policy page if JavaScript is disabled
 
 
Unfortunately, this page doesn't look very nice. We are currently rendering this page as a partial view in order to strip away the additional page chrome (added by our application's layout) so that it can be easily inserted into the DOM by our Ajax request. However, in the case where JavaScript is disabled, it would be nice to continue to include the page layout and associated styling. Thankfully, it is easy to modify our PrivacyPolicy action to handle this
scenario, as shown in listing 4.
 
 Listing 4 Using IsAjaxRequest to modify action behavior  
 

public ActionResult PrivacyPolicy()
{
if(Request.IsAjaxRequest())  #1
{
return PartialView();
}
 
return View();
}

#1 Check if invoked through Ajax

The PrivacyPolicy action now checks to see whether the action has been requested via Ajax or not by calling the IsAjaxRequest extension method on the controller's Request property (#1). If this returns true, then the action has been called by an Ajax request in which case the view should be rendered as a partial but, if the page has not been called by an Ajax request, it returns a normal view.

Now, when we click the link with JavaScript disabled, the page is rendered with the correct layout, as shown in figure 3.



Figure 3 Rendering the privacy policy with a layout for nonAjax requests

 
Using Ajax to submit form data

We saw how we could leverage jQuery to retrieve data from the server when a link is clicked, but we can also go a stage further by sending data to the server by submitting a form asynchronously. To illustrate this, we'll expand our previous example by showing a list of comments on the page to which a user can make additions. The end result of this page is shown in figure 4.



Figure 4 The form is posted via Ajax and the result is appended to the list.


To begin, we'll add a collection of comments to our controller in a static field. When the index action is requested, this list of comments will be passed to the view. We'll also add another action (called AddComment) that will allow
the user to add a comment to this list. The extended controller is shown in listing 5.

 Listing 5 Introducing the AddComment action  

public class CustomAjaxController : Controller
{
private static List _comments  |#1
= new List();  |#1
 
public ActionResult Index()
{
return View(_comments);  #2
}
 
[HttpPost]
public ActionResult AddComment(string comment) #3
{
_comments.Add(comment);  #4
 
if (Request.IsAjaxRequest())
{
ViewBag.Comment = comment;  #5 return PartialView();
}
return RedirectToAction("Index");  #6
}
}

#1 Holds list of comments
#2 Sends to comments to view
#3 Accepts comment as parameter
#4 Stores new comment
#5 Sends comment to view
#6 Redirects to index action

We begin by creating a list of strings in our controller that will hold some comments (#1). These comments are passed to our index view as its model (#2). We also add a new action called AddComment which accepts a comment as a parameter (#3) and is also decorated with the HttpPost attribute to ensure that this action can only be invoked as the result of a form post.

Inside this action, it adds the comment to the list of comments (#4) and then passes it to a partial view in the ViewBag (#5) if the action has been called by an Ajax request. If the user has JavaScript disabled, then the action redirects back to the Index action, causing a full-page refresh (#6).

NOTE
 
This example is not thread safe as it stores data inside a static collection. In a real application this technique should be avoided-a better approach would be to store this data inside a database. However, this example does not use a database for the sake of simplicity.

The partial view returned by the AddComment action simply renders the comment inside a list item:

@ViewBag.Comment

Next, we can modify our index view to show the current list of comments as well as add a form to allow the user to
submit a new comment. The updated view is shown in listing 6.
 
 Listing 6 Index view with a form for adding comments  

@model IEnumerable  #1
 


 
Comments
 
  |#2
@foreach (var comment in Model) {  |#2
@comment
  |#2
}  |#2
  |#2
 
  |#3
 
@Html.TextArea("Comment", new { rows = 5, cols = 50 })