onclick 方法在 Blazor 服务器端剃须刀组件中不起作用

Question

我正在构建一个示例剃须刀组件，但我的按钮 onclick 方法无法触发。当我单击按钮时，什么也没有发生。我什至在方法中放置了一个断点，以查看它是否捕获了它没有捕获的。该组件确实呈现，但正如我所说，当单击按钮时，LoginUser 方法根本没有运行。

剃须刀组件页面：

    <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.";
        }

    }
}

Answer 1

这发生在我的一个 MVC 核心项目中，我试图在 this blog's guidance 之后添加 blazor 组件。在将我的项目与模板 blazor 项目进行比较后，我发现是缺少 _Imports.razor 文件导致 blazor.server.js 不订阅点击事件。我将该文件添加到我的项目中，就像它在模板项目中一样：

@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

然后按钮点击按预期工作。

Answer 2

确保你

1) 在 Startup.cs 文件中配置 Blazor：

在public void ConfigureServices(IServiceCollection services) 你打电话给services.AddServerSideBlazor(); (..for server-side Blazor)

在public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 您注册端点，例如（'endpoint.MapBlazorHub()' 是您需要在此处添加的）：

app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapBlazorHub();
        });

2) 你有

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web

在您使用 Blazor 的 Razor 组件中。

Answer 3

遇到了同样的问题，但通过将ServerPrerendered 更改为Server 解决了这个问题

在您的_Host.cshtml 改变这个

<component type="typeof(App)" render-mode="ServerPrerendered" />

到

<component type="typeof(App)" render-mode="Server" />