ASP.NET项目中用JavaScript动态显示路由视图名称至布局视图

嘿，我来帮你搞定这个需求！看起来你是在做一个带哈希路由的单页应用（SPA），想要在布局里动态显示当前活跃的视图名称对吧？结合ASP.NET C#和WebAPI的技术栈，咱们用纯JavaScript就能轻松实现，下面是具体步骤：

1. 在布局视图中添加视图名称容器 #

首先，在你的布局页（比如_Layout.cshtml）里找个合适的位置，添加一个用来显示视图名称的元素，给它一个唯一ID方便后续操作：

<div class="page-header">
  <h3>当前页面：<span id="currentViewName">首页</span></h3>
</div>

2. 编写JavaScript解析哈希路由并更新视图名称 #

接下来，在布局页的底部（或者单独的JS文件中引入）添加这段逻辑，用来解析URL的哈希部分，提取并更新视图名称：

// 定义更新视图名称的核心函数
function refreshViewName() {
    // 截取哈希部分，去掉开头的#和/（比如#/Subscribe会变成"Subscribe"）
    const rawViewName = window.location.hash.slice(2);
    
    // 处理哈希为空的情况（比如首次加载或回到根路径）
    const displayName = rawViewName || "首页";
    
    // 更新页面上的显示元素
    document.getElementById('currentViewName').textContent = displayName;
}

// 页面首次加载时执行一次
window.addEventListener('load', refreshViewName);

// 监听哈希变化（单页应用切换路由时自动触发）
window.addEventListener('hashchange', refreshViewName);

3. 处理复杂路由场景（可选） #

如果你的路由有更深层级，比如#/Subscribe/Detail/123，你只想显示最上层的视图名称，可以稍微修改函数：

function refreshViewName() {
    const hashSegments = window.location.hash.slice(2).split('/');
    // 取第一个非空的分段作为视图名称
    const displayName = hashSegments[0] || "首页";
    document.getElementById('currentViewName').textContent = displayName;
}

4. 结合ASP.NET后端的优化（可选） #

如果想让初始视图名称和后端路由关联，可以用Razor语法在布局页注入初始值：

<script>
// 从后端ViewBag获取初始视图名称
const defaultViewName = '@ViewBag.CurrentViewName' || "首页";

function refreshViewName() {
    const rawViewName = window.location.hash.slice(2);
    const displayName = rawViewName || defaultViewName;
    document.getElementById('currentViewName').textContent = displayName;
}

window.addEventListener('load', refreshViewName);
window.addEventListener('hashchange', refreshViewName);
</script>

然后在控制器的动作方法里设置ViewBag：

public ActionResult Index()
{
    // 可以根据当前控制器/动作动态赋值，或者写死初始值
    ViewBag.CurrentViewName = "后台首页";
    return View();
}

这个方案完全基于前端JavaScript，不需要额外调用WebAPI接口，因为哈希路由的变化是前端可控的。如果你的SPA是用Angular、React这类框架开发的，也可以结合框架自带的路由监听来实现，但上面的原生JS方案更通用，适配大多数场景。

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