jQuery Unobtrusive AJAX For Partial Updates In ASP.NET MVC

In this article, you will learn

What is @Ajax.ActionLink
How does this work?
How to add MicrosoftMvcAjax.js & MicrosoftAjax.js in MVC Project.
Add a loading image while loading data.
How to update a div content using @Ajax.ActionLink

Ajax.ActionLink is much like the Html.ActionLink counterpart. It also creates the hyperlink <a href="">Click here</a> but when the user clicks it and has a JavaScript enabled browser, Ajax.ActionLink sends the asynchronous request instead of navigating to the new URL. With the Ajax.ActionLink, we specify what controller's action method is to be invoked and also specify what to do with the response coming back from the action method.

Ajax.ActionLink creates a hyperlink in the browser

<a class="btn btn-success" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#UpdateContentDiv" href="">List Data</a>

Let's create an Ajax.ActionLink helper that will send an asynchronous request to the action method and will update the DOM with the result.

Let's create an MVC Project. If you don't know how to create a simple MVC Project, refer to my previous blogs.

Once you have successfully created a MVC Project, we need to make sure that we have added reference to jquery.unobtrusive-ajax.js and

jquery.validate.unobtrusive.js in your project.

First, let's add jquery.unobtrusive-ajax.js and jquery.validate.unobtrusive.js in your project. The step is very simple. You can use Nuget Package Manager to install these files or you can do it manually. We use Nuget Package Manger to install these in our project.

Step 1

Right click on Project.

Step 2

Select Manage NuGet Packages.

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Step 3

Search for Microsoft.Jquery.Unobtrusive.Ajax and Microsoft.Jquery.Unobtrusive.Validation and Install in your project.

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Step 4

After Installation, navigate to Scripts folder of your project. You will be able to notice 4 files are added automatically as in figure

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Now, let's create a method to load data.

Let's assume that you have already added a table called Schools and Teachers in your database. You can use either Code First method or DBFirst Method as per your need. If you want to implement CodeFirst Apprach please refer to my previous blog on Code Forst Approach in MVC 5.

I prefer using Code-First Approach here. So my two modals look like,

School Class

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Code Snippet

public class School
{
[Key]
public int SchoolId { get; set; }
[Required(ErrorMessage = "Name required")]
[Column(TypeName = "NVARCHAR")]
[StringLength(200)]
[DisplayName("Name")]
public string Name { get; set; }
[Required(ErrorMessage = "Address required")]
[Column(TypeName = "NVARCHAR")]
[StringLength(200)]
public string Address { get; set; }
[Required(ErrorMessage = "Telephone required")]
[DisplayName("Telephone")]
[Column(TypeName = "NVARCHAR")]
[StringLength(200)]
[Phone]
public string Phone { get; set; }
[Required(ErrorMessage = "Email required")]
//[RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Wrong email format")]
[EmailAddress]
public string Email { get; set; }
}

Teacher Class

Code Snippet

//Class: Teacher
public class Teacher
{
[Key]
public int TeacherId { get; set; }
[Required(ErrorMessage = "Name required")]
[Column(TypeName = "NVARCHAR")]
[StringLength(200)]
[DisplayName("Name")]
public string Name { get; set; }
[Required(ErrorMessage = "Address required")]
[Column(TypeName = "NVARCHAR")]
[StringLength(200)]
public string Address { get; set; }
[Required(ErrorMessage = "Telephone required")]
[DisplayName("Telephone")]
[Column(TypeName = "NVARCHAR")]
[StringLength(200)]
[Phone]
public string Phone { get; set; }
[Required(ErrorMessage = "Email required")]
//[RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Wrong email format")]
[EmailAddress]
public string Email { get; set; }
}

Now, let's Add Controller for Easy CRUD operations.

For now, I used Scaffolding option of MVC to generate method and Views for both Schools and Teachers table. The Controller with Methods for both Schools and Teachers looks like,

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Let's add some data to Database using Create method for both tables.

Creating PartialViews to list Data

Let's add two methods called ListTeachers() and ListSchools() both returning PartialViews() in Home Controller as, JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Code Snippet

DataContext db = new DataContext();
//GET: AllTeachers
/// <summary>
/// List all Teachers from datasource
/// </summary>
/// <returns></returns>
public ActionResult AllTeachers()
{
//Thread.Sleep(2000);
return PartialView(db.Teacher.OrderBy(x => x.Name).ToList());
}
//GET: AllSchools
/// <summary>
/// List all schools from DataSource
/// </summary>
/// <returns></returns>
public ActionResult AllSchools()
{
//Thread.Sleep(2000);
return PartialView(db.School.OrderBy(x => x.Name).ToList());
}

Note

Here, in my case, I have I have used my default DataContext. If you have been working with your custom DataContext class, you need to mention your DataContext Class to retrieve and put data on Database.

Now let's add Partial View for both methods

Step 1

Right click on Method and select "Add View".

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Step 2

Select Model Class and Tick Create as Partial View as in Fig,

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Step 3

Follow same step for ListSchools Method. You will be able to see two views inside Home Folder as

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Adding @Ajax.ActionLink

Step 1

Let's add @Ajax.ActionLink on Index Page of Home Controller as

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Code Snippet

@Ajax.ActionLink(
"List All Schools", // <-- Text to display
"AllSchools",// <-- Action/Method Name
"Home",//<!-- Controller Name
new AjaxOptions
{
UpdateTargetId = "UpdateContentDiv", // <-- DOM element ID to update
InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element
HttpMethod = "GET", // <-- HTTP method
LoadingElementId = "divLoading", //Id of Loading GIF Image
OnBegin = "onAjaxBegin", //OnBegin JS Function
OnComplete = "onAjaxComplete" //OnComplete JS Function
},
new { @class = "btn btn-primary" } //-- Class
)

Step 2

Add Loading Gif Image

Upload a loading GIF Image on Project and add following lines of codes JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Code Snippet

<div id="divLoading" class="divhide">
@*divhide will be set as default and will be changed dynamically.*@
<img src="~/Loading.gif" alt="Loading Image" height="150" title="Loading Image" />
</div>

Write CSS and Scripts to Hide and Show Loading Image on Ajax Call.

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Code Snippet

@*CSS for Loading GIF Image*@
<style>
.HideLoader {
display: none;
}
.ShowLoader {
display: normal;
}
</style>
@*JS to Show and Hide Loading GIF Image*@
<script>
function onAjaxBegin() {
$("#divLoading").removeClass("ShowLoader").addClass("ShowLoader");
}
function onAjaxComplete() {
$("#divLoading").removeClass("ShowLoader").addClass("HideLoader");
}
</script>

Now Add a Div to show data after AjaxCall. Also add reference to jquery.unobtrusive-ajax.min.js as

JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC by Nishan Aryal

Code Snippet

<div id="UpdateContentDiv">
@*Div to update content after Ajax Call*@
</div>
@section scripts{
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
}

Application Execution

So far we have added JQuery Unobtrusive AJAX in our project. We also learned how to implement this to load partial views. Now let's execute the application and see output.

Step 1

Rebuild the Solution

Step 2

Start Application in without Debugging mode (Ctrl + F5)

Now click on List All Teachers and List All Schools and you will be able to enjoy data retrieval with our page refresh. Note: We are invoking Partial Views here using JQuery Unobtrusive Ajax.

List All Teachers Button on browser will be parsed as

<a class="btn btn-success" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#UpdateContentDiv" href="/Home/AllTeachers?Length=4">List All Teachers</a>

Output

Summary

So far, we have learned -

What is JQuery Unobtrusive Ajax.
How to add JQuery Unobtrusive Ajax using Nuget Package Manager in ASP.NET MC Appication.
How to Create PartialViews with dynamic data from DataSource.
How to Implement JQuery Unobtrusive Ajax for Partial Updates in ASP.NET MVC.
How to load Partial Pages using JQuery Unobstrusive AJAX.

You may also like

4 Comments

Join the conversation! Your thoughts help the community grow.

Dennis Kabugua7y ago
How do I pass a asp-route-data parameter to a page handler using ajax unobtrusive
Rock8y ago
Hi Thanks Nishan. How to achieve the same in MVC Core 2.0
zekeriya koca8y ago
Thanks for sharing.
Vignesh Mani9y ago
Nice one thank you for sharing.