Using Unobtrusive jQuery AJAX In ASP.NET MVC

Ajax is used in web applications to improve page responsiveness.The unobtrusive ajax jquery library is used for making the ajax functionality in asp.net mvc views cleaner.

In Unobtrusive AJAX ,the ajax functionality is used in form element in the view using data- attribute.The data-* attribute is part of HTML5 specification.
HTML attributes are used in the form tag in the view.To add unobtrusive ajax functionality in MVC application add the the reference to the jquery.unobtrusive-ajax js file in the _Layout.cshtml view in the views folder:

<environment include="Development">
<script src="~/jquery.unobtrusive-ajax.js"></script>
</environment>Code language: HTML, XML (xml)

After you have added the above script reference go to the view where you want to add the ajax functionality. In the form add the required attributes.In the following form we have enabled the ajax functionality.Also we have set the method as “post”.We can set get or post method.

Following html attributes can be applied to the form element.

data-ajax this is a boolean value.to enable unobtrusive ajax functionality this should be set to true.

<form data-ajax="true" data-ajax-method="post">Code language: HTML, XML (xml)

data-ajax-method HTTP request method ,could be “Get” or “Post”

data-ajax-confirm
We can show a simple dialog to the user before ajax request is sent to the server.Here we have set this attribute as:
data-ajax-confirm=”submit this request?”

If you run the application now ,you will get the following confirmation dialog.

Here you can click “Ok” or “Cancel”.If you click “Ok” then request will be sent as usual.If you click cancel then request will not be sent to the server.

data-ajax-complete
Using this attribute we can call a JavaScript method when a request is completed.

<script type="text/javascript">
function completed() {
alert('request completed');
}
</script>

In the form tag we have set this attribute as:

<form data-ajax="true" data-ajax-method="post" data-ajax-complete="completed"
data-ajax-confirm="submit this request?" >
<input type="text" name="name" /><input type="submit" />
</form>Code language: HTML, XML (xml)

data-ajax-begin

This attribute is used to attach a javascript function which is called when the page gets updated.

function begin() {
alert('request begin');
}
Code language: JavaScript (javascript)

In the form tag we have set this attribute as:

<form data-ajax="true" data-ajax-method="post" 
data-ajax-begin="begin">
<input type="text" name="name" /><input type="submit" />
</form>Code language: HTML, XML (xml)

data-ajax-success
we use this method to call a JavaScript method when request is successful.In the form tag we have set this method as:

<form data-ajax="true" data-ajax-method="post" data-ajax-success="requestSuccess">Code language: HTML, XML (xml)

The JavaScript method is defined as:

function requestSuccess() {
alert('request successful');
}

data-ajax-loading
We use this to display an html element when the ajax request is being processed.

Follow on: