Blazor语言 - 将活动类添加到当前元素

Question

尝试在 Blazor 中完全开发网站

我正在尝试弄清楚如何将例如活动类添加到当前选定的元素中。 我有一个侧菜单栏，知道用户在哪个页面上会很棒。

找到了这个JavaScript解决方案，但我想通过 #c 来做到这一点

关于如何实现它的任何想法？

Answer 1

Microsoft.AspNetCore.Components.Routing.NavLink 组件会自动添加"active"类(或您选择的类(。下面的示例代码。

<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>

来源： https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.routing.navlink?view=aspnetcore-3.1

Answer 2

使用 NavLink 标记在 Blazor 中的页面之间导航。有一个名为 NavLinkMatch 的属性，每当当前路由匹配时，它都会自动为您应用"活动"类。

有关更多信息，请查看此内容 - https://learn.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.1#navlink-component

希望它能帮助你:)

Answer 3

一如既往地绑定 定义属性并在 class="样式@prop" 中绑定

Answer 4

最好的方法是使用 NavMatchLink.All 或 NavMatchLink.Prefix 根据 URL设置活动类，NavMatchLink.All 可用于静态或专用页面，其中 NavLink href URL 与链接的显示标题匹配，现在如果您在循环内渲染 NavLink，那么最好在 URL 中添加链接的显示标题 ex/ActionMethod/{Parameter}？&Title = {Link Display Name} 并使用 NavMatchLink.前缀。

Answer 5

正在寻找一种不需要 BootStrap 的解决方案，这是第一个匹配项。如果其他人正在查看此内容，请记住在您的事件处理程序中包含 StateHasChanged((！！

<button type="button" class="btn btn-nav @isActive" @onclick=NavTo>@display</button>
@code {
[Inject] NavigationManager _navMan { get; set; }
[Parameter] public string Destination { get; set; }
[Parameter] public string Display { get; set; }
string display => String.IsNullOrWhiteSpace(Display) ? Destination : Display;
string isActive = "";
protected override void OnInitialized() {
_navMan.LocationChanged += UpdateLoc;
}
async Task NavTo() {
_navMan.NavigateTo($"/{Destination}");
}
void UpdateLoc(object sender, LocationChangedEventArgs args) {
isActive = args.Location.Replace(_navMan.BaseUri, "") == Destination ? "active" : "";
StateHasChanged();
}
}

Answer 6

根据您的示例，这是我的解决方案

解决方案1：使用此解决方案，如果用户刷新页面，活动项将更改。

@page "/test"
<div>
<button class=@($"btn {IsActive("1")}") @onclick="@(() => SetActive("1"))">1</button>
<button class=@($"btn {IsActive("2")}") @onclick="@(() => SetActive("2"))">2</button>
<button class=@($"btn {IsActive("3")}") @onclick="@(() => SetActive("3"))">3</button>
<button class=@($"btn {IsActive("4")}") @onclick="@(() => SetActive("4"))">4</button>
<button class=@($"btn {IsActive("5")}") @onclick="@(() => SetActive("5"))">5</button>
</div>
@code {
public string activeItem = "1";
public void SetActive(string item)
{
activeItem = item;
StateHasChanged();
}
public string IsActive(string item) =>
item == activeItem ? " active" : "";
}

解决方案2 使用此解决方案，如果用户刷新页面，将保留活动项。

@page "/test/{activeItem?}"
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime
@*This section is the same in both solutions*@
<div>
<button class=@($"btn {IsActive("1")}") @onclick="@(() => SetActive("1"))">1</button>
<button class=@($"btn {IsActive("2")}") @onclick="@(() => SetActive("2"))">2</button>
<button class=@($"btn {IsActive("3")}") @onclick="@(() => SetActive("3"))">3</button>
<button class=@($"btn {IsActive("4")}") @onclick="@(() => SetActive("4"))">4</button>
<button class=@($"btn {IsActive("5")}") @onclick="@(() => SetActive("5"))">5</button>
</div>
@code {
[Parameter]
public string? ActiveItem { get; set; }
private string defaultActiveItem = "1";
protected override void OnInitialized()
{
if (ActiveItem is null)
{
ActiveItem = defaultActiveItem;
}
}
public void SetActive(string item)
{
ActiveItem = item;
// will not reload the page but only modify URL.
Navigation.NavigateTo($"/test/{ActiveItem}");
}
public string IsActive(string item) =>
item == ActiveItem ? " active" : "";
}

对不起，如果我的英语很差。