Ajax Helpers:

We already aware that we use HTML helpers to create a forms with the user’s controls. ASP.NET MVC provides another option that is Ajax helpers functionality to our web applications. The main purpose of AJAX Helpers are used to create AJAX enabled forms and links which performs request asynchronously.

When to use?

Here big question will raise, both HTML helper and AJAX helper method generate the anchor tag then why we need to use the @AJAX.ActionLink instead of @HTML.ActionLink ? The solution will be,

  • When the user clicks on the link and it want to redirect to another page then we can use @HTML.ActionLink.
  • When the user clicks on the link and don’t want to redirect to different page, need to stay on the same page (without Post Back), then we can go for @AJAX.ActionLink.

Difference between Html and Ajax helper:

  • HTML helper class performs request synchronously.
  • Ajax helper class performs request asynchronously.

Namespace: System.Web.Mvc

Unobtrusive AJAX

ASP.NET MVC supports unobtrusive Ajax which is based on jQuery. The unobtrusive Ajax is used to define the Ajax features through in our application. While creating project in ASP.NET MVC, the jquery-unobtrusive-ajax.js and jquery-unobtrusive-ajax.min.js files has added automatically to our application as shown below.

Ajaxhelper- unobtrusive-dotnet-helpers

Ajax helper Properties and its use :

Property Description
Url Specify the URL that will be requested from the server.
Confirm Given message will be displayed in a confirm dialog to the end user.The ajax call will trigger after clicked OK button
OnBegin The javaScript function name in OnBegin will be intiated at the BEGINNING of the Ajax request.
OnComplete The javaScript function name in OnComplete will be intiated at the END of the Ajax request.
OnSuccess The javaScript function name in OnSuccess will be intiated when Ajax request succeed.
OnFailure The javaScript function name in OnFailure will be intiated when Ajax request failed
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).
LoadingElementId Specify progress message container’s Id to display a progress message to the end user while processing the Ajax request.
LoadingElementDuration Specify a time duration for controls the duration of the progress message during the Ajax request.

Example 1 : With Simple Ajax call

Below example code shows how to use AJAX action link in Asp.Net MVC.

OUTPUT:

Run the application and  we can see that the he ajax helper Action link has converted to the HTML anchor link element as shown below.

<a data-ajax=”true” data-ajax-method=”GET” data-ajax-mode=”replace” data-ajax-success=”fnSuccess” data-ajax-update=”#divGetAllUsers” href=”/Ajaxhelpers/GetDetails”>Get User Details</a>

Ajaxhelper-dotnet-helpers

Example 2 : With “Confirm” properties

View:


OUTPUT:

Run the application and click the “Get User Details”, then it will show the pop up for confirmation to proceed. If u click “Ok” then it will process the Ajax request. If we click “cancel” then it wont process the Ajax request.

Ajax Helper call with Confirmation msg - dotnet-helpers

Note:

The following things need to be required before using ajax helper class.

Required reference:

Required Configuration:

Other Popular Articles