@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>

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

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

现在，selected 选项卡已激活。但是，由于某些未知原因，当单击 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"})

然后回到第一点。除了突出显示选项卡 I select 之外，它 nothing.I 确实丢失了！！我哪里错了？

Answer 1

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

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

"The About tab becomes active for a second and quickly switches to the Index"

那是因为在点击时，jQuery 点击事件添加了一个 class。但是 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 class 添加到特定的 li，基于页面。

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

@Url.Action does not route when clicked in the navbar

javascript

asp.net-mvc

asp.net-mvc-4

twitter-bootstrap