Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

ValidateForm 表单组件

可供数据合规检查的表单组件

基础用法

放置到 ValidateForm 中的组件提交时自动进行数据合规检查

Demo

组件说明:

  • 表单事件为 OnSubmit OnValidSubmit OnInvalidSubmit
  • 当使用 OnSubmit 时其他两种不可以同时使用
  • 本例中使用了 OnSubmit 回调委托无论客户端验证是否通过均显示结果
  • Model 参数为必填项不允许为空
  • 表单内可以放置多个按钮,通过设置 ButtonType="ButtonType.Submit" 参数是否提交表单
  • 客户端验证机制支持模型的 Required 标签,通过设置 ErrorMessage 参数设置提示信息,未设置时使用默认的英文提示信息

注意事项:

  • 表单内组件通常用法都是使用双向绑定技术对 Model 的属性值进行双向绑定,当其值改变时会导致所在组件 StateHasChanged 方法被调用,即其所在组件或者页面进行刷新重新渲染

内置组件

放置支持表单组件到 ValidateForm

Demo

示例说明

  • 姓名为字符串类型
  • 年龄为整数类型
  • 生日为时间类型
  • 教育为枚举类型
  • 爱好为集合类型
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
2021 March
SunMonTueWedThuFriSat
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec

Attributes

Loading...

Methods

Loading...
@page "/validateforms"
 
<h3>ValidateForm 表单组件</h3>

<h4>可供数据合规检查的表单组件</h4>

<Block Title="基础用法" Introduction="放置到 <code>ValidateForm</code> 中的组件提交时自动进行数据合规检查">
    <p>组件说明:</p>
    <ul class="ul-demo">
        <li>表单事件为 <code>OnSubmit</code> <code>OnValidSubmit</code> <code>OnInvalidSubmit</code></li>
        <li>当使用 <code>OnSubmit</code> 时其他两种不可以同时使用</li>
        <li>本例中使用了 <code>OnSubmit</code> 回调委托无论客户端验证是否通过均显示结果</li>
        <li><code>Model</code> 参数为必填项不允许为空</li>
        <li>表单内可以放置多个按钮,通过设置 <code>ButtonType="ButtonType.Submit"</code> 参数是否提交表单</li>
        <li>客户端验证机制支持模型的 <code>Required</code> 标签,通过设置 <code>ErrorMessage</code> 参数设置提示信息,未设置时使用默认的英文提示信息</li>
    </ul>
    <p>注意事项:</p>
    <ul class="ul-demo">
        <li>表单内组件通常用法都是使用双向绑定技术对 <code>Model</code> 的属性值进行双向绑定,当其值改变时会导致所在组件 <code>StateHasChanged</code> 方法被调用,即其所在组件或者页面进行刷新重新渲染</li>
    </ul>
    <div class="form-demo">
        <ValidateForm class="form-inline" Model="@Model" OnInvalidSubmit="@OnInvalidSubmit1">
            <div class="row">
                <div class="form-group col-12">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="form-group col-12">
                    <Button ButtonType="ButtonType.Submit" Text="提交表单" />
                </div>
            </div>
        </ValidateForm>
        <Logger @ref="Trace" />
    </div>
</Block>

<Block Title="内置组件" Introduction="放置支持表单组件到 <code>ValidateForm</code> 中">
    <div class="form-demo">
        <label class="legend">支持表单验证的组件示例</label>
        <p>示例说明</p>
        <ul>
            <li>姓名为字符串类型</li>
            <li>年龄为整数类型</li>
            <li>生日为时间类型</li>
            <li>教育为枚举类型</li>
            <li>爱好为集合类型</li>
        </ul>
        <ValidateForm class="form-inline" Model="@Model" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
            <div class="row">
                <div class="form-group col-12 col-sm-6">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="form-group col-12 col-sm-6">
                    <BootstrapInputNumber @bind-Value="@Model.Count" />
                </div>
                <div class="form-group col-12 col-sm-6">
                    <DateTimePicker @bind-Value="@Model.DateTime" />
                </div>
                <div class="form-group col-12 col-sm-6">
                    <Select Items="@Educations" @bind-Value="@Model.Education" />
                </div>
                <div class="form-group col-12">
                    <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
                </div>
                <div class="form-group col-12">
                    <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
                </div>
            </div>
        </ValidateForm>
        <Logger @ref="Trace2" class="mt-3" />
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<MethodTable Items="@GetMethods()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class ValidateForms
    {
        [NotNull]
        private Logger? Trace { get; set; }

        [NotNull]
        private Logger? Trace2 { get; set; }

        [Inject]
        [NotNull]
        private IStringLocalizer<EnumEducation>? Localizer { get; set; }

        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

        private readonly Foo Model = new();

        private IEnumerable<SelectedItem>? Educations { get; set; }

        private IEnumerable<SelectedItem> Hobbys => Foo.GenerateHobbys(LocalizerFoo);

        /// <summary>baise
        /// OnInitialized 方法
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            // 初始化参数
            Educations = typeof(EnumEducation).ToSelectList(new SelectedItem("", Localizer["PlaceHolder"] ?? "请选择 ..."));
        }

        private Task OnInvalidSubmit1(EditContext context)
        {
            Trace.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnValidSubmit(EditContext context)
        {
            Trace2.Log("OnValidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnInvalidSubmit(EditContext context)
        {
            Trace2.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        #region 参数说明
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Model",
                Description = "表单组件绑定的数据模型,必填属性",
                Type = "object",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "子组件模板实例",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnSubmit",
                Description = "表单提交时的回调委托",
                Type = "EventCallback<EditContext>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnValidSubmit",
                Description = "表单提交时数据合规检查通过时的回调委托",
                Type = "EventCallback<EditContext>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnInvalidSubmit",
                Description = "表单提交时数据合规检查未通过时的回调委托",
                Type = "EventCallback<EditContext>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<MethodItem> GetMethods() => new MethodItem[]
        {
            new MethodItem()
            {
                Name = "Validate",
                Description="表单验证方法",
                Parameters =" — ",
                ReturnValue = "Task<bool>"
            }
        };
        #endregion
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload