通过查询微软官网上的文档，我们知道目前Blazor没有内置的密码输入组件，这个用于输入密码的组件需要我们来自己实现。接下来我们就来实现密码输入组件功能。

三、自制密码输入组件

1. 在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Pages”文件夹，右键单击，在弹出菜单中选择“添加—>Razor组件…”，并将组件命名为“InputPassword”。如下图。

2. 这个密码输入组件需要继承IputBase<T>,并且重写TryParseValueFromString这个方法。这个方法的作用是将用户在表单输入框中输入数据转换成你需要的T类型，例如T是DateTime的话，就要把表单输入框中输入的数据转换成DateTime。

TryParseValueFromString方法有三个参数，对这三个参数说明如下：

value：表单输入框中填写的值
result：类型是TValue，和InputBase<T>中设定的T一致，result值会绑定到表单中Model的对应栏位上
validationErrorMessage：输入框中输入的数据在进行与类型T转换时，转换失几的给出的错误信息

3.因为登录界面中表单的输入框接收的都是string类型的数据，而且我们的UserInfo类中的Password也是string，所以不需要我们做任何转换操作，直接将value值赋给result就可以了。具体代码如下：

@inherits InputBase<string>

<input type="password" class="@CssClass" @bind-value="@CurrentValue" />

@code { 

    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)

    {

        validationErrorMessage = null;

        result = value;

        return true;

    }

}

四、Login页面

1. 在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Pages”文件夹，右键单击，在弹出菜单中选择“添加—>Razor组件…”，并将组件命名为“Login.razor”。

2.在Visual Studio 2022的文本编辑器中打开Login.razor，我们使用内建的表单组件EditForm来制作登录界面。具体代码如下：

@page "/Login"

@using BlazorAppDemo.Models

@using BlazorAppDemo.Utils

<div class="card">

    <div class="card-body my-2">

        <h3>Login</h3>

        <hr />

        <EditForm  Model="loginModel" OnValidSubmit="SubmitHandler" OnInvalidSubmit="InvalidHandler">

            <DataAnnotationsValidator />

            <div class="form-group">

                <label for="userName">  @HtmlHelper.GetDisplayName(loginModel ,m=> m.UserName)</label>

                <InputText @bind-Value="loginModel.UserName" class="form-control" id="userName" />

                <ValidationMessage For="()=>loginModel.UserName" />

            </div>

            <div class="form-group">

                <label for="pwd"> @HtmlHelper.GetDisplayName(loginModel ,m=> m.Password)</label>

                <InputPassword @bind-Value="loginModel.Password" class="form-control" id="pwd" />

                <ValidationMessage For="()=>loginModel.Password" />

            </div>

            <span class="form-control-plaintext"></span>

            <div class="form-group row">

                <div class="col-sm-10">

            <button class="btn btn-primary">登录</button>

                </div>

            </div>

        </EditForm>

    </div>

</div>

@code {

    private UserInfo loginModel = new UserInfo();

    private void SubmitHandler()

    {

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

    }

    private void InvalidHandler()

    {

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

    }

}

3.在Visual Studio 2022的菜单栏上，找到“调试-->开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们使用鼠标点击左边的菜单栏上的“登录”菜单项，页面会进入“Login”页面，如下图。

4.我们使用鼠标左键，直接点击“登录”按钮，页面会提示我们必须输入用户名与密码。如下图。

5.当我们输入的用户名与密码，不符合校验规则时，页面会提示我们必须输入符合校验规则的用户名与密码。如下图。

6.最终我们输入了符合校验规则的用户名与密码。如下图。

7. 在输入了正确的用户名与密码之后，使用鼠标左键点击“登录”按钮。系统后台获取了我们在表单输入框中输入的用户名与密码。如下图。

巴特西

学习ASP.NET Core Blazor编程系列二十三——登录（2）

三、自制密码输入组件

四、Login页面

最新文章

热门文章