title: dynamically load content when tab is active in mvc bootstrap tab-content
body: <p>I am using bootstrap and ASP.NET mvc to create a web app. I am using partial views on each tab however right now all the data is coming in at the same time. I would like to call my partial to query and return data only when the tab is active. How can I do that?</p>
  
  <pre><code>&lt;div&gt;
      &lt;ul class="nav nav-tabs nav-justified"&gt;
          &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Service&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Instrument&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab-content"&gt;
  
          &lt;div class="tab-pane fade in active" id="tab1"&gt;
              @Html.Action("Index", "Controller1")
  
          &lt;/div&gt;
          &lt;div class="tab-pane fade" id="tab2"&gt;
              @Html.Action("Index", "Controller2")
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>