Setting the "location.hash" cannot work with the partial page postback in IE. It works in FireFox_问答_开发者

I have a strange problem to which I could not find a solution. In order to clarify my problem, I did a simply test page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="MyApplication.Web.Surveillance.Reports.test1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptmanager" runat="server" />
    <asp:UpdatePanel ID="up1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btn1" runat="server" Text="test1" />
            <%= DateT开发者_运维百科ime.Now %>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:Button ID="btn2" runat="server" Text="test2" />
        <script type="text/javascript" language="javascript">
        $(document).ready(pageInit);
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(pageInit);

        function pageInit() {
            window.location.hash = "#0";
        }
    </script>

    </form>
</body>
</html>

In this test page, I have two button. "test1" button is inside an updatepanel. "test2" button is outside. When I run this page, I can see the url, for example "http://localhost/test/test1.aspx#0". After I click the "test1" button, I can see the url changed to "http://localhost/test/test1.aspx#". The "0" is missed. And after that, everything is ok. If I test the "test2" button. Everything is ok too.

I also find this problem only happens in IE. FireFox works fine.

My question is how can I keep the right url when I click the "test1" button?

Thanks

I found a solution. As seen on this blog.

The following stuff happens on the page :

In order to make a partial postback using the Update Panel on an ASP.NET page, one has to embed a Script Manager on the page. This Script Manager control will render a large amount of Javascript on the page, that controls like the UpdatePanel will utilize to make the snazzy partial update of the page.

This Javascript tampers with the url’s hash value, appearently to enable history and deeplinking when using Update Panels, and for some (to me still unknown) reason it changes the url, removing everything after the hash mark.

The first solution he provided worked for me. You need to add a line like that to your ASP.NET page after the scriptmanager declaration :

<script type=”text/javascript”>
Sys._Application.prototype._setState = function() {}
</script>

try to use something else than 0, for example :

window.location.hash = "#a";

I think #0 mean the scroll to the tag that name is 0 and this is not allowed by default at least in the IE none-standard :P

Instead of using window.location.hash, you also could use the href:

window.location.href = '#0';

This works in all browsers and it could be applied on every webpage.

I had a simulair problem, where I listen for hasg changes and Scriptmanager keept reseting the hash on the first postback. Pascals solution by overriding the _setState function didnt work for me, but I figure out a diffrent approch that might help someone.

$(window).hashchange(function () {
   if (window.location.hash == '#' || window.location.hash == '') {
      window.history.back(-1);
   }
});

hashchange is a jQuery-plugin I found here

Big thanks to Pascal on this one. His solution worked. I placed it directly after the scriptmanager tag. I was seeing the behaviour in all browsers when landing on the page when the URL had a hash in it.

My page uses a function to scroll to the particular hash location using .animate and this still functions nicely with Pascal's fix:

    function goToByScroll(id) {
        $('html,body').animate({ scrollTop: $("#" + id).offset().top +160 }, 'slow');
    }

    if (window.location.hash != '') {
        goToByScroll(window.location.hash.substr(1));
    };

As far as I can tell there is no detriment to any other functionality on the page. I have tested the solution successfully in IE9, FF 20.0.1, Chrome 26.0.1410.64 and Opera 12.1 all on Windows 7.

If I could vote you up Pascal I would.