Select 在 ASP.NET MVC 中加载页面上的选项卡

Question

我在 Razor 页面上有两个选项卡，我希望能够加载该页面以及 select 页面 A 或 B。目前，该页面加载并始终登陆 A。我已尝试按如下方式执行此操作...

在我的主页视图中，我调用我的产品视图

<a class="btn btn-default"
   href='@Url.Action("Index", "Products", new { id = "productB" })'
   role="button">
   Learn More 
</a>

我在其中传递路由值 "productB" 以便我可以尝试加载选项卡。在我的产品控制器中，我有

public ActionResult Index(object id = null)
{
    if (id != null && !String.IsNullOrEmpty())
        ViewBag.ActiveTab = id.ToString();
    return View();
}

产品视图

@{
    string activeTab = ViewBag.ActiveTab;
}

<div class="products container">
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#productA">
                <span class="glyphicon glyphicon glyphicon-plus-sign"></span>productA
            </a>
        </li>
        <li>
            <a data-toggle="tab" href="#productB">
                <span class="glyphicon glyphicon glyphicon-align-left"></span>productB
            </a>
        </li>
    </ul>
    <div class="products-body">
        <div class="tab-content">
            <div id="productA" class="tab-pane active fade in">
                ...
            </div>
            <div id="productB" class="tab-pane fade">
                ...
            </div>
        </div>
    </div>
</div>

函数

$(function () {
    var selector = '@activeTab';
    $("#" + selector).addClass("active");

    // Also tried the following...
    // var anchor = '@activeTab' || $("a[data-toggle=tab]").first().attr("href");
    // $('a[href=' + anchor + ']').tab('show');
});

但这不是 select 我的标签页。这看起来很简单，我该如何让它工作？

Answer 1

尝试

$(function () {
    var anchor = "@Html.Raw(HttpUtility.JavaScriptStringEncode(activeTab))"
        || $(".nav-tabs a").first().attr("href").replace('#','');
    //$('#'+anchor).tab('show');
    $('.nav-tabs a[href=#' + anchor + ']').tab('show');
});

还要确保您有 activated the tabs

$('.nav-tabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})

JSFiddle demo

Answer 2

首先，您应该将参数类型从对象更改为字符串。如果您将其保留为对象，当您在 ViewBag 的 razor 视图中读取它时，您将不会获得预期的字符串（A 或 B），而是将获得 System.Object

public ActionResult Index(string id = null)
{
    if (id != null)
        ViewBag.ActiveTab = id.ToString();
    return View();
}

此外，您应该通过在该选项卡的锚标记上调用 tab 方法来启用该选项卡。我更改了您的标记，为每个锚标记包含一个 Id，以便我们稍后可以 select 我们 jQuery 代码中的元素。

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" id="link-tabA" href="#productA">
            <span class="glyphicon glyphicon glyphicon-plus-sign"></span>productA
        </a>
    </li>
    <li>
        <a data-toggle="tab" id="link-tabB" href="#productB">
            <span class="glyphicon glyphicon glyphicon-align-left"></span>productB
        </a>
    </li>
</ul>

现在在您的文档中准备就绪，使用 @activeTab 变量值（您已经从 ViewBag 中读取的值）来构建 jQuery select 或 a 标记的表达式并在上面调用 show 方法。

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

Select 在 ASP.NET MVC 中加载页面上的选项卡

Select Tab on Page Load in ASP.NET MVC

javascript

asp.net-mvc

jquery

twitter-bootstrap

bootstrap-tabs