Blazor中如何实现列表项点击高亮及单选切换效果？

没问题，这在Blazor里实现起来非常直观，核心就是通过跟踪选中项的状态，再结合动态样式绑定来完成。我给你完整的实现方案：

1. 定义选中状态变量 #

首先在你的Razor组件代码块里，添加一个变量来存储当前选中的列表项：

@code {
    // 假设你的数据模型是Location，替换成你实际的类型即可
    private List<Location> matchingLocations = new List<Location>();
    private Location? _selectedLocation;

    // 这里可以添加你的数据初始化逻辑，比如从API获取matchingLocations数据
}

2. 添加点击事件处理方法 #

接下来写一个方法，用来处理列表项的点击事件，更新选中状态：

private void SelectLocation(Location selectedItem)
{
    // 逻辑：如果点击的是已选中项，取消高亮；否则切换到新项
    _selectedLocation = _selectedLocation == selectedItem ? null : selectedItem;

    // 如果你需求是「只能单选，不能取消高亮」，就用下面这行替代上面的代码：
    // _selectedLocation = selectedItem;
}

3. 修改列表的Razor代码 #

更新你的foreach循环，给每个<li>绑定点击事件和动态样式：

<ul>
    @foreach (var itm in matchingLocations)
    {
        <li 
            @onclick="() => SelectLocation(itm)"
            class="@(_selectedLocation == itm ? "highlighted-item" : "")"
            style="cursor: pointer;"
        >
            <div class="d-flex">
                <div class="py-2 pr-2">
                    <i class="fas fa-map-marker-alt text-glow-1"></i>
                </div>
                <div class="py-2">
                    <span class="sub-title-2">@itm.CodeName</span>
                </div>
            </div>
        </li>
    }
</ul>

4. 添加高亮样式 #

最后在组件的样式区域（或者全局样式文件）定义高亮的CSS：

.highlighted-item {
    background-color: #e8f4fd; /* 浅蓝色背景，可根据你的UI调整 */
    border-left: 3px solid #1976d2; /* 左侧蓝色标识条，增强视觉提示 */
    transition: background-color 0.2s ease; /* 平滑过渡效果，提升体验 */
}

这样就完成了：点击任意列表项会高亮，再次点击同一个项可以取消高亮（如果用的是第一种逻辑），点击其他项会自动取消之前的高亮并切换到新项。

如果你需要在选中项变化时执行额外逻辑（比如触发数据加载、更新表单等），直接在SelectLocation方法里添加对应的代码即可。

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