在 MVC5 和 Razor 3 中向 ActionLink 添加数据切换答案

【问题标题】：Adding data-toggle to ActionLink in MVC5 and Razor 3在 MVC5 和 Razor 3 中向 ActionLink 添加数据切换
【发布时间】：2016-05-26 16:34:43
【问题描述】：

我正在尝试使用引导 css 在 MVC 5/Razor 3 应用程序中的导航选项卡上创建切换效果。我当前共享的_layout

        <div class="navbar-collapse collapse"> 
            <ul class="nav nav-pills">                           
                <li>@Html.ActionLink("Applications", "Index", "SecureApps")</li>
                <li>@Html.ActionLink("Users", "Index", "Users")</li>
                <li>@Html.ActionLink("BU Groups", "Index", "BUGroups")</li>
                <li>@Html.ActionLink("Logs", "Index", "AppLogs")</li> 
            </ul>         
        </div>

当点击一个标签并且我在一个活动页面上时，我希望能够突出显示像 Demo 这样的标签。

我找到了一个解决方案 Here 并将我的代码更新为这个

                <li class="active">@Html.ActionLink("Applications", "Index", "SecureApps", null, new { id = "menu_text", data_toggle = "tab" }))</li>
                <li>@Html.ActionLink("Users", "Index", "Users", null, new { id = "menu_text", data_toggle = "tab" })</li>
                <li>@Html.ActionLink("BU Groups", "Index", "BUGroups", null, new { id = "menu_text", data_toggle = "tab" }))</li>
                <li>@Html.ActionLink("Logs", "Index", "AppLogs", null, new { id = "menu_text", data_toggle = "tab" }))</li>

将鼠标悬停在每个选项卡上会显示正确的 URL 路径。但是，我收到了一个 jQuery javascript 运行时错误

http://localhost:19932/Scripts/jquery-1.10.2.js 中第 1864 行第 2 列的未处理异常 0x800a139e - JavaScript 运行时错误：语法错误，无法识别表达式：/用户

这是它在js库中指向的代码

Sizzle.error = function( msg ) {
throw new Error( "Syntax error, unrecognized expression: " + msg );};

在目标索引页面上的@model 声明上放置断点甚至不会被命中。

【问题讨论】：

标签： c# jquery asp.net-mvc razor twitter-bootstrap-3

【解决方案1】：

客户端与服务器端

这里的一个问题是，当您的链接被点击时，它们实际上会按预期导航到适当的控制器操作。发生这种情况时，您当前的客户端代码（例如您的选择）将被完全忘记（因为页面将被刷新）。

每当刷新页面时，客户端更改通常总是会被“擦除”，因此您需要一种方法在服务器级别持久保存这些更改。

在服务器级存储

您可能需要考虑使用某种类型的服务器端变量来处理此问题，以确定应用程序中的“您在哪里”，并在您的选项卡的适当<li> 元素上设置“活动”类。有多种方法可以处理这个问题，在控制器操作中设置 ViewBag 属性，在模型上填充一个值以指示当前区域等。

由于您的链接每个都指向不同的控制器，您甚至可以根据当前控制器确定使用哪个控制器，如下所示：

<!-- Use your Controller to determine where you are -->
@{ var controller = ViewContext.RouteData.Values["controller"]; }
<div class="navbar-collapse collapse"> 
        <ul class="nav nav-pills">                           
            <li @(controller == "SecureApps" ? "class=active" :"")>@Html.ActionLink("Applications", "Index", "SecureApps")</li>
            <li @(controller == "Users" ? "class=active" :"")>@Html.ActionLink("Users", "Index", "Users")</li>
            <li @(controller == "BUGroups" ? "class=active" :"")>@Html.ActionLink("BU Groups", "Index", "BUGroups")</li>
            <li @(controller == "AppLogs" ? "class=active" :"")>@Html.ActionLink("Logs", "Index", "AppLogs")</li> 
        </ul>         
</div>

或者...只是使用更多的 jQuery

由于您的 ActionLink 将解析为您的操作的特定 URL，因此您可以想象只需使用一点 jQuery 即可找到指向当前位置的任何链接并使其处于活动状态：

$(function(){
     // Find an element that points to the current URL and make it active
     $('a[href="@Url.Action(Convert.ToString(ViewContext.RouteData.Values["action"]), Convert.ToString(ViewContext.RouteData.Values["controller"]))"]').closest('li').addClass('active');
});

Url.Action() 方法将接受当前控制器和操作，呈现它的目标位置，它会找到指向相同值的任何链接并将其设置为“活动”。

【讨论】：