Question

Is it possible to implement navigation using jquery ui tabs instead of standard tabs in asp.net mvc 3 project? Tabs very similar as on this site (Questions, Tags, Users…). Have any examples to do that?

Here is my implementation.

1) I have created standard MVC 3 project with razor view engine. Menu in Layout page looks like this.

<div id="menucontainer">
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home", null, new { title="Index"})</li>
        <li>@Html.ActionLink("About", "About", "Home", null, new { title="About"})</li>
    </ul>
</div>

2) Here is my HomeController actions.

public PartialViewResult Index()
{
    ViewBag.Message = "Welcome to ASP.NET MVC!";
    return PartialView();
}

public PartialViewResult About()
{
    return PartialView();
}

public ViewResult Default()
{
    return View();
}

3) Also I have changed Global.asax.cs to show Default page.

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "Home", action = "Default", id = UrlParameter.Optional } // Parameter defaults
    );

}

4) And finally here is my script to apply tabs behavior.

$(document).ready(function() {
$('#menucontainer').tabs();
$("menucontainer").bind('tabsselect',
    function(event, ui) {
        document.title = ui.tab.title;
    }
);});

So jQuery ui just adds additional divs for each tab to the page (2 in this case) and after that div#main appends. I want just replace content of div#main dynamically after user goes to other tab in menu bar. Now it looks like this.

<div id="menucontainer">
    ...
    <div id="Index">
        Content of Index tab.
    </div>
    <div id="About">
        Content of About tab.
    </div>
</div>
<div id="main">
    Content of the page.
</div>

Answer 1

Make sure you have defined the ui-tabs-hide CSS class in order to hide inactive tabs:

.ui-tabs-hide {
    display: none;
}

The way jQuery UI Tabs work is that after changing the tab it simply adds the ui-tabs-hide to all other tabs and removes it from the currently visible tab after refreshing its content from the AJAX call.