如何在blazor中突出显示选定的列表项?

Question

我在一个razor组件中创建了一个简单的列表。它是一个简单的HTML列表，带有foreach循环。

<ul>
@foreach (var itm in matchingLocations)
{
<li>
<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>

现在我需要将以下2个特性添加到列表

1. 当点击一个列表项时，它应该被高亮显示。

2. 如果我们想点击另一个项目，而一个项目已经高亮显示，当前高亮显示的项目应该取消高亮显示点击后的项目应该高亮显示。

。我如何使用blazor做到这一点?有谁知道这件事，请帮助我。

Answer 1

有很多方法可以做到这一点。下面是一个演示页面:

@page "/"
@foreach (var item in Countries)
{
<div class="@DivCss(item) p-2" @onclick="() => SetSelect(item)">
@item.Name
</div>
}
@code {
List<Country> Countries = new List<Country>
{
new Country { Name = "Australia"},
new Country { Name = "Spain"},
new Country { Name = "Croatia"}
};
List<Country> SelectedCountries = new List<Country>();
class Country
{
public string Name { get; set; }
}
bool IsSelected(Country country)
=> SelectedCountries.Any(item => item == country);
string DivCss(Country country)
=> IsSelected(country) ? "bg-success text-white" : "bg-light";
void SetSelect(Country country)
{
if (IsSelected(country))
SelectedCountries.Remove(country);
else
SelectedCountries.Add(country);
}
}