異步回發後重置滾動位置 - 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來將您引導到頁面的頂部。