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点的所有功能，你只需关注与数据的获取即可

　　

 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