本示例是AntDesign Blazor的入門示例，在學(xué)習(xí)的同時(shí)分享出來，以供新手參考。

示例代碼倉庫：https://gitee.com/known/BlazorDemo

1. 學(xué)習(xí)目標(biāo)

• 分頁查詢框架
• 天氣數(shù)據(jù)分頁功能
• 表格自定義分頁

2. 創(chuàng)建分頁查詢框架

Table組件分頁默認(rèn)為前端分頁，即所有數(shù)據(jù)一次性加載到前端進(jìn)行分頁；在實(shí)際項(xiàng)目中，大多數(shù)都是后端分頁，即根據(jù)前端提供的分頁參數(shù)只查詢一頁數(shù)據(jù)返回給前端顯示。下面我們搭建一個(gè)簡易的分頁查詢框架：

1）添加新類庫項(xiàng)目，命名為BlazorDemoCore，為什么要新建類庫項(xiàng)目？

• 一是查詢框架是通用的，所有項(xiàng)目都可以使用
• 二是將框架封裝在類庫中，便于其他項(xiàng)目引用
• 三是框架代碼與項(xiàng)目代碼隔離，避免被篡改

image.png

2）查詢條件類

在類庫BlazorDemoCore中添加查詢條件類PagingCriteria，該類用于前端封裝查詢條件參數(shù)傳遞給后端，后端根據(jù)該類信息從數(shù)據(jù)庫中查詢分頁數(shù)據(jù)給前端顯示。

image.png

3）查詢結(jié)果類

在類庫BlazorDemoCore中添加查詢結(jié)果類PagingResult，該類用于后端將查詢結(jié)果封裝起來傳遞給前端，前端根據(jù)該類信息分頁顯示。該類提供泛型，泛型類型為每條數(shù)據(jù)的類型。

image.png

3. 修改天氣數(shù)據(jù)后端查詢

1）首先在AntDesignDemo項(xiàng)目中引用框架項(xiàng)目BlazorDemoCore，右擊項(xiàng)目添加項(xiàng)目引用，引用后項(xiàng)目文件內(nèi)容如下：

image.png

2）雙擊WeatherService類文件，修改天氣數(shù)據(jù)查詢方法，方法參數(shù)改成查詢條件，返回值改成查詢結(jié)果。

image.png

4. 修改天氣數(shù)據(jù)前端分頁功能

1）雙擊_Imports.razor文件添加框架命名空間。

image.png

2）雙擊Weather.razor文件，刪除如下幾行代碼。

image.png

3）修改Table組件屬性，綁定分頁參數(shù)和查詢結(jié)果，添加分頁事件OnChange的同時(shí)必須添加TItem屬性。

image.png

4）添加表格分頁查詢事件，將頁碼和每頁大小賦給查詢條件，修改查詢方法和默認(rèn)查詢條件。

image.png

5）修改完成，點(diǎn)擊運(yùn)行按鈕查看運(yùn)行效果。

image.png

5. 表格分頁自定義樣式

Table組件分頁默認(rèn)顯示在左下角，下面介紹如何顯示在有下角，并且顯示總條數(shù)，改變每頁大小和快速跳轉(zhuǎn)某頁。

1）顯示在右下角，在Table組件上添加屬性PaginationPosition="bottomRight"即可，運(yùn)行效果如下

image.png

2）若要顯示總條數(shù)及切換每頁大小和快速跳轉(zhuǎn)，則要隱藏默認(rèn)分頁，使用分頁模板來實(shí)現(xiàn)。

• 將PropertyColumn移到ChildContent中
• 添加PaginationTemplate，在其內(nèi)部添加Pagination組件
• 顯示總條數(shù)，添加ShowTotal屬性
• 顯示切換每頁大小，添加ShowSizeChanger屬性
• 顯示快速跳轉(zhuǎn)頁碼，添加ShowQuickJumper屬性

image.png

3）修改完成，點(diǎn)擊運(yùn)行按鈕查看運(yùn)行效果。

image.png

6. 視頻

https://www.bilibili.com/video/BV19b4y157bk/