将 @Html.ActionLink 重载方法的片段部分 link 到标签页的一部分

Question

我正在开发 ASP.NET MVC 网络应用程序。

在我的一个页面上，我标记了如下所示的信息：

我的 ActionLink 如下所示：

@Html.ActionLink("Back to Details", "RecordView", "ApplicantRecords", null, null, "Documents", new { id = Model.InternID }, null)

现在，当我将鼠标悬停在我的应用程序中的 link 上时，它具有正确的语法以及 InternID 和片段，但是当我单击它时..它会将我发送到显示 "Applicant Profile" 的选项卡, 不是 "Documents"..

当我将鼠标悬停在 "Documents" 选项卡上时，它与我将鼠标悬停在我的应用程序中的操作link 时具有相同的 url。

有办法解决这个问题吗？

Answer 1

简单地将片段附加到 URL 不会激活特定选项卡。 JavaScript "tab" 库仅利用片段进行优雅降级：如果未启用 JavaScript，单击 "tab" 将跳转到选项卡内容所在的页面右侧部分，因为页面锚点的工作方式。但是，您有责任检查 URL 中的片段（如果存在）并激活相应的选项卡。如何激活选项卡取决于您的特定解决方案，不过您没有向我们提供任何相关信息。

Answer 2

除了 Chris Patt 的回答。

您需要明确启用所需的特定选项卡。

首先，您需要在 url 查询字符串中再传递一个参数来表示要选择的选项卡。

@Html.ActionLink("Back to Details", "RecordView", "ApplicantRecords", 
                                       new { id = Model.InternID ,tab="documents" }, null)

并且在您的 RecordView() 操作方法中，您将接受它，将其设置为 ViewBag，以便您可以在剃刀视图中阅读它。

public ActionResult RecordView(int id,string tab="profile")
{ 
  ViewBag.CurrentTab = tab;
  return View();
}

并且在您看来，在文档 ready 事件中，我们将读取此值并使用它来显示特定选项卡。

$(function() {

    var tab = "@ViewBag.CurrentTab";
    $('.nav-tabs a[href=#'+tab+']').tab('show');

});

假设您的选项卡 link 的 href 值为 "#profile" 和 "#documents"

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
       <a href="#profile" aria-controls="Profile" role="tab" data-toggle="tab">Profile</a>
   </li>
    <li role="presentation">
      <a href="#documents" aria-controls="documents" role="tab" data-toggle="tab">Docs</a>
    </li>
</ul>

将 @Html.ActionLink 重载方法的片段部分 link 到标签页的一部分

Fragment portion of @Html.ActionLink overloaded method to link to a part of the page that is tabbed

asp.net-mvc

razor

actionlink