asp.net core Razor Page 分頁

1.使用Nuget下載LazZiya.TagHelpers

2._ViewImports.cshtml中添加

@addTagHelper *, LazZiya.TagHelpers

3.前臺頁面使用

 <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>
                            商品名
                        </th>
                        <th>
                            價格
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.RakutenGoodsRankingList)
                    {
                        <tr>
                            <td>  @item.GoodsName</td>
                            <td>  @item.GoodsPrice</td>
                        </tr>
                    }
                </tbody>
                <tfoot>
                </tfoot>
            </table>
            <nav>
                <paging class="pagination" page-no="Model.PageNo"
                        page-size="Model.PageSize"
                        total-records="Model.TotalRecords"
                        render-mode="Bootstrap5">
                </paging>
            </nav>
render-mode的參數說明:
  Classic :regular dropdown list
  Bootstrap :HTML5 div with Bootstrap 4 support
  FormControl :Render as form control
  Bootstrap5 :HTML5 div with Bootstrap 5 support
注意,
1.官方提供的參數不是很全,可能很久沒更新了。
2.部分參數如果不清楚屬性的話,可以自行看源碼。
例如render-mode,在源碼中,其實是需要搜索rendermode關鍵詞,也就是去掉橫線的詞。

4.後臺頁面使用

    public List<RakutenGoodsRanking> RakutenGoodsRankingList { get; set; }   
    public int PageNo { get; set; }
        public int PageSize { get; set; }
        public int TotalRecords { get; set; }
    public void OnGet(int p = 1, int s = 3)
        { 
            RakutenGoodsRankingList = _memberTrackManageContext.RakutenGoodsRankings.Where(r => r.DataTypeName == "CD").OrderByDescending(r => r.DeliveryDate).Skip((p - 1) * s).Take(s).ToList();
           
            PageSize = s;
            TotalRecords = _memberTrackManageContext.RakutenGoodsRankings.Where(r => r.DataTypeName == "CD").Count();
            PageNo = p;
        }

5.效果如圖

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章