Alphabetical Search Using Ajax In ASP.NET MVC

In this article, I will explain to you how you can create alphabetical search and pagination using jQuery Ajax in asp.net MVC.

Introduction

 
In this article, I will explain to you how you can create alphabetical search and pagination using jQuery Ajax in asp.net MVC. This article has alphabetical pagination as well each alphabet has pagination and search option. Alphabet Search is a feature plug-in for the jQuery Data Tables library that provides A-Z alphabetical search feature. Download plugin here.
 
This example requires the following basic understanding,
  • Bootstrap
  • JQuery Data table
  • Ajax
  • Entity framework
  • LINQ
  • MVC
Step 1
 
Open your favorite SQL server database --  any version. It doesn’t really matter. Create customer table.
  1. CREATE TABLE [dbo].[Customer](    
  2.     [Id] [int] IDENTITY(1,1) NOT NULL,    
  3.     [FirstName] [nvarchar](40) NOT NULL,    
  4.     [LastName] [nvarchar](40) NOT NULL,    
  5.     [City] [nvarchar](40) NULL,    
  6.     [Country] [nvarchar](40) NULL,    
  7.     [Phone] [nvarchar](20) NULL,    
  8.  CONSTRAINT [PK_CUSTOMER] PRIMARY KEY CLUSTERED     
  9. (    
  10.     [Id] ASC    
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]    
  12. ON [PRIMARY]    
  13.     
  14. GO     
Step 2
 
Now open your favorite visual studio 2017 or any version of your choice.
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
Step 3
 
Create an empty project in visual studio and give an appropriate name. Checked MVC checkbox and click on OK.
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
Step 4
 
Right-click on the Models folder and add a database model. Add Entity Framework now. For that, right-click on Models folder, select Add, then select New Item.
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
You will get a window; from there, select Data from the left panel and choose ADO.NET Entity Data Model, give it the name MyModel (this name is not mandatory, you can give any name) and click "Add".
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
After you click on "Add a window", the wizard will open. Choose EF Designer from the database and click "Next".
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
After clicking on "Next", a window will appear. Choose New Connection. Another window will appear. Add your server name - if it is local, then enter a dot (.). Choose your database and click "OK".
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
The connection will be added. If you wish, save the connection name as you want. You can change the name of your connection below. It will save the connection in the web config. Now, click "Next".
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
After clicking on NEXT, another window will appear. Choose the database table name as shown in the below screenshot and click "Finish".
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
Entity Framework gets added and the respective class gets generated under the Models folder.
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
Step 5
 
Right-click on Controllers folder add a controller.
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
A window will appear. Choose MVC5 Controller-Empty and click "Add".
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
After clicking on "Add", another window will appear with DefaultController. Change the name to HomeController and click "Add". The HomeController will be added under the Controllers folder. Don’t change the Controller suffix for all controllers, change only the highlight, and instead of Default, just change Home.
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
Controller Class Code
  1. using MvcAlphabeticSearch_Demo.Models;  
  2. using System.Linq;  
  3. using System.Web.Mvc;  
  4.   
  5. namespace MvcAlphabeticSearch_Demo.Controllers  
  6. {  
  7.     public class HomeController : Controller  
  8.     {  
  9.         private readonly CustomerContext db = new CustomerContext();  
  10.   
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.   
  16.         public JsonResult GetCustomer()  
  17.         {  
  18.             var customer = db.Customers.ToList();  
  19.             return Json(new { data = customer }, JsonRequestBehavior.AllowGet);  
  20.         }  
  21.     }  
  22. }  
Step 6
 
Right click on Index action method in controller class to “Add View”
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
Alphabetical Search Using Ajax In ASP.NET MVC
 
Index View Code
  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4.   
  5. <link href="@Url.Content("~/css/dataTables.alphabetSearch.css")" rel="stylesheet" />  
  6. <link href="@Url.Content("~/Content/DataTables/css/dataTables.bootstrap4.min.css")" rel="stylesheet" />  
  7. <table id="example" class="display table table-bordered">  
  8.     <thead class="thead-dark text-uppercase text-white">  
  9.         <tr>  
  10.             <th>First Name</th>  
  11.             <th>Last Name</th>  
  12.             <th>City</th>  
  13.             <th>Country</th>  
  14.             <th>Phone Number</th>  
  15.         </tr>  
  16.     </thead>  
  17.     <tbody></tbody>  
  18. </table>  
  19. <script src="@Url.Content("~/Scripts/jquery-3.4.1.min.js")" type="text/javascript"></script>  
  20. <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>  
  21. <script src="@Url.Content("~/Scripts/DataTables/jquery.dataTables.min.js")" type="text/javascript"></script>  
  22. <script src="@Url.Content("~/Scripts/DataTables/dataTables.bootstrap4.min.js")" type="text/javascript"></script>  
  23. <script src="@Url.Content("~/js/dataTables.alphabetSearch.min.js")" type="text/javascript"></script>  
  24. <script>  
  25.     $(document).ready(function () {  
  26.         var table = $('#example').DataTable({  
  27.             dom: 'Alfrtip',  
  28.             alphabetSearch: {  
  29.                 column: 0  
  30.             },  
  31.             "ajax": {  
  32.                 "url""/Home/GetCustomer",  
  33.                 "type""GET",  
  34.                 "datatype""json"  
  35.             },  
  36.             "columns": [  
  37.                 { "data""FirstName" },  
  38.                 { "data""LastName" },  
  39.                 { "data""City" },  
  40.                 { "data""Country" },  
  41.                 { "data""Phone" }  
  42.             ]  
  43.         });  
  44.     });  
  45. </script>  
Step 7
 
Install the latest version of bootstrap, jquery and JQuery Datatable from NuGet package manager under tools in visual studio.
 
Step 8
 
Build your project and Run by pressing Ctrl+F5
Alphabetical Search Using Ajax In ASP.NET MVC
Alphabetical Search Using Ajax In ASP.NET MVC