How to invoke javascript method based on a Value o

问题:

I'm working on small mvc application, and on my view there is tab control which has 3 tabs, and depending on ViewBag value I need to open my third tab, here is image of a how my view looks:

So when View is loaded, I need to check for a value of my ViewBag and depending on that I need to open my TAB 3, so here is what I've tried:

<div class="" role="tabpanel" data-example-id="togglable-tabs">
    <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
            @if (ViewBag.SuccessBody == null)
            {
                <li role="presentation" class="active">
                    <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">TAB 1</a>
                </li>
                <li role="presentation" class="">
                    <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 2</a>
                </li>
                <li role="presentation" class="">
                    <a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 3</a>
                </li>
            }
            else
            {
                <li role="presentation" class="">
                    <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">TAB 1</a>
                </li>
                <li role="presentation" class="">
                    <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 2</a>
                </li>
                <li role="presentation" class="active" onload="RedirectToTab();">
                    <a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 3</a>
                </li>

            }
    </ul>

As you can see guys depending on a value od ViewBag.SuccessBody I tried to load corresponding HTML, so if there is a value then I would load HTML which include TAB3 To own class="active" (please read code detailed).

But unfortunatelly with this approach, TAB3 becoming active but not also OPENED, so its content is not visible, it's being kept acctually on TAB1 while TAB3 looks like it's active, and that is bad :( .

So what I've done is :

I wrote javasscript method which should really open TAB3, but I couldn't know how to invoke it so I guess I could invoke it using onload method on my li element, so guys as you can see in code above I wrote on my li

onload="RedirectToTab();"

but unfortunatelly nothing happens..

And here is definition of my RedirectToTab javascript method:

function RedirectToTab() {
            var customVal = $("#editViewBag").val();
            if (customVal == 'True') {
                $('#myTab a[href="#tab_content3"]').tab('show');
            }
}

So guys one more time, how can I open TAB3 depending on a vaue of my ViewBag?

Thanks guys Cheers

回答1:

Just use the razor engine to output your ViewBag value in the javascript:

function RedirectToTab() {
        var customVal = '@ViewBag.SuccessBody';
        if (customVal == 'True') {
            $('#myTab a[href="#tab_content3"]').tab('show');
        }
}

Now you can call this from the doc ready:

$(document).ready(function () {
    RedirectToTab();
});

回答2:

You don't need to use JavaScript to open the tab. You can do it your Razor view which has the benefit of not seeing the active tab switch from 1 to 3 when the page loads. Here is a simple example with 3 tabs:

@{ 
    string tab1 = null, tab2 = null, tab3 = null;
    if (ViewBag.SuccessBody == null)
    {
        tab1 = "active";
    }
    else
    {
        tab3 = "active";
    }
}
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="@tab1"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation" class="@tab2"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
    <li role="presentation" class="@tab3"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane @tab1" id="tab1">
         tab 1
    </div>
    <div role="tabpanel" class="tab-pane @tab2" id="tab2">
        tab 2
    </div>
    <div role="tabpanel" class="tab-pane @tab3" id="tab3">
        tab 3
    </div>
</div>