如何在syncfusion blazor中点击一个NavLink项目时弹出一个模态？

Question

我正在创建一个有6个NavLink菜单项的菜单，最后一个项目必须作为一个按钮，如果用户确定是否要退出，就会弹出一个模态，但不知为何，我不能使用@onclick函数弹出一个模态。

HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: HTML.C#: 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;
    }
}```