首页 新闻 会员 周边 捐助

razor OnMenuItemSelected 事件问题

0
悬赏园豆:30 [已关闭问题] 关闭于 2025-06-13 10:21

WebAssembly 项目 我想做菜单以组件的形式展现,但是点击导航没有触发SelectMenuItem事件,控制台没有任何报错,并且menuList数据正确,求大佬帮看下是为什么,第一次研究razor,还请各位大佬轻点喷

MainLayout.razor代码

@inherits LayoutComponentBase
<PageTitle>HoFei</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu OnMenuItemSelected="ChangeContent" />
</div>

<main>
    @* <div class="top-row px-4">
    <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
    </div> *@

    <article class="content px-4">
        @if (_currentContent != null)
        {
            @_currentContent
        }
        else
        {
            @* ChangeContent(typeof(HoFeiBlazorWeb.Client.Pages.Counter));
            @_currentContent *@
            <p>未选择菜单</p>
        }
    </article>
</main>

</div>
<div id="blazor-error-ui">
出现了一个未处理的错误.
<a href="" class="reload">重试</a>
<a class="dismiss">🗙</a>
</div>

@code {
private RenderFragment? _currentContent;

private async Task ChangeContent(Type componentType)
{
    _currentContent = builder =>
    {
        builder.OpenComponent(0, componentType);
        builder.SetKey(componentType.Name);
        builder.CloseComponent();
    };
    await InvokeAsync(StateHasChanged);
    ///StateHasChanged();
}

}

NavMenu.razor 代码

@inject ModulesService _ModulesService

<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">HoFei</a>
</div>
</div>

<input type="checkbox" title="导航菜单" class="navbar-toggler" />

<div class="nav-scrollable">
<nav class="flex-column">
<ul class="menu nav-item px-3" id="mainMenu">
@if (menuList != null)
{
foreach (var item in menuList)
{
var menu = item;
if (menu.SonList != null && menu.SonList.Count > 0)
{
<li class="has-submenu">
<span class="nav-link">
<span class="bi @menu.Icon" aria-hidden="true"></span>@menu.Name
</span>
<ul class="submenu nav-item px-3">
@foreach (var son in menu.SonList)
{
<li>
<button type="button" @onclick="@(async () => await SelectMenuItem(son))" class="nav-link">
<span class="bi @son.Icon"></span> @son.Name
</button>
</li>
}
</ul>
</li>
}
else
{
<li>
<button type="button" @onclick="@(async () => await SelectMenuItem(menu))" class="nav-link">
<span class="bi @menu.Icon"></span> @menu.Name
</button>
</li>
}
}
}
</ul>
</nav>
</div>

@code {
private List<SysModules>? menuList;

protected override async Task OnInitializedAsync()
{
    if (menuList == null) menuList = await _ModulesService.GetMenu();
}

[Parameter]
public EventCallback<Type> OnMenuItemSelected { get; set; }

private async Task SelectMenuItem(SysModules menu) => await OnMenuItemSelected.InvokeAsync(GetComponentType(menu));

private Type GetComponentType(SysModules menu)
{
    if (string.IsNullOrWhiteSpace(menu.NameSpaceUrl)) return typeof(Pages.Home);
    return Type.GetType(menu.NameSpaceUrl) ?? typeof(Pages.Home);
}

}

问题补充:


测试按钮也无法触发,是因为MainLayout写的有问题还是少事件?

HoFei1113的主页 HoFei1113 | 初学一级 | 园豆:148
提问于:2025-06-11 14:20

建议优化一下排版,支持 markdown 语法

dudu 4个月前
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册