BootstrapBlazor组件使用:数据注解

文章目录

  • 前言
  • 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这个数据变量。

BootstrapBlazor组件使用:数据注解_第1张图片

BootstrapBlazor组件使用:数据注解_第2张图片

BB 编辑弹窗

ValidateForm 表单组件

使用简介

对sqlsugar生成对象添加BB注解

public partial class T_Joint
{

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

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

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

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

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

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

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

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

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

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




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



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

    /// 
    /// Desc:
    /// Default:
    /// Nullable:True
    ///            
    [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);
}


使用效果

BootstrapBlazor组件使用:数据注解_第3张图片

你可能感兴趣的:(BootStrapBlazor,Blazor)