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

posted @ 2020-07-16 16:18  一事冇诚  阅读(5029)  评论(2编辑  收藏  举报