首页 > 其他分享 >.NET中使用BootstrapBlazor组件库Table实操篇

.NET中使用BootstrapBlazor组件库Table实操篇

时间：2024-02-06 09:13:21浏览次数：37  
标签：string BootstrapBlazor 实操 Table NET true public

前言

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

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" IsMu

增加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"
       IsPagination="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>

DotNetGuide技术社区交流群

  • DotNetGuide技术社区是一个面向.NET开发者的开源技术社区，旨在为开发者们提供全面的C#/.NET/.NET Core相关学习资料、技术分享和咨询、项目推荐、招聘资讯和解决问题的平台。
  • 在这个社区中，开发者们可以分享自己的技术文章、项目经验、遇到的疑难技术问题以及解决方案，并且还有机会结识志同道合的开发者。
  • 我们致力于构建一个积极向上、和谐友善的.NET技术交流平台，为广大.NET开发者带来更多的价值和成长机会。

欢迎加入DotNetGuide技术社区微信交流群

标签：string,BootstrapBlazor,实操,Table,NET,true,public
From： https://www.cnblogs.com/Can-daydayup/p/18008726

相关文章

  • Cucumber步骤中传Data Table作为参数
    引用链接：http://cukes.info/step-definitions.htmlDataTablesDataTablesarehandyforspecifyingalargerpieceofdata:Giventhefollowingusersexist:|name|email|phone||Aslak|[email protected]|123||Matt|[email protected]|2......
  • react antd table如何清空选中行
    在ReactAntdTable组件中，可以通过设置 selectedRowKeys 属性来控制已经被选中的行。要清空所有选中的行，只需将该属性值设为空数组即可。示例代码如下：import{useState}from'react';import{Table}from'antd';constMyTable=()=>{const[selectedRows,......
  • 这篇深入浅出贴 助你早日实现Stable diffusion自由
    我也不想标题党，可它们就是好萌啊！看看下面这些你认识多少？我是憨憨，一个不会画画的设计师。过去半年里，AI绘画曾经多次引爆公众讨论，网络上那些精致的二次元同人插画、堪比真人的AI穿搭博主、打破次元壁的赛博Coser……背后都有一个“幕后黑手”——StableDiffusion，其背后的技术便是......
  • SpringBoot中使用Spring自带线程池ThreadPoolTaskExecutor与Java8CompletableFuture实
    场景关于线程池的使用：Java中ExecutorService线程池的使用(Runnable和Callable多线程实现)：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/126242904Java中创建线程的方式以及线程池创建的方式、推荐使用ThreadPoolExecutor以及示例：https://blog.csdn.net/BADAO_......
  • Stable Code 3B：轻量级编程助手，无GPU本地运行
    引言StabilityAI近期发布了StableCode3B，这是一个集中了多项创新技术的轻量级编程辅助模型。它在保持轻量的同时，展现出了与大型模型如CodeLLaMA7B相媲美的性能，这一特性使其在没有GPU的环境中也能运行，极大地拓宽了其应用范围。模型概述StableCode3B，作为一款拥有30亿参数的编程......
  • VS Code 便携模式（Portable Mode）的制作
    VisualStudioCode支持便携式模式。此模式使VSCode创建和维护的所有数据都位于其自身附近，因此可以跨环境移动。此模式还提供了一种设置VSCode扩展的安装文件夹位置的方法，对于阻止在企业环境将扩展安装在WindowsAppData文件夹中非常有用。Windows的ZIP下载、Linux......
  • [MY-013183] [InnoDB] Assertion failure: dict0dict.cc:1869:table->get_ref_count()
    背景：执行altertableTABLE_NAMEdroppartitionPART_NAME;时执行过程中执行了ctrl+c导致mysql服务器崩溃自动重启。mysql错误日志内容：2024-02-02T10:30:32.424737+08:00460639464[ERROR][MY-013183][InnoDB]Assertionfailure:dict0dict.cc:1869:table->get_ref_count......
  • react antd的Table中，如何动态的改变表格数据
    在ReactAntd中，如果您改变了Table组件的数据源（dataSource），Table会自动重新渲染以反映新的数据。因此，只要您在状态或props中正确更新数据源，Table就会自动更新。以下是一个示例代码片段，展示如何使用React状态（state）和按钮来更改数据源并更新Table组件：importReact,{useState}fr......
  • 从iptables过渡到nftables
    精彩文章免费看立即下载从iptables迁移到nftablescloudFans简书作者2022-06-1610:12IP属地:吉林基于iptables-save为文件，然后导入即可%iptables-save>iptables.txt%iptables-nft-restore<iptables.txt%iptables-nft-save#Generated......
  • selenium出现“element not interactable”问题总结
    “elementnotinteractable”问题根因：元素不可交互，可能的原因及解决方法如下所示：1、检查元素的定位（XPATH、CSS_SELECTOR内的内容）是否写正确2、代码中元素进行获取的时候查看是否已经加载出来，等待元素加载可以使用显式等待element= WebDriverWait(browser,20,0.5).until(EC.p......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99