在DevExpress XAF ASP.NET Core Blazor项目中实现导航栏点击自动折叠

DevOps 小满

2026-8-1

实现XAF Blazor平板端点击导航菜单项后自动折叠导航栏

针对你的DevExpress XAF ASP.NET Core Blazor（XPO）项目需求，以下是两种实用的实现方案：

方案1：JavaScript监听点击事件直接处理

利用事件委托监听导航菜单项的点击，在平板端断点下自动移除侧边栏展开的控制类：

在wwwroot/js/site.js中添加以下代码：

document.addEventListener('DOMContentLoaded', function () {
    // 委托监听所有导航链接点击（适配XAF默认导航项的nav-link类）
    document.body.addEventListener('click', function (e) {
        const navItem = e.target.closest('.nav-link');
        if (navItem && window.innerWidth <= 1320) {
            const appContainer = document.querySelector('app');
            if (appContainer.classList.contains('collapse-toggle')) {
                appContainer.classList.remove('collapse-toggle');
            }
        }
    });
});

注：如果你的导航项使用了自定义CSS类，可通过浏览器开发者工具查看后替换.nav-link。

确保_Host.cshtml中已引用该脚本：

<script src="~/js/site.js"></script>

方案2：通过XAF导航事件拦截（Blazor端逻辑）

订阅XAF的导航完成事件，触发折叠逻辑：

在Program.cs中注册导航事件处理：

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Services;

// ...

builder.Services.AddXaf(Configuration, options => {
    options.Blazor.NavigationManager.Navigated += async (sender, e) => {
        var jsRuntime = builder.Services.BuildServiceProvider().GetRequiredService<IJSRuntime>();
        await jsRuntime.InvokeVoidAsync("collapseSidebarOnMobile");
    };
});

在site.js中添加对应的JS函数：

function collapseSidebarOnMobile() {
    if (window.innerWidth <= 1320) {
        const appContainer = document.querySelector('app');
        if (appContainer.classList.contains('collapse-toggle')) {
            appContainer.classList.remove('collapse-toggle');
        }
    }
}