无法在Blazor服务器端剃刀组件中使用onclick方法 [英] onclick method not working in Blazor server-side razor component
问题描述
我正在构建一个示例剃刀组件,但是我的按钮onclick方法无法启动.当我单击按钮时,什么也没有发生.我什至在方法中放置了一个断点,以查看它是否捕获了它不能捕获的东西.该组件可以渲染,但是正如我所说的那样,单击按钮时根本没有运行LoginUser方法.
I am building a sample razor component, and I can not get my button onclick method to fire. When I click the button nothing happens at all. I have even placed a break point in the method to see if it catches which it doesn't. The component does render, but as I said the LoginUser method doesn't appear run at all when clicking the button.
剃须刀配件页面:
<div class="text-center">
<Login FieldsetAttr="fieldsetAttr" UsernameAttr="usernameAttr" PasswordAttr="passwordInput"
ButtonAttr="buttonAttr" ButtonText="Sign In" SignInManager="SignInManager"
InvalidAttr="invalidAttr" />
</div>
@code {
Dictionary<string, object> fieldsetAttr =
new Dictionary<string, object>()
{
{"class", "form-group" }
};
Dictionary<string, object> usernameAttr =
new Dictionary<string, object>()
{
{"class", "form-control" },
{"type", "text" },
{"placeholder", "Enter your user name here." }
};
Dictionary<string, object> passwordInput =
new Dictionary<string, object>()
{
{"class", "form-control" },
{"type", "password" }
};
Dictionary<string, object> buttonAttr =
new Dictionary<string, object>()
{
{"class", "" },
{"type", "button" }
};
Dictionary<string, object> invalidAttr =
new Dictionary<string, object>()
{
{"class", "invalid-feedback" }
};
}
剃刀组件:
<div @attributes="FormParentAttr">
<form @attributes="LoginFormAttr">
<fieldset @attributes="FieldsetAttr">
<legend>Login</legend>
<label for="usernameId">Username</label><br />
<input @attributes="UsernameAttr" id="usernameId" @bind="UserName" /><br />
<label for="upasswordId">Password</label><br />
<input @attributes="PasswordAttr" id="passwordId" @bind="Password" /><br />
<button @attributes="ButtonAttr" @onclick="LoginUser">@ButtonText</button>
@if(errorMessage != null && errorMessage.Length > 0)
{
<div @attributes="InvalidAttr">
@errorMessage
</div>
}
</fieldset>
</form>
</div>
@code {
[Parameter]
public Dictionary<string, object> FormParentAttr { get; set; }
[Parameter]
public Dictionary<string, object> LoginFormAttr { get; set; }
[Parameter]
public Dictionary<string, object> FieldsetAttr { get; set; }
[Parameter]
public Dictionary<string, object> UsernameAttr { get; set; }
[Parameter]
public Dictionary<string, object> PasswordAttr { get; set; }
[Parameter]
public Dictionary<string,object> ButtonAttr { get; set; }
[Parameter]
public SignInManager<IdentityUser> SignInManager { get; set; }
[Parameter]
public Dictionary<string, object> InvalidAttr { get; set; }
private string UserName { get; set; }
private string Password { get; set; }
[Parameter]
public string ButtonText { get; set; }
private string errorMessage { get; set; }
private async Task LoginUser(MouseEventArgs e)
{
var user = new IdentityUser(UserName);
var loginResult = await SignInManager.CheckPasswordSignInAsync(user, Password, true);
if(loginResult.Succeeded)
{
await SignInManager.SignInAsync(user, true);
errorMessage = "";
}
else
{
errorMessage = "Username or password is incorrect.";
}
}
}
推荐答案
This happened to me in an MVC core project where I was trying to add blazor components following this blog's guidance. After comparing my project with the template blazor project, I discovered that it was the missing _Imports.razor
file that was causing blazor.server.js to not subscribe to the click event. I added that file to my project just as it is in the template project:
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
然后,按一下按钮即可正常工作.
Button clicks were then working as expected.
这篇关于无法在Blazor服务器端剃刀组件中使用onclick方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!