Bootstrap Blazor 实战动态表单组件
1.新建工程
新建工程b18ValidateForm,使用 nuget.org 进行 BootstrapBlazor 组件安装, Chart 库,字体. 将项目添加到解决方案中
dotnet new blazorserver -o b18ValidateForm
dotnet add b06chart package BootstrapBlazor
dotnet add b06chart package BootstrapBlazor.FontAwesome
dotnet sln add b18ValidateForm/b18ValidateForm.csproj
2.样式表和Javascript 引用
增加主题样式表到 Pages/_Layout.cshtml
文件中
删除 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
并在下面添加三行
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet" />
添加 Javascript 引用到 Pages/_Layout.cshtml
文件中
在 <script src="_framework/blazor.server.js"></script>
之前添加
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>
3.添加增加命名空间引用到 _Imports.razor
文件中
@using BootstrapBlazor.Components
4.增加 BootstrapBlazorRoot 组件到 App.razor 文件中
<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
...
</Router>
</BootstrapBlazorRoot>
5.添加BootstrapBlazor服务到 Program.cs
文件中
在 builder.Services.AddSingleton<WeatherForecastService>();
后加入
builder.Services.AddBootstrapBlazor();
6.添加EditorForm测试代码
Index.razor
<EditorForm Model="@Model">
<FieldItems>
<EditorItem @bind-Field="@context.Name" />
<EditorItem @bind-Field="@context.Education" />
<EditorItem @bind-Field="@context.Complete" />
</FieldItems>
<Buttons>
<Button Icon="fa-solid fa-floppy-disk" Text="提交" />
</Buttons>
</EditorForm>
Index.razor.cs
using BootstrapBlazor.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Concurrent;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics.CodeAnalysis;
namespace b18ValidateForm.Pages;
public sealed partial class Index
{
[NotNull]
private Foo? Model { get; set; }
/// <summary>
/// <inheritdoc/>
/// </summary>
protected override void OnInitialized()
{
Model = new Foo()
{
Name = "",
Count = 1,
Address = "TestAddress",
DateTime = new DateTime(1997, 12, 05),
Education = EnumEducation.Middle
};
}
}
Demo示例数据
/// <summary>
/// Demo示例数据
/// Demo sample data
/// </summary>
public class Foo
{
// 列头信息支持 Display DisplayName 两种标签
/// <summary>
///
/// </summary>
[Display(Name = "主键")]
[AutoGenerateColumn(Ignore = true)]
public int Id { get; set; }
/// <summary>
///
/// </summary>
[Required(ErrorMessage = "{0}不能为空")]
[AutoGenerateColumn(Order = 10, Filterable = true, Searchable = true)]
[Display(Name = "姓名")]
public string? Name { get; set; }
/// <summary>
///
/// </summary>
[AutoGenerateColumn(Order = 1, FormatString = "yyyy-MM-dd", Width = 180)]
[Display(Name = "日期")]
public DateTime? DateTime { get; set; }
/// <summary>
///
/// </summary>
[Display(Name = "地址")]
[Required(ErrorMessage = "{0}不能为空")]
[AutoGenerateColumn(Order = 20, Filterable = true, Searchable = true)]
public string? Address { get; set; }
/// <summary>
///
/// </summary>
[Display(Name = "数量")]
[Required]
[AutoGenerateColumn(Order = 40, Sortable = true)]
public int Count { get; set; }
/// <summary>
///
/// </summary>
[Display(Name = "是/否")]
[AutoGenerateColumn(Order = 50)]
public bool Complete { get; set; }
/// <summary>
///
/// </summary>
[Required(ErrorMessage = "请选择学历")]
[Display(Name = "学历")]
[AutoGenerateColumn(Order = 60)]
public EnumEducation? Education { get; set; }
/// <summary>
///
/// </summary>
[Required(ErrorMessage = "请选择一种{0}")]
[Display(Name = "爱好")]
[AutoGenerateColumn(Order = 70, Editable = false)]
public IEnumerable<string> Hobby { get; set; } = new List<string>();
#region Static methods
/// <summary>
///
/// </summary>
protected static readonly Random Random = new();
/// <summary>
/// 生成Foo类,随机数据
/// Generate Foo class, random data
/// </summary>
/// <param name="localizer"></param>
/// <returns></returns>
public static Foo Generate(IStringLocalizer<Foo> localizer) => new()
{
Id = 1,
Name = localizer["Foo.Name", "1000"],
DateTime = System.DateTime.Now,
Address = localizer["Foo.Address", $"{Random.Next(1000, 2000)}"],
Count = Random.Next(1, 100),
Complete = Random.Next(1, 100) > 50,
Education = Random.Next(1, 100) > 50 ? EnumEducation.Primary : EnumEducation.Middle
};
/// <summary>
/// 生成 Foo 类,随机数据
/// Generate Foo class, random data
/// </summary>
/// <returns>返回一个Foo类的List,Return a List of Foo class</returns>
public static List<Foo> GenerateFoo(int count = 80) => Enumerable.Range(1, count).Select(i => new Foo()
{
Id = i,
Name = "Foo.Name"+ $"{i:d4}",
DateTime = System.DateTime.Now.AddDays(i - 1),
Address = "Foo.Address"+$"{Random.Next(1000, 2000)}",
Count = Random.Next(1, 100),
Complete = Random.Next(1, 100) > 50,
Education = Random.Next(1, 100) > 50 ? EnumEducation.Primary : EnumEducation.Middle
}).ToList();
/// <summary>
/// 通过 Count 获得颜色
/// </summary>
/// <param name="count"></param>
/// <returns></returns>
public static Color GetProgressColor(int count) => count switch
{
>= 0 and < 10 => Color.Secondary,
>= 10 and < 20 => Color.Danger,
>= 20 and < 40 => Color.Warning,
>= 40 and < 50 => Color.Info,
>= 50 and < 70 => Color.Primary,
_ => Color.Success
};
/// <summary>
/// 通过 Id 获取 Title
/// </summary>
/// <returns></returns>
private static string GetTitle() => Random.Next(1, 80) switch
{
>= 1 and < 10 => "Clerk",
>= 10 and < 50 => "Engineer",
>= 50 and < 60 => "Manager",
>= 60 and < 70 => "Chief",
_ => "General Manager"
};
/// <summary>
///
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public static string GetTitle(int id) => Cache.GetOrAdd(id, key => GetTitle());
/// <summary>
///
/// </summary>
/// <returns></returns>
public static Func<IEnumerable<Foo>, string, SortOrder, IEnumerable<Foo>> GetNameSortFunc() => Utility.GetSortFunc<Foo>();
private static ConcurrentDictionary<int, string> Cache { get; } = new();
#endregion
}
/// <summary>
///
/// </summary>
public enum EnumEducation
{
/// <summary>
///
/// </summary>
[Display(Name = "小学")]
Primary,
/// <summary>
///
/// </summary>
[Display(Name = "中学")]
Middle
}
7.运行
8.新需求: 在点击[是/否]的时候,动态控制姓名和地址栏只读
尝试把代码改为
<EditorForm Model="@Model">
<FieldItems>
@*<InputDIY Context="@context" />*@
@if (context.Complete)
{
<EditorItem @bind-Field="@context.Name" Readonly="@context.Complete" />
<EditorItem @bind-Field="@context.Education" Readonly="@context.Complete" />
}
<EditorItem @bind-Field="@context.DateTime" Readonly="true" />
<EditorItem @bind-Field="@context.Complete" />
</FieldItems>
<Buttons>
<Button Icon="fa-solid fa-floppy-disk" Text="提交" />
</Buttons>
</EditorForm>
运行之, 并没有达到预期. 无论怎么改变[是/否]检查框,姓名和地址栏都是可写的,因为渲染机制问题,所以要改一下思路.
正确方法是把逻辑包成一个组件,组件里面就可以局部刷新达到预期效果
9.新建组件 InputDIY.razor
<Row>
<BootstrapInput @bind-Value="@Context!.Name" IsDisabled="@Context!.Complete" ShowLabel="true" />
<BootstrapInput @bind-Value="@Context!.Education" IsDisabled="@Context!.Complete" ShowLabel="true" />
</Row>
<br />
@code{
[Parameter] public Foo? Context { get; set; }
}
Index.razor代码改为
<EditorForm Model="@Model">
<FieldItems>
<InputDIY Context="@context" />
<EditorItem @bind-Field="@context.Name" Editable="@context.Complete" />
<EditorItem @bind-Field="@context.Education" Editable="@context.Complete" />
<EditorItem @bind-Field="@context.DateTime" Readonly="true" />
<EditorItem @bind-Field="@context.Complete" />
</FieldItems>
<Buttons>
<Button Icon="fa-solid fa-floppy-disk" Text="提交" />
</Buttons>
</EditorForm>
注:如果不加入以下写法,会照成InputDIY里面渲染一次Name列,FieldItems又渲染一次Name列.这是MS的内部机制一个小坑,暂时没有办法避开.
<EditorItem @bind-Field="@context.Name" Editable="@context.Complete" />
10.运行效果
11.数据验证 ValidateForm
<ValidateForm Model="@Model">
<EditorForm TModel="Foo">
<FieldItems>
<InputDIY Context="@context" />
<EditorItem @bind-Field="@context.Name" Editable="@context.Complete" />
<EditorItem @bind-Field="@context.Education" Editable="@context.Complete" />
<EditorItem @bind-Field="@context.DateTime" Readonly="true" />
<EditorItem @bind-Field="@context.Complete" />
</FieldItems>
<Buttons>
<Button ButtonType="ButtonType.Submit" Icon="fa-solid fa-floppy-disk" Text='提交' />
</Buttons>
</EditorForm>
</ValidateForm>
12.DEMO源码
关联项目
FreeSql QQ群:4336577
BA & Blazor QQ群:795206915
Maui Blazor 中文社区 QQ群:645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
转载声明
本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接:https://www.cnblogs.com/densen2014/p/17657176.html
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub