异步回发后重置滚动位置 - ASP.NET

Question

异步回发后将滚动位置重置到页面顶部的最佳方法是什么？

异步回发是从ASP.NET GridView CommandField列启动的,并且在GridView OnRowCommand中调用ASP.NET更新面板Update方法.

我目前的应用程序是ASP.NET 3.5网站.

编辑:我收到了很多人的反馈,我最后在脚本标签中使用了PageRequestManager方法,但我的下一个问题是:

如何将其配置为仅在用户单击GridView控件中的ASP.NET CommandField时执行？我在页面上有其他按钮执行异步回发,我不想滚动到页面顶部.

编辑1:我开发了一个解决方案,我不需要使用PageRequestManager.请参阅我的后续答案以获得解决方案

Answer 1

当您使用UpdatePanel时,您将需要挂钩到ASP.NET AJAX PageRequestManager

您需要向endRequest事件挂钩添加一个方法:

在异步回发完成并且控件已返回到浏览器后引发.

所以你有类似的东西:

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(pageLoaded);

  function pageLoaded(sender, args) {
     window.scrollTo(0,0);
  }
</script>

一旦更新请求完成,这将强制浏览器滚动回页面顶部.

还有其他事件你可以挂钩而不是当然:

beginRequest // Raised before the request is sent
initializeRequest // Raised as the request is initialised (good for cancelling)
pageLoaded // Raised once the request has returned, and content is loaded
pageLoading // Raised once the request has returned, and before content is loaded

异步回发的优点在于页面将保持滚动高度,而无需设置MaintainScrollPosition,因为没有发生"全页重新加载",在这种情况下,您实际上希望这种效果发生,因此您需要手动创建它.

编辑以回复更新的问题

好的,所以如果你只需要在某些按钮按下时重置位置,你需要做这样的事情:

首先挂钩到BeginRequest,或者:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

这是因为在args参数中您可以访问:

args.get_postBackElement().id

这将告诉您启动整个事件的按钮的ID - 然后您可以在此处检查值,移动页面,或将其存储在变量中,并在最终请求中查询 - 了解竞争条件,用户在原始更新完成之前单击另一个按钮.

这应该让你好运 - 在使用PageRequestManager事件时,有很多例子

Answer 2

这是在AJAX中将滚动条位置重置为TOP的完美解决方案

客户端代码

function ResetScrollPosition()
{
    setTimeout("window.scrollTo(0,0)", 0);
}

服务器端代码

ScriptManager.RegisterStartupScript(Page, this.GetType(), "ScrollPage", "ResetScrollPosition();", true);

只有,window.scrollTo(0,0)不起作用.在这种情况下,Ajax将优先使用,因此您必须使用setTimeout函数.

Answer 3

这是我根据此来源开发的以下解决方案

ASP.NET 网页表单

<script language="javascript" type="text/javascript">
   function SetScrollEvent() {
      window.scrollTo(0,0);
   }
</script> 

<asp:GridView id="MyGridView" runat="server" OnRowDataBound="MyGridView_OnRowDataBound">
    <Columns>
        <asp:CommandField ButtonType="Link" ShowEditButton="true" />
    </Columns>
</asp:GridView>

ASP.NET Webform 代码背后

protected void MyGridView_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType.Equals(DataControlRowType.DataRow))
    {
        foreach (DataControlFieldCell cell in e.Row.Cells)
        {
            foreach(Control control in cell.Controls)
            {
                LinkButton lb = control as LinkButton;

                if (lb != null && lb.CommandName == "Edit")
                    lb.Attributes.Add("onclick", "SetScrollEvent();");
            }
        }
    }
}