Working with Ajax

Earlier, when a page needed to update its content then an element in the page (ex - a button) triggers a request to server. Once server finishes processing the request then a new page was sent back to the browser. This behavior is known as a full page refresh. There are lot of negative consequences of this model, like:

• Slow page refresh, particularly if the page has lot of contents.

• Increased load for server as it needs to produce a new page for every request, even if the update is small.

Ajax introduced a new method to improve page update. Some of the benefits of using Ajax, update the page content are given below:

• Page requests are made asynchronously. It allows page to remain usable for user.

• Response of the server is very small and it produces only necessary information that need to be requested and not the entire age.

• Response of the server is very quicker and producing the response to server is faster than producing a new page.

• The page can be updated only for the area which needs the update.

Triggering Ajax Calls

Request of the Ajax can be initiated by the user interaction. For example, Ajax request can be initiated when a user clicks on a button and when the user leaves one field to move another field or when the user presses a key while the cursor is in the text box.

Figure 1 below shows how an Ajax request is issued when the user leaves from a field with id txtName. The actual name of the event is blur. Once the Ajax request gets completed successfully then an HTML element with id result gets updated with the response from the server.

Figure 1. Ajax Request Initiated When the User Leaves a Field

In the example shown in Figure 1, jQuery function $.ajax() is used to make the Ajax request. The parameter url defines URL to which the request will be sent. In this example, request will be sent to action method SendName in the AccountController class. The parameter type determines the HTTP method using HTTP

Post. The parameter success is callback function which is to be executed when the request finishes successfully.

ASP.NET MVC 4 includes features which facilitate the usage of Ajax through @Ajax property in the Razor view object. Type of the @Ajax property is System.Web.Mvc.AjaxHelper. This property provides implementation of the

HTML helper methods for the forms and hyperlinks. The HTML helper method of the @Ajax property are similar to the property in the @Html. The difference is that the ones in @Ajax property work asynchronously using Ajax. For example, the old hyperlink would be created as:

@Html.ActionLink ("This is a regular link", "actionName", "controllerName")

With the @Ajax property, the hyperlink would be created as:

@Ajax.ActionLink("This is an Ajax link", "actionName", "controllerName", ajaxOptions)

We may have noticed that the additional parameter ajaxOptions under the declaration of the @Ajax.ActionLink() helper method. This parameter is the object of type System.Web.Mvc.Ajax.AjaxOptions. The AjaxOptions parameter supply information on how to process requests using Ajax. An example of using this property as follows:

In above example, the AjaxOptions class includes following properties:

• Confirm: It is a string property whose value will be displayed under a browser dialog to ask user that it should continue or not. If the user clicks on the “OK” button (or “Accept” button, depending on the browser) then the request will be processed otherwise it will be cancelled.

• HttpMethod: This property indicates that the type of HTTP method is to use for the request. In this case we need to specify to use HTTP Post.

• UpdateTargetId: This property defines id of an HTML element that will be used to display results of the Ajax request. In the example, when the request gets completed successfully then the returned data will be inserted inside the <div> with id resultDiv.

• InsertionMode: This property determines how the returned data will be added to HTML element defined in UpdateTargetId property. The possible values are in the enumeration InsertionMode are InsertAfter, InsertBefore, and Replace. These values indicate that the returned data should be inserted before or after the existing content in the target element when the existing content will be replaced with the returned data.

In addition to previous properties, following other properties of the AjaxOptions class are useful to process Ajax request:

• OnComplete, OnBegin, OnFailure and OnSuccess: These four properties for event callbacks are used to handle the events when request begins or completes and If the request is successful or failed.

• LoadingElementDuration and LoadingElementId: The two properties define HTML

elements that will be displayed while request is processing and duration (in milliseconds) will be displayed. For example, create a <div> that has animated image just like shown in Figure 2.

Figure 2. Animated image to indicate request is processing

• Url: This property defines the URL to make the request to.