Để tích hợp chức năng phân trang vào ứng dụng ASP.NET MVC của bạn, hãy thêm thư viện mvcpager.dll vào dự án. Dưới đây là hướng dẫn chi tiết về cách cấu hình cả phần giao diện và phần logic xử lý.
Cấu hình giao diện người dùng (View)
Phần này tập trung vào việc hiển thị dữ liệu đã được phân trang và tạo các điều khiển điều hướng trang.
@{
Layout = null; // Sử dụng layout tùy chỉnh hoặc không sử dụng layout
}
@using Webdiyer.WebControls.Mvc // Namespace cần thiết để sử dụng MvcPager
@model PagedList<string> // Kiểu dữ liệu Model đại diện cho danh sách được phân trang
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Danh sách sản phẩm</title>
<!-- Liên kết tới tệp CSS tùy chỉnh cho chức năng phân trang -->
<link href="~/Content/css_pager.css" rel="stylesheet" />
</head>
<body>
<div>
@foreach (var item in Model)
{
@item <br /> // Hiển thị từng mục dữ liệu
}
</div>
<!-- Tích hợp bộ điều khiển phân trang của MvcPager -->
<div style="text-align:center;">
@Html.Pager(Model, new PagerOptions
{
PageIndexParameterName = "trang", // Tên tham số cho chỉ số trang trong URL
ContainerTagName = "ul", // Thẻ HTML bao quanh danh sách các trang
PrevPageText = "Trước", // Văn bản cho nút trang trước
NextPageText = "Sau", // Văn bản cho nút trang tiếp theo
FirstPageText = "Đầu", // Văn bản cho nút trang đầu
LastPageText = "Cuối", // Văn bản cho nút trang cuối
CssClass = "pagination", // Lớp CSS để áp dụng kiểu dáng Bootstrap (hoặc 'pager')
PagerItemsSeperator = "", // Dấu phân cách giữa các mục phân trang (không dùng)
CurrentPagerItemWrapperFormatString = "<li class=\"active\"><a href=\"#\">{0}</a></li>", // Định dạng cho mục trang hiện tại
PagerItemWrapperFormatString = "<li>{0}</li>" // Định dạng cho các mục trang khác
}, new { id = "phanTrangBootstrap", @class = "pagination" })
@* Thuộc tính @class có thể là 'pagination' hoặc 'pager'. Kiểu dáng có thể tùy chỉnh trong tệp CSS. *@
</div>
</body>
</html>
Cấu hình logic xử lý (Controller)
Phần này xử lý việc lấy dữ liệu, phân trang và trả về cho View.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Webdiyer.WebControls.Mvc; // Namespace cần thiết
namespace QuanLyDuAn.Controllers
{
public class SanPhamController : Controller
{
// GET: /SanPham/DanhSach
public ActionResult DanhSach(int trang = 1, int soLuongTrenTrang = 5) // Mặc định trang 1, 5 mục mỗi trang
{
// Tạo một danh sách dữ liệu mẫu
List<string> danhSachDuLieu = new List<string>()
{
"Sản phẩm A",
"Sản phẩm B",
"Sản phẩm C",
"Sản phẩm D",
"Sản phẩm E",
"Sản phẩm F",
"Sản phẩm G",
"Sản phẩm H",
"Sản phẩm I",
"Sản phẩm J"
};
// Sử dụng phương thức mở rộng ToPagedList để phân trang danh sách
return View(danhSachDuLieu.ToPagedList(trang, soLuongTrenTrang));
}
}
}
Tùy chỉnh kiểu dáng CSS
Tệp css_pager.css chứa các định nghĩa kiểu dáng cho hai loại bộ điều khiển phân trang: pagination (theo chuẩn Bootstrap) và pager.
Kiểu dáng cho .pagination (Bootstrap style)
.pagination {
border-radius: 4px;
display: inline-block;
margin: 20px 0;
padding-left: 0;
}
.pagination > li {
display: inline;
}
.pagination > li > a, .pagination > li > span {
background-color: #fff;
border: 1px solid #ddd;
color: #337ab7;
float: left;
line-height: 1.42857;
margin-left: -1px;
padding: 6px 12px;
position: relative;
text-decoration: none;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
margin-left: 0;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
background-color: #eee;
border-color: #ddd;
color: #23527c;
z-index: 3;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
background-color: #337ab7;
border-color: #337ab7;
color: #fff;
cursor: default;
z-index: 2;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
background-color: #fff;
border-color: #ddd;
color: #777;
cursor: not-allowed;
}
Kiểu dáng cho .pager
.pager {
list-style: outside none none;
margin: 20px 0;
padding-left: 0;
text-align: center;
}
.pager li {
display: inline;
}
.pager li > a, .pager li > span {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
display: inline-block;
padding: 5px 14px;
text-decoration: none;
}
.pager li > a:hover, .pager li > a:focus {
background-color: #eee;
text-decoration: none;
}
.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 {
background-color: #fff;
color: #777;
cursor: not-allowed;
}
.pager > .active > a, .pager > .active > span, .pager > .active > a:hover, .pager > .active > span:hover, .pager > .active > a:focus, .pager > .active > span:focus {
background-color: #eee;
cursor: default;
z-index: 2;
}
Bạn có thể tải xuống tệp MvcPager.rar tại đây: Download MvcPager.rar