BootstrapBlazor 組件庫使用體驗---Table篇
原文地址：http://www.rzrgm.cn/ysmc/p/13323242.html
Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架：
- 使用 C# 代替 JavaScript 來創建豐富的交互式 UI（不能完全替代，現階段還是離不開JavaScript，只是減少使用）。
- 共享使用 .NET 編寫的服務器端和客戶端應用邏輯。
- 將 UI 呈現為 HTML 和 CSS，已支持眾多瀏覽器，其中包括移動瀏覽器。
本文將使用基于Blazor的開源Blazor UI 組件庫BootstrapBlazor，該組件庫項目在Gitee上開源，傳送門；
項目演示（及文檔）地址：Bootstrap Blazor 演示網站。
更新記錄
2020.08.07
1、使用Table組件頁面代碼再一次精簡，高級搜索若無自定義，組件將嘗試進行生成，只需在列信息綁定時通過設置 Searchable 屬性即可開啟該功能；
2、完善全局搜索功能與排序功能；
2020.08.11
1、新增權限驗證，訪問無權限頁面跳轉至“提示頁面”；
2、新增賬號admin、user，admin為管理員，user為普通用戶；
2020.08.14
1、集成BootstrapAdmin項目（傳送門）作為后臺管理系統，主要管理用戶權限；
2020.11.19
1、項目升級至 .NET 5；
廢話不多說，直接開始；
項目演示地址（該Demo實現的功能不多，將會持續更新，增加新功能）：菜Dog之家
用戶名：user、admin，密碼：123789
登錄界面
首頁
首頁中的table使用的就是BootstrapBlazor中的Table組件，該組件包含：
-
工具欄，可自定義
-
全局搜索與高級搜索
-
分頁功能
-
自動根據字段類型生成過濾功能
過濾條件同樣是根據屬性的類型去生成對應的數據組件，如我添加一個Datetime類型的屬性
-
自動生成新建、編輯模態框
Table組件會根據你的Model，嘗試生成數據編輯窗口，并且根據屬性類型生成對應的數據組件
-
雙擊行打開編輯模態框
-
代碼量少，非常精簡
2020.08.07，使用Table組件頁面代碼再一次精簡，高級搜索若無自定義，組件將嘗試進行生成，只需在列信息綁定時通過設置
Searchable屬性即可開啟該功能以下就是該Table頁面的全部代碼，囊括了以上6點的所有功能，你只需關注與數據的獲取即可
1 <Table TItem="BlazorApp.DataAccess.Models.Navigations" 2 PageItemsSource="@PageItemsSource" 3 IsMultipleSelect="true" IsPagination="true" IsStriped="true" IsBordered="true" 4 ShowToolbar="true" ShowSearch="true" ShowCheckboxText="true" ShowExtendButtons="true" 5 AddModalTitle="增加測試數據窗口" EditModalTitle="編輯測試數據窗口" 6 SearchModel="@SearchModel" 7 OnQueryAsync="@OnQueryAsync" OnResetSearchAsync="@OnResetSearchAsync" 8 OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"> 9 <TableColumns> 10 <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ID" /> 11 <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ParentId" /> 12 <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Order" /> 13 <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Name" /> 14 <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Url" /> 15 <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Icon" /> 16 <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Application" /> 17 <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.CreationTime" /> 18 </TableColumns> 19 </Table>
......文筆有限，慢慢補上
Bootstrap of Blazor
本文來自博客園，作者：一事冇誠，轉載請注明原文鏈接：http://www.rzrgm.cn/ysmc/p/13323242.html
浙公網安備 33010602011771號