CODEWITHSUNDEEP
asp.net-mvctwitter-bootstraplayoutrazor
matt weston
matt weston

Reputation: 63

How do you use mvc views to fill bootstrap tabs?

I am building an MVC application and am trying to use twitter bootstrap to build a responsive ui. I have setup my navigation as follows:

  <div class="nav navbar-fixed-top">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#pane1" data-toggle="tab">Dashboard</a></li> 
            <li><a href="#pane2" data-toggle="tab">Sell</a></li> 
            <li><a href="#pane3" data-toggle="tab">Products</a></li> 
            <li><a href="#pane4" data-toggle="tab">Customers</a></li> 
            <li><a href="#pane5" data-toggle="tab">Settings</a></li> 
            <li><a href="#pane6" data-toggle="tab">Help</a></li> 
        </ul>                                                 
    </div>
    <div>
        <div class="tab-content">
            <div id="panel1" class="tab-pane">
                page 1
            </div>
        </div>
        <!--Panels 2-6 are omitted to save space -->

    </div>
</div>

My question is what is optimal solution. 1) To find a way, to put this in a Razor Layout and load the individual panes as RenderSections 2) To scrap the Razor Layout and just apply the navigation to all content pages

Upvotes: 3

Views: 19330

Answers (2)

oalbrecht
oalbrecht

Reputation: 413

This can be done using layouts. Here are the basic steps:

  1. Create a layout that includes your navbar. Put the layout in the /Views/Shared folder. (e.g. _LayoutMain.cshtml) 

    <body>
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
    <li class="active"><a href="#pane1Link">Dashboard</a></li> 
    <li><a href="#pane2Link">Sell</a></li> 
    <li><a href="#pane3Link">Products</a></li> 
    <li><a href="#pane4Link">Customers</a></li> 
    <li><a href="#pane5Link">Settings</a></li> 
    <li><a href="#pane6Link">Help</a></li> 
</ul>                                                 
</div>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

  2. Create a template (optionally with a controller action) for each nav bar item (Sell, Products, Customers, etc.)

  3. In each template, reference your layout like so:

    @{
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}

  4. Then add the following javascript code to the main layout page. This code actively selects which nav bar item you've currently clicked:

    <script>
    $(document).ready(function () {
        var pathname = $(location).attr('pathname');
        $('a[href="' + pathname + '"]').parent().addClass('active');
    });
</script>

The nice thing about this approach is that you can nest as many layouts as you want. So for example, you could have a main navbar and within one of those pages you could have another navbar (such as tabs/pills) using the same approach.

This might be helpful too: http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor.

Upvotes: 0

Jared
Jared

Reputation: 2806

In this case I would Probably recommend using RenderPage vs RenderSection as it would appear that you will always have the same content rendered in each panel. So most of your work will be done in your _Layout.cshtml. Your body is going to look like this:

  <body>
    <div class="nav navbar-fixed-top">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#pane1" data-toggle="tab">Dashboard</a></li> 
        <li><a href="#pane2" data-toggle="tab">Sell</a></li> 
        <li><a href="#pane3" data-toggle="tab">Products</a></li> 
        <li><a href="#pane4" data-toggle="tab">Customers</a></li> 
        <li><a href="#pane5" data-toggle="tab">Settings</a></li> 
        <li><a href="#pane6" data-toggle="tab">Help</a></li> 
    </ul>                                                 
</div>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

Then you are going to have an Index.cshtml which will act as your landing page and it will look something like this:

<div>
   @Html.Partial("ViewName")
   // Reapeat for each tab
</div>

Then is each tab partial you will have your content for the tab:

<div class="tab-content">
     <div id="panel1" class="tab-pane">
          page 1
     </div>
</div>

Upvotes: 1

Related Questions