javascript - @Url.Action 在导航栏中单击时不会路由

Question

我对MVC、JavaScript 或Bootstrap 了解不多。但是在这里，我被困在对所有这三个方面都有效的事情上。我有一个 Layout 页面，其中包含使用 Bootstrap 设置样式的导航栏。想法取自 here .下面给出标记。

<div id="innerTab">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="@Url.Action(" Index ", "Home ")" data-toggle="tab">Index</a>
    </li>
    <li>
      <a href="@Url.Action(" About ", "Home ")" data-toggle="tab">About</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active">
      @RenderBody()
    </div>
  </div>
</div>

由于这是一个布局 View ，我希望能够从选项卡内容区域中的其他 View 加载内容。因此，我必须使用不能多次调用的 @RenderBody()。我不太确定 data-toggle 到底做了什么，但是点击 About 没有任何影响。然后我意识到我必须通过 JS 在点击的选项卡上手动设置 active 类。所以这就是我所做的。

$(".nav li").on("click", function() {
  $(".nav li").removeClass("active");
  $(this).tab('show');
})

现在，选定的选项卡确实已激活。但是，由于某些未知原因，当单击 About 时，它不会导航到 About 页面，而是停留在 Index。因此，我不得不将其更改为 @Html.ActionLink，如下所示。

@Html.ActionLink("About", "About", "Home")

这已成功导航到 About 页面。但是，About 选项卡会激活一秒钟并快速切换到 Index 选项卡，但会显示 About 页面中的内容。如下所示。

认为添加 data-toggle 会解决这个问题。所以我按照给出的答案 here .

@Html.ActionLink("About", "About", "Home", new { data_toggle="tab"})

然后回到原点。除了突出显示我选择的选项卡之外，它什么都不做。我迷路了!我哪里错了？

Answer 1

首先，@Url.Action("Index ", "Home ") 不起作用，因为您的 Action 和 Controller< 周围有多余的空格 参数。

应该是@Url.Action("Index", "Home")

---

“关于选项卡激活一秒钟并快速切换到索引”

那是因为，在点击时，jQuery 点击事件添加了一个类。但是 MVC 重定向到一个新页面，并且 _Layout 再次呈现为默认的 active 选项卡 Home。

所以到你的 About.cshtml 的顶部，

@{
    ViewBag.Title = "About";
    ViewBag.ActiveNav = "About"; // you'll need to add this to Home as well
}

然后将布局更改为:

  <ul class="nav nav-pills">

   //Based on the "ActiveNav" value, "active" class will be added

    <li class="@(ViewBag.ActiveNav == "Home" ? "active" : "")">
      @Html.ActionLink("Index", "Index", "Home")
    </li>
    <li class="@(ViewBag.ActiveNav == "About" ? "active" : "")">
      @Html.ActionLink("About", "About", "Home")
    </li>
  </ul>

现在 active 类被添加到特定的 li，基于页面。