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

Question

在异步回发之后，将滚动位置重置为页面顶部的最佳方式是什么？

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

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

编辑：我收到了极好的反馈，从每个人，我最终使用PageRequestManager方法在脚本标签，但我的下一个问题是：

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

编辑1：我开发了一个解决方案，我不需要使用PageRequestManager。请参阅我的后续解决方案。

Answer 1

这里是下面的解决方案我开发基于此source

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网络表单代码背后

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

Answer 2

您是否设置了页面属性MaintainScrollPosition？不知道如果你做一个异步回传或不是这样。

编辑：您可以尝试的一件事是将注意力集中在页面顶部附近的某个特定项目上，这可能会有所帮助，并且会变得肮脏。

Answer 3

当你使用你要去的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 - 然后，您可以在这里检查值，和移动页面，或将其存储在一个变量，并且在最后的请求查询它 - 了解比赛条件等，用户在原始更新完成之前点击另一个按钮。

这应该让你运气好的话会 - 有解决这个上Working with PageRequestManager Events

Answer 4

相当多的例子是你使用asp.net AJAX？如果是这样的话，客户端库中有两个非常有用的事件：beginRequest和endRequest，其中一个部分/异步回发问题是普通页面并不知道你在做什么。 begin和endrequest事件将允许您在客户端保持滚动位置，您可以将js中的var设置为beginrequest上的滚动位置，然后在结束请求中，您可以重置所需的任何元素的scrollTop。肯定我以前看过这个，但是找不到链接。生病后，如果我找到一个例子

Answer 5

我使用一个名为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> 

Answer 6

从本教程采取：

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

我们设置MaintainScrollPositionOnPostback =真

那么，如果我们需要重置滚动位置的调用方法：

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 

Answer 7

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

客户端代码

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

服务器端代码

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

只，window.scrollTo（0,0）将无法正常工作。在这种情况下，Ajax将优先，所以你必须使用setTimeout函数。

Answer 8

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

把上面来，你要告诉转到页顶部的功能。就像页面无效时那样，在那里，它会添加临时JavaScript来将您引导到页面的顶部。