溫馨提示×

分頁控件在asp.net mvc中的使用

小樊
104
2024-12-13 18:04:29
欄目: 編程語言

在ASP.NET MVC中,分頁控件通常是通過使用Kendo UI、Telerik UI或其他第三方庫來實現的。這些庫提供了豐富的分頁功能和樣式,可以方便地集成到項目中。下面是一個使用Kendo UI分頁控件的簡單示例:

  1. 首先,確保已經在項目中引入了Kendo UI的引用。在_Layout.cshtml文件中添加以下代碼:
<!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>
  1. 在需要顯示分頁控件的視圖文件中,添加以下代碼:
@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以啟用分頁功能。

注意:在實際項目中,你可能需要根據實際需求調整數據源的配置和分頁邏輯。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女