Blazor入手教程（七）表单

 

Blazor入手教程（七）表单

 

Blazor为表单元素定义了一些内置组件

 

 

 

除此之外还有EditForm组件搭配起来十分好用

 

 

 

EditForm 提供了一系列数据验证的属性/方法，这样我们不用自己再去实现了。

 

 

属性/方法名	说明
Modal	表单实体模型，必填
OnValidSubmit/OnInvalidSubmit	提交表单时，验证通过/未通过 的回调函数
OnSubmit	提交表单时的回调函数，和上面的两个属于“或”的关系， 使用了OnValidSubmit/OnInvalidSubmit就不能再使用OnSubmit。同理，使用了OnSubmit就不能使用OnValidSubmit/OnInvalidSubmit。 OnSubmit可以用来做一些自定义的验证
DataAnnotationsValidator	启用数据注解验证，就是特性验证。
ValidationSummary	验证结果摘要。验证不合法时，会在表单的顶部用html标签显示具体错误。也是继承自ComponentBase的一种组件

 

模型验证数据注解

 

 

 

验证结果摘要ValidationSummary

 

 

 

Blazor提供的验证能应对绝大多数场景，如果有特殊的场景，你也可以自定义实现一些验证。

 

相关代码：

 

@page "/FormSample"
@using System.ComponentModel.DataAnnotations;
<h3>表单</h3>
<p>@stu.ToString()</p>

<EditForm   Model="@stu"   OnValidSubmit="onValidSubmit"    OnInvalidSubmit="onInvalidSubmit">

    <DataAnnotationsValidator></DataAnnotationsValidator>
    <ValidationSummary></ValidationSummary>
     
    <div class="form-inline">
        姓名：<InputText @bind-Value="stu.name"></InputText>
    </div>

    <div class="form-inline">
        年龄： 
    </div> 
    <div class="form-inline">
        生日：<InputDate @bind-Value="stu.birthday"></InputDate> 
    </div>

    <div class="form-inline">
        是否婚配：  <InputCheckbox @bind-Value="stu.ismarried"></InputCheckbox> 
    </div>

    <div class="form-inline">
        现居城市： 
        <InputSelect @bind-Value="stu.city"> 
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </InputSelect> 
    </div> 

    <button type="submit">OK</button>

</EditForm> 


@code {
    
    public class student
    {

        [Required]
        [MaxLength(length:10, ErrorMessage ="名字最大长度不能超过10位")]
        public string name { get; set; } = "小爵";     //姓名

        [Range(18,45,ErrorMessage ="年龄必须在18-45岁之间")]
        public int age { get; set; } = 28; //年龄 

        public DateTime birthday { get; set; } = System.DateTime.Now;//生日



        public string city { get; set; } = "北京";  //所在城市


        public bool ismarried { get; set; } = false; //是否婚配

        public override string ToString()
        {

            return $"姓名：{name}，年龄：{age},生日：{birthday},城市：{city}，是否婚配：{ismarried}";

        }

    } 
    public student stu = new student() { };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(stu);
    }

    public void onSubmit( )
    {
        Console.WriteLine("on onSubmit");

    }
    public void onValidSubmit( )
    {
        Console.WriteLine("on onValidSubmit");

    }
    public void onInvalidSubmit( )
    {
        Console.WriteLine(" onInvalidSubmit");

    }

}

 

目录

Blazor入手教程（一）前言

Blazor入手教程（二）css和class绑定

Blazor入手教程（三）列表和条件渲染

Blazor入手教程（四）路由

Blazor入手教程（五）组件

Blazor入手教程（六）组件的生命周期

Blazor入手教程（七）表单

Blazor入手教程（八）布局Layout

Blazor入手教程（九）c#和js互相调用

Blazor入手教程（十）部署安装

Blazor入手教程（十一）使用组件库AntDesign Blazor