学习ASP.NET Core Blazor编程系列二十三 |
您所在的位置：网站首页 › blazor全面教程 › 学习ASP.NET Core Blazor编程系列二十三 |
|
通过查询微软官网上的文档，我们知道目前Blazor没有内置的密码输入组件，这个用于输入密码的组件需要我们来自己实现。接下来我们就来实现密码输入组件功能。 三、自制密码输入组件1. 在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Pages”文件夹，右键单击，在弹出菜单中选择“添加—>Razor组件…”，并将组件命名为“InputPassword”。如下图。 2. 这个密码输入组件需要继承IputBase,并且重写TryParseValueFromString这个方法。这个方法的作用是将用户在表单输入框中输入数据转换成你需要的T类型，例如T是DateTime的话，就要把表单输入框中输入的数据转换成DateTime。 TryParseValueFromString方法有三个参数，对这三个参数说明如下： value：表单输入框中填写的值 result：类型是TValue，和InputBase中设定的T一致，result值会绑定到表单中Model的对应栏位上 validationErrorMessage：输入框中输入的数据在进行与类型T转换时，转换失几的给出的错误信息3.因为登录界面中表单的输入框接收的都是string类型的数据，而且我们的UserInfo类中的Password也是string，所以不需要我们做任何转换操作，直接将value值赋给result就可以了。具体代码如下： @inherits InputBase @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 Login @HtmlHelper.GetDisplayName(loginModel ,m=> m.UserName) @HtmlHelper.GetDisplayName(loginModel ,m=> m.Password) 登录 @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. 在输入了正确的用户名与密码之后，使用鼠标左键点击“登录”按钮。系统后台获取了我们在表单输入框中输入的用户名与密码。如下图。
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |