Dropdown menu in Blazor causing page to refresh

Question

I'm encountering issues with a dropdown menu in my Blazor application. The dropdown menu is created using Bootstrap, and the interactions are handled with C# in the Blazor framework.

Here's a sample of the code I'm using:

    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" @onclick="ToggleDropdown">Activity Levels</button>

@if (isDropdownOpen)
{
    <div class="dropdown-menu show">
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Sedentary")'>Sedentary work or little to no physical activity</a>
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Light")'>Light physical activity or regular low-intensity workouts</a>
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Moderate")'>Regular moderate-intensity workouts or active occupational activity</a>
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("High")'>Regular high-intensity workouts or physically demanding occupational activity</a>
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Intense")'>Intense training multiple times per week or highly physically demanding occupational activity</a>
    </div>
}

@code {
    bool isDropdownOpen = false;
    string selectedActivityLevel = string.Empty;

            void ToggleDropdown()
            {
                isDropdownOpen = !isDropdownOpen;
            }


    void SetSelectedActivityLevel(string activityLevel)
    {
        selectedActivityLevel = activityLevel;
        isDropdownOpen = false;
    }
}

The issue is that each time I click on the dropdown button, the entire page refreshes. This shouldn't happen, I just want to select a dropdown item.

Does anyone have any idea why this might be happening and how I can fix it? Any help would be greatly appreciated!

Thanks in advance!

Answer 1

Copy and Paste your code as a minimal reproducible example like this:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" @onclick="ToggleDropdown">Activity Levels</button>
        </div>
@if (isDropdownOpen)
{
    <div class="dropdown-menu show">
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Sedentary")'>Sedentary work or little to no physical activity</a>
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Light")'>Light physical activity or regular low-intensity workouts</a>
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Moderate")'>Regular moderate-intensity workouts or active occupational activity</a>
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("High")'>Regular high-intensity workouts or physically demanding occupational activity</a>
        <a class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Intense")'>Intense training multiple times per week or highly physically demanding occupational activity</a>
    </div>
}

<div class="bg-dark text-white m-3 p-2">
    <pre>Selected Activity : @this.selectedActivityLevel</pre>
</div>

@code {
    bool isDropdownOpen = false;
    string selectedActivityLevel = string.Empty;

    void ToggleDropdown()
    {
        isDropdownOpen = !isDropdownOpen;
    }


    void SetSelectedActivityLevel(string activityLevel)
    {
        selectedActivityLevel = activityLevel;
        isDropdownOpen = false;
    }
}

And it works with no refresh, so there must be something else you are not showing us?

Answer 2

You need to add href="#" to the <a> tags

This can be seen in the examples in the bootstrap docs

It would look like this:

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" @onclick="ToggleDropdown">Activity Levels</button>
</div>

@if (isDropdownOpen)
{
    <div class="dropdown-menu show">
        <a href="#" class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Sedentary")'>Sedentary work or little to no physical activity</a>
        <a href="#" class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Light")'>Light physical activity or regular low-intensity workouts</a>
        <a href="#" class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Moderate")'>Regular moderate-intensity workouts or active occupational activity</a>
        <a href="#" class="dropdown-item" @onclick='() => SetSelectedActivityLevel("High")'>Regular high-intensity workouts or physically demanding occupational activity</a>
        <a href="#" class="dropdown-item" @onclick='() => SetSelectedActivityLevel("Intense")'>Intense training multiple times per week or highly physically demanding occupational activity</a>
    </div>
}