Dot Net Stuff

AJAX Helpers in ASP.NET MVC Tutorials


Ajax 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:-

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

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

Here is the html output of above code block.

Output:
 <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:

PropertyDescription
UrlSpecify the URL that will be requested from the server.
ConfirmSpecify 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.
OnBeginSpecify a JavaScript function name which is called at the beginning of the Ajax request.
OnCompleteSpecify a JavaScript function name which is called at the end of the Ajax request.
OnSuccessSpecify a JavaScript function name which is called when the Ajax request is successful.
OnFailureSpecify a JavaScript function name which is called if the Ajax request fails.
LoadingElementIdSpecify progress message container’s Id to display a progress message or animation to
the end user while an Ajax request is being made.
LoadingElementDurationSpecify a time duration in milliseconds that controls the duration of the progress
message or animation.
UpdateTargetIdSpecify the target container’s Id that will be populated with the HTML returned by the
action method.
InsertionModeSpecify 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.


Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

Loading