Đặt lại vị trí cuộn sau khi đăng lại Async - ASP.NET

Question

Cách tốt nhất để đặt lại vị trí cuộn lên đầu trang sau một postback không đồng bộ là gì?

Bài đăng không đồng bộ được bắt đầu từ cột ASP.NET GridView CommandField và phương thức Cập nhật bảng cập nhật ASP.NET được gọi trong GridView OnRowCommand.

Ứng dụng hiện tại của tôi là trang web ASP.NET 3.5.

EDIT: Tôi đã nhận được thông tin phản hồi tuyệt vời từ tất cả mọi người, và tôi đã kết thúc bằng cách sử dụng phương pháp PageRequestManager trong một thẻ script, nhưng câu hỏi tiếp theo của tôi là:

Làm thế nào để cấu hình nó để chỉ thực hiện khi người dùng nhấp ASP.NET CommandField trong điều khiển GridView của tôi? Tôi có các nút khác trên trang thực hiện một postback không đồng bộ mà tôi không muốn cuộn lên đầu trang.

EDIT 1: Tôi đã phát triển giải pháp mà tôi không cần sử dụng PageRequestManager. Xem câu trả lời tiếp theo của tôi cho giải pháp.

Answer 1

Dưới đây là giải pháp sau đây tôi phát triển dựa trên source

ASP.NET Webform đang 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 này đằng sau

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

Bạn đã đặt thuộc tính trang MaintainScrollPosition chưa? Bạn không chắc chắn liệu điều đó có khác gì nếu bạn thực hiện đăng lại Async hay không.

Chỉnh sửa: Một điều bạn có thể thử là đặt trọng tâm vào một mục cụ thể ở gần đầu trang của bạn, điều đó có thể giúp và trở thành một công việc bẩn thỉu xung quanh.

Answer 3

Như bạn đang sử dụng UpdatePanels bạn sẽ cần phải móc vào ASP.NET AJAX PageRequestManager

Bạn sẽ cần phải thêm một phương pháp để các endRequest móc sự kiện đó là:

Tăng sau khi một postback không đồng bộ được hoàn thành và kiểm soát đã được trả lại cho trình duyệt.

Vì vậy, bạn muốn có một cái gì đó như:

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

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

Mà sẽ buộc các trình duyệt để di chuyển trở lại đầu trang từng là một yêu cầu cập nhật đã hoàn thành.

Có những sự kiện khác mà bạn có thể móc vào thay vì khóa học:

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 

Vẻ đẹp của không đồng bộ sau lưng là trang sẽ duy trì chiều cao cuộn mà không cần phải thiết lập MaintainScrollPosition, như không có "tải lại toàn bộ trang" xảy ra, trong trường hợp này bạn thực sự muốn hiệu ứng đó xảy ra, vì vậy bạn sẽ cần phải tạo thủ công nó.

Sửa để đáp ứng được cập nhật câu hỏi

Ok, vì vậy nếu bạn cần phải thiết lập lại chỉ những vị trí nút bấm chắc chắn bạn sẽ cần phải làm một cái gì đó như thế này:

Bắt đầu bằng cách hooking vào BeginRequest thay/cũng như:

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

Điều này là do trong args tham số bạn nhận được quyền truy cập vào:

012.

args.get_postBackElement().id 

Điều này sẽ cho bạn biết id của nút đã bắt đầu toàn bộ sự kiện - sau đó bạn có thể kiểm tra giá trị tại đây và di chuyển trang hoặc lưu nó trong một biến và truy vấn nó trong yêu cầu cuối cùng - nhận thức được điều kiện chủng tộc, v.v. trong đó người dùng nhấp vào một nút khác trước khi cập nhật ban đầu của bạn hoàn tất.

Điều đó sẽ giúp bạn có được đi với bất kỳ may mắn - có khá một vài ví dụ xung quanh này trên Working with PageRequestManager Events

Answer 4

Bạn đang sử dụng asp.net AJAX? Nếu có hai sự kiện rất hữu ích trong các thư viện máy khách beginRequest và endRequest, một trong những vấn đề với postbacks một phần/không đồng bộ, là trang chung chưa có một đầu mối nào bạn đang làm. các sự kiện bắt đầu và kết thúc sẽ cho phép bạn duy trì vị trí cuộn tại máy khách, bạn có thể có var trong js được đặt thành vị trí cuộn trên beginrequest, sau đó trên yêu cầu kết thúc, bạn có thể đặt lại scrollTop của bất kỳ phần tử nào bạn yêu cầu. chắc chắn ive thấy điều này được thực hiện trước nhưng không thể tìm thấy một liên kết. bài ốm nếu tôi tìm thấy một ví dụ

Answer 5

Tôi sử dụng một đầu vào ẩn được gọi là hScrollTop mà tôi đặt trước khi Mẫu asp.net được đăng lại. Sau đó, khi tải trang, nó sẽ đặt scrollTop theo giá trị của đầu vào bị ẩn.

Hãy thử mã này trên trang mới.

<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

lấy từ hướng dẫn này:

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

Chúng tôi đặt MaintainScrollPositionOnPostback = true

Sau đó, nếu chúng ta cần phải thiết lập lại vị trí cuộn gọi phương thức:

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

đây là giải pháp hoàn hảo để đặt lại vị trí thanh cuộn xuống TOP trong AJAX

Client Side Mã

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

Server Side Mã

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

Chỉ, window.scrollTo (0,0) sẽ không làm việc. Ajax sẽ được ưu tiên trong trường hợp này, do đó bạn phải sử dụng hàm setTimeout với hàm đó.

Answer 8

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

Đặt ở trên để các chức năng mà bạn muốn nói với đi đến phía trên cùng của trang. Giống như khi trang không hợp lệ, hãy đặt trang đó ở đó và nó sẽ thêm javascript tạm thời để đưa bạn lên đầu trang.