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 :
| 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.
|
1 2 3 4 5 6 |
@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:
|
1 2 3 4 5 6 7 8 |
<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:
|
1 2 3 |
<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:
|
1 2 3 4 |
<appSettings> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> |