Bootstrap Pagination Dynamically In ASP.NET MVC

This article will explain how to create bootstrap pagination dynamically in ASP.Net MVC. I will explain it with an example from SQL database.

Introduction

 
This article will explain to how to create bootstrap pagination dynamically in ASP.Net MVC. I will explain it with an example from SQL database. Before understanding this article you should havea  basic understanding of the following:
  • Bootstrap 4
  • MVC
  • Entity Framework
  • View Model
  • SQL Server
Step 1
 
Open your favourite SQL server database, any version. It doesn’t really matter. Create the table's frontend and backend technology.
  1. CREATE TABLE [dbo].[Blog](    
  2.     [Id] [int] IDENTITY(1,1) NOT NULL,    
  3.     [title] [nvarchar](255) NULL,    
  4.     [Url] [nvarchar](maxNULL,    
  5.     [Date] [datetime] NULL,    
  6.  CONSTRAINT [PK_Blog] PRIMARY KEY CLUSTERED     
  7. (    
  8.     [Id] ASC    
  9. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]    
  10. ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]    
  11.     
  12. GO    
Step 2
 
Now open Visual Studio 2017 or any version you wish.
 
Bootstrap Pagination Dynamically In ASP.NET MVC
 
Step 3
 
Create an empty project in Visual Studio, and give it an appropriate name. Checked MVC checkbox and click on OK.
 
Bootstrap Pagination Dynamically 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.
 
Bootstrap Pagination Dynamically 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"
 
Bootstrap Pagination Dynamically In ASP.NET MVC
 
After you click on "Add a window", the wizard will open. Choose EF Designer from the database and click "Next".
 
Bootstrap Pagination Dynamically 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".
 
Bootstrap Pagination Dynamically 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".
 
Bootstrap Pagination Dynamically 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".
 
Bootstrap Pagination Dynamically In ASP.NET MVC
 
Entity Framework gets added and the respective class gets generated under the Models folder.
 
Bootstrap Pagination Dynamically In ASP.NET MVC
 
Step 5
 
Right-click on Controllers folder add a controller.
 
Bootstrap Pagination Dynamically In ASP.NET MVC
 
A window will appear. Choose MVC5 Controller-Empty and click "Add".
 
Bootstrap Pagination Dynamically 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.
 
Bootstrap Pagination Dynamically In ASP.NET MVC
 
Step 6
 
Right click on project “Add Folder” name it ViewModel. Now right click on this folder and “Add Class” with name BlogViewModel.
  1. using MvcBootstrapPaginationDynamic_Demo.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5.   
  6. namespace MvcBootstrapPaginationDynamic_Demo.ViewModel  
  7. {  
  8.     public class BlogViewModel  
  9.     {  
  10.         public IEnumerable<Blog> Blogs { get; set; }  
  11.         public int BlogPerPage { get; set; }  
  12.         public int CurrentPage { get; set; }  
  13.   
  14.         public int PageCount()  
  15.         {  
  16.             return Convert.ToInt32(Math.Ceiling(Blogs.Count() / (double)BlogPerPage));  
  17.         }  
  18.         public IEnumerable<Blog> PaginatedBlogs()  
  19.         {  
  20.             int start = (CurrentPage - 1) * BlogPerPage;  
  21.             return Blogs.OrderBy(b=>b.Id).Skip(start).Take(BlogPerPage);  
  22.         }  
  23.     }  
  24. }  
Controller Class Code
  1. using MvcBootstrapPaginationDynamic_Demo.Models;  
  2. using MvcBootstrapPaginationDynamic_Demo.ViewModel;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Mvc;  
  8.   
  9. namespace MvcBootstrapPaginationDynamic_Demo.Controllers  
  10. {  
  11.     public class HomeController : Controller  
  12.     {  
  13.         private readonly MvcDemoContext db = new MvcDemoContext();  
  14.   
  15.         public ActionResult Index(int page=1)  
  16.         {  
  17.             var blogsView = new BlogViewModel  
  18.             {  
  19.                 BlogPerPage = 5,  
  20.                 Blogs = db.Blogs.OrderBy(d=>d.Date),  
  21.                 CurrentPage = page  
  22.             };  
  23.             return View(blogsView);  
  24.         }  
  25.     }  
  26. }  
Step 7
 
Right click on Index action method in controller class “Add View”
 
Bootstrap Pagination Dynamically In ASP.NET MVC
Bootstrap Pagination Dynamically In ASP.NET MVC
 
Index View Code
  1. @model MvcBootstrapPaginationDynamic_Demo.ViewModel.BlogViewModel  
  2.   
  3.     @{  
  4.         ViewBag.Title = "Index";  
  5.     }  
  6.   
  7.     <h3 class="text-uppercase">List of Blogs</h3>  
  8.   
  9.     @foreach (var blog in Model.PaginatedBlogs())  
  10.     {  
  11.         <div class="alert alert-secondary rounded-0">  
  12.             <a href="@blog.Url" class="link" target="_blank">@blog.title</a> <span class="pull-right text-primary"><i class="fa fa-calendar"></i> @blog.Date.Value.ToString("dd-MM-yyyy")</span>  
  13.         </div>  
  14.     }  
  15.   
  16.     <ul class="pagination">  
  17.         @for (int i = 1; i <= Model.PageCount(); i++)  
  18.         {  
  19.             <li class="@(i == Model.CurrentPage ? "page-item active" : "page-item")">  
  20.                 <a class="page-link" href="@Url.Action("Index", new { page = i })">@i</a>  
  21.             </li>  
  22.         }  
  23.     </ul>  
Step 8
 
Install the latest version of bootstrap and JQuery from NuGet package manager under tool in Visual Studio.
 
Step 9
 
Build your project and Run by pressing Ctrl+F5
Bootstrap Pagination Dynamically In ASP.NET MVC