Redirect to specific tab from another page in asp.net

Question

Good day all, I'm using Bootstrap 3 in asp.net mvc 4 & I'm trying to make tabs with bootstrap. I want other pages to redirect to a specific tab when clicked. I'm new to asp.net so I can't figure it out how can I do that. Here is my code,

Page that has the tabs(Service_BO.cshtml)

<div class="container well" style="min-width: 100%; padding-right: 5px;">
    <h3>BO Account Opening</h3><hr style="border-top: 2px solid #096596;" />
    <ul class="nav nav-tabs">
        <li><a href="#bo" role="tab" data-toggle="tab">BO Account Opening</a></li>
        <li><a href="#ipo" role="tab" data-toggle="tab">IPO Application</a></li>
        <li><a href="#smi" role="tab" data-toggle="tab">Share Market Investment</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="bo">
            <p>BO</p>
        </div>
        <div class="tab-pane" id="ipo">
            <p>IPO</p>
        </div>
        <div class="tab-pane" id="smi">
            <p>SMI</p>
        </div>
    </div>
</div>

External Page(Services.cshtml>

<div class="col-sm-6 col-md-3">
    <img class="img-rounded img-responsive" src="~/Images/modhumita01.jpg" />
    <a href="@Url.Action("Service_BO", "Home")><h3>BO Account Opening</h3></a>
    <span><b>Open an individual and/or joint account</b></span>
</div>

Is there any way I can redirect to a specific tab by clicking a link from other page? It'll be a life saving if anyone can help me. Tnx.

can use the hash in url that matches tab href. When page loads match the location.hash back to the href — charlietfl, Jan 11 '15 at 08:30
How can I do that? Can you show me a code if its not a trouble for you? — Shihan Khan, Jan 11 '15 at 08:34
link on other pages =>`` ...then `var hash = location.hash // returns #ipo` — charlietfl, Jan 11 '15 at 08:36
That would be navigating to a specific location on page. Nothing to do with bootstrap tabs. — Joonas Koski, Jan 11 '15 at 08:37
@JoonasKoski It is the ID for the content for that tab which is exactly what url hash is for. You then match to the tab link and activate based on that — charlietfl, Jan 11 '15 at 08:39
Ok, I see now. But why use anchor to pass the value? That could mess up navigating. Better solution would be to use querystring. Or take advantage of MVC like in the example below. — Joonas Koski, Jan 11 '15 at 08:41
could use query string , I'm just passing on a totally valid approach that already has all the ingredients readily available and is also commonly used for this situation — charlietfl, Jan 11 '15 at 08:43

score 2 · Accepted Answer · answered Jan 11 '15 at 08:30

2

You can resolve the active tab in your controller and pass the value to view (in your ViewModel, or ViewBag). Then you can use jquery to set the active class:

Controller

//empty value or a default
var activeTab = "bo";

//selecting active tab logic here
//...
ViewBag.Active = activeTab;

Service_BO.cshtml

@{
    //value is 'bo', 'ipo' or 'smi'
    string active = ViewBag.Active.ToString(); 
}

<script>
$(function () {
    var selector = '@active';
    $("#" + selector).addClass("active");
});
</script>

answered Jan 11 '15 at 08:30

Joonas Koski

269
1
5

I got this error, `A potentially dangerous Request.Path value was detected from the client`. Where should I put the code for controller part? – Shihan Khan Jan 11 '15 at 08:47
Sorry I had a typo in Services page. This one worked perfectly. TnQ so much. I made your answer correct. – Shihan Khan Jan 11 '15 at 08:55
only issue here is how would one bookmark the different tabs? That's why the hash approach is more versatile – charlietfl Jan 11 '15 at 09:02
That is where MVC kicks in. In 'external' page you could have @Url.Action("Service_BO", "Home", new { active = "bo"}) which would generate something like this (depending on routing) http://.../Home/Service_BO/?active=bo and you can easily read the active parameter in controller. – Joonas Koski Jan 11 '15 at 09:13
@joonasKoski, I've tried your this method. But I'm getting this error(line 3 on red), `Cannot perform runtime binding on a null reference`. Source Error `Line 1: @{ Line 2: ViewBag.Title = "Service_BO"; Line 3: string active = ViewBag.Active.ToString(); Line 4: Layout = "~/Views/Shared/_Layout.cshtml"; Line 5: }` Any idea what is wrong? – Shihan Khan Jan 11 '15 at 09:33
In you controller, are you returning View? If you are returning i.e. RedirectToAction, ViewBag value is lost. Using ViewBag is just one approach, I usually use ViewModel. – Joonas Koski Jan 11 '15 at 09:43
@JoonasKoski I think you are missing the point that browser can't set url param on tab change unless you work within browser history API, but using hash works by default. Thus if I refresh page **after** tab change that tab stays active – charlietfl Jan 11 '15 at 17:23

score 1 · Answer 2 · answered Jan 11 '15 at 08:55

1

Can do something like this based on link shown above in comments

/* page load */
$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');  


  /* add hash to url when tabs selected (for bookmarking) */
  $('.nav-tabs a').on('shown', function (e) {
      window.location.hash = this.hash;
  });
});

answered Jan 11 '15 at 08:55

charlietfl

170,828
13
121
150

Where should I put this code? In Services page or Service_BO page? – Shihan Khan Jan 11 '15 at 08:56
on page that tabs are on or external script file. – charlietfl Jan 11 '15 at 08:57
Ok I might try also that as well though I got my solution. – Shihan Khan Jan 11 '15 at 08:57
link to numerous other hash codes for same thing http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink – charlietfl Jan 11 '15 at 09:00

Redirect to specific tab from another page in asp.net

2 Answers2