JQuery Tabs and MVC Integration whilst retaining REST - asp.net-mvc

Question

I have been struggling with this one for a few days now and I thought I would put it out there and see if anyone can help. I have an MVC4 Application and I'm using the JQuery Tabs as a Menu. I have implemented this by returning partial views into the tabs. The problem is that I have no browser history and I have not maintained the MVC RESTful pages "{controller}/{action}/{id}" can anyone help me in figuring out if there is a way to change the URL based upon what the tab is clicked?
<div id="tabs">
<ul>
<li>#Html.ActionLink("Household Info", "Info", "HouseholdFees", null, new { title = "HouseholdInfo" })</li>
<li>#Html.ActionLink("Household Management", "Management", "HouseholdFees", null, new { title = "HouseholdManagement" })</li>
<li>#Html.ActionLink("Household Approval", "Approval", "HouseholdFees", null, new { title = "HouseholdApproval" })</li>
<li>#Html.ActionLink("Household Administration", "Index", "HouseholdFeesAdministration", null, new { title = "HouseholdAdministration" })</li>
</ul>
</div>
and
$("#tabs").tabs({
cache: false,
spinner: 'Loading task...',
beforeLoad: function(event, ui) {
ui.jqXHR.error(function() {
ui.panel.html(
"Loading...");
});
},
collapsible: false
});

Answer 1

You can do this with JavaScript as an anchor/hashing solution like so. Firstly, change the hash of the URL when a tab is selected.
$("#tabs").bind("tabsselect", function (event, ui) {
window.location.hash = ui.tab.hash;
});
Create a function to react to the current hash:
function setCurrentTabFromHash() {
$("#tabs").tabs("select", window.location.hash);
}
Call that function from:
$(document).ready(function () {
setCurrentTabFromHash();
});
And:
$(window).hashchange(function(){
setCurrentTabFromHash();
});
Alternatively, you could integrate Ben Alman's fabulous BBQ plugin for asynchronous browser history, as seen here:
http://benalman.com/projects/jquery-hashchange-plugin/
I hope this helps, and good luck with your app!

Answer 2

This is not really an answer Its more of an mis-understanding of the use of JS Tabs. I did't end up using the JS Tabs component at all because I think I was misusing them to try and create a menu but I did like their look and feel, so I created a new JS class that dynamically added the styling of the JS TABS component to my own menu. I lost all the ajax bit and caching ect... but I think this was a better solution for my needs.
JS Extension:
(function ($) {
$.fn.tabmenu = function() {
// Plugin code
return this.each(function() {
$(this).addClass("ui-tabs ui-widget ui-widget-content ui-corner-all");
$(this).find("ul").addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");
$(this).find("li").addClass("ui-state-default ui-corner-top")
.bind('mouseenter', function () {
$(this).addClass("ui-state-hover");
})
.bind('mouseout', function() {
$(this).removeClass("ui-state-hover");
});
$(this).find("#main").addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$(this).find("a").addClass("ui-tabs-anchor");
var parts = window.location.pathname.split("/");
for (i = 0; i < parts.length; i++) {
$("a[title*='" + parts[i] + "']").parent().addClass("ui-tabs-active ui-state-active");
}
});
};
})(jQuery);
In my MVC LAYOUT page I added the following code.
<script>
$(function() {
$("#tabsmenu").tabmenu();
});
</script>
<div id="tabsmenu">
<ul>
<li>#Html.ActionLink("Household Info", "Info", "HouseholdFees", null, new {title = "HouseholdInfo"})</li>
<li>#Html.ActionLink("Household Management", "Management", "HouseholdFees", null, new {title = "HouseholdManagement"})</li>
<li>#Html.ActionLink("Household Approval", "Approval", "HouseholdFees", null, new {title = "HouseholdApproval"})</li>
<li>#Html.ActionLink("Household Administration", "Index", "Administration", null, new {title = "HouseholdAdministration"})</li>
</ul>
<div id ="main">
#RenderBody()
</div>
</div>