通过Postback在UpdatePanel中保留DIV的滚动位置

时间:2015-02-18 21:11:51

标签: c# jquery asp.net gridview

我有一个显示在div中的GridView,它包含在asp.net页面上的UpdatePanel控件中。 div设置为在显示大量信息时使GridView可滚动,同时使更新面板中的其他信息稳定。

无论如何,GridView中的项目是可点击的,但无论我尝试什么,都不会通过回发保留包含div的滚动位置。目前我正在尝试用jQuery来解决这个问题,因为这似乎是最简单的方法。我的代码如下:

    <head id="Head1" runat="server">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script type="text/javascript">
            var scroll = function () {
                Y: '#<%= scrollPos.ClientID %>'
            };

            $(document).ready(function () {
                $("#subResults").scrollTop($(scroll.Y).val());

                $('#subResults').scroll(function () {
                    $(scroll.Y).val(this.scrollTop);
                });
            });
        </script>
    </head>

    <body>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="resultPanel" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
            <ContentTemplate>
                <div id="subResults">
                    <asp:GridView ID="resultGrid" runat="server"
                                    AutoGenerateColumns="false" Visible="True"
                                    AutoGenerateSelectButton="True"
                                    OnRowDataBound="resultGrid_RowDataBound"
 OnSelectedIndexChanged="resultGrid_SelectedIndexChanged">
                        <Columns>
                            // columns columns columns...
                        </Columns>
                    </asp:GridView>
                    <asp:HiddenField ID="scrollPos" runat="server" Value="0" />
                </div>
    </body>

我正在使用给定here的示例。无论我是否尝试完全按照给定的方式执行此操作,它都不起作用:我的GridView项目接受单击,执行它应该执行的操作,然后在Postback完成后GridView再次滚动到顶部。如何让我的div“subResults”通过Postback保持其滚动位置?

1 个答案:

答案 0 :(得分:7)

解决。下面的代码块粘贴在我的脚本管理器对象下面,让滚动div按照我想要的方式运行:

<script type="text/javascript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('scrollDiv').scrollLeft;
        yPos = $get('scrollDiv').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('scrollDiv').scrollLeft = xPos;
        $get('scrollDiv').scrollTop = yPos;
    }
</script>

归功于Andrew Frederick