Blazor第7天_Blazor自訂元件實作

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

- 4月 29, 2022

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

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;
        }
    }
}

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

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 類別中做資料存取的呼叫

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);
}

外部使用

<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();
}

效果

搜尋此網誌

第25個冬天

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

留言

張貼留言

這個網誌中的熱門文章

經得起原始碼資安弱點掃描的程式設計習慣培養(五)_Missing HSTS Header

經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題