I have two tabs on a Razor page, I want to be able to load the page and either select page A or B. Currently, the page loads and always lands on A. I have attempted to do this as follows...

In my home view I call my products view

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

where I am passing the route value "productB" so I can attempt to load the tab. In my products controller I have

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

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

with the function

$(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');
});

But this does not select my tab page. This seems so simple, how can I get this to work?

I have two tabs on a Razor page, I want to be able to load the page and either select page A or B. Currently, the page loads and always lands on A. I have attempted to do this as follows...

In my home view I call my products view

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

where I am passing the route value "productB" so I can attempt to load the tab. In my products controller I have

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

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

with the function

$(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');
});

But this does not select my tab page. This seems so simple, how can I get this to work?

• javascript
• jquery
• asp-mvc
• twitter-bootstrap
• bootstrap-tabs

• The a does not have an id="A" – devqon Commented Nov 12, 2015 at 14:50
• Okay, I used "A" and "B" for ease, but I suppose it is not realistic. The id of the tabs are set correctly. – MoonKnight Commented Nov 12, 2015 at 14:53
• Have you checked the value of "selector" in your JS. Try using '@ViewBag.ActiveTab' instead of '@activeTab' and make sure this called on load. – Moe Commented Nov 12, 2015 at 14:54
• Where is html with tag who has an id? – Vova Bilyachat Commented Nov 12, 2015 at 14:55
• I will add the HTML now... – MoonKnight Commented Nov 12, 2015 at 14:56

2 Answers 2

Try

$(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');
});

Also ensure that you have activated the tabs

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

JSFiddle demo

First of all, you should change the argument type from object to string. If you keep that as object , When you read it in your razor view from ViewBag, you are not going to get the string you expected (A or B), instead you are going to get System.Object

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

Also, You should enable a tab by calling the tab method on the anchor tag for that tab. I changed your markup to include an Id for each anchor tag so that we can select the element in our jQuery code later.

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

Now in your document ready, use the value of @activeTab variable value (Which you read from your ViewBag already) to build the jQuery selector expression of the a tag and call the show method on that.

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