I use jqueryui-tabs
to display a tabbed UI.
here is how my markup looks in a MasterPage:
<div id="channel-tabs" class="ui-tabs">
<ul class="ui-tabs-nav">
<li><%=Html.ActionLink("Blogs", "Index", "Blog",
new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %></li>
<li><%=Html.ActionLink("Forums", "Index", "Forums",
new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li>
<li><%=Html.ActionLink("Twitter", "Index", "Twitter",
new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li>
</ul>
<div id="Blog_Results">
<asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
If the content is loaded via ajax, I return a partial view with the content of the tab. If the content is loaded directly, I load a page that include the content in the ContentPlaceHolder.
somewhat like this :
<asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server">
<%=Html.Partial("Partial",Model) %>
</asp:Content>
//same goes for the other tabs.
With this in place, if I access the url "/Forums" It loads the forum content in the Blog tab first, trigger the ajax load of the Blog tab and replace the content with the blog content.
I tried putting a different placeholder for each tab, but that didn't fix everything either, since when loading "/Forums" it will sure load the forum tab, but the Blog tab will show up first.
Furthermore, when using separate placeholders, If I load the "/Blogs" url, It will first load the content statically in the Blog contentplaceholder and then trigger an ajax call
to load it a second time and replace it. If I just link the tab
to the hashtag, then when loading the forum tabs, I won't get the blog content...
How would you achieve the expected behaviour?
I feel like I might have a deeper probelm in the organization of my views. Is putting the tabs in the masterpage the way
to go?
Maybe I should just hijax the links manually and not rely on jquery-ui tabs
to do the work for me.
I cannot load all tabs by default and display them using the hash tags, I need an ajax loading because it is a search process that can be long.
So
to sum up :
/Forum should load the forum tab, and let the other tabs be loaded with an ajax call when clicking on it.
/Twitter should load the twitter tab and let the other tabs....
the same goes for /Blogs and any tabs I would add later.
