前言

Table表格在后台管理应用中使用的是相当频繁的，因此找一个功能齐全的前端框架对于我们而言是非常必要的，因为封装完善的前端框架能够大大提升我们的工作对接效率。今天我们主要来讲解一下在.NET中使用BootstrapBlazor组件库的Table表格组件（本章使用的数据都是程序自动生成的模拟数据，不需要与数据库打交道）。

BootstrapBlazor介绍

• 使用文档：https://www.blazor.zone/introduction
• Gitee项目地址：https://gitee.com/LongbowEnterprise/BootstrapBlazor

BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉（喜欢Bootstrap风格的同学推荐使用）。

.NET BootstrapBlazor UI组件库引入

BootstrapBlazor Table使用前提条件！

https://mp.weixin.qq.com/s/UIeKSqym8ibLRvDwra8aww

首先定义StudentViewModel

 public class StudentViewModel
 {
 /// 

 /// StudentID
 /// 

 public int StudentID { get; set; }

 /// 

 /// 班级名称
 /// 

 public string ClassName { get; set; }

 /// 

 /// 学生姓名
 /// 

 public string Name { get; set; }

 /// 

 /// 学生年龄
 /// 

 public int Age { get; set; }

 /// 

 /// 学生性别
 /// 

 public string Gender { get; set; }
 }

.NET后台模拟数据和增删改查方法封装

using BootstrapBlazor.Components;
using WebUI.Model;

namespace WebUI.Pages
{
 public partial class StudentExample
 {
 private static readonly Random random = new Random();
 public static List? StudentInfoList;

 public StudentExample()
 {
 StudentInfoList = GenerateUserInfos();
 }

 /// 

 /// 模拟数据库用户信息生成
 /// 

 /// 
 public static List GenerateUserInfos()
 {
return new List(Enumerable.Range(1, 200).Select(i => new StudentViewModel()
 {
 StudentID = i,
 ClassName = $"时光 {i} 班",
 Name = GenerateRandomName(),
 Age = random.Next(20, 50),
 Gender = GenerateRandomGender()
 }));
 }

 /// 

 /// 生成随机性别
 /// 

 /// 
 public static string GenerateRandomGender()
 {
 string[] genders = { "男", "女" };
return genders[random.Next(genders.Length)];
 }

 /// 

 /// 生成随机姓名
 /// 

 /// 
 public static string GenerateRandomName()
 {
 string[] surnames = { "张", "王", "李", "赵", "刘" };
 string[] names = { "明", "红", "强", "丽", "军" };
 string surname = surnames[random.Next(surnames.Length)];
 string name = names[random.Next(names.Length)];
return surname + name;
 }

 /// 

 /// 数据查询
 /// 

 /// "options">options
 /// 
 private Task> OnQueryAsync(QueryPageOptions options)
 {
 List studentInfoData = StudentInfoList;

 // 数据模糊过滤筛选
if (!string.IsOrWhiteSpace(options.SearchText))
 {
 studentInfoData = studentInfoData.Where(x => x.Name.Contains(options.SearchText)).ToList();
 }

return Task.FromResult(new QueryData()
 {
 Items = studentInfoData.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList(),
 TotalCount = studentInfoData.Count()
 });
 }

 /// 

 /// 模拟数据增加和修改操作
 /// 

 /// "studentInfo">studentInfo
 /// "changedType">changedType
 /// 
 public Task OnSaveAsync(StudentViewModel studentInfo, ItemChangedType changedType)
 {
if (changedType.ToString() == "Update")
 {
 var queryInfo = StudentInfoList.FirstOrDefault(x => x.StudentID == studentInfo.StudentID);
if (queryInfo != )
 {
 queryInfo.Age = studentInfo.Age;
 queryInfo.ClassName = studentInfo.ClassName;
 queryInfo.Name = studentInfo.Name;
 queryInfo.Gender = studentInfo.Gender;
 }
 }
else if (changedType.ToString() == "Add")
 {
 StudentInfoList.Add(studentInfo);
 }
return Task.FromResult(true);
 }

 /// 

 /// 数据删除
 /// 

 /// "items">items
 /// 
 private Task OnDeleteAsync(IEnumerable items)
 {
 items.ToList().ForEach(i => StudentInfoList.Remove(i));
return Task.FromResult(true);
 }
 }
}

一行代码快速生成Table表格

"StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList">

显示Table工具栏

"StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true">

显示Table多选模式

"StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true" IsMultipleSelect="true">

增加Table搜索功能

"StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true" IsMultipleSelect="true" ShowSearch="true">


 "搜索条件">
 
"row g-3 form-inline">
 
"col-12 col-sm-6">
 bind-Value="@context.Name" PlaceHolder="请输入姓名" maxlength="50" ShowLabel="true" DisplayText="姓名" />
 

 
"col-12 col-sm-6">
 bind-Value="@context.Gender" PlaceHolder="请输入性别" maxlength="500" ShowLabel="true" DisplayText="性别" />
 

 

 
 

增加Table增、删、改、查、分页功能

"StudentViewModel"
 AutoGenerateColumns="true"
 ShowToolbar="true"
 IsMultipleSelect="true"
 OnSaveAsync="@OnSaveAsync"
 OnQueryAsync="@OnQueryAsync"
 OnDeleteAsync="@OnDeleteAsync"
 IsStriped="true"
 IsBordered="true"
 ShowSearch="true"
 IsPagination="true"
 ShowSearchText="true">


 "true" Filterable="true" Searchable="true" @bind-Field="@context.StudentID" />
 "true" Filterable="true" Searchable="true" @bind-Field="@context.Name" />
 "true" Filterable="true" Searchable="true" @bind-Field="@context.ClassName" />
 "true" Filterable="true" Searchable="true" @bind-Field="@context.Gender" />
 


 "搜索条件">
 
"row g-3 form-inline">
 
"col-12 col-sm-6">
 bind-Value="@context.Name" PlaceHolder="请输入姓名" maxlength="50" ShowLabel="true" DisplayText="姓名" />
 

 
"col-12 col-sm-6">
 bind-Value="@context.Gender" PlaceHolder="请输入性别" maxlength="500" ShowLabel="true" DisplayText="性别" />