重定向到页面但特定的选项卡

本文关键字：选项 重定向 | 更新日期: 2023-09-27 18:07:35

我已经用这个作为我想做的一个例子。

我有一个标签页。

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

现在，当我在那个页面上，把鼠标悬停在标签上，链接是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>

重定向到页面但特定的选项卡

您应该更新您的操作方法，使其接受一个参数来表示要选择的选项卡。

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 value的值，从中生成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>
相关文章：