更新面板位于母版页时保持滚动位置

Question

我在母版页中放置了脚本管理器和更新面板。

            <div id="nav">
               <asp:ScriptManager ID="ScriptManager1" runat="server"/>
            </div>
            <div id="mainchild">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:ContentPlaceHolder ID="HdrContentPlaceholderBody" runat="server">
                    </asp:ContentPlaceHolder>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

所以这个 div 在母版页中，我的子页面有一个网格视图放置在面板内。

      <asp:Content ID="pagecontent" ContentPlaceHolderID="HdrContentPlaceholderBody" runat="server">
           <asp:Panel ID="pnlAssignRole" runat="server" CssClass="popuppnl" Visible="false">
             <div class="close-image">
               <asp:ImageButton ID="ImageButton2" ToolTip="Close" runat="server" ImageUrl="~/App_Themes/Images/Close1.png" OnClick="btnAsgnCancel_Click" />
            </div>
            <table width="100%">
                <tr>
                    <td>
                        <div style="height: 600px; overflow: auto;">
                            <asp:GridView ID="grdEmpAssigned">
                            gridview content
                            </GridView>
                        </div>
                    </td>
                </tr>
            </table>
        </asp:Content>

在 gridview on rowcommand 它导致部分回发，我尝试将这段 javascript 放在 updatepanel 下方，也在母版页和内容页面中的 scriptmanager 下方，它没有帮助..我想我不知道把这个 javascript 放在哪里

      <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) {
                        try {
                            yPos = $get('ctl00_MainContent_scroll').scrollTop;
                            }
                        catch (err) { }
                    }
                    function EndRequestHandler(sender, args) {
                        try {
                            $get('ctl00_MainContent_scroll').scrollTop = yPos;
                            }
                        catch (err) { }
                    }
         </script>

请指导我。

Answer 1

请浏览此链接。那可能对你有帮助。 http://dotnetcrunch.wordpress.com/2011/08/05/maintain-scroll-position-for-the-whole-page-after-asynchronous-postback/

这是来自上面链接的代码。把它放在网站的标题部分。

<script type=”text/javascript”>
     var xPos, yPos;
     Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
     Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(EndRequestHandler);

     function BeginRequestHandler(sender, args) {
         xPos = document.body.scrollLeft;
         yPos = documnet.body.scrollTop;
     }

     function EndRequestHandler(sender, args) {
         document.body.scrollLeft = xPos;
         document.body.scrollTop = yPos;
     }
</script>

Answer 2

经过几次尝试/错误和仅适用于第一次计时器更新事件的解决方案。

滚动位置保持不变，但如果你在那之后滚动，滚动位置总是恢复到第一个！

对我来说唯一可行的解决方案是：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <script type="text/javascript">

        var yPos;
        var ignoreNextScrollEvent = false;
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);


        window.addEventListener('scroll', (event) => {

            if (ignoreNextScrollEvent) {
                ignoreNextScrollEvent = false; // Ignore this event because it was done by AsyncPostBackTrigger
                return;
            }

            yPos = document.documentElement.scrollTop;
            //console.log('scroll: ' + yPos); // debug only
        });

        function BeginRequestHandler(sender, args) {
            ignoreNextScrollEvent = true;
            //console.log('auto begin: ' + yPos); // debug only
        }

        function EndRequestHandler(sender, args) {
            ignoreNextScrollEvent = true;
            document.documentElement.scrollTop = document.body.scrollTop = yPos;
            //console.log('auto end: ' + yPos); // debug only
        }

    </script>

    <asp:UpdatePanel ID="pnl_update" runat="server">
        <ContentTemplate>
        // auto updated content ...
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="tmr_update" EventName="Tick" />
        </Triggers> 
    </asp:UpdatePanel>

    <asp:Timer ID="tmr_update" runat="server" Interval="5000" OnTick="tmr_update_Tick"></asp:Timer>

希望这对某人有帮助...