asp.net onclick方法在Blazor服务器端Razor组件中无效

3vpjnl9f  于 2023-10-21  发布在  .NET
关注(0)|答案(5)|浏览(237)

我正在构建一个示例Razor组件,但我无法触发我的button 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.";
        }
    }
}
mqxuamgl

mqxuamgl1#

这发生在我的ASP.NET Core项目中,我试图在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

按钮点击按预期工作。

ryoqjall

ryoqjall2#

确保你

1.在 Startup.cs 文件中配置Blazor:

public void ConfigureServices(IServiceCollection services)中调用services.AddServerSideBlazor();(...服务器端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组件中。

bkhjykvo

bkhjykvo3#

我也遇到了同样的问题,但我通过将ServerPrerendered更改为Server解决了这个问题。
在您的_Host.cshtml中,更改此

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

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

ars1skjm4#

请注意,Internet Explorer也可能导致类似的行为。
我猜它是阻塞了JavaScript代码...
我花了更长的时间才意识到这一点,也许这是不应该的。

x9ybnkn6

x9ybnkn65#

在跟踪this tutorial之后,我得到了一个404错误,说明我的 _framework/blazor.server.js 文件找不到。解决方案归结为在 _framework/blazor.server.js 之前添加“~/”。

相关问题