ASP.NET postbacks lose the hash in the URL

Question

On an ASP.NET page with a tabstrip, I'm using the hash code in the URL to keep track of what tab I'm on (using the BBQ jQuery plugin). For example:

http://mysite.com/foo/home#tab=budget

Unfortunately, I've just realized that there are a couple of places on the page where I'm using an old-fashioned ASP.NET postback to do stuff, and when the postback is complete, the hash is gone:

http://mysite.com/foo/home

... so I'm whisked away to a different tab. No good.

This is a webforms site (not MVC) using .NET 4.0. As you can see, though, I am using URL routing.

Is there a way to tell ASP.NET to keep the hash in the URL following a postback?

Answer 1

The problem is that the postback goes to the url of the current page, which is set in the action of the form on the page. By default this url is without #hash in asp.net, and its automatically set by asp.net, you have no control over it.

You could add the #hash to the forms action attribute with javascript:

document.getElementById("aspnetForm").action += location.hash

or, if updating an action with a hash already in it:

var form = document.getElementById("aspnetForm");
form.action = form.action.split('#')[0] + location.hash

just make sure you execute this code on window.load and you target the right ID

Answer 2

I tried to put the code from Willem's answer into a JS function that got called everytime a new tab was activated. This didn't work because it kept appending an additional #hash part to the URL every time I switched tabs.

My URL ended up looking like http://myurl.example.com/home#tab1#tab2#tab3#tab2 (etc.)

I modified the code slightly to remove any existing #hash component from the URL in the <form> element's action attribute, before appending on the new one. It also uses jQuery to find the element.

$('.nav-tabs a').on('shown', function (e) {
    // ensure the browser URL properly reflects the active Tab
    window.location.hash = e.target.hash;

    // ensure ASP.NET postback comes back to correct tab
    var aspnetForm = $('#aspnetForm')[0];
    if (aspnetForm.action.indexOf('#') >= 0) {
        aspnetForm.action = aspnetForm.action.substr(0, aspnetForm.action.indexOf('#'));
    }
    aspnetForm.action += e.target.hash;
});

Hope this helps someone!

Answer 3

I have another solution, implemented and tested with chrome, IE and safari.

I am using the "localStorage" object and it suppose to work all the browsers which support localStorage.

On the click event of tab, I am storing the currentTab value to local storage.

$(document).ready(function() {
        jQuery('.ctabs .ctab-links a').on('click', function(e) {
            var currentAttrValue = jQuery(this).attr('href');
            localStorage["currentTab"] = currentAttrValue;

            // Show/Hide Tabs
            jQuery('.ctabs ' + currentAttrValue).show().siblings().hide();

            // Change/remove current tab to active
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

            e.preventDefault();
        });
        if (localStorage["currentTab"]) {
            // Show/Hide Tabs
            jQuery('.ctabs ' + localStorage["currentTab"]).show().siblings().hide();
            // Change/remove current tab to active
            jQuery('.ctabs .ctab-links a[href$="' + localStorage["currentTab"] + '"]').parent('li').addClass('active').siblings().removeClass('active');
        }
    });