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

阳光穿透心脏的1/2处 2024-03-16 13:50 55阅读 0赞

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

## 三、自制密码输入组件 ##

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

![55183b85348e89ba5e65d5867afd8fdd.png][]

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就可以了。具体代码如下：

![4ce2069e8147b6f22ef837dddd198345.gif][]

@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;
        }
    }

![f8272258cf3cb03f279f70582f9d1bbd.gif][]

## 四、Login页面 ##

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

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

![d831481343e03ccb925386b38336143a.gif][]

@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}");
    
        }
    }

![d831481343e03ccb925386b38336143a.gif][]

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

![53408fccff46171037bdfec80c1ae125.png][]

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

![c9e3bd86040f898b51d9d5bbe5b06666.png][]

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

![53a75e0037a5e75c0545d2519f18c39b.png][]

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

![c7e08b1708411fb7a44276e8b65aa7d8.png][]

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

![fbcb390ace332832c994b94b2e283189.png][]

[55183b85348e89ba5e65d5867afd8fdd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b0ac96c2781f470d9700ba43bea4de45.png
[4ce2069e8147b6f22ef837dddd198345.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/04fdc8da481a4b2ba6774a696fe3512d.png
[f8272258cf3cb03f279f70582f9d1bbd.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ef9732e2253d43189fde495c4b51c68d.png
[d831481343e03ccb925386b38336143a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3b80dd6900f7442ab504a9e3fe3093e7.png
[53408fccff46171037bdfec80c1ae125.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b766dba982ef48c188ca60792ac5f7a4.png
[c9e3bd86040f898b51d9d5bbe5b06666.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/823471e9f749469895c413854eec9704.png
[53a75e0037a5e75c0545d2519f18c39b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c9d66a6f224347839d56579fd9f983dc.png
[c7e08b1708411fb7a44276e8b65aa7d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c392f0fa1b984e9a980cbf9b9f70e33c.png
[fbcb390ace332832c994b94b2e283189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0d4233b55f9f43b8a9050f6a90bb4626.png