Blazor中如何获取Bootstrap下拉菜单项的选中值

直接通过Blazor原生事件绑定即可实现，无需额外编写JS交互代码，修改后的代码如下：

@code {
    // 存储选中值的属性，可自行设置默认值
    public string SelectedLanguage { get; set; } = "English";

    // 选中菜单项后触发的回调方法
    private void SelectLanguage(string targetLang)
    {
        SelectedLanguage = targetLang;
        // 此处可添加选中后的业务逻辑，比如切换站点语言、触发数据刷新等
        Console.WriteLine($"当前选中值：{SelectedLanguage}");
    }
}

<div style="display:flex;justify-content:flex-end">
    <div>
        <div class="dropdown">
            <a aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" id="dropdownMenu2" type="button">
                <i class="fas fa-ellipsis-v"></i>
                <!-- 可选配置：在触发按钮上显示当前选中值 -->
                <span class="ms-1">@SelectedLanguage</span>
            </a>
            <div class="dropdown-menu dropdown-primary dropdown-menu-right">
                <a class="dropdown-item @(SelectedLanguage == "English" ? "active" : "")" 
                   @onclick="() => SelectLanguage("English")">
                    <i class="fab fa-apple-pay"></i>English
                </a>
                <a class="dropdown-item @(SelectedLanguage == "Tamil" ? "active" : "")" 
                   @onclick="() => SelectLanguage("Tamil")">
                    <i class="fas fa-bell-slash"></i>Tamil
                </a>
            </div>
        </div>
    </div>
</div>

注意事项 #

• 如果你使用的是Bootstrap 5版本，需要把data-toggle属性替换为data-bs-toggle，否则下拉菜单无法正常触发弹出
• 选中值会实时同步到SelectedLanguage属性中，业务代码中直接读取该属性即可获取当前选中值
• 如果下拉选项是动态生成的，可以把选项存入List<string>等集合类型，通过@foreach循环渲染即可，无需逐个手写绑定逻辑

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