Blazor实现高级表单功能

这篇博客介绍了如何在Blazor中实现表单验证和组件化,包括创建Form组件类,提供Validate和OnSubmit方法,定义Field基类以及Text和Password等子组件。通过FormContext传递数据,并展示了Form组件的使用示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

思路

  1. 添加Form组件类,提供Validate,OnSubmit等
  2. 添加Field组件基类,提供Id,Label,Value等
  3. 添加Field子组件Text、Password等表单字段组件
  4. 添加FormContext类,存储表单及字段数据
  5. 使用级联值组件传递FormContext实例(关键)

Form组件

public class FormContext {
    public Dictionary<string, Field> Fields { get; }
}

public class Form : BaseComponent {
    [Parameter] public RenderFragment ChildContent { get; set; }
    public FormContext Context { get; }
    public bool Validate() { return false; }
    
    protected override void BuildRenderTree(RenderTreeBuilder builder) {
        builder.Div(attr => {
            attr.Class(Style);
            builder.Component<CascadingValue<FormContext>>(attr => {
                attr.Add(nameof(CascadingValue<FormContext>.Value), Context);
                attr.Add(nameof(CascadingValue<FormContext>.ChildContent), ChildContent);
            });
        });
    }
}

Field组件

public class Field : BaseComponent {
    [Parameter] public string Id { get; set; }
    [Parameter] public string Label { get; set; }
    [CascadingParameter]
    protected FormContext Context { get; set; }
    protected override void OnInitialized() {
        base.OnInitialized();
        Context.Fields[Id] = this;
    }
    protected override void BuildRenderTree(RenderTreeBuilder builder) {
    }
    protected virtual void BuidChildContent(RenderTreeBuilder builder) {}
}

public class Text : Field {
    [Parameter] public string Icon { get; set; }
    [Parameter] public string Placeholder { get; set; }
    protected override void BuidChildContent(RenderTreeBuilder builder) {
    }
}

public class Password : Field {
    [Parameter] public string Icon { get; set; }
    [Parameter] public string Placeholder { get; set; }
    protected override void BuidChildContent(RenderTreeBuilder builder) {
    }
}

Form示例

<Form @ref="form">
    <Text Id="UserName" Icon="fa fa-user-o" Placeholder="用户名" />
    <Password Id="Password" Icon="fa fa-lock" Placeholder="密码" />
    <Button Text="登 录" OnClick="OnLogin" />
</Form>
@code {
    private Form form;
    private void OnLogin() {
        if (!form.Validate())
            return;
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值