在Blazor中使用Bootstrap网格如何实现行悬停高亮与点击选中效果？

最优实现是用Blazor原生的状态绑定+CSS伪类实现，不需要引入额外JavaScript，性能最好、逻辑最简洁，和Blazor渲染模型完全兼容。

1. 先定义样式 #

可以写在组件的隔离CSS文件（.razor.css）里，也可以写在全局样式中：

/* 普通行样式，添加小手标识提示可点击 */
.user-row {
    cursor: pointer;
}
/* 悬停高亮效果，纯CSS实现无需逻辑代码 */
.user-row:hover {
    background-color: #f5f5f5;
}
/* 选中状态高亮效果 */
.user-row.selected {
    background-color: #0d6efd;
    color: #fff;
}

2. 修改Razor模板代码 #

给动态渲染的行绑定点击事件和动态类：

<div class="container-fluid">
    <div class="row">
        <div class="col">User Name</div>
        <div class="col">First Name</div>
        <div class="col">Last Name</div>
    </div>

    @foreach (var user in users)
    {
        <!-- 绑定动态类和点击事件 -->
        <div class="row user-row @(selectedUser?.Id == user.Id ? "selected" : "")" 
             @onclick="() => SelectUser(user)">
            <div class="col">@user.UserName</div>
            <div class="col">@user.FirstName</div>
            <div class="col">@user.LastName</div>
        </div>
    }
</div>

3. 组件代码中添加状态和处理逻辑 #

在@code块中添加如下代码：

// 假设你的User类有Id主键作为唯一标识
private User? selectedUser;

private void SelectUser(User user)
{
    // 如果点击已选中的行则取消选中，不需要该逻辑可以直接赋值selectedUser = user
    if (selectedUser?.Id == user.Id)
    {
        selectedUser = null;
        return;
    }
    selectedUser = user;
}

补充说明 #

• 如果需要支持多选，只需要把selectedUser改为HashSet<User>类型，点击时往集合里添加/移除对应user，动态类判断集合是否包含当前user即可。
• 这里用Id判断相等比直接用引用判断更稳妥，避免数据重新加载后引用变化导致选中状态失效的问题。

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