【问题标题】:Redirect to Page but specific Tab重定向到页面但特定选项卡
【发布时间】:2016-09-19 18:41:17
【问题描述】:

我以this 为例说明我正在尝试做的事情。

我有一个标签页。

在我的控制器中,我想重定向到一个页面,但该页面上的特定选项卡。

现在,当我在该页面上并将鼠标悬停在标签上时,链接是http://localhost:xxxxx/OInfoes/Details/2#phases

所以在我的控制器中,我这样做是为了尝试重新创建相同的链接:

return new RedirectResult(Url.Action("Details", "OInfoes", new { id = phase.OID }) + "#phases");

这给了我正确的链接,但它没有把我放在正确的标签上。

如何让它工作?

我的标签页 HTML 如下:

<ul class="nav nav-tabs">
    <li class="active"><a href="#oInfo" data-toggle="tab">Information</a></li>
    <li><a href="#reports" data-toggle="tab">Previous Reports</a></li>
    <li><a href="#phases" data-toggle="tab">Previous/Current Phases</a></li>
</ul>

【问题讨论】:

  • 您正在正确生成链接,因此该页面上可能有一些额外的逻辑来处理您在该页面上时的哈希更改,这与您被重定向到该页面时不同哈希它。你用的是什么 JavaScript 库?
  • @AndrésNava-.NET 我正在使用 jQuery,但我没有为此使用 jQuery 做任何事情。这些标签是由Bootstrap 标记生成的

标签: c# asp.net-mvc tabs


【解决方案1】:

您应该更新您的操作方法以采用一个参数来表示要选择的选项卡。

public ActionResult Details(int id,string tab="")
{
   if (id != null)
        ViewBag.ActiveTab = id.ToString();
   // to do : Return a view
}

当您返回重定向结果时,发送一个名为 tab 的查询字符串

return new RedirectResult(Url.Action("Details", "OInfoes", new { id = phase.OID ,
                                                                           tab="phases"}));

现在在您的文档中准备好,使用 ViewBag.ActiveTab 的值,从中生成 jQuery 选择器并使用它来调用 .tab('show')

$(function () {
    var selector = '@ViewBag.ActiveTab';
    if(selector)
    {
       $("#link-tab"+selector).tab('show');
    }        
});

确保您的标签页的 id 与我们上面的代码匹配。

<ul class="nav nav-tabs">
    <li class="active"><a href="#oInfo" id="link-info" data-toggle="tab">Info</a></li>
    <li><a href="#reports" id="link-reports" data-toggle="tab">Prev Reports</a></li>
    <li><a href="#phases" id="link-phases" data-toggle="tab">Prev/Cur Phases</a></li>
</ul>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-05-11
    • 1970-01-01
    • 1970-01-01
    • 2018-06-29
    • 1970-01-01
    • 1970-01-01
    • 2018-01-14
    • 1970-01-01
    相关资源
    最近更新 更多