Detecting an AJAX Request

In web forms, the typical way to create AJAX requests is using an update panel; when the update panel posts back, the ScriptManager has a way to detect the AJAX postback on the server, through its IsInAsyncPostback property. ASP.NET MVC has something similar; because AJAX can invoke an action method, we need a way to detect if the request is a standard GET/POST operation, or an AJAX request.

A helpful extension method is available to us to detect this, simply by calling Request.IsAjaxRequest(). Request is a reference to HttpRequestBase (a wrapper around the .NET 2.0 framework HttpRequest object), which is a property of the controller. IsAjaxRequest() checks the request information to ensure that an AJAX request is being made to the server, which can properly detect an ASP.NET request or a JQuery request.

To do this, simply put the following code in your action method.

Listing 1: Detecting an AJAX request

Why is detecting an AJAX request important? Because you process AJAX requests differently than standard requests, depending on what the action method does. We'll see examples of this soon.

Using the AJAX Form

Microsoft provided a set of AJAX extensions, one of which being an Ajax form, a form that makes an asynchronous post to the server and provides a response. All of the AJAX call mechanisms on the client side are tucked into the MicrosoftMVCAjax script. A sample form is shown in Listing 2.

Listing 2: Using the AJAX.BeginForm Extension

The AJAX form handles the postback details, posting back asynchronously using JavaScript instead of performing a standard HTTP post to the server. In Listing 2, the form posts the data to the AjaxCustom action method, passing along the form's values, and the response is returned and utilized somehow. The Request.IsAjaxRequest method comes in handy here:

Listing 3: Handling the Post and Providing a Response

If an AJAX request, a special string is passed back to the client, and something is done with it. That action is controlled by the AjaxOptions collection. Listing 2 injects the "Success" message into an HTML element with the "customresponse" id. If for some reason that the request isn't from an AJAX call (an unobtrusive javascript technique), the action method can still work correctly by redirecting to another view as a fallback. We'll be covering handling these scenarios in a later article.

I'm briefly covering this option because I believe the best option for using AJAX is JQuery.

Using JQuery

JQuery is very powerful; the power behind the framework comes from its simplicity and that it gives you complete control over the process. JQuery can perform a get or post operation to an MVC action method with only a few lines of client-side code. The results of the callback are given to you directly, meaning you have to control the response, but even this is very easy to do. In JQuery, we can do the following to post a form's data to the server:

Listing 4: Posting The Form's Data

An action method's response can be one of the following types, with the result streamed to the client. The following list

• Content("Success") = returns the content returned as a string, which can be injected into the HTML document.
• Json(new { a = 1 }) = returns a JSON object.
• View("Action") = The view or partial view as an HTML string.

These options are great because JQuery gives you raw control over the data, and you can use this data to inject into the UI or replace the UI contents entirely. Let's look at an example of each of these. I built a simple controller that returns each of these content types, as in Listing 5.

Listing 5: Sample Content Types

Our client will consume these action methods using JQuery, each using a separate AJAX action method that the previous. In the previous JQuery call, a post was performed, but instead, I'll perform get operations; a get and post operation is similar, except for the fact that a post passes a collection of serialized values.

Listing 6: Loading the new data

Of these methods, "get" and "load" work very similarly in that they can load the content directly into the HTML element; "load" injects directly without a callback, but "get" gives you more control over the handling of the data. There are a few other specialized options, like getJSON. More details on these features are available here: http://dotnetslackers.com/articles/ajax/jquery-ajax.aspx.

This produces the following HTML output that's loaded after the document has loaded; the DIV elements below have empty inner content.

Controlling Requests Using Attributes

When requests are made to the server, everything about the request is inspected (headers, etc.), which is how AJAX requests are determined. Depending on how complex your applications are, you may want to separate action methods, one for AJAX requests, and another for the rest. So an index view may have an AjaxIndex action method, to process the AJAX request, and an Index action method for all other requests. We can utilize filter attributes to ensure that the correct action method gets invoked.

The following two classes represent a filter attribute to only allow AJAX requests or standard HTTP get/post requests, respectively.

Listing 7: Ajax/Standard Request Filter Attributes

These filter attributes are of the action method selector kind, meaning that when the MVC framework attempts to match a request to an action method, it follows a process like the following:

• Attempt to find an action method Index
• Does all the existing rules pan out OK? – Yes
• Check the filters – An Ajax only filter exists
• Is this an AJAX request – No
• Ignore this action method

If, at the end of the process, no action methods exist, a resource not found response is returned from the server.

Conclusion

We've seen multiple uses of the MS AJAX framework and JQuery, and how easy it makes using AJAX within an MVC application. While these features exist in web forms, JQuery makes using AJAX in MVC even easier as it can directly invoke an action method and load its response into the UI. Furthermore, custom filter attributes can help identify action methods per request, or we can use the Request.IsAjaxRequest to detect the request type directly.

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.