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> |