如何在Layout导航选中时动态在Nav-Tab渲染Razor页面

1. 调整导航项，避免默认页面跳转 #

把顶部导航的asp-page属性替换为自定义data-page属性，同时阻止默认跳转行为：

<!-- 原导航项 -->
<!-- <a asp-page="/MyPage_1" class="nav-link">页面1</a> -->

<!-- 修改后 -->
<a href="#" data-page="/MyPage_1" class="nav-link nav-tab-trigger">页面1</a>
<a href="#" data-page="/MyPage_2" class="nav-link nav-tab-trigger">页面2</a>

2. 让Razor页面支持AJAX无布局加载 #

在MyPage_1.cshtml和MyPage_2.cshtml的顶部添加判断，当请求是AJAX时不渲染母版布局：

@{
    // 检测AJAX请求，仅返回页面主体内容
    Layout = Request.Headers["X-Requested-With"] == "XMLHttpRequest" ? null : "_Layout";
}

<!-- 页面原有内容 -->
<h1>MyPage_1内容</h1>
<!-- ...其他HTML和Razor代码 -->

3. 完善JS动态加载与Tab逻辑 #

使用AJAX请求Razor页面内容，动态创建Tab项和内容面板（以下示例基于Bootstrap Tab组件）：

// 导航项点击事件
document.querySelectorAll('.nav-tab-trigger').forEach(trigger => {
    trigger.addEventListener('click', function(e) {
        e.preventDefault();
        const pageUrl = this.dataset.page;
        const tabId = `tab-${pageUrl.replace(/\//g, '-')}`;
        const tabTitle = this.textContent.trim();

        // 检查Tab是否已存在
        if (!document.getElementById(tabId)) {
            // 创建Tab导航项
            const navItem = document.createElement('li');
            navItem.className = 'nav-item';
            navItem.innerHTML = `
                <a class="nav-link" id="${tabId}-tab" data-bs-toggle="tab" href="#${tabId}" role="tab" aria-controls="${tabId}" aria-selected="false">
                    ${tabTitle}
                    <button class="btn-close btn-close-sm ms-2" onclick="closeTab('${tabId}')"></button>
                </a>
            `;
            document.querySelector('.nav-tabs').appendChild(navItem);

            // AJAX请求页面内容
            fetch(pageUrl, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(response => response.text())
            .then(content => {
                // 创建Tab内容面板
                const tabContent = document.createElement('div');
                tabContent.className = 'tab-pane fade';
                tabContent.id = tabId;
                tabContent.setAttribute('role', 'tabpanel');
                tabContent.setAttribute('aria-labelledby', `${tabId}-tab`);
                tabContent.innerHTML = content;
                document.querySelector('.tab-content').appendChild(tabContent);

                // 切换到新创建的Tab
                new bootstrap.Tab(document.getElementById(`${tabId}-tab`)).show();
            })
            .catch(err => alert('页面加载失败'));
        } else {
            // 切换到已存在的Tab
            new bootstrap.Tab(document.getElementById(`${tabId}-tab`)).show();
        }
    });
});

// 关闭Tab函数
function closeTab(tabId) {
    const tabLink = document.getElementById(`${tabId}-tab`);
    const tabContent = document.getElementById(tabId);
    const isActive = tabLink.classList.contains('active');

    // 移除Tab导航和内容
    tabLink.parentElement.remove();
    tabContent.remove();

    // 如果关闭的是当前激活Tab，切换到前一个Tab
    if (isActive) {
        const activeTab = document.querySelector('.nav-tabs .nav-link.active');
        if (activeTab) new bootstrap.Tab(activeTab).show();
    }
}

关键说明 #

• AJAX请求时通过X-Requested-With请求头告诉Razor页面不要渲染母版布局，避免重复的导航栏、页脚等元素。
• PageModel中的OnGet/OnPost方法会正常执行，意味着页面的后端逻辑（数据查询、表单处理等）不受影响。
• 如果需要传递参数，可直接在data-page中拼接，比如data-page="/MyPage_1?id=123"，然后在PageModel的OnGet方法中接收参数。

内容的提问来源于stack exchange，提问作者Arbak