本示例是AntDesign Blazor的入門示例,在學習的同時分享出來,以供新手參考。
示例程式碼倉庫:https://gitee.com/known/BlazorDemo
1. 學習目標
- 分頁查詢框架
- 天氣資料分頁功能
- 表格自定義分頁
2. 建立分頁查詢框架
Table
元件分頁預設為前端分頁,即所有資料一次性載入到前端進行分頁;在實際專案中,大多數都是後端分頁,即根據前端提供的分頁引數只查詢一頁資料返回給前端顯示。下面我們搭建一個簡易的分頁查詢框架:
1)新增新類庫專案,命名為BlazorDemoCore
,為什麼要新建類庫專案?
- 一是查詢框架是通用的,所有專案都可以使用
- 二是將框架封裝在類庫中,便於其他專案引用
- 三是框架程式碼與專案程式碼隔離,避免被篡改
2)查詢條件類
在類庫BlazorDemoCore
中新增查詢條件類PagingCriteria
,該類用於前端封裝查詢條件引數傳遞給後端,後端根據該類資訊從資料庫中查詢分頁資料給前端顯示。
3)查詢結果類
在類庫BlazorDemoCore
中新增查詢結果類PagingResult
,該類用於後端將查詢結果封裝起來傳遞給前端,前端根據該類資訊分頁顯示。該類提供泛型,泛型型別為每條資料的型別。
3. 修改天氣資料後端查詢
1)首先在AntDesignDemo
專案中引用框架專案BlazorDemoCore
,右擊專案新增專案引用,引用後專案檔案內容如下:
2)雙擊WeatherService
類檔案,修改天氣資料查詢方法,方法引數改成查詢條件,返回值改成查詢結果。
4. 修改天氣資料前端分頁功能
1)雙擊_Imports.razor
檔案新增框架名稱空間。
2)雙擊Weather.razor
檔案,刪除如下幾行程式碼。
3)修改Table
元件屬性,繫結分頁引數和查詢結果,新增分頁事件OnChange
的同時必須新增TItem
屬性。
4)新增表格分頁查詢事件,將頁碼和每頁大小賦給查詢條件,修改查詢方法和預設查詢條件。
5)修改完成,點選執行按鈕檢視執行效果。
5. 表格分頁自定義樣式
Table
元件分頁預設顯示在左下角,下面介紹如何顯示在有下角,並且顯示總條數,改變每頁大小和快速跳轉某頁。
1)顯示在右下角,在Table
元件上新增屬性PaginationPosition="bottomRight"
即可,執行效果如下
2)若要顯示總條數及切換每頁大小和快速跳轉,則要隱藏預設分頁,使用分頁模板來實現。
- 將
PropertyColumn
移到ChildContent
中 - 新增
PaginationTemplate
,在其內部新增Pagination
元件 - 顯示總條數,新增
ShowTotal
屬性 - 顯示切換每頁大小,新增
ShowSizeChanger
屬性 - 顯示快速跳轉頁碼,新增
ShowQuickJumper
屬性
3)修改完成,點選執行按鈕檢視執行效果。