BootstrapBlazor组件使用:数据注解

news2025/1/16 3:42:40

文章目录

  • 前言
  • BB数据注解
    • 数据注解源码
    • 数据注解简介
    • 注解简单实例
      • [BB 编辑弹窗](https://www.blazor.zone/edit-dialog)
      • [ValidateForm 表单组件](https://www.blazor.zone/validate-form)
      • 使用简介

前言

BootstrapBlazor(一下简称BB)是个特别好用的组件,基本上满足了大部分功能。业务逻辑上面没任何问题,官方的文档也特别详细。(你看过那种只给案例的文档你就明白什么是好文档了)

BB 官方文档

BB数据注解

BB其实是面向后端管理开发的组件,特别适合用于企业级开发。可以说是小项目的特化版组件。

推荐开发技术

  • Blazor Server (SSR):服务端渲染,前后端不分离开发。
  • BoostrapBlazor:UI组件库
  • SqlSugar:数据库

开发速度那叫一个快。不用考虑跨域,不怕安全信息泄漏(因为是SSR,浏览器只能拿到渲染结果),前端直接从后端拿数据。

唯一的问题是不支持高并发。1200人以下是安全的,如果是1200人以上的高并发,那就得上微服务了。这个是互联网开发(微服务,分布式,内存缓存)。大部分业务做不到这个水平。所以特别适合小项目

数据注解源码

BootstrapBlazor/ src / BootstrapBlazor.Shared / Data / Foo.cs

数据注解简介

  • Display
    • Name:名称
  • AutoGenerateColumn
    • Ignore 是否忽略
    • order 排序
    • FormatString:格式化
  • Required
    • ErrorMessage:检验错误报错提示

注解简单实例

BB很多数据相关的都和这个注解相关。主要看有没有Model这个数据变量。

在这里插入图片描述

在这里插入图片描述

BB 编辑弹窗

ValidateForm 表单组件

使用简介

对sqlsugar生成对象添加BB注解

public partial class T_Joint
{

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:False
    /// </summary>           
    [SugarColumn(IsPrimaryKey = true, IsIdentity = true)]
    [AutoGenerateColumn(Ignore =true)]
    public long Id { get; set; }

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>   
    [Display(Name = "创建时间")]

    public DateTime? CreateTime { get; set; } = DateTime.Now;

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>           
    [Display(Name = "修改时间")]

    public DateTime? Time { get; set; }= DateTime.Now;

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>           
    [AutoGenerateColumn(Ignore = true)]
    public bool IsDel { get; set; } = false;

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>           
    [AutoGenerateColumn(Ignore = true)]
    public bool IsClick { get; set; } = false;

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>           
    [AutoGenerateColumn(Ignore = true)]
    public int? ParentId { get; set; }

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>           
    [AutoGenerateColumn(Ignore = true)]
    public string Path { get; set; }

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>           
    [AutoGenerateColumn(Ignore = true)]
    public int? Deep { get; set; }




    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>           
    [Display(Name = "排序号")]
    public int? OrderNum { get; set; } = 0;



    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>      
    [Display(Name = "名称")]
    
    [Required(ErrorMessage ="{0}不能为空")]
    public string Name { get; set; }

    /// <summary>
    /// Desc:
    /// Default:
    /// Nullable:True
    /// </summary>           
    [AutoGenerateColumn(Ignore = true)]
    public long? UserId { get; set; }

}

使用

//注入对话框服务
[Inject]
private DialogService DialogService { get; set; }
......

//随便一个按钮绑定一个事件

public async Task AddRootBtn()
{
    var option = new EditDialogOption<T_Joint>()
    {
        Title = "节点编辑",
        Model = new T_Joint() { },
        RowType = RowType.Inline,
        ItemsPerRow = 2,
        ItemChangedType = ItemChangedType.Update,
        Items = Items,
        
    };

    await DialogService.ShowEditDialog(option);
}


使用效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/914795.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

bh003- Blazor hybrid / Maui 使用蓝牙BLE快速教程

1. 建立工程 bh003_ble 源码 2. 添加 nuget 包 <PackageReference Include"BlazorHybrid.Maui.Permissions" Version"0.0.2" /> <PackageReference Include"BootstrapBlazor" Version"7.*" /> <PackageReference In…

机器学习笔记之优化算法(十九)经典牛顿法的收敛性分析

机器学习笔记之优化算法——经典牛顿法的收敛性分析 引言回顾&#xff1a;算法的收敛性分析 Wolfe \text{Wolfe} Wolfe准则的收敛性分析梯度下降法在凸函数的收敛性分析梯度下降法在强凸函数的收敛性分析 经典牛顿法的收敛性分析收敛性定理介绍证明过程关于隐含条件的说明 引言…

Spring之域对象共享数据

文章目录 前言一、requset域1.使用ServletAPI向request域对象共享数据2.使用ModelAndView向request域对象共享数据3.使用Model向request域对象共享数据4.使用map向request域对象共享数据5.使用ModelMap向request域对象共享数据6.Model、ModelMap、Map的关系 二、session域向ses…

语谱图(一) Spectrogram 的定义与机理

1. 语谱图 spectrogram 在音频、语音信号处理领域&#xff0c;我们需要将信号转换成对应的语谱图(spectrogram)&#xff0c;将语谱图上的数据作为信号的特征。 语谱图的横坐标是时间&#xff0c;纵坐标是频率&#xff0c;坐标点值为语音数据能量。由于是采用二维平面表达三维…

UE4 材质学习笔记

CheapContrast与CheapContrast_RGB都是提升对比度的&#xff0c;一个是一维输入&#xff0c;一个是三维输入&#xff0c;让亮的地方更亮&#xff0c;暗的地方更暗&#xff0c;不像power虽然也是提升对比度&#xff0c;但是使用过后的结果都是变暗或者最多不变&#xff08;值为1…

国标视频云服务平台EasyGBS国标平台内网访问正常但公网无法访问的问题解决方案

国标视频云服务平台EasyGBS可支持通过国标GB28181协议&#xff0c;接入多路视频源设备&#xff0c;实现视频流的接入、转码、处理与分发等功能&#xff0c;对外输出的视频流格式包括RTSP、RTMP、FLV、HLS、WebRTC等。平台视频能力丰富灵活&#xff0c;包括监控直播、视频分发、…

Maven 配置文件修改及导入第三方jar包

设置java和maven的环境变量 修改maven配置文件 &#xff08;D:\app\apache-maven-3.5.0\conf\settings.xml&#xff0c;1中环境变量对应的maven包下的conf&#xff09; 修改131行左右的mirror&#xff0c;设置阿里云的仓库地址 <mirror> <id>alimaven</id&g…

如何选择合适的量化交易服务器

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

sql入门-多表查询

案例涉及表 ----------------------------------建表语句之前翻看之前博客文章 多表查询 -- 学生表 create table studen ( id int primary key auto_increment comment id, name varchar(50) comment 姓名, no varchar(10) comment 学号 ) comment 学生表; insert…

ES基础操作

1.创建索引 在 Postman 中&#xff0c;向 ES 服务器发 PUT 请求 &#xff1a; http://127.0.0.1:9200/shopping 后台日志 重复发送 PUT 请求添加索引 &#xff1a; http://127.0.0.1:9200/shopping &#xff0c;会返回错误信息 : 2.获取单个索引相关信息 在 Postman 中&#…

【SpringSecurity】三、访问授权

文章目录 1、配置用户权限2、针对URL授权3、针对方法的授权 1、配置用户权限 继续上一章&#xff0c;给在内存中创建两个用户配置权限。配置权限有两种方式&#xff1a; 配置roles配置authorities //哪个写在后面哪个起作用 //角色变成权限后会加一个ROLE_前缀&#xff0c;比…

Flask狼书笔记 | 03_模板

文章目录 3 模板3.1 模板基本使用3.2 模板结构组织3.3 模板进阶 3 模板 模板&#xff08;template&#xff09;&#xff1a;包含固定内容和动态部分的可重用文件。Jinja2模板引擎可用于任何纯文本文件。 3.1 模板基本使用 HTML实体&#xff1a;https://dev.w3.org/html5/htm…

启动Vue项目踩坑记录

前言 在启动自己的Vue项目时&#xff0c;遇到一些报错&#xff0c;当时很懵&#xff0c;解决了以后豁然开朗&#xff0c;特写此博客记录一下。 一、<template>里多加了个div标签 [vite] Internal server error: At least one <template> or <script> is req…

EureKa快速入门

EureKa快速入门 远程调用的问题 多个服务有多个端口&#xff0c;这样的话服务有多个&#xff0c;硬编码不太适合 eureKa的作用 将service的所有服务的端口全部记录下来 想要的话 直接从注册中心查询对于所有服务 每隔一段时间需要想eureKa发送请求 保证服务还存活 动手实践 …

odoo安装启动遇到的问题

问题&#xff1a;在第一次加载odoo配置文件的时候&#xff0c;启动失败 方法&#xff1a; 1、先检查odoo.conf的内容&#xff0c;尤其是路径 [options] ; This is the password that allows database operations: ; admin_passwd admin db_host 127.0.0.1 db_port 5432 d…

kotlin协程flow任务意外结束未emit数据retryWhen onEmpty(5)

kotlin协程flow任务意外结束未emit数据retryWhen onEmpty&#xff08;5&#xff09; import kotlinx.coroutines.delay import kotlinx.coroutines.flow.* import kotlinx.coroutines.runBlocking import kotlinx.coroutines.withTimeoutOrNullfun main(args: Array<String&…

【Java】基础练习(九)

1.结婚 创建一个Person类&#xff0c;如下: public class Person{private String name;private Character gender;private Integer age;private Boolean marry;// 省略 getter / settter / 构造 / toString / hashCode / equals }有一个类CAB&#xff0c;有一个canMarry方…

SpringBoot(二)

###SpringBoot原理分析 ###SpringBoot监控 ###SpringBoot项目部署 #SpringBoot自动配置 Condition&#xff1a;&#xff08;条件&#xff09; Condition是在Spring4.0增加的条件判断功能&#xff0c;通过这个功能可以实现选择性的创建Bean操作 SpringBoot是如何知道要创建…

如何在服务器上用kaggle下载数据集

S1 服务器上安装kaggle cli工具 pip install --user kaggleS2 服务器上创建kaggle目录 mkdir ~/.kaggleS3 进入kaggle账户创建token 生成token 点击右上角头像&#xff0c;选择setting 点击create new token 进入你的浏览器下载页&#xff0c;可以看到有了一个kaggle.jso…

快速了解什么是Cookie

&#x1f600;前言 本篇博文是关于Web 开发会话技术 -Cookie的介绍&#xff0c;希望你能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的…