Blazor web app is not working for any events, button click or dropdown selection in .NET 8

Question

I have the following component, but none of the events are being triggered in .NET 8. I suspect this issue is due to the new rendering modes introduced in .NET 8.

@using MyFirstBlazorWebApp.Components.UI
<PageTitle>Dynamic Marvel Component</PageTitle>
<label>
    Select a Marvel superhero:
    <select @onchange="OnDropdownChange">
        <option value="">Select a superhero</option>
        @foreach (var entry in superheroes.Keys)
        {
            <option value="@entry">@entry</option>
        }
    </select>
</label>
@code {
    private void OnDropdownChange(ChangeEventArgs e)
    {
        if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
        {
            selectedSuperhero = dropdownValue;
        }
        else
        {
            selectedSuperhero = null;
        }
    }
}

Answer 1

By default the render mode for Blazor components is Static, no event support.

By default your Blazor site is a static site. To add interactive support (events), you need to decide if interactions are server or client (WASM)

// server interactive
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// client interactive
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

the components still default to render mode Static. You can specify the render mode for each component (ex. @rendermode="InteractiveServer"), or change the default from Static.

// default server interactive
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

// default client interactive
app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode();

Answer 2

After digging deeper, I guess I have found a solution.

You'll need to add AddInteractiveServerComponents() and AddInteractiveServerRenderMode() in your Program.cs file.

it turns out, AddInteractiveServerComponents() method enables server-side interactions for components and AddInteractiveServerRenderMode() method allows the components to handle server-side events.

Program.cs

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

...
...

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Then, add @rendermode InteractiveServer at the top of your component:

This worked for me!