Blazor中Dropdown菜单点击触发页面刷新问题求助

问题原因 #

你使用的<button>元素默认类型为submit，当它处于表单上下文（即使你没有显式书写<form>标签，部分Blazor布局组件可能隐式包含表单）时，点击会触发浏览器的默认表单提交行为，进而导致整个页面刷新。

修复方案 #

方案1：指定按钮类型为普通按钮 #

直接给按钮添加type="button"属性，明确告知浏览器这是一个用于交互的普通按钮，而非提交按钮：

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" @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>
    }
</div>

方案2：在点击事件中阻止默认行为 #

修改ToggleDropdown方法，接收MouseEventArgs参数并调用PreventDefault()来阻止浏览器的默认提交行为：

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

    void ToggleDropdown(MouseEventArgs e)
    {
        e.PreventDefault();
        isDropdownOpen = !isDropdownOpen;
    }

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

补充说明 #

你通过Blazor的C#逻辑自行实现了下拉菜单的显示/隐藏控制，这种方式是可行的，只需确保Bootstrap的JavaScript不会与Blazor的DOM操作逻辑产生冲突即可。

内容的提问来源于stack exchange，提问作者EavenCS