Question

我正在尝试使用bootstrap 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>

将鼠标悬停在每个标签上会显示正确的网址路由。但是，我得到一个jQuery javascript运行时错误

第{18}行第{2}栏第2行未处理的例外 0x800a139e - JavaScript运行时错误：语法错误，无法识别表达式：/ Users

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

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

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

Answer 1

客户端与服务器端

此处的一个问题是，当您点击链接时，他们实际上将按预期导航到相应的Controller Action。发生这种情况时，您的当前客户端代码（例如您的选择）将被完全忘记（因为页面将被刷新）。

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

以服务器级别存储

您可能需要考虑使用某种类型的服务器端变量来处理此问题，以确定应用程序中的“您在哪里”，并在相应的solveFourTermEq()元素上为您的选项卡设置“活动”类。您可以通过多种方式处理此问题，在Controller Action中设置Calculator属性，在模型上填充值以指示当前区域等。

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

<li>

或者......只需使用更多jQuery

由于您的ActionLinks将解析为您的操作的特定URL，您可以想象只需使用一些jQuery来查找指向当前位置的任何链接并使其活动：

ViewBag

@{ 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>方法将接受当前控制器和操作，呈现它的目标位置，它将找到指向相同值的任何链接并将其设置为“活动”。

在MVC5和Razor 3

1 个答案: