onclick method is not working in Blazor server-side Razor component

Question

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

Charbonnier

Do you get an error message in the browser console? (F12 in the browser) – Kilovoltampere

I have the same issue. The debugger does not break and there is no message in the debugger, even when setting the debug level to 0. – Diurnal

Check that you don't have RenderMode.Static in your _Host.cshtml file. – Kilovoltampere

And I expect you have the latest version .Net Core 3.0 installed. – Kilovoltampere

@PascalR. The app is 3.0, render mode is RenderMode.ServerPrerendered, and I am not seeing any errors in the browser. I am totally stumped on this. I've tried simplifying my onclick method a few different ways by making it a regular void non-async method, and it still didn't work. I'm sure it must be something obvious that I am overlooking, but I simply can't figure it out. – Charbonnier

It appears that a simple css attribute was causing the problem or preventing the method from executing. Really weird, not sure exactly why. I will be deleting the post shortly in light of the issue. I did come across another issue now which I've posted here #58388183 . The method now executes, but hangs once it hits the SignInAsync method. – Charbonnier

@Charbonnier I've the same probleme in an application where i try to add the Blazor Server Side stuff. I've already removed alle css attributes but no success. Any hint what you've done to solve it? – Bybee

@maltmann I removed a bootstrap class on a div tag, and then the method fired. I have no idea why this was. Doesn't make much since to me at all. I was just satisfied to get on the right track, and would try to figure it out later. – Charbonnier

I opened another question for my problem and got the solution #58436908 – Bybee

Answer 1

This happened to me in an ASP.NET 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.

Salo

Yes! This has been killing me for a day. This solved the same problem I was having, and should definitely be the accepted answer. – Goddamned

Answer 2

Make sure you

1. Configure Blazor in the 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 the 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 the Razor component where you're using Blazor.

Also

Answer 3

I faced the same issue, but I 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" />

Clamp

I'm doing Blazor SSR .NET 7. Changing ServerPrerendered to Server caused my Blazor SSR app to stop working - never even showed the first/home page. – Benzine

Answer 4

After following this tutorial, I was getting a 404 error stating my _framework/blazor.server.js file could not be found. The solution came down to adding "~/" before the _framework/blazor.server.js.

Nesline

Does it really have a leading underscore? Is _ literal? – Paphlagonia

Answer 5

Please also be aware that Internet Explorer also can result in similar behaviour.

I guess it is blocking JavaScript code...

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

Augustina