Paging in ASP.NET MVC
In this article, we will
learn how to use paging in ASP.NET MVC 4, using PagedList. First, show the
Table script.
 |
Paging in ASP.NET MVC |
What is PagedList.mvc?
PagedList.mvc is a package for paging and sorting for ASP.NET MVC. PagedList
package installs a PagedList collection type and extension methods for IQueryable
and IEnumerable collections.
First create database and create table and then insert record inside Student database.
CREATE DATABASE STUDENT
Now create table with name "StdInfo" inside Student database.
CREATE TABLE [dbo].[stdinfo](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [nvarchar](100) NULL,
[fathername] [nvarchar](100) NULL,
[mothername] [nvarchar](100) NULL,
[age] [int] NULL,
[country] [nvarchar](100) NULL,
[state] [nvarchar](100) NULL,
[nationality] [nvarchar](100) NULL
)
GO
Now write a query for insert records in "StdInfo" table.
SET IDENTITY_INSERT [dbo].[stdinfo] ON
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (1, N'Ravi', N'Sunil', N'Geeta', 10, N'India', N'UP', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (2, N'Shyam', N'Raj Kishore', N'Seema', 12, N'India', N'Delhi', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (3, N'Mukesh', N'Sunil', N'Geeta', 10, N'India', N'UP', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (4, N'Ravish', N'Rak Kumar', N'Sonia', 20, N'India', N'UP', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (5, N'Sonam', N'Sunil', N'Geeta', 23, N'India', N'UP', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (6, N'Anoop', N'Rohan', N'Arti', 12, N'India', N'Panjab', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (7, N'Vipin', N'Sonu', N'Mona', 21, N'India', N'Haryana', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (8, N'Ananad', N'Sunil', N'Sona', 12, N'India', N'Bihar', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (9, N'Rahul', N'Suresh', N'Dona', 21, N'India', N'UK', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (10, N'Ravi', N'Praksh', N'Geeta', 11, N'India', N'Mumbai', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (11, N'Shyam', N'Raj Kishore', N'Seema', 12, N'India', N'Delhi', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (12, N'Mukesh', N'Sunil', N'Geeta', 10, N'India', N'UP', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (13, N'Ravish', N'Rak Kumar', N'Sonia', 20, N'India', N'UP', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (14, N'Sonam', N'Sunil', N'Geeta', 23, N'India', N'UP', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (15, N'Anoop', N'Rohan', N'Arti', 12, N'India', N'Panjab', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (16, N'Vipin', N'Sonu', N'Mona', 21, N'India', N'Haryana', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (17, N'Ananad', N'Sunil', N'Sona', 12, N'India', N'Bihar', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (18, N'Rahul', N'Suresh', N'Dona', 21, N'India', N'UK', N'Indian')
GO
INSERT [dbo].[stdinfo] ([id], [name], [fathername], [mothername], [age], [country], [state], [nationality]) VALUES (19, N'Ravi', N'Praksh', N'Geeta', 11, N'India', N'Mumbai', N'Indian')
GO
SET IDENTITY_INSERT [dbo].[stdinfo] OFF
GO
Let's do it with practically.
Open Visual Studio go to
File->New->Project with name "mvcpaging"
Click on OK button.
After opening the project,
go to Solution Explorer and right click on References. Click on Manage NuGet
Packages and type PagedList.mvc in the top right corner for search.
Click on Install button.
Now, it is installing.
After installation it, the page will look like the following.
Close this window. Now,
you can see that PagedList.mvc is installed in our project. We add its
reference in our controller show, as shown below.
Add a student.cs class in
Models folder.
Without using
PagedList.mvc my controller code.
[HttpGet]
public ActionResult Index(int? page)
{
BL buisnessLogic = new BL();
student objStudent = new student();
List<student> objStudentList = new List<student>();
objStudentList = buisnessLogic.studentListBind();
objStudent.std = objStudentList;
return View(objStudent);
}
Simple output without paging
will look like:
After successfully adding
the references and creating student.cs class, we will write the Controller
code, as shown below.
Business logic
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
namespace mvcpaging.Models
{
public class BL
{
SqlHelper sql1 = new SqlHelper();
public List<student> studentListBind() {
DataTable dt = new DataTable();
SqlParameter[] GetBalance_Parm = new SqlParameter[]
{
};
DataSet _DS = SqlHelper.GetDataSet(SqlHelper.mainConnectionString, CommandType.StoredProcedure, "[GetStdInfo]", GetBalance_Parm);
List<student> lst = new List<student>();
if (_DS.Tables[0].Rows.Count > 0)
{
foreach (DataRow item in _DS.Tables[0].Rows)
{
lst.Add(new student
{
Id=Convert.ToInt32(item["id"]),
Name =Convert.ToString(item["name"]),
Fathername = Convert.ToString(item["fathername"]),
Mothername = Convert.ToString(item["mothername"]),
Age = Convert.ToInt32(item["age"]),
Country = Convert.ToString(item["country"]),
State = Convert.ToString(item["state"]),
Nationality = Convert.ToString(item["nationality"])
});
}
}
return lst;
}
}
}
Add View.
@using PagedList.Mvc
@model PagedList.IPagedList<mvcpaging.Models.student>
@{
ViewBag.Title = "Student Details";
}
<style>
.ul.pagination
{
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{
display: inline;
}
ul.pagination li a
{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
ul.pagination li a.active
{
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active)
{
background-color: #ddd;
}
</style>
@using (Html.BeginForm())
{
<center>
<h2>Student Details</h2>
<div style="border:1px solid red; margin-left:25%; margin-right:20%">
<table style="width:100%" border="1">
<tr>
<th style="width:10%; text-align:left"> @Html.Label("Student ID")</th>
<th style="width:10%; text-align:left">@Html.Label("Name")</th>
<th style="width:15%; text-align:left">@Html.Label("Father Name")</th>
<th style="width:15%; text-align:left">@Html.Label("Mother Name")</th>
<th style="width:5%; text-align:left">@Html.Label("Age")</th>
<th style="width:15%; text-align:left">@Html.Label("Country")</th>
<th style="width:15%; text-align:left">@Html.Label("State" )</th>
<th style="width:15%; text-align:left">@Html.Label("Nationality")</th>
</tr>
@for (int i = 0; i < Model.Count; i++)
{
<tr style="border:1px solid red">
<td>@Model[i].Id</td>
<td>@Model[i].Name</td>
<td>@Model[i].Fathername</td>
<td>@Model[i].Mothername</td>
<td>@Model[i].Age</td>
<td>@Model[i].Country</td>
<td>@Model[i].State</td>
<td>@Model[i].Nationality</td>
</tr>
}
</table>
</div>
</center>
<div id="container" style="margin-left: 20px">
<p></p>
<p></p>
<div class="pagination" style="margin-left: 400px">
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
of @Model.PageCount   @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
</div>
</div>
}
After executing this
application, the default first page (1) will open. Every page contains 5
records and the total number of records is 19 in the database.
After click on 2nd page
records will be show of 2nd page.
Conclusion: In this article, we
learned how to use paging in ASP.NET MVC 4.0, using PagedList . In the next
article, we will learn how to use paging with sorting in ASP.NET MVC 4.0, using
PagedList.
Leave a Comment