Blazor 自定义可重用基础组件之 PasswordBox

落单枫叶

已于 2023-07-09 00:23:24 修改

阅读量158

点赞数

分类专栏： Blazor C# 文章标签： c# Blazor 自定义可重用基础组件 InputPassword

于 2023-07-03 11:56:18 首次发布

本文链接：https://blog.csdn.net/luwq168/article/details/131512852

版权

C# 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

Blazor

19 篇文章 1 订阅

订阅专栏

文章展示了如何在Blazor应用中创建一个PasswordBox组件，该组件基于TextBox并添加了密码输入的功能。组件支持标签、宽度设置和禁用状态。在系统登录组件示例中，利用这个PasswordBox以及TextBox进行用户账号和密码输入，配合IAuthService服务进行登录验证，如果验证失败则显示错误信息。

摘要由CSDN通过智能技术生成

有了TextBox，PasswordBox相对容易多了，就是改个type的事。

@inherits InputBase<string?>
<div class="d-flex">
    <label class="control-label w-auto mt-2"><b>@Lable</b></label>
    <div style="width:@PasswordWidth">
        <input type="password" @bind-value="CurrentValue"  @attributes="AdditionalAttributes" class="form-control" disabled="@Disabled" @ref="Element" />
        <span class="w-100"><ValidationMessage For="ValueExpression" /></span>
    </div>
</div>

public partial class PasswordBox : InputBase<string?>
    {
        [Parameter]
        public string Lable { get; set; } = "密码";

        [Parameter]
        public string PasswordWidth { get; set; } = "300";


        [Parameter]
        public bool Disabled { get; set; }

        [DisallowNull] public ElementReference? Element { get; protected set; }
        protected override void OnParametersSet()
        {
            base.OnParametersSet();
            Lable += "：";
            PasswordWidth += "px;";
        }

        protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out string? result, [NotNullWhen(false)] out string? validationErrorMessage)
        {
            result = value;
            validationErrorMessage = null;
            return true;
        }
    }

就比如系统登录组件：

@inject IAuthService AuthService
@inject NavigationManager Navigation
<div class="card align-items-center bg-light mt-3" style="width:25rem ">
    <div class="card-body my-2">
        <EditForm Model="loginModel" OnValidSubmit="SubmitHandler" OnInvalidSubmit="InvalidHandler">
            <DataAnnotationsValidator />
            <div class="card-text">
                <h3 class="text-center">系统登录</h3>
                <hr />
            </div>
            <p class="card-text">
                <TextBox Lable="用户账号" @bind-Value="loginModel.UserName" InputWidth="220"/>
            </p>
            <p class="card-text">
                <PasswordBox Lable="用户密码" @bind-Value="loginModel.Password" PasswordWidth="220"/>
            </p>
            <p class="card-text text-danger">
                <h6>@erryString</h6>
            </p>
            <div class="text-center">
                <button class="btn btn-primary w-50" type="submit">登录</button>
            </div>
        </EditForm>
    </div>
</div>
@code {
    private LoginDto loginModel = new LoginDto();

    private string erryString = "";
    private async void SubmitHandler()
    {

        var result = await AuthService.LoginAsync(loginModel);
        if (!result)
        {
            erryString = "账号或密码错误！";
            return;
        }

        Navigation.NavigateTo("/");
    }

    private void InvalidHandler()
    {

        Console.WriteLine($"用户名： {loginModel.UserName} ，密码：{loginModel.Password}");
    }
}

效果：