ASP.NET 回发会丢失 URL 中的哈希值

Posted 2023-02-22

【中文标题】ASP.NET 回发会丢失 URL 中的哈希值

【英文标题】：ASP.NET postbacks lose the hash in the URL

【发布时间】：2011-04-22 14:00:05

【问题描述】：

在带有标签条的 ASP.NET 页面上，我使用 URL 中的哈希码来跟踪我所在的标签（使用 BBQ jQuery plugin）。例如：

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

不幸的是，我刚刚意识到页面上有几个地方我正在使用老式的 ASP.NET 回发来做事，当回发完成后，哈希就消失了：

http://mysite.com/foo/home

...所以我被带到了另一个标签。不好。

这是一个使用 .NET 4.0 的 Web 表单站点（不是 MVC）。但是，正如您所看到的，我使用的是 URL 路由。

有没有办法告诉 ASP.NET 在回发后将哈希值保留在 URL 中？

【参考方案1】：

问题是回发到的是当前页面的url，这个url是在页面上表单的action中设置的。默认情况下，这个 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

【讨论】：

谢谢，我试试看。

【参考方案2】：

我尝试将Willem's answer 中的代码放入一个 JS 函数中，每次激活新标签时都会调用该函数。这不起作用，因为每次我切换标签时，它都会在 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;
);

希望这对某人有所帮助！

【讨论】：

请注意，action 标签会在您使用UpdatePanel 时更新，因此您也必须在EndPostbackRequest javascript 事件中执行此操作。

【参考方案3】：

我有另一个解决方案，用 chrome、IE 和 safari 实现和测试。

我正在使用“localStorage”对象，它假设所有支持 localStorage 的浏览器都可以工作。

在 tab 的点击事件中，我将 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');
        
    );