BootstrapBlazor 組件庫使用體驗---Table篇

原文地址：https://www.cnblogs.com/ysmc/p/13323242.html

　　Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架：

1. 使用 C# 代替 JavaScript 來創建豐富的交互式 UI（不能完全替代，現階段還是離不開JavaScript，只是減少使用）。
2. 共享使用 .NET 編寫的服務器端和客戶端應用邏輯。
3. 將 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組件，該組件包含：

1. 工具欄，可自定義

   

    

2. 全局搜索與高級搜索

    
   
   
   

3. 分頁功能

   

4. 自動根據字段類型生成過濾功能

   過濾條件同樣是根據屬性的類型去生成對應的數據組件，如我添加一個Datetime類型的屬性

   
   

     

5. 自動生成新建、編輯模態框

   Table組件會根據你的Model，嘗試生成數據編輯窗口，並且根據屬性類型生成對應的數據組件

   
   

     

6. 雙擊行打開編輯模態框

7. 代碼量少，非常精簡

   2020.08.07，使用Table組件頁面代碼再一次精簡，高級搜索若無自定義，組件將嘗試進行生成，只需在列信息綁定時通過設置 Searchable 屬性即可開啟該功能以下就是該Table頁面的全部代碼，囊括了以上6點的所有功能，你只需關注與數據的獲取即可

　　

<Table TItem="BlazorApp.DataAccess.Models.Navigations"
       PageItemsSource="@PageItemsSource"
       IsMultipleSelect="true" IsPagination="true" IsStriped="true" IsBordered="true"
       ShowToolbar="true" ShowSearch="true" ShowCheckboxText="true" ShowExtendButtons="true"
       AddModalTitle="增加測試數據窗口" EditModalTitle="編輯測試數據窗口"
       SearchModel="@SearchModel"
       OnQueryAsync="@OnQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
       OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
    <TableColumns>
        <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ID" />
        <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ParentId" />
        <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Order" />
        <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Name" />
        <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Url" />
        <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Icon" />
        <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Application" />
        <TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.CreationTime" />
    </TableColumns>
</Table>

 

......文筆有限，慢慢補上

Bootstrap of Blazor