ASP.NET MVC中根据查询字符串值设置li标签为激活状态的问题排查

我来帮你看看这段代码的问题哈，主要有几个点导致它没达到预期效果：

• Razor语法使用错误：你用了@{...}代码块来写判断逻辑，但这个代码块仅执行代码逻辑，不会自动把结果输出到HTML属性中。得用**表达式语法@(...)**才能让Razor把判断结果渲染到class属性里。
• 未处理空参数场景：如果URL里没有ordering参数，所有标签都不会被标记为激活状态，这时候应该默认选中第一个标签（比如newest）才合理。
• aria-selected属性固定值不合理：这个无障碍属性应该和active状态保持一致，激活的标签要设为true，未激活的设为false，而不是写死固定值。

修正后的代码实现 #

首先在页面顶部提取公共变量，减少重复代码并处理空参数情况：

@{
    // 获取当前ordering参数，无参数时默认选中newest
    string currentOrdering = Context.Request.Query["ordering"].ToString() ?? "newest";
    string catId = Context.Request.Query["CatId"].ToString();
}

然后是修正后的标签页HTML：

<li class="nav-item">
    <a class="nav-link @(currentOrdering == "newest" ? "active" : "")" 
       href="~/products?CatId=@catId&ordering=newest" 
       role="tab" 
       aria-controls="newest" 
       aria-selected="@(currentOrdering == "newest")">
        newest
    </a>
</li>
<li class="nav-item">
    <a class="nav-link @(currentOrdering == "MostVisited" ? "active" : "")" 
       href="~/products?CatId=@catId&ordering=MostVisited" 
       role="tab" 
       aria-controls="MostVisited" 
       aria-selected="@(currentOrdering == "MostVisited")">
        MostVisited
    </a>
</li>
<li class="nav-item">
    <a class="nav-link @(currentOrdering == "Most-Rank" ? "active" : "")" 
       href="~/products?CatId=@catId&ordering=Most-Rank" 
       role="tab" 
       aria-controls="Most-Rank" 
       aria-selected="@(currentOrdering == "Most-Rank")">
        Most-Rank
    </a>
</li>
<li class="nav-item">
    <a class="nav-link @(currentOrdering == "cheapest" ? "active" : "")" 
       href="~/products?CatId=@catId&ordering=cheapest" 
       role="tab" 
       aria-controls="cheapest" 
       aria-selected="@(currentOrdering == "cheapest")">
        cheapest
    </a>
</li>

关键修正说明 #

1. 公共变量提取：提前获取currentOrdering和catId，既减少重复代码，又通过?? "newest"处理了无ordering参数的默认情况。
2. 正确使用Razor表达式：用@(...)替代@{...}，让Razor将条件判断的结果直接输出到class属性中，实现激活状态的标记。
3. 同步无障碍属性：动态设置aria-selected的值，让它和active状态保持一致，符合Web无障碍开发规范。

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