BootstrapBlazor 组件库使用体验

原文地址：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 演示网站。

废话不多说，直接开始；

　　项目Demo地址（该Demo实现的功能不多，将会持续更新，增加新功能）：菜Dog之家

　　用户名随意，密码：123789

　　登录界面

 

 首页

  

 首页中的table使用的就是BootstrapBlazor中的Table组件，该组件包含：

1. 工具栏，可自定义

   

    

2. 全局搜索与高级搜索

    
   
   
   

3. 分页功能

   

4. 自动根据字段类型生成过滤功能

   

     

5. 自动生成新建、编辑模态框

   

     

6. 双击行打开编辑模态框

7. 代码量少，非常精简

   

    1 "BlazorApp.DataAccess.Models.Navigations" 2        @ref="menu" 3        @*Height="500" *@
    4        IsMultipleSelect="true" 5        IsPagination="true" PageItemsSource="@PageItemsSource" 6        IsStriped="true" IsBordered="true" 7        ShowToolbar="true" ShowSearch="true" ShowCheckbox="true" ShowExtendButtons="true" 8        AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口" 9        SearchModel="@SearchModel"10        OnQueryAsync="@OnQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"11        OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
   12
   13         "int" @bind-Field="@context.Order" Sort="true" Filterable="true" />
   14         "string" @bind-Field="@context.Name" Sort="true" Filterable="true" />
   15         "string" @bind-Field="@context.Url" Sort="true" Filterable="true" />
   16         "string" @bind-Field="@context.Icon" Sort="true" Filterable="true" />
   17     1819
   20         
   class="form-inline">
   21             
   class="row">
   22                 
   class="form-group col-12 col-sm-6">
   23                     "@context.Name" placeholder="不可为空，50字以内" maxlength="50">
   24                         
   25                         "50" />
   26                     
   27                 
   28                 
   class="form-group col-12 col-sm-6">
   29                     "@context.Url" placeholder="不可为空，50字以内" maxlength="50">
   30                         
   31                         "50" />
   32                     
   33                 
   34                 
   class="form-group col-12 col-sm-6">
   35                     "@context.Icon" placeholder="不可为空，50字以内" maxlength="50">
   36                         
   37                         "50" />
   38                     
   39                 
   40                 
   class="form-group col-12 col-sm-6">
   41                     "@context.Order" placeholder="不可为空，50字以内" maxlength="50">
   42                         
   43                         "50" />
   44                     
   45                 
   46                 
   class="form-group col-12 col-sm-6">
   47                     "@Itemss" @bind-Value="@context.Application" />
   48                 
   49             
   50         
   51     
   52     
   53         
   class="form-inline">
   54             
   class="row">
   55                 
   class="form-group col-12 col-sm-6">
   56                     "@context.Name" placeholder="不可为空，50字以内" maxlength="50" />
   57                 
   58                 
   class="form-group col-12 col-sm-6">
   59                     "@context.Url" placeholder="不可为空，50字以内" maxlength="50" />
   60                 
   61                 
   class="form-group col-12 col-sm-6">
   62                     "@context.Icon" placeholder="不可为空，50字以内" maxlength="50" />
   63                 
   64                 
   class="form-group col-12 col-sm-6">
   65                     "@Itemss" @bind-Value="@context.Application" />
   66                 
   67             
   68         
   69     
   70 

   页面代码

    以上就是该Table页面的全部代码，囊括了以上6点的所有功能，你只需关注与数据的获取即可

  

......文笔有限，慢慢补上

Bootstrap of Blazor