異步回發后重置滾動 position - ASP.NET

Question

異步回發后將滾動 position 重置到頁面頂部的最佳方法是什么？

異步回發從 ASP.NET GridView CommandField 列和 ASP.NET 更新面板啟動 ZBB404EDC3A078A49DZBB404EDC3A078D49DZB404EDC3A078DZ 更新面板。

我當前的應用程序是 ASP.NET 3.5 web 站點。

編輯：我收到了大家的優秀反饋，我結束了在腳本標簽中使用 PageRequestManager 方法，但我的下一個問題是：

如何將其配置為僅在用戶單擊 GridView 控件中的 ASP.NET CommandField 時執行？ 我在頁面上有其他按鈕執行異步回發，我不想滾動到頁面頂部。

編輯 1：我開發了一個不需要使用 PageRequestManager 的解決方案。 請參閱我的后續答案以獲取解決方案。

Answer 1

當您使用 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 - 然后您可以檢查此處的值，移動頁面，或將其存儲在變量中，並在最終請求中查詢它 - 了解競爭條件，等用戶在原始更新完成之前單擊另一個按鈕。

這應該會讓你走運 - 在使用 PageRequestManager 事件上有很多例子

Answer 2

這是在 AJAX 中將滾動條 position 重置為 TOP 的完美解決方案

客戶端代碼

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

服務器端代碼

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

只有 window.scrollTo(0,0) 不起作用。 在這種情況下 Ajax 將優先，因此您必須使用 setTimeout function 。

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

Answer 4

您使用的是 asp.net AJAX 嗎？ 如果是這樣，在客戶端庫 beginRequest 和 endRequest 中有兩個非常有用的事件，部分/異步回發的問題之一是，一般頁面不知道您在做什么。 begin 和 endrequest 事件將允許您在客戶端維護滾動 position，您可以在 js 中有一個 var 設置為 beginrequest 上的滾動 position，然后在結束請求時您可以重置您需要的任何元素的 scrollTop..確實我以前看過這個，但找不到鏈接。 如果我找到一個例子，我會發帖

Answer 5

取自本教程：

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

我們設置 MaintainScrollPositionOnPostback=true

然后如果我們需要重置滾動 position 調用方法：

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 6

您是否設置了頁面屬性MaintainScrollPosition？ 不確定如果您執行異步回發是否會有任何不同。

編輯：您可以嘗試的一件事是將焦點放在頁面頂部附近的特定項目上，這可能會有所幫助並且是一項骯臟的工作。

Answer 7

我使用了一個名為 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 8

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

把上面的 function 你想告訴 go 到頁面頂部。 就像頁面無效時一樣，擁有它，它會添加臨時 javascript 將您帶到頁面頂部。