Blazor Web的登录页

本文主要是介绍Blazor Web的登录页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

选择c#/所有平台/Web，创建新项目BlazorWebApp。
新建LoginModel类：

public class LoginModel
{public int UID { get; set; }public string Key { get; set; }
}

在Components/Pages中新建razor组件Login.razor：

@page "/login"
@rendermode InteractiveServer<h3>Login</h3>
<EditForm Model="@loginModel"  OnValidSubmit="HandleLogin"><div class="form-group"><label>UID</label><InputNumber  @bind-Value=loginModel.UID /></div><p></p><div class="form-group"><label>Key</label><InputText  @bind-Value=loginModel.Key /></div><p></p><div class="form-group"><input type="submit"  value="Save" /></div><p></p><div>@Message</div>
</EditForm>
@code {private LoginModel loginModel = new LoginModel { Key="123456"};private string Message = String.Empty;private async Task ValidateData(EditContext editContext){Message = "Changes saved";}private async Task HandleLogin(EditContext editContext){Message = "UID:"+loginModel.UID+",Key:"+loginModel.Key;}
}

@page设置访问路径/login
@code中创建对象loginModel。
添加 EditForm,双向绑定该对象。
表单EditForm中添加InputNumber和InputText，双向绑定UID和Key。
OnValidSubmit设置提交方法HandleLogin。

这篇关于Blazor Web的登录页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---