原文地址：https://www.cnblogs.com/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專案（傳送門）作為后臺管理系統，主要管理用戶權限；

廢話不多說，直接開始；

　　專案演示地址（該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>