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.

Ajax helper Properties and its use :

Example 1 : With Simple Ajax call

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

@Ajax.ActionLink("Get User Details", "GetDetails", new AjaxOptions
{
UpdateTargetId = "divGetAllUsers",
HttpMethod = "GET",
OnSuccess = "fnSuccess",
})

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>

Example 2 : With “Confirm” properties

View:

<h2>Index</h2>
@Ajax.ActionLink("Get User Details", "GetDetails", new AjaxOptions
{
UpdateTargetId = "divGetAllUsers",
Confirm = "Aru u sure want to Get all the USER DETAILS",
HttpMethod = "GET",
OnSuccess = "fnSuccess",
})

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.

Note:

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

Required reference:

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

Required Configuration:

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

See more