CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrap-3
Developer
Developer

Reputation: 1435

How can I load tabstrip contents on demand in MVC

I am using bootstrap tabstrip to create tabs. But that TabStrip load all tabs data when I click on menu option. I want to load my Tab Strip data when I click on that.

Below is my code to create tabs strip using Bootstrap:

             <div class="container-fluid">
<ul id="tabstrip" class="nav nav-tabs content-tabs" role="tablist">

    <li class="active"><a href="#OverView" role="tab" data-toggle="tab"><strong>Overview</strong></a></li>
    <li role="presentation"><a href="#NodeView" role="tab" data-toggle="tab"><strong>Node</strong></a></li>
    <li role="presentation"><a href="#ConnectView" role="tab" data-toggle="tab"><strong>Connect</strong></a></li>

</ul>

<div class="tab-content">

    <div class="tab-pane fade" id="OverView">@Html.Action("Overview")</div>
    <div class="tab-pane fade" id="NodeView">@Html.Action("Node")</div>
    <div class="tab-pane fade" id="ConnectView">@Html.Action("Connect")</div>

</div>

How can I load contents of different tab when I click on that tab?

Upvotes: 1

Views: 1364

Answers (1)

Shyju
Shyju

Reputation: 218892

You can use ajax to load the tab content when user clicks on the tab link.

So update your markup so that the links will have a css class and an html5 data attribute where we will store the url of the partial view to be loaded when user clicks on it. We will use the css class as our jQuery selector to register this behaviour.

<div class="container-fluid">
    <ul id="tabstrip" class="nav nav-tabs content-tabs" role="tablist">

        <li class="active">
         <a href="#OverView" role="tab" class="ajaxTabs" data-url="@Url.Action("Overview")" data-toggle="tab"><strong>Overview</strong></a></li>
        <li role="presentation"><a href="#NodeView" role="tab" class="ajaxTabs" data-url="@Url.Action("Node")" data-toggle="tab"><strong>Node</strong></a></li>
        <li role="presentation"><a href="#ConnectView" role="tab" class="ajaxTabs" data-url="@Url.Action("Connect")" data-toggle="tab"><strong>Connect</strong></a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade" id="OverView"></div>
        <div class="tab-pane fade" id="NodeView"></div>
        <div class="tab-pane fade" id="ConnectView"></div>

    </div>
</div>

And in your document ready event, register the click event on these links with our new css class, when clicked, read the data-url attribute value, use jQuery load method to load the data to the corresponding tab content div.

$(function () {

    $("a.ajaxTabs").click(function (e) {
        e.preventDefault();
        var u = $(this).data("url");
        var targetItem = $(this).attr("href");
        $(targetItem).load(u);
    });

});

Upvotes: 1

Related Questions