title: Tab Controls in ASP.net MVC
body: <p>I am trying to visualize tab pages in ASP.net MVC. I have tried many solutions, but I am unable to figure out right way to get the result.</p>
  
  <p>My requirement is to get the following view:</p>
  
  <p><a href="https://i.stack.imgur.com/VxwKH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VxwKH.png" alt=""></a></p>
  
  <p>However, I am getting the following view:</p>
  
  <p><a href="https://i.stack.imgur.com/6a5tn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6a5tn.png" alt=""></a></p>
  
  <p>Controller:</p>
  
  <pre><code>public ActionResult CorporationRegistrationPg1()
          {
              return View(_db.SUPRTesting);
          }
  
          public ActionResult CorporationRegistrationPg2()
          {
              return View();
          }
  
          [HttpPost]
          public ActionResult CorporationRegistrationPg2(int selectedTab)
          {
              ViewBag.SelectedTab = selectedTab;
              return View();
          }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>@{
      ViewBag.Title = "CorporationRegistrationPg2";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;body&gt;
      &lt;div id="tabs" style="height: 1475px; width: 80%; text-align: left; margin-left: 10%; margin-right: 10%; margin-top: 10%; margin-bottom: 46px; background-color: #FFFFFF; border-color:black; border-style:solid"&gt;
          &lt;ul&gt;
              &lt;li class="active"&gt;&lt;a href="#tab1"&gt;Corporation Details&lt;/a&gt;&lt;/li&gt;
              &lt;li class="active"&gt;&lt;a href="#tab2"&gt;Contact Information&lt;/a&gt;&lt;/li&gt;
              &lt;li class="active"&gt;&lt;a href="#tab3"&gt;Documents&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;div id="tab1"&gt;
  Content 1
  &lt;/div&gt;
  &lt;div id="tab2"&gt;
  Content 2
  &lt;/div&gt;
  &lt;div id="tab3"&gt;
  Content 3
  &lt;/div&gt;
  &lt;/div&gt;
      &lt;input type="hidden" id="selectedTab" name="selectedTab" value="@ViewBag.SelectedTab" /&gt;
   &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
            rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript"&gt;
          var selected_tab = 0;
          $(function () {
              var tabs = $("#tabs").tabs({
                  select: function (e, i) {
                      selected_tab = i.index;
                  }
              });
              selected_tab = $("#selectedTab").val() != "" ? parseInt($("#selectedTab").val()) : 0;
              tabs.tabs('select', selected_tab);
              $("form").submit(function () {
                  $("#selectedTab").val(selected_tab);
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Can someone help me with this. If you want me to try a whole new way, I am ready to take that too.</p>