title: ASP.NET MVC 3 navigation via JQuery UI tabs
body: <p>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?</p>
  
  <p>Here is my implementation.</p>
  
  <p>1) I have created standard MVC 3 project with razor view engine. Menu in Layout page looks like this.</p>
  
  <pre><code>&lt;div id="menucontainer"&gt;
      &lt;ul id="menu"&gt;
          &lt;li&gt;@Html.ActionLink("Home", "Index", "Home", null, new { title="Index"})&lt;/li&gt;
          &lt;li&gt;@Html.ActionLink("About", "About", "Home", null, new { title="About"})&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>2) Here is my HomeController actions.</p>
  
  <pre><code>public PartialViewResult Index()
  {
      ViewBag.Message = "Welcome to ASP.NET MVC!";
      return PartialView();
  }
  
  public PartialViewResult About()
  {
      return PartialView();
  }
  
  public ViewResult Default()
  {
      return View();
  }
  </code></pre>
  
  <p>3) Also I have changed Global.asax.cs to show Default page.</p>
  
  <pre><code>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
      );
  
  }
  </code></pre>
  
  <p>4) And finally here is my script to apply tabs behavior.</p>
  
  <pre><code>$(document).ready(function() {
  $('#menucontainer').tabs();
  $("menucontainer").bind('tabsselect',
      function(event, ui) {
          document.title = ui.tab.title;
      }
  );});
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;div id="menucontainer"&gt;
      ...
      &lt;div id="Index"&gt;
          Content of Index tab.
      &lt;/div&gt;
      &lt;div id="About"&gt;
          Content of About tab.
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="main"&gt;
      Content of the page.
  &lt;/div&gt;
  </code></pre>