Select Tab on Page Load in ASP.NET MVC

Question

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?

Okay, I used "A" and "B" for ease, but I suppose it is not realistic. The id of the tabs are set correctly. — MoonKnight
– 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
– Moe, Commented Nov 12, 2015 at 14:54

davcs86 · Accepted Answer · 2015-11-12 16:16:46Z

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

edited Nov 12, 2015 at 16:16

answered Nov 12, 2015 at 15:14

davcs86

3,9462 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jeremy Cook Over a year ago

I'm not on board with your first snippet but the second is right from bootstrap's docs, and I feel like the first should also come from the docs, which would end up being something like $('#@activeTab').tab('show');.

davcs86 Over a year ago

Yes, that's the documentation way. I updated my answer.

Jeremy Cook Over a year ago

Do you mind if I edit your answer to take into account XSS?

MoonKnight Over a year ago

I have checked my javascript, stepped through and it gets the correct tab elem, but it does not updated the view. Any other ideas?

Jeremy Cook Over a year ago

@Killercam I'd suggest doing this without the ViewBag variable or any MVC framework pieces. Just call $("#productA").tab("show") and $("productB").tab("show") directly. It is sounding like you issue is with your JavaScript or HTML, and not MVC or Razor. Go setup a jsfiddle.net

|

Shyju · Accepted Answer · 2015-11-12 16:38:28Z

1

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

edited Nov 12, 2015 at 16:38

answered Nov 12, 2015 at 15:26

Shyju

220k106 gold badges421 silver badges499 bronze badges

4 Comments

MoonKnight Over a year ago

Thanks very much for your response. I am sending the correct string, I just provided "A" as an illustration. I have updated the answer. I have also amended the id type still no selection...

Shyju Over a year ago

The above code should work fine to add the css class to selected tab. ( Test it by adding a background color to your active css class and you can see the change in your page. I guess your problem is with the tab plugin ?

MoonKnight Over a year ago

I have checked the JS and it steps through fine and get the right elem, the view is just not updated... Thanks very much for your help.

Shyju Over a year ago

@Killercam See my updated answer. this is a working solution, tested in my local :)

Collectives™ on Stack Overflow

Select Tab on Page Load in ASP.NET MVC

2 Answers 2

8 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related