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

时间:2009-03-05 19:14:20

标签: c# asp.net gridview asp.net-ajax scroll-position

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

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

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

编辑:我收到了每个人的好评,我最终在脚本标签中使用了PageRequestManager方法,但我的下一个问题是:

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

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

8 个答案:

答案 0 :(得分:17)

当你使用UpdatePanels时,你需要挂钩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 - 然后您可以在此处检查值,移动页面,或将其存储在变量中,并在最终请求中查询 - 了解竞争条件等,用户在原始更新完成之前单击另一个按钮。

这应该让你顺利运行 - Working with PageRequestManager Events

上有很多例子。

答案 1 :(得分:11)

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

客户端代码

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

服务器端代码

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

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

答案 2 :(得分:4)

以下是我根据此source

开发的以下解决方案

ASP.NET Webform

<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();");
            }
        }
    }
}

答案 3 :(得分:2)

您使用的是asp.net AJAX吗?如果是这样,客户端库中有两个非常有用的事件 beginRequest和endRequest,部分/异步回发的问题之一是,一般页面还没有弄清楚你在做什么。 begin和endrequest事件将允许你在客户端保持滚动位置,你可以在beginrequest上设置一个js设置为滚动位置,然后在结束请求你可以重置你需要的任何元素的scrollTop ..我是我确实以前见过这个,但找不到链接。如果我找到一个例子

答案 4 :(得分:2)

取自本教程:

http://aspnet.4guysfromrolla.com/articles/111407-1.aspx

我们设置了MaintainScrollPositionOnPostback = true

然后,如果我们需要重置滚动位置,请调用方法:

Private Sub ResetScrollPosition()
If Not ClientScript.IsClientScriptBlockRegistered(Me.GetType(), "CreateResetScrollPosition") Then
   'Create the ResetScrollPosition() function
   ClientScript.RegisterClientScriptBlock(Me.GetType(), "CreateResetScrollPosition", _
                    "function ResetScrollPosition() {" & vbCrLf & _
                    " var scrollX = document.getElementById('__SCROLLPOSITIONX');" & vbCrLf & _
                    " var scrollY = document.getElementById('__SCROLLPOSITIONY');" & vbCrLf & _
                    " if (scrollX && scrollY) {" & vbCrLf & _
                    "    scrollX.value = 0;" & vbCrLf & _
                    "    scrollY.value = 0;" & vbCrLf & _
                    " }" & vbCrLf & _
                    "}", True)

   'Add the call to the ResetScrollPosition() function
   ClientScript.RegisterStartupScript(Me.GetType(), "CallResetScrollPosition", "ResetScrollPosition();", True)
End If
End Sub 

答案 5 :(得分:0)

您是否设置了页面属性MaintainScrollPosition?如果您进行异步回发,不确定是否会有任何不同。

编辑:您可以尝试的一件事是将焦点设置在页面顶部附近的特定项目上,这可能会有所帮助,也可能是一种肮脏的工作。

答案 6 :(得分:0)

我使用了一个名为hScrollTop的隐藏输入,我在asp.net表单发回之前设置了该输入。然后,当页面加载时,它根据隐藏输入的值设置scrollTop。

在新页面上试用此代码。

<div style="height:500px"></div>

<form id="Form1" runat=server onsubmit="javascript:saveScrollTop();">
    <input type=submit value="Submit" runat=server>
    <input type="hidden" id="hScrollTop" runat=server>
</form>

<div style="height:1000px"></div>

<script language="javascript">
    function saveScrollTop() {
        document.getElementById("<%= hScrollTop.ClientID %>").value = document.body.scrollTop;
        return true;
    }

    window.onload = function() {
        document.body.scrollTop = document.getElementById("<%= hScrollTop.ClientID %>").value;
    }

</script>

答案 7 :(得分:0)

Page.RegisterStartupScript("MyScript", "<script language=javascript>setTimeout('window.scrollTo(0,0)', 0);</script>");

将上述内容添加到您要告诉的功能中,转到页面顶部。就像页面无效时一样,那里有它,它会添加临时的javascript来射击你到页面的顶部。