title: How to load MVC views inside navigation tabs
body: <p>I am trying to create a website(C#/MVC 4) for the very first time using  twitter bootstrap css/ui views</p>
  
  <p>The website has 3 navigation tabs(Home, About ,Contacts)</p>
  
  <p>I never  had any idea that loading the various pages(index.cshtml, about.cshtml, contact.cshtml) in their respective tabs would be so hard.</p>
  
  <p>I have tried loading the tabs using jquery as described here : </p>
  
  <p><a href="http://getbootstrap.com/javascript/#tabs" rel="nofollow">http://getbootstrap.com/javascript/#tabs</a></p>
  
  <p>I also tried the following
  <a href="http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/" rel="nofollow">http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/</a></p>
  
  <p>My index page looks like:</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;@ViewBag.Title - My ASP.NET MVC Application&lt;/title&gt;
                  &lt;meta charset="UTF-8" /&gt;
      &lt;link href ="/Content/bootstrap/css/bootstrap.css" rel="stylesheet"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;div&gt;
  &lt;img src="~/Content/bootstrap/img/test.png"/&gt;
   &lt;ul class="nav nav-tabs" id="myTab"&gt;
      &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#about" data-toggle="tab"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact" data-toggle="tab"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="home"&gt;Home&lt;/div&gt;
      &lt;div class="tab-pane fade" id="about"&gt;About&lt;/div&gt;
      &lt;div class="tab-pane fade" id="contact" /&gt;Contacts&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I had problems implementing all the above examples as I am a beginner programmer. Someone suggested using Angular Ngviews directive.</p>
  
  <p>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.</p>