What is AJAX Helpers in ASP.NET MVC

Ajax helper in ASP.NET MVC essentially provides Ajax functionality for your web applications. AJAX Helpers are used for creating AJAX enabled elements for example Ajax enabled forms and links which performs request asynchronously. when you use Ajax helper you can submit your HTML form using Ajax so that instead of refreshing the full web page only a part of it can be refreshed. you can render action links that allow you invoking action methods using Ajax. Basically AJAX Helpers are extension methods of AJAX Helper class which exists in System.Web.Mvc.Ajax namespace.

AJAX-enabled link based example:-

Here I have created a example to show 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" })



Unobtrusive AJAX in MVC?

Unobtrusive Validation and AJAX support in  MVC follows  best practices that enable Progressive Enhancement and also easy to use. The unobtrusive AJAX library (not the unobtrusive validation library) is admittedly a bit limited in functionality, but if it fulfill 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

 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. There are several properties in AjaxOptions. Now You can use these property as par different scenario and different requirements. There are following properties provided by AjaxOptions class for AJAX helpers:

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.

LoadingElement:  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).

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").

If you like this post share it.. If you encounter any problems, feel free and comment below to find solution. Share Your Experience with us.