在ASP.NET MVC中,分頁控件通常是通過使用Kendo UI、Telerik UI或其他第三方庫來實現的。這些庫提供了豐富的分頁功能和樣式,可以方便地集成到項目中。下面是一個使用Kendo UI分頁控件的簡單示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
</head>
<body>
@RenderBody()
</body>
</html>
@model IEnumerable<SampleMvcApplication.Models.Product>
@{
ViewBag.Title = "產品列表";
}
<h2>產品列表</h2>
<table>
<thead>
<tr>
<th>名稱</th>
<th>價格</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.Price.ToString("C")</td>
</tr>
}
</tbody>
</table>
<div id="pagination"></div>
@section Scripts {
<script>
$(document).ready(function () {
$("#pagination").kendoPagination({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 10,
serverPaging: true,
serverSorting: true
},
pageable: true
});
});
</script>
}
在這個示例中,我們使用了Kendo UI的分頁控件來顯示一個產品列表。dataSource配置了數據源,包括數據類型、讀取地址、每頁顯示的記錄數以及是否啟用服務器分頁和排序。pageable屬性設置為true以啟用分頁功能。
注意:在實際項目中,你可能需要根據實際需求調整數據源的配置和分頁邏輯。