Lession 30: AJAX in ASP.Net MVC

AJAX Helpers in ASP.NET MVC Tutorials

x helper of ASP.NET MVC essentially provides Ajax functionality to your web applications. AJAX Helpers are used to create AJAX enabled elements like as Ajax enabled forms and links which performs request asynchronously. Using Ajax helper you can submit your HTML form using Ajax so that instead of refreshing the entire web page only a part of it can be refreshed. Additionally, you can also render action links that allow you to invoke action methods using Ajax. AJAX Helpers are extension methods of AJAXHelper class which exist in System.Web.Mvc.Ajax namespace.

AJAX-enabled link based on action/controller example:-

Require : jquery.unobtrusive-ajax.min.js

Following example shows how to use AJAX action link using action and controller in Asp.Net MVC.

1	@Ajax.ActionLink("Fatch Data", "GetData", new AjaxOptions {UpdateTargetId = "Data-container", HttpMethod = "GET" })

Here is the html output of above code block.

Output:

1	<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#Data-container" href="/Home/GetData"> Fatch Data </a>

Do you know Unobtrusive AJAX in MVC?

The Unobtrusive Validation and AJAX support in ASP.NET MVC follow many best practices that enable Progressive Enhancement and are also super easy to use. The unobtrusive AJAX library (not the unobtrusive validation library) is admittedly a bit limited in functionality, but if it satisfies the requirements of the application you are writing, then by all means use it. And because the source code of it is in your app (it's JavaScript, after all), it's generally straightforward to make any updates or changes to it as you see fit.

Configuration options for AJAX Helpers

There are several properties in AjaxOptions. It is very important to know the AjaxOptions class defines properties that allow you to specify callbacks for different stages in the AJAX request life cycle. You can use these property as par different scenario and different requirements. There are following properties provided by AjaxOptions class for AJAX helpers:

Property	Description
Url	Specify the URL that will be requested from the server.
Confirm	Specify a message that will be displayed in a confirm dialog to the end user.When user clicks on OK button in the confirmation dialog, the Ajax call performs.
OnBegin	Specify a JavaScript function name which is called at the beginning of the Ajax request.
OnComplete	Specify a JavaScript function name which is called at the end of the Ajax request.
OnSuccess	Specify a JavaScript function name which is called when the Ajax request is successful.
OnFailure	Specify a JavaScript function name which is called if the Ajax request fails.
LoadingElementId	Specify progress message container’s Id to display a progress message or animation to the end user while an Ajax request is being made.
LoadingElementDuration	Specify a time duration in milliseconds that controls the duration of the progress message or animation.
UpdateTargetId	Specify the target container’s Id that will be populated with the HTML returned by the action method.
InsertionMode	Specify the way of populating the target container. The possible values are InsertAfter, InsertBefore and Replace (which is the default).

Do you know Cross Domain AJAX (CORS)?

Cross-domain requests require mutual consent between the Web page and the server. You can initiate a cross-domain request in your Web page by creating an XDomainRequest object off the window object and opening a connection to a particular domain. The browser will request data from the domain's server by sending an Origin header with the value of the origin. It will only complete the connection if the server responds with an Access-Control-Allow-Origin header of either * or the exact URL of the requesting page. By default in ASP.NET MVC, any web browsers allows AJAX calls only to our web application’s site of origin. This will allow us to prevent various security issues. In that case, you have two options: Either add CORS header "Access-Control-Allow-Origin: *" to the response (and configure the client ajax() call with dataType:"html"), or create a special JSON(P) page that delivers the same data as JSON (with padding) (and configure the client ajax() call like in the OP, with dataType:"jsonp").

Summary: I am sure you will like this article and now able to get a better idea about AJAX Helpers while doing you work with ASP.NET MVC. In this article we have learnt about AJAX Helpers and the properties of AjaxOptions. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.