ASP.NET 核心MVC分頁綁定

Question

我想在 ASP.NET Core MVC 中向我的表添加分頁。

問題：如何將TotalRecords 、 PageNo和PageSize從 controller 鏈接到視圖？ 在 Razor 頁面中綁定它們很簡單，但我不知道如何在 MVC 中執行此操作。

TotalRecords = Query.AsQueryable().Count(); 
PageNo = p; 
PageSize = s;  

Controller：

    // Display Data
    public async Task<IActionResult> DisplayData(int p = 1, int s = 20)
    {
        try
        {
            IQueryable<MyModel> query = await _services.GetData();

            // Add Paging
            query = await AddPaging(p, s, query);

            // Display Data
            List<MyModel> myData = await query.AsNoTracking().ToListAsync();
            
            return View(myData);   // return view with data 
        }
        catch
        {
            return View();     // return empty view
        } 
    }

    // add paging
    private async Task<IQueryable<MyModel>> AddPaging(int p, int s, IQueryable<MyModel> Query)
    {
        TotalRecords = Query.AsQueryable().Count(); 
        PageNo = p; 
        PageSize = s;  
        Query = Query.Skip((p - 1) * s).Take(s);
        return Query;
    }    // end of paging

看法：

@model List<MyModel>
<table>
  ....
</table>

<paging total-records="Model.TotalRecords"
    page-no="Model.PageNo"
    show-prev-next="false"
    show-first-last="false">
</paging>

Answer 1

我建議用 OOP 標准來解決這個問題。

首先制作一個 class 來進行分頁。

例子：

    public class Paginate<T>
    {
        public Paginate(List<T> datas, int currentPage, int totalPage)
        {
            Datas = datas;
            CurrentPage = currentPage;
            TotalPage = totalPage;

        }
        public List<T> Datas { get; set; }
        public int CurrentPage { get; set; }
        public int TotalPage { get; set; }
        public bool HasPrev
        {
            get
            {
                return CurrentPage > 1;
            }
        }
        public bool HasNext
        {
            get
            {
                return CurrentPage < TotalPage;
            }
        }

    }

然后通過這個class發送數據查看。

        public async Task<IActionResult> Index(int page = 1, int take = 5)
        {
            var datas = await _context.Datas
                .Skip((page - 1) * take)
                .Take(take)
                .AsNoTracking()                    
                .ToListAsync();
            
        int dataCount = await _context.Datas.CountAsync();
        int initCount = (int)Math.Ceiling((decimal)count / take);

            Paginate<Categories> result = new Paginate<Datas>(datas , page, initCount );

            return View(result);
        }

最后一步是將初始數據從視圖發送到 controller。

首先，您的視圖將從分頁 class 中獲取數據。

@model Paginate<List<MyModel>>

然后你的分頁組件會發送數據到 controller：

             <ul>
                <li class="@(Model.HasPrev?"":"disabled")">
                    <a asp-action="Index" asp-route-page="@(Model.CurrentPage-1)">Previous</a>
                </li>
                @for (int i = 1; i <= Model.TotalPage; i++)
                {
                    <li class="@(i==Model.CurrentPage ? "disabled":"")">
                        <a asp-action="Index" asp-route-page="@i">@i</a>
                    </li>
                }


                <li class="@(Model.HasNext?"":"disabled")">
                    <a asp-action="Index" asp-route-page="@(Model.CurrentPage+1)">Next</a>
                </li>
            </ul>

如果您分析所有代碼，我認為它會很有用。 或者您可以采用業務邏輯並將其應用於DisplayData和AddPaging方法。