Dear Readers, I going to explain how to apply paging in data
of mvc application which is in grid form.
Step 1: First of
all create a MVC project and Add references – PagedList and PagedList.Mvc.
You can use NuGet Package Manager from Visual Studio Application or you can
install it by using instructions given in https://www.nuget.org/packages/PagedList.Mvc/
Add namespace, using PagedList; in controller where that
Action Method is available which is showing the data.
For example –
[HttpGet]
public ActionResult CountryData(int ? page ) //
{
DAL b1 = new DAL();
List<countryListModel> li = new List<countryListModel>();
DataTable dt = b1.GetCountry();
foreach(DataRow dr in dt.Rows)
{
countryListModel cm = new countryListModel()
{
CountryID = Convert.ToInt32(dr["CountryID"]),
Name = dr["Name"].ToString(),
Region = dr["Region"].ToString()
};
li.Add(cm);
}
return View(li.ToPagedList(page ?? 1, 2));
}
Description:
Ø
DAL is
a class where data fetching methods
are defined, i.e. GetCountry() method.
Code of GetCountry() method –
public DataTable
GetCountry ()
{
SqlConnection con = new SqlConnection("Data Source=PCName;Initial
Catalog=databaseName;Integrated Security=True");
SqlDataAdapter da = new SqlDataAdapter("select * from
CountryList",
con);
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
Ø
CountryData(int ? page ) : Here current number of Page is passed in variable page.
Ø
countryListModel
: It is class where the properties are defined.
Code of countryListModel
class
public class countryListModel
{
public int CountryID { get; set; }
public string Name { get; set; }
public string Region { get; set; }
}
Ø
(li.ToPagedList(page ?? 1, 2)) : In this, 1 is displayed page
number and 2 is Total number of records in a list. You can change it as per your need.
Step 2: Create
View of this Action Method with template List and Model countryListModel.
Step 3: Add
following namespaces in the view at top-
@using
PagedList;
@using
PagedList.Mvc;
@model IPagedList<MVC18042016.Models.countryListModel>
Now add the below code in view where you want show paging-
<div>
@Html.PagedListPager(Model,
page => Url.Action("CountryData",
new { page = page }),
new PagedListRenderOptions()
{
LinkToFirstPageFormat = "<<",
LinkToPreviousPageFormat = "prev",
LinkToNextPageFormat = "next",
LinkToLastPageFormat = ">>",
Display = PagedListDisplayMode.IfNeeded,
DisplayPageCountAndCurrentLocation
= true,
DisplayEllipsesWhenNotShowingAllPageNumbers = true
})
</div>
Step 4: Add css file in the Content folder if not
present (File Name is PagedList.css). The code of css file
is given as –
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination > li {
display: inline;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.428571429;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
background-color: #eeeeee;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 2;
color: #ffffff;
cursor: default;
background-color: #F043E8;
border-color: #428bca;
}
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: #999999;
cursor: not-allowed;
background-color: #ffffff;
border-color: #dddddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
padding: 10px 16px;
font-size: 18px;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
padding: 5px 10px;
font-size: 12px;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
.pager:before,
.pager:after {
display: table;
content: " ";
}
.pager:after {
clear: both;
}
.pager:before,
.pager:after {
display: table;
content: " ";
}
.pager:after {
clear: both;
}
.pager li {
display: inline;
}
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
color: #999999;
cursor: not-allowed;
background-color: #ffffff;
}
Step 5: Table Structure snap shot is
Step 6: Fill records in the table more than 5.
Step 7: Build the Project and Run the action.
Note: Dear reader, I have shown here this code in
a single view. But it’s a good approach to create in a partial view and call in
the required view.
Happy Coding.
Rudra Pratap Singh
Software
Engineer
singhrudrapratap29[at]gmail[dot]com
No comments:
Post a Comment