CODEWITHSUNDEEP
jqueryasp.net-mvc-4twitter-bootstrapangularjs
Milligran
Milligran

Reputation: 3161

How to load MVC views inside navigation tabs

I am trying to create a website(C#/MVC 4) for the very first time using twitter bootstrap css/ui views

The website has 3 navigation tabs(Home, About ,Contacts)

I never had any idea that loading the various pages(index.cshtml, about.cshtml, contact.cshtml) in their respective tabs would be so hard.

I have tried loading the tabs using jquery as described here :

http://getbootstrap.com/javascript/#tabs

I also tried the following http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/

My index page looks like:

<head>
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
                <meta charset="UTF-8" />
    <link href ="/Content/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<div>
<img src="~/Content/bootstrap/img/test.png"/>
 <ul class="nav nav-tabs" id="myTab">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contact" data-toggle="tab">Contacts</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Home</div>
    <div class="tab-pane fade" id="about">About</div>
    <div class="tab-pane fade" id="contact" />Contacts</div>
</div>

I had problems implementing all the above examples as I am a beginner programmer. Someone suggested using Angular Ngviews directive.

Can someone please advise me of the simplest way to load the tabs with their respective pages inside the navigation tabs. Please bear in mind that this is a MVC application.

Upvotes: 1

Views: 9423

Answers (3)

K2aN
K2aN

Reputation: 31

I think you want to load partial view so you need to ; 

<head>
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
                <meta charset="UTF-8" />
    <link href ="/Content/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<div>
<img src="~/Content/bootstrap/img/test.png"/>
 <ul class="nav nav-tabs" id="myTab">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contact" data-toggle="tab">Contacts</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">@Html.Action("ActionResultName","Controller"</div>

----others are same way you can load...
</div>

But you have to return at the end of your ActionResult return PartialView("Path/to/partialview.cshtml")

Upvotes: 3

Milligran
Milligran

Reputation: 3161

I was able to achieve what I wanted to by just creating a layout page instead.

Upvotes: 0

Moby&#39;s Stunt Double
Moby&#39;s Stunt Double

Reputation: 2550

Seeing as you state that you are a beginner, you may wish to look at jQueryUI. It includes tabs with Ajax Functionality by default and it is simply a case of configuring your tabs as required.

http://jqueryui.com/tabs/#ajax

See how the href is used by convention?

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

In the href, you would put something like 

@Url.Action("About")

If you had an ActionResult called About returning the about.cshtml view.

Upvotes: 0

Related Questions