溫馨提示×

如何自定義asp.net mvc分頁控件

小樊
103
2024-12-13 18:06:30
欄目: 編程語言

要自定義ASP.NET MVC分頁控件,請按照以下步驟操作:

  1. 創建一個自定義分頁視圖模型(CustomPaginationViewModel):

首先,創建一個新的視圖模型類,該類將包含分頁所需的所有屬性和方法。例如:

public class CustomPaginationViewModel
{
    public int CurrentPage { get; set; }
    public int TotalPages { get; set; }
    public int ItemsPerPage { get; set; }
    public int TotalItems { get; set; }
    public string PaginationUrl { get; set; }

    public CustomPaginationViewModel(int currentPage, int totalPages, int itemsPerPage, int totalItems)
    {
        CurrentPage = currentPage;
        TotalPages = totalPages;
        ItemsPerPage = itemsPerPage;
        TotalItems = totalItems;
        PaginationUrl = Url.Action("Index", "Home", new { page = currentPage });
    }

    public IEnumerable<SelectListItem> PageNumbers()
    {
        var pageNumbers = Enumerable.Range(1, TotalPages).ToList();
        return pageNumbers.Select(number => new SelectListItem
        {
            Value = number.ToString(),
            Text = number.ToString()
        });
    }
}
  1. 創建一個自定義分頁視圖(CustomPaginationView):

接下來,創建一個新的視圖,該視圖將用于顯示分頁控件。例如,在Views/Shared文件夾下創建一個名為_CustomPagination.cshtml的文件,并添加以下代碼:

@model CustomPaginationViewModel

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item @(Model.CurrentPage == 1 ? "disabled" : "")">
            <a class="page-link" href="@Model.PaginationUrl" aria-label="Previous">@Html.IconFor("ArrowLeft")</a>
        </li>

        @foreach (var pageNumber in Model.PageNumbers())
        {
            <li class="page-item @(Model.CurrentPage == pageNumber.Value ? "active" : "")">
                <a class="page-link" href="@Model.PaginationUrl?page=@pageNumber.Value">@pageNumber.Text</a>
            </li>
        }

        <li class="page-item @(Model.CurrentPage == Model.TotalPages ? "disabled" : "")">
            <a class="page-link" href="@Model.PaginationUrl?page=@(Model.CurrentPage + 1)" aria-label="Next">@Html.IconFor("ArrowRight")</a>
        </li>
    </ul>
</nav>
  1. 在控制器中使用自定義分頁視圖模型:

現在,您可以在控制器中使用自定義分頁視圖模型來處理分頁邏輯。例如,在HomeController中:

public ActionResult Index(int page = 1, int itemsPerPage = 10)
{
    var totalItems = // 獲取總項目數
    var totalPages = (int)Math.Ceiling((double)totalItems / itemsPerPage);

    var customPaginationViewModel = new CustomPaginationViewModel(page, totalPages, itemsPerPage, totalItems);

    var items = // 獲取當前頁的項目列表

    return View(new { items, customPaginationViewModel });
}
  1. 在視圖中使用自定義分頁視圖:

最后,在視圖中使用自定義分頁視圖來顯示分頁控件。例如,在Index.cshtml中:

@model YourNamespace.ViewModels.CustomPaginationViewModel

@Html.Partial("_CustomPagination", Model)

<!-- 顯示項目列表 -->

現在,您已經成功創建了一個自定義的ASP.NET MVC分頁控件。您可以根據需要進一步自定義該控件的外觀和行為。

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