如何在ASP.NET Core中实现侧边栏无刷新的页面导航？

这问题我之前做项目时也碰到过，本质就是要把传统的整页跳转改成异步局部加载，只更新页面主体区域。下面给你一步步实现：

1. 调整主布局的结构，分离侧边栏和主体区域 #

首先在你的主布局（比如_Layout.cshtml）里，把侧边栏和主体内容明确分开，给主体区域加一个唯一的ID，方便后续定位更新：

<div class="container-fluid">
  <div class="row">
    <!-- 侧边栏：固定不动，不刷新 -->
    <nav class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
      <partial name="_SideBar.cshtml" />
    </nav>
    <!-- 主体区域：需要动态更新的部分 -->
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" id="main-content">
      @RenderBody()
    </main>
  </div>
</div>

2. 修改侧边栏链接，替换为异步触发的标记 #

把_SideBar.cshtml里的普通<a>标签的href属性改成data-url（用来存储要加载的页面地址），这样可以阻止默认的整页跳转：

<div class="collapse" id="showDashboards">
  <ul class="no-bullets sidebar-nav">
    <li>
      <a class="nav-link text-white" id="azure-nav" data-url="@Url.Action("AzureContent", "Azure")">
        <svg class="bi pe-none me-2" width="30" height="30"><use xlink:href="#azure" /></svg> Azure
      </a>
    </li>
    <li>
      <a class="nav-link text-white azure-reports" data-url="@Url.Action("AzureReports", "Azure")">
        <svg class="bi pe-none me-2" width="30" height="30"><use xlink:href="#reports" /></svg> Reports
      </a>
    </li>
    <li>
      <a class="nav-link text-white" id="o365-nav" data-url="@Url.Action("Index", "O365")">
        <svg class="bi pe-none me-2" width="30" height="30"><use xlink:href="#o365" /></svg> Office 365
      </a>
    </li>
    <li>
      <a class="nav-link text-white o365-reports" data-url="@Url.Action("Index", "O365Reports")">
        <svg class="bi pe-none me-2" width="30" height="30"><use xlink:href="#reports" /></svg> Reports
      </a>
    </li>
  </ul>
</div>

3. 添加JavaScript实现异步加载逻辑 #

在布局页面的底部（或者单独的JS文件中）添加这段代码，监听侧边栏链接的点击事件，用AJAX把页面内容加载到主体区域：

// 给所有侧边栏导航链接绑定点击事件
document.querySelectorAll('.sidebar-nav .nav-link').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止默认的页面跳转行为
    e.preventDefault();
    
    // 获取要加载的目标页面URL
    const targetUrl = this.getAttribute('data-url');
    if (!targetUrl) return;

    // 用fetch API异步获取页面内容
    fetch(targetUrl)
      .then(response => {
        if (!response.ok) throw new Error('请求失败，请检查网络');
        return response.text();
      })
      .then(pageHtml => {
        // 更新主体区域的内容
        document.getElementById('main-content').innerHTML = pageHtml;
        
        // 可选：添加导航激活状态（高亮当前选中的链接）
        document.querySelectorAll('.sidebar-nav .nav-link').forEach(item => item.classList.remove('active'));
        this.classList.add('active');
        
        // 可选：更新浏览器地址栏和页面标题（优化用户体验）
        window.history.pushState({ path: targetUrl }, '', targetUrl);
        // 如果需要动态修改标题，可以在这里处理，比如从返回的HTML中提取标题
      })
      .catch(error => {
        console.error('加载页面出错:', error);
        document.getElementById('main-content').innerHTML = '<div class="alert alert-danger">页面加载失败，请稍后重试</div>';
      });
  });
});

4. 确保控制器Action返回纯主体内容 #

最后一步很关键：你的控制器Action（比如AzureContent、Index等）返回的内容不能包含主布局，否则加载后会重复出现侧边栏。有两种方式处理：

方式一：在Action中返回PartialView #

public IActionResult AzureContent()
{
  // 你的业务逻辑，比如获取数据
  var model = GetAzureData();
  
  // 返回分部视图，不包含布局
  return PartialView(model);
}

方式二：在视图页面中取消布局 #

如果不想修改Action，可以在对应的View页面（比如AzureContent.cshtml）顶部添加：

@{
  // 取消布局，只返回当前视图的内容
  Layout = null;
}

这样返回的就是纯主体内容，不会包含侧边栏和布局的其他部分。

这样设置后，点击侧边栏的链接就只会刷新主体区域，侧边栏保持不动，完美解决你的问题！

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