Blazor第7天_Blazor自訂元件實作_共用分頁元件

 

用來儲存每一頁要顯示特定筆數分頁結果的資料結構

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

using System; using System.Collections.Generic; using System.Text; namespace Common.Pagination { /// <summary> /// TODO:分頁機制:Add by Samuel 用來儲存每一頁要顯示特定筆數分頁結果的資料結構 /// </summary> /// <typeparam name="T"></typeparam> public struct PagingResult<T> { public IEnumerable<T> Records { get; set; } public int TotalRecords { get; set; } public PagingResult(IEnumerable<T> items, int totalRecords) { Records = items; TotalRecords = totalRecords; } } }

儲存下面分頁元件的資料結構

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

using System; using System.Collections.Generic; using System.Text; namespace Common.Pagination { /// <summary> /// TODO:分頁機制:Add by Samuel 用來儲存下面分頁元件的資料結構 /// </summary> public class PagerBase { /// <summary> /// 使用分頁的網址 /// </summary> public string Url { get; set; } /// <summary> /// 總共建立了多少頁：記錄總數 / 10 （顯示在一頁上） /// </summary> public int PageCount { get; set; } = 5; /// <summary> /// 記錄計數：指定當前表中的記錄數 /// </summary> public int RecordCount { get; set; } = 50; /// <summary> /// 頁面大小：確定要在頁面上顯示的記錄數 /// </summary> public int PageSize { get; set; } = 10; /// <summary> /// 頁索引：目前顯示的頁碼的索引（頁碼 - 1） /// </summary> public int PageIndex { get; set; } = 0; /// <summary> /// 頁碼：目前顯示 頁碼：頁碼 1，頁 2,... /// </summary> public int PageNumber { get; set; } = 1; /// <summary> /// 顯示多少個頁面按鈕？ /// </summary> public int PagerButtonCount { get; set; } = 3; #region 搜索與資料列表相關的欄位屬性 /// <summary> /// 如果是預設清單，則為 false，如果搜尋結果的分頁清單為 true /// </summary> public bool SearchMode { get; set; } = false; /// <summary> /// 要查找的欄位名稱(標題) /// </summary> public string SearchField { get; set; } = ""; /// <summary> /// 要查找的內容 /// </summary> public string SearchQuery { get; set; } = ""; #endregion } }

再來第三步驟就要自己去撰寫設定了

自訂Model類別回填PagingResult，會回傳自訂Model列表與總筆數for分頁機制計算依據。

由於設計上採用泛型因此不會侷限特定某個Model Class。

通常該方法可能寫在某支Service 類別中做資料存取的呼叫

1 2 3 4 5 6 7 8 9

public PagingResult<自訂Model類別> GetXXXModel_ByPaging(..其他filter參數.., int pageIndex, int pageSize) { var query = ..你的ef core linq 查詢語句.. var TotalRecords = query.Count(); var 自訂Model類別s = query.Skip(pageIndex * pageSize) .Take(pageSize).ToList(); return new PagingResult<自訂Model類別>(自訂Model類別s, TotalRecords); }

外部使用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<div class="col-md-12"> <PagerComponent Model="pager" PageIndexChanged="PageIndexChanged"></PagerComponent> </div> List<自訂Model類別> 自訂Model類別s; private PagerBase pager = new PagerBase() { PageNumber = 1, PageIndex = 0, PageSize = 2, PagerButtonCount = 2 }; void GetPagingData() { PagingResult<自訂Model類別> pagingData = XXXService.GetXXXModel_ByPaging(..其他filter參數.., pager.PageIndex, pager.PageSize); pager.RecordCount = pagingData.TotalRecords; 自訂Model類別s = pagingData.Records.ToList(); } private async void PageIndexChanged(int pageIndex) { pager.PageIndex = pageIndex; pager.PageNumber = pageIndex + 1; GetPagingData(); StateHasChanged(); }

效果