2010-10-07 88 views
10

在帶有tabstrip的ASP.NET頁面上,我使用URL中的哈希代碼來跟蹤我所在的標籤(使用BBQ jQuery plugin)。例如:ASP.NET回發在URL中丟失哈希

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

不幸的是,我剛剛意識到,有一對夫婦在頁面上的地方,我使用的是老式的ASP.NET回發做的東西,並回傳完成時,哈希消失:

http://mysite.com/foo/home 

...所以我接走不同的標籤。不好。

這是一個使用.NET 4.0的webforms網站(而不是MVC)。正如你所看到的,雖然,我正在使用URL路由。

有沒有一種方法可以告訴ASP.NET將哈希保留在回傳後的URL中?

回答

15

問題是,回發轉到當前頁面的url,該頁面是在頁面上的表單的動作中設置的。默認情況下,此網址在asp.net中沒有#hash,並且由asp.net自動設置,您無法控制它。

你可以使用JavaScript的#hash添加到形式的行動屬性:

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

,或者,如果它已經更新與哈希值的動作:

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

只是確保你執行這個代碼在window.load上,你的目標是正確的ID

+0

謝謝,我會試試看。 – 2010-10-08 13:15:34

2

我試圖把代碼從Willem's answer到一個JS函數,每次調用一個新的標籤是一個ctivated。這不起作用,因爲每次切換標籤頁時,它都會在URL上附加額外的#hash部分。

我的網址最後變成http://myurl.example.com/home#tab1#tab2#tab3#tab2(等)

我修改了代碼稍微從<form>元素的action屬性中的URL刪除任何現有#hash組件,附加上新的人之前。它也使用jQuery來查找元素。

$('.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; 
}); 

希望這可以幫助別人!

+0

請注意,當您使用'UpdatePanel'時,'action'標籤將被更新,因此您也必須在'EndPostbackRequest' javascript事件中執行此操作。 – modiX 2016-08-12 10:21:19

1

我有另一種解決方案,用鉻,IE和safari實施和測試。

我使用「localStorage」對象,它假設所有瀏覽器都支持localStorage。

在選項卡的單擊事件上,我將currentTab值存儲到本地存儲。

$(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'); 
     } 
    });