ASP.NET MVC 5 + Bootstrap – Tabs + Partial View ( AJAX )

ASP.NET MVC 5 + Bootstrap – Tabs + Partial View ( AJAX )

   Controller
 
   public ActionResult Home()
   
      … …
 
      return PartialView();
   }
 
   public ActionResult Profiles()
   {
      … …
 
      return PartialView();
   }
 
   public ActionResult Messages()
   {
      … …
 
      return PartialView();
   }
 
   View – CSS Style
 
   a:focus {
         outline: none 0px;
   }
 
   .nav-tabs li {
         outline: none 0px;
   }
 
   .active a {
         border-radius:0px !important;
         color:#000000 !important;
   }
 
   .content {
         border:1px solid #DDDDDD;
         border-top:none;
         padding:20px 20px 20px 20px;
         display:none;
   }
 
   #tab_panel {
         width:100%;
         margin-top:5px;
   }
 
   View – JavaScript
 
   $(document).ready(function () {
 
      initializepanel();
 
      $(".nav-tabs li").click(function () {
         tab_click($(this));
      });
 
   });
 
   function tab_click(ctl)
   {
         tab_handling(ctl);
 
         div = $(ctl).attr("data-div");
 
         if (div == "home")
            $(".content").load("@(HomeUrl)");
         else if (div == "profiles")
            $(".content").load("@(ProfilesUrl)");
         else if (div == "messages")
            $(".content").load("@(MessagesUrl)");
   }
 
   function tab_handling(ctl)
   {
         $(".nav-tabs li").removeClass("active");
         ctl.addClass("active");
   }
 
   function initializepanel()
   {
         $("#home_content").show();
         $(".nav-tabs li a").attr("href", "javascript:;");
   }
 
   View – HTML
 
   < div id="tab_panel">
 
      <ul class="nav nav-tabs">
         <li role="presentation" class="active" data-div="home"><a href="">Home</a></li>
         <li role="presentation" data-div="profiles"><a href="">Profiles</a></li>
         <li role="presentation" data-div="messages"><a href="">Messages</a></li>
      </ul>
 
      < div id="home_content" class="content">Home</div>
      < div id="profiles_content" class="content">Profiles</div>
      < div id="messages_content" class="content">Messages</div>
 
   </div>