Ajax in Asp.Net MVC

In this article , we will learn how to handle ajax in Asp.Net MVC

Step1: Create DB table in SQL named as Employee as below

Step2: Open VS and create Asp.Net Web Application Named as AjaxDemo

Step3: Go to models folder & add table using Ado.Net Entity model DB first approach. Solution explorer will look like below

Step4: Go to controller folder & add Employee controller with following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AjaxDemo.Models;
using System.Threading;

namespace AjaxDemo.Controllers
{
    public class EmployeeController : Controller
    {
        MVCDbEntities entity = new MVCDbEntities();
        // GET: Employee
        public ActionResult Index()
        {
            return View(entity.Employees.ToList());
        }
        public PartialViewResult OrderById()
        {
            Thread.Sleep(5000);
            List<Employee> employees = entity.Employees.OrderBy(x => x.EmployeeId).ToList();
            return PartialView("_Grid", employees);
        }
        public PartialViewResult OrderByName()
        {
            Thread.Sleep(5000);
            List<Employee> employees = entity.Employees.OrderBy(x => x.Name).ToList();
            return PartialView("_Grid", employees);
        }
        public PartialViewResult OrderByPosition()
        {
            Thread.Sleep(5000);
            List<Employee> employees = entity.Employees.OrderBy(x => x.Position).ToList();
            return PartialView("_Grid", employees);
        }
        public PartialViewResult OrderByOffice()
        {
            Thread.Sleep(5000);
            List<Employee> employees = entity.Employees.OrderBy(x => x.Office).ToList();
            return PartialView("_Grid", employees);
        }
        public PartialViewResult OrderByAge()
        {
            Thread.Sleep(5000);
            List<Employee> employees = entity.Employees.OrderBy(x => x.Age).ToList();
            return PartialView("_Grid", employees);
        }
        public PartialViewResult OrderBySalary()
        {
            Thread.Sleep(5000);
            List<Employee> employees = entity.Employees.OrderBy(x => x.Sallary).ToList();
            return PartialView("_Grid", employees);
        }
    }
}

Step5: Go to shared folder in Views & add partial view named as "_Grid.cshtml". Write the below code in it.

@model IEnumerable<AjaxDemo.Models.Employee>

 
     
        @foreach(var item in Model)
        {
    <tr>
        <td>
            @Html.DisplayFor(model => item.EmployeeId)
        </td>
        <td>
            @Html.DisplayFor(model => item.Name)
        </td>
        <td>
            @Html.DisplayFor(model => item.Position)
        </td>
        <td>
            @Html.DisplayFor(model => item.Office)
        </td>
        <td>
            @Html.DisplayFor(model => item.Age)
        </td>
        <td>
            @Html.DisplayFor(model => item.Sallary)
        </td>
    </tr>
        }


Step6: Create Index View and add following code in it

Index.cshtml

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


<h2>Employee List</h2>
<table class="table table-hover">
    <div style="display:none" align="center" id="loading"> Please Wait...</div>
    <thead>
    <th>
        @Ajax.ActionLink("EmployeeId", "OrderById", new AjaxOptions
        {
       HttpMethod = "GET",
       UpdateTargetId = "grid",
       InsertionMode = InsertionMode.Replace,
       LoadingElementDuration = 5000,
       LoadingElementId = "loading"
   })
    </th>
    <th>
        @Ajax.ActionLink("Name", "OrderByName", new AjaxOptions
        {
       HttpMethod = "GET",
       UpdateTargetId = "grid",
       InsertionMode = InsertionMode.Replace,
       LoadingElementDuration = 5000,
       LoadingElementId = "loading"
   })
    </th>
    <th>
        @Ajax.ActionLink("Position", "OrderByPosition", new AjaxOptions
        {
       HttpMethod = "GET",
       UpdateTargetId = "grid",
       InsertionMode = InsertionMode.Replace,
       LoadingElementDuration = 5000,
       LoadingElementId = "loading"
   })
    </th>
    <th>
        @Ajax.ActionLink("Office", "OrderByOffice", new AjaxOptions
        {
       HttpMethod = "GET",
       UpdateTargetId = "grid",
       InsertionMode = InsertionMode.Replace,
       LoadingElementDuration = 5000,
       LoadingElementId = "loading"
   })
    </th>
    <th>
        @Ajax.ActionLink("Age", "OrderByAge", new AjaxOptions
        {
       HttpMethod = "GET",
       UpdateTargetId = "grid",
       InsertionMode = InsertionMode.Replace,
       LoadingElementDuration = 5000,
       LoadingElementId = "loading"
   })
    </th>
    <th>
        @Ajax.ActionLink("Salary", "OrderBySalary", new AjaxOptions
        {
       HttpMethod = "GET",
       UpdateTargetId = "grid",
       InsertionMode = InsertionMode.Replace,
       LoadingElementDuration = 5000,
       LoadingElementId = "loading"
   })
    </th>
    </thead>
    <tbody id="grid">
       
    </tbody>
    <tfoot>
        <tr>
            <td colspan="6">Page last acessed on @DateTime.Now.ToString()</td>
        </tr>
    </tfoot>
</table>


Now run the application and then see the results below

List according to Id:

List according to Name:

PostedBy: pankaj_bhakre