.NET中使用BootstrapBlazor組件庫Table實操篇

作者：大姚 2024-02-05 13:07:00

今天我們主要來講解一下在.NET中使用BootstrapBlazor組件庫的Table表格組件（本章使用的數(shù)據(jù)都是程序自動生成的模擬數(shù)據(jù)，不需要與數(shù)據(jù)庫打交道）。

前言

Table表格在后臺管理應用中使用的是相當頻繁的，因此找一個功能齊全的前端框架對于我們而言是非常必要的，因為封裝完善的前端框架能夠大大提升我們的工作對接效率。今天我們主要來講解一下在.NET中使用BootstrapBlazor組件庫的Table表格組件（本章使用的數(shù)據(jù)都是程序自動生成的模擬數(shù)據(jù)，不需要與數(shù)據(jù)庫打交道）。

圖片

BootstrapBlazor介紹

圖片

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

BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企業(yè)級組件庫，可以認為是 Bootstrap 項目的 Blazor 版實現(xiàn)。基于 Bootstrap 樣式庫精心打造，并且額外增加了 100 多種常用的組件，為您快速開發(fā)項目帶來非一般的感覺（喜歡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后臺模擬數(shù)據(jù)和增刪改查方法封裝

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>
        /// 模擬數(shù)據(jù)庫用戶信息生成
        /// </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>
        /// 數(shù)據(jù)查詢
        /// </summary>
        /// <param name="options">options</param>
        /// <returns></returns>
        private Task<QueryData<StudentViewModel>> OnQueryAsync(QueryPageOptions options)
        {
            List<StudentViewModel> studentInfoData = StudentInfoList;

            // 數(shù)據(jù)模糊過濾篩選
            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>
        /// 模擬數(shù)據(jù)增加和修改操作
        /// </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>
        /// 數(shù)據(jù)刪除
        /// </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>

責任編輯：武曉燕來源：追逐時光者