学习ASP.NET Core Blazor编程系列二十三——登录（2）
通过查询微软官网上的文档，我们知道目前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. 在输入了正确的用户名与密码之后，使用鼠标左键点击“登录”按钮。系统后台获取了我们在表单输入框中输入的用户名与密码。如下图。
