'onclick method not working in Blazor server-side razor component

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.

razor componet page:

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

    }

razor component:

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

    }
}
c++sharpasp.netasp.net-coreblazor-server-sideasp.net-core-3.0


Solution 1:[1]

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.

Solution 2:[2]

Make sure you

1) Configure Blazor in Startup.cs file:

in public void ConfigureServices(IServiceCollection services) you call services.AddServerSideBlazor(); (..for server-side Blazor)

and in public void Configure(IApplicationBuilder app, IWebHostEnvironment env) you register endpoint such as ('endpoint.MapBlazorHub()' is what you need to add here): 

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

2) You have 

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

in Razor component where you're using Blazor.

Solution 3:[3]

Faced the same issue but resolved it by changing ServerPrerendered to Server"

In your _Host.cshtml change this

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

to

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

Solution 4:[4]

Please also be aware that IE also can result in similar behaviour.

I guess it is blocking Js code...

This took me longer to realise than perhaps it should have.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 RyanY
Solution 2 itzprintz
Solution 3 Gnyasha
Solution 4 Hugh Jones

Related Questions