Post
Ask Question

Alphabetic Paging In ASP.NET MVC

Introduction

 
This article will explain to you alphabetic pagination in ASP.Net MVC. The idea here is to create pagination alphabetically where user can see the pagination of A to Z. When user clicks on A the customer name with "A" alphabet display similarly user can perform pagination from A to Z and the user can also see All the customer by clicking on "All".
 
This example requires the following basic understanding
  • Bootstrap
  • Entity framework
  • LINQ
  • ViewModel
  • MVC
Step 1
 
Open your favourite SQL server database any version. It doesn’t really matter. Create tables’ customer.
  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 = ON) ON [PRIMARY]    
  12. ) ON [PRIMARY]    
  13.     
  14. GO  
Step 2
 
Now open your favourite visual studio 2017 or any version you wish to.
 
 
Step 3
 
Create an empty project in visual studio and give an appropriate name. Checked MVC checkbox and click on OK.
 
 
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.
 
 
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"
 
 
After you click on "Add a window", the wizard will open. Choose EF Designer from the database and click "Next".
 
 
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".
 
 
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".
 
 
After clicking on NEXT, another window will appear. Choose the database table name as shown in the below screenshot and click "Finish".
 
 
Entity Framework gets added and the respective class gets generated under the Models folder.
 
 
Step 5
 
Right-click on Controllers folder add a controller.
 
 
A window will appear. Choose MVC5 Controller-Empty and click "Add".
 
 
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.
 
 
Step 6
 
Right click on project “Add Folder” name it ViewModels. Now right click on this folder and “Add Class” with name AlphabeticCustomerPagingViewModel. 
  1. using MvcAlphabaticPagination_Demo.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Web;  
  6.   
  7. namespace MvcAlphabaticPagination_Demo.ViewModels  
  8. {  
  9.     public class AlphabeticCustomerPagingViewModel  
  10.     {  
  11.         public List<string> CustomerName { get; set; }  
  12.         public IList<string> Alphabet  
  13.         {  
  14.             get  
  15.             {  
  16.                 var alphabet = Enumerable.Range(65, 26).Select(i => ((char)i).ToString()).ToList();  
  17.                 alphabet.Insert(0, "All");  
  18.                 return alphabet;  
  19.             }  
  20.         }  
  21.         public List<string> FirstLetters { get; set; }  
  22.         public string SelectedLetter { get; set; }  
  23.         public bool NamesStartWithNumbers  
  24.         {  
  25.             get  
  26.             {  
  27.                 var numbers = Enumerable.Range(0, 10).Select(i => i.ToString());  
  28.                 return FirstLetters.Intersect(numbers).Any();  
  29.             }  
  30.         }  
  31.     }  
  32. }  
Controller Class Code
  1. using MvcAlphabaticPagination_Demo.Models;  
  2. using MvcAlphabaticPagination_Demo.ViewModels;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Mvc;  
  8.   
  9. namespace MvcAlphabaticPagination_Demo.Controllers  
  10. {  
  11.     public class HomeController : Controller  
  12.     {  
  13.         private readonly CustomerContext db = new CustomerContext();  
  14.   
  15.         public ActionResult Index(string selectedLetter)  
  16.         {  
  17.             var viewModel = new AlphabeticCustomerPagingViewModel { SelectedLetter = selectedLetter };  
  18.   
  19.             viewModel.FirstLetters =db.Customers  
  20.             .GroupBy(c => c.FirstName.Substring(0, 1))  
  21.             .Select(x => x.Key.ToUpper())  
  22.             .ToList();  
  23.   
  24.             if (string.IsNullOrEmpty(selectedLetter) || selectedLetter == "All")  
  25.             {  
  26.                 viewModel.CustomerName = db.Customers  
  27.                     .Select(c => c.FirstName)  
  28.                     .ToList();  
  29.             }  
  30.             else  
  31.             {  
  32.                 if (selectedLetter == "0-9")  
  33.                 {  
  34.                     var numbers = Enumerable.Range(0, 10).Select(i => i.ToString());  
  35.                     viewModel.CustomerName = db.Customers  
  36.                         .Where(p => numbers.Contains(p.FirstName.Substring(0, 1)))  
  37.                         .Select(p => p.FirstName)  
  38.                         .ToList();  
  39.                 }  
  40.                 else  
  41.                 {  
  42.                     viewModel.CustomerName = db.Customers  
  43.                         .Where(p => p.FirstName.StartsWith(selectedLetter))  
  44.                         .Select(p => p.FirstName)  
  45.                         .ToList();  
  46.                 }  
  47.             }  
  48.   
  49.                 return View(viewModel);  
  50.         }  
  51.     }  
  52. }  
Step 7
 
Right click on Index action method in controller class to “Add View”
 
 
 
Index View Code
  1. @model MvcAlphabaticPagination_Demo.ViewModels.AlphabeticCustomerPagingViewModel  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6.   
  7. <h4 class="text-center text-uppercase">Alphabetic Search in ASP.Net MVC</h4>  
  8.   
  9. <ul class="pagination alpha">  
  10.     @foreach (var link in Model.Alphabet)  
  11.     {  
  12.         if (Model.FirstLetters.Contains(link) || (Model.NamesStartWithNumbers && link == "0-9") || link == "All")  
  13.         {  
  14.             if (Model.SelectedLetter == link || Model.SelectedLetter.IsEmpty() && link == "All")  
  15.             {  
  16.                 <li class="page-item active"><a class="page-link" href="#">@link</a></li>  
  17.             }  
  18.             else  
  19.             {  
  20.                 <li class="page-item">@Html.ActionLink(link, "Index", new { selectedLetter = link },new { @class= "page-link" })</li>  
  21.             }  
  22.         }  
  23.         else  
  24.         {  
  25.             <li class="page-item inactive"><a class="page-link" href="#">@link</a></li>  
  26.         }  
  27.     }  
  28. </ul>  
  29.   
  30. <ul class="list-group">  
  31.     @foreach (var item in Model.CustomerName)  
  32.     {  
  33.         <li class="list-group-item list-group-item-primary">@item</li>  
  34.     }  
  35. </ul>  
Step 8
 
Install the latest version of bootstrap from NuGet package manager under tools in visual studio.
 
Step 9
 
Build your project and Run by pressing Ctrl+F5
 


Similar Articles