Blazor实现高级表单功能

W清风大侠M

已于 2022-05-02 10:35:55 修改

阅读量485

点赞数

CC 4.0 BY-SA版权

分类专栏： Blazor 文章标签： c#

于 2022-04-18 14:27:54 首次发布

本文链接：https://blog.youkuaiyun.com/knownchen/article/details/124248204

Blazor 专栏收录该内容

43 篇文章

订阅专栏

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

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

思路

添加Form组件类，提供Validate，OnSubmit等
添加Field组件基类，提供Id，Label，Value等
添加Field子组件Text、Password等表单字段组件
添加FormContext类，存储表单及字段数据
使用级联值组件传递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;
    }
}