In MVC application, similar to the HTML helper to create forms and links, there is a AJAX helper to create forms and links that points to controller actions. But AJAX helpers behave asynchronously. To use AJAX helper you need to include “jquery-unobtrusive-ajax” scripts.
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" ></script>
AJAX ActionLinks
Ajax helpers methods are availablethrough “Ajax” property inside the Razor view. Similar to the html helper most of the method exposed by “Ajax” property is an extension methods.
“ActionLink” method of the ajax property creates an anchor tag with asynchronous behavior. Action Link can return HTML or plantext
<div id="emplist">
@Ajax.ActionLink("Click here to see Software Engineers list!",
"EmployeeDetail",
newAjaxOptions{
UpdateTargetId="emplist",
InsertionMode=InsertionMode.Replace,
HttpMethod="GET"
})
</div>
- First parameter specifies the link text
- Second parameter specifies the action method need to be called asynchronously
- “AjaxOptions” parameter specifies how to send the request, what will happen if server returns the result.
It also provides no of overloaded method to pass controller name, route values and HTML attributes.
Ajax Forms
An Asynchronous forms can be created as show below
@using (Ajax.BeginForm("ArtistSearch", "Home",
newAjaxOptions {
InsertionMode=InsertionMode.Replace,
HttpMethod="GET",
OnFailure="searchFailed",
LoadingElementId="ajax-loader",
UpdateTargetId="searchresults",
}))
{
<inputtype="text"name="q"/>
<inputtype="submit"value="search"/>
<imgid="ajax-loader"src="@~/Content/Images/ajax-loader.gif"style="display:none"/>
}