Server Side Blazor Component in .net 8, @onclick event not firing – Blazor

The Problem:

A developer is encountering an issue with the @onclick event in a Blazor Server component written in .NET 8. In a Page.blazor component, they define a button with an @onclick event handler named SendMessage, expecting it to display the message "Hello" on the page when clicked. However, upon clicking the button, the message is not displayed. The developer seeks assistance in resolving this issue and understanding why the @onclick event is not firing in .NET 8.

The Solutions:

Solution 1: Using [RenderModeInteractiveServer] attribute

In Blazor Server in .NET 8, the default RenderMode is Static Server, which doesn’t support interactive components like button clicks. To make your button work, you need to explicitly set the RenderMode to InteractiveServer for the component that contains the button.

You can do this by adding the @attribute [RenderModeInteractiveServer] attribute to the component. For example:

@attribute [RenderModeInteractiveServer]
@message

<button class="btn btn-primary mt-2 btn-block" @onclick="SendMessage">Send Message</button>

@code {
    public string message { get; set; }

    private async Task SendMessage()
    {
        message = "Hello";
    }
}

Now, when you click the button, it should output "Hello" on the page as expected.

Solution 2: Setting RenderMode in App.razor

Alternatively, you can set the RenderMode for the entire application in App.razor. This will apply the InteractiveServer render mode to all components in your application. To do this, add the following code to App.razor:

@using static Microsoft.AspNetCore.Components.Web.RenderMode

<Router AppAssembly="@typeof(Program).Assembly" RenderMode="@RenderMode.InteractiveServer">
    <Found Context="routeData">
        <RouteView />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but the page you are looking for does not exist.</p>
    </NotFound>
</Router>

With this change, all components in your application will have the InteractiveServer render mode, and your button should work without any additional attributes.

Video Explanation:

The following video, titled "Server Side Blazor Component in .net 8, @onclick event not firing ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Server Side Blazor Component in .net 8, @onclick event not firing I hope you found a solution that worked for you 🙂 The Content (except ...