如何在同步切换器中单击导航链接项时弹出模态?

Question

我正在创建一个包含 6 个 NavLink 菜单项的菜单，该项目的最后一个必须用作按钮，如果用户确定是否注销，它会弹出一个模式，但不知何故我无法使用 @onclick 功能弹出模态..？

.HTML：

<li class="nav-item px-3" id="li6">
<NavLink class="nav-link" @onclick="OnClicked">
<span class="oi oi-list-rich" aria-hidden="true"></span> Sign Out
</NavLink>
</li>

C#：

//Modal
private bool IsVisible { get; set; } = true;
private void OnClicked()
{
this.IsVisible = true;
}
private void OnOverlayclick(object arg)
{
this.IsVisible = false;
}

模态本身：

<SfDialog @bind-Visible="@IsVisible" Width="250px" IsModal="true">
<DialogEvents OnOverlayClick="OnOverlayclick">
</DialogEvents>
<DialogTemplates>
<Content> This is a modal dialog</Content>
</DialogTemplates>
</SfDialog>

任何人都可以看到我做错了什么吗？希望有人能帮忙！谢谢！

Answer 1

Niels，我尝试创建一个带有共享代码片段的剃刀页面。模式在"注销"单击时正确显示。此外，模态在单击叠加层时隐藏。如果可能，请分享您的剃须刀页面。

@using Syncfusion.Blazor.Popups
<div>
<div id="container"></div>
<ul>
<li class="nav-item px-3" id="li6">
<NavLink class="nav-link" @onclick="OnClicked">
<span class="oi oi-list-rich" aria-hidden="true"></span> Sign Out
</NavLink>
</li>
</ul>
<SfDialog @bind-Visible="@IsVisible" Width="250px" IsModal="true">
<DialogEvents OnOverlayClick="OnOverlayclick">
</DialogEvents>
<DialogTemplates>
<Content> This is a modal dialog</Content>
</DialogTemplates>
</SfDialog>
</div>
@code{
//Modal
private bool IsVisible { get; set; } = true;
private void OnClicked()
{
this.IsVisible = true;
}
private void OnOverlayclick(object arg)
{
this.IsVisible = false;
}
}```