.NET中使用BootstrapBlazor組件庫Table實操篇
作者：大姚
今天我們主要來講解一下在.NET中使用BootstrapBlazor組件庫的Table表格組件（本章使用的數據都是程序自動生成的模擬數據，不需要與數據庫打交道）。
前言
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
{
/// <summary>
/// StudentID
/// </summary>
public int StudentID { get; set; }
/// <summary>
/// 班級名稱
/// </summary>
public string ClassName { get; set; }
/// <summary>
/// 學生姓名
/// </summary>
public string Name { get; set; }
/// <summary>
/// 學生年齡
/// </summary>
public int Age { get; set; }
/// <summary>
/// 學生性別
/// </summary>
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<StudentViewModel>? StudentInfoList;
public StudentExample()
{
StudentInfoList = GenerateUserInfos();
}
/// <summary>
/// 模擬數據庫用戶信息生成
/// </summary>
/// <returns></returns>
public static List<StudentViewModel> GenerateUserInfos()
{
return new List<StudentViewModel>(Enumerable.Range(1, 200).Select(i => new StudentViewModel()
{
StudentID = i,
ClassName = $"時光 {i} 班",
Name = GenerateRandomName(),
Age = random.Next(20, 50),
Gender = GenerateRandomGender()
}));
}
/// <summary>
/// 生成隨機性別
/// </summary>
/// <returns></returns>
public static string GenerateRandomGender()
{
string[] genders = { "男", "女" };
return genders[random.Next(genders.Length)];
}
/// <summary>
/// 生成隨機姓名
/// </summary>
/// <returns></returns>
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;
}
/// <summary>
/// 數據查詢
/// </summary>
/// <param name="options">options</param>
/// <returns></returns>
private Task<QueryData<StudentViewModel>> OnQueryAsync(QueryPageOptions options)
{
List<StudentViewModel> studentInfoData = StudentInfoList;
// 數據模糊過濾篩選
if (!string.IsNullOrWhiteSpace(options.SearchText))
{
studentInfoData = studentInfoData.Where(x => x.Name.Contains(options.SearchText)).ToList();
}
return Task.FromResult(new QueryData<StudentViewModel>()
{
Items = studentInfoData.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList(),
TotalCount = studentInfoData.Count()
});
}
/// <summary>
/// 模擬數據增加和修改操作
/// </summary>
/// <param name="studentInfo">studentInfo</param>
/// <param name="changedType">changedType</param>
/// <returns></returns>
public Task<bool> OnSaveAsync(StudentViewModel studentInfo, ItemChangedType changedType)
{
if (changedType.ToString() == "Update")
{
var queryInfo = StudentInfoList.FirstOrDefault(x => x.StudentID == studentInfo.StudentID);
if (queryInfo != null)
{
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);
}
/// <summary>
/// 數據刪除
/// </summary>
/// <param name="items">items</param>
/// <returns></returns>
private Task<bool> OnDeleteAsync(IEnumerable<StudentViewModel> items)
{
items.ToList().ForEach(i => StudentInfoList.Remove(i));
return Task.FromResult(true);
}
}
}一行代碼快速生成Table表格
<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList"></Table>
圖片
顯示Table工具欄
<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true"></Table>
圖片
顯示Table多選模式
<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true" IsMultipleSelect="true"></Table>
圖片
增加Table搜索功能
<Table TItem="StudentViewModel" AutoGenerateColumns="true" Items="StudentInfoList" ShowToolbar="true" IsMultipleSelect="true" ShowSearch="true">
<SearchTemplate>
<GroupBox Title="搜索條件">
<div class="row g-3 form-inline">
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Name" PlaceHolder="請輸入姓名" maxlength="50" ShowLabel="true" DisplayText="姓名" />
</div>
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Gender" PlaceHolder="請輸入性別" maxlength="500" ShowLabel="true" DisplayText="性別" />
</div>
</div>
</GroupBox>
</SearchTemplate>
</Table>
圖片
增加Table增、刪、改、查、分頁功能
<Table TItem="StudentViewModel"
AutoGenerateColumns="true"
ShowToolbar="true"
IsMultipleSelect="true"
OnSaveAsync="@OnSaveAsync"
OnQueryAsync="@OnQueryAsync"
OnDeleteAsync="@OnDeleteAsync"
IsStriped="true"
IsBordered="true"
ShowSearch="true"
IsPaginatinotallow="true"
ShowSearchText="true">
<TableColumns>
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.StudentID" />
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Name" />
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.ClassName" />
<TableColumn Sortable="true" Filterable="true" Searchable="true" @bind-Field="@context.Gender" />
</TableColumns>
<SearchTemplate>
<GroupBox Title="搜索條件">
<div class="row g-3 form-inline">
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Name" PlaceHolder="請輸入姓名" maxlength="50" ShowLabel="true" DisplayText="姓名" />
</div>
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="@context.Gender" PlaceHolder="請輸入性別" maxlength="500" ShowLabel="true" DisplayText="性別" />
</div>
</div>
</GroupBox>
</SearchTemplate>
</Table>責任編輯：武曉燕
來源：
追逐時光者
