Làm thế nào để duy trì vị trí cuộn trang sau khi một postback trang trong asp.net

Question

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server"> 
    <meta http-equiv="refresh" content="4" /> 
<script type="text/javascript"> 

    var xPos1, yPos1; 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_pageLoading(pageLoadingHandler); 
    prm.add_pageLoaded(pageLoaded); 
    function pageLoaded(sender, args) { 

     $get('<%=Panel_Users.ClientID %>').scrollLeft = xPos1; 
     $get('<%=Panel_Users.ClientID %>').scrollTop = yPos1; 
    } 
    function pageLoadingHandler(sender, args) { 
     xPos1 = $get('<%=Panel_Users.ClientID %>').scrollLeft 
     yPos1 = $get('<%=Panel_Users.ClientID %>').scrollTop; 
    } 
    </script> 
</asp:Content> 

Không làm việc, nơi tôi đi sai

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />  

<div style="height: 504px; width: 941px;"> 
       <asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px; 
        top: 621px; position: absolute; height: 250px; width: 287px"> 
        <asp:UpdatePanel UpdateMode="Conditional" ID="UpdatePanel1" runat="server"> 
         <ContentTemplate> 
          <asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px; 
           position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False" 
           OnRowDataBound="MyGrid_RowDataBound"> 
           <Columns> 
            <asp:TemplateField HeaderText="Status"> 
             <ItemTemplate> 
              <asp:Image ID="Status" runat="server" /> 
             </ItemTemplate> 
            </asp:TemplateField> 
            <asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False" 
             ReadOnly="True" SortExpression="TimeReceived" /> 
            <asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" /> 
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> 
           </Columns> 
          </asp:GridView> 
         </ContentTemplate> 
        </asp:UpdatePanel> 
       </asp:Panel> 
      </div> 

tôi đang cố gắng để làm cho nghỉ trang tại cùng một vị trí khi trang làm mới sau mỗi 5 giây và trang sẽ chuyển lên đầu trang. Tôi đã thử Page MaintainScrollPositionOnPostback = "true". Nó không hoạt động, tôi đã thử sử dụng Ajax nhưng không biết cách sử dụng nó. Ai đó có thể giúp tôi làm thế nào để làm điều đó với Ajax.

Answer 1

MaintainScrollPositionOnPostback chỉ hoạt động trong IE. Để làm điều này, bạn có thể cuộn tập lệnh khách hàng của riêng bạn hoặc sử dụng liên kết anchor trên các phần khác nhau của trang/biểu mẫu của bạn.

câu hỏi tương tự ở đây:

MaintainScrollPositionOnPostback is not working - how to debug?

MaintainScrollPositionOnPostback not working with javascript:__doPostBack

maintainScrollPositionOnPostback="true" does not work globally after setting in web.config ,but works in page level,what should I do?

Answer 2

Một sửa chữa giá rẻ cho những gì có vẻ như giao diện người dùng khủng khiếp (trang làm mới mỗi 5 giây) sẽ có thêm '#' và id của phần tử mà bạn muốn giữ trong chế độ xem với URL trong thanh địa chỉ nhưng sẽ tự động cuộn lên đầu phần tử được liên kết ID.

Nếu đây là sản phẩm thương mại và bạn đang vội vàng, tôi khuyên bạn nên kiểm tra việc triển khai ajax của JQuery và loại bỏ hoàn toàn việc tải lại.

Nó có thể đơn giản như một dòng như:

$.ajax(
    { 
     url:"/thisPath/requestPath", 
     complete:function(data){ 
     //apply data (the http-response) to HTML 
    } 
); 

Nếu trông kỳ lạ đối với bạn, nó chỉ là một đối tượng chữ được làm thức ăn cho các đối tượng JQuery phương pháp ajax. Hàm được gán cho đám cháy 'hoàn thành' khi nhận được đáp ứng http được đưa vào hàm làm đối số 'dữ liệu' được thiết lập bên trong phương thức .ajax.

Answer 3

UpdatePanels là khủng khiếp từ quan điểm hiệu suất. Tôi sẽ làm điều này với jquery và tránh postbacks hoàn toàn.

$.ajax({ 
    url: "/path/to/url/that/returns/users", 
    type: "POST", 
    dataType: "json", 
    data: {}, 
    success: function(data, status, xhttp) 
    { 
     var html = "<table>"; 
     for (var i = 0; i < data.length; i++) 
     { 
      html += "<tr>"; 
      html += "<td></td>"; // build up table cells 
      html += "</tr>"; 
     } 
     html += "</table>"; 
     $("#NameOfDivToPutTableIn").html(html); 
    } 

}); 

Nếu đây là một lựa chọn, thiết lập url để đọc từ dựa trên hướng dẫn này:

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Nếu bạn không muốn sử dụng jquery, bạn vẫn có thể sử dụng MS AJAX , chỉ cần bỏ qua các bảng cập nhật đó. http://www.geekzilla.co.uk/View7B75C93E-C8C9-4576-972B-2C3138DFC671.htm

Answer 4

<%@ Page MaintainScrollPositionOnPostback="true" %> như việc kê khai plage sẽ giữ vị trí cuộn vì nó là

Answer 5

Hãy thử đoạn mã sau vào thiết kế của bạn page..It hoạt động tốt cho tôi ..

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmName.aspx.vb" Inherits="frmName" MaintainScrollPositionOnPostBack = "true" %> 

Answer 6

<pages maintainScrollPositionOnPostBack="true"> 

Answer 7

Thử điều này trong mã phía sau:

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (Page.IsPostBack) 
    { 
     Page.MaintainScrollPositionOnPostBack = true; 
    } 
} 

Posdata: Tôi đã thử với C#.

Answer 8

@{ 
 
    
 
} 
 

 
<html> 
 

 
<head> 
 
<script type="text/javascript"> 
 

 
window.onload = function() { 
 
    var div = document.getElementById("dvScroll"); 
 
    var div_position = document.getElementById("div_position"); 
 
    var position = parseInt(@Request.Form("div_position")); 
 
    if (isNaN(position)) { 
 
     position = 0; 
 
    } 
 

 
    div.scrollTop = position; 
 
    div.onscroll = function() { 
 
     div_position.value = div.scrollTop; 
 
    }; 
 
}; 
 

 
</script> 
 
</head> 
 

 
<body> 
 

 
<div id="dvScroll" style="overflow-y: scroll; height: 260px; width: 300px"> 
 
    1. This is a sample text 
 
    <br /> 
 
    2. This is a sample text 
 
    <br /> 
 
    3. This is a sample text 
 
    <br /> 
 
    4. This is a sample text 
 
    <br /> 
 
    5. This is a sample text 
 
    <br /> 
 
    6. This is a sample text 
 
    <br /> 
 
    7. This is a sample text 
 
    <br /> 
 
    8. This is a sample text 
 
    <br /> 
 
    9. This is a sample text 
 
    <br /> 
 
    10. This is a sample text 
 
    <br /> 
 
    11. This is a sample text 
 
    <br /> 
 
    12. This is a sample text 
 
    <br /> 
 
    13. This is a sample text 
 
    <br /> 
 
    14. This is a sample text 
 
    <br /> 
 
    15. This is a sample text 
 
    <br /> 
 
    16. This is a sample text 
 
    <br /> 
 
    17. This is a sample text 
 
    <br /> 
 
    18. This is a sample text 
 
    <br /> 
 
    19. This is a sample text 
 
    <br /> 
 
    20. This is a sample text 
 
    <br /> 
 
    21. This is a sample text 
 
    <br /> 
 
    22. This is a sample text 
 
    <br /> 
 
    23. This is a sample text 
 
    <br /> 
 
    24. This is a sample text 
 
    <br /> 
 
    25. This is a sample text 
 
    <br /> 
 
</div> 
 

 
<hr /> 
 
<form method="post"> 
 
<input type="hidden" id="div_position" name="div_position" /> 
 
<input type="submit" value="Cool" /> 
 
</form> 
 
</body> 
 
</html>

Bạn có thể sử dụng để duy trì vị trí cuộn sau khi postback.

Nguồn: http://www.aspsnippets.com/Articles/Maintain-Scroll-Position-of-DIV-on-PostBack-in-ASPNet.aspx

Answer 9

Đối với người khác đang gặp khó khăn với điều này. Giải pháp dễ nhất là giữ vị trí cuộn của toàn bộ cửa sổ

var xPos, yPos; 

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (evt, args) { 
     window.scrollTo(xPos , yPos); 
    }); 


    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (evt, args) { 
     xPos = $(window).scrollLeft(); 
     yPos = $(window).scrollTop(); 

    }); 

Cả hai yêu cầu bắt đầu và kết thúc quảng cáo. Khi có yêu cầu bắt đầu, hãy lấy vị trí cuộn cửa sổ bằng cách sử dụng Jquery. Khi yêu cầu kết thúc, chỉ cần cuộn đến vị trí đó.

Answer 10

Thêm dòng này

<%@ Page MaintainScrollPositionOnPostback="true" %> 

Answer 11

Có câu trả lời qua tất cả các mạng cho vấn đề này, và cá nhân không ai trong số họ làm việc, đối với tôi Firefox sẽ cố gắng khôi phục lại vị trí cuộn trước (sai), kích hoạt window.scroll sự kiện, sẽ ghi đè lên trường ẩn của tôi với vị trí sai của nó, mà sau đó scrollTo của tôi sẽ đọc. (Tôi có một số giải pháp về vấn đề này - tôi quyết định tôi chỉ muốn phục hồi vị trí cuộn sau khi đệ trình, chứ không phải làm mới, vì thế đây là một giải pháp khác cho vấn đề này - tôi đã quyết định đầy đủ:

aSPX page:

<form runat="server" onsubmit="$('#hfScroll').val($(window).scrollTop()); return true;"> 
    <input type="hidden" id="hfScroll" value="0" /> 

Javascript:

function restoreScroll() 
{ 
    var position = parseInt($('#hfScroll').val()); 
    if (!isNaN(position)) { 
     $(document).scrollTop(position); 
    } 
}; 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_pageLoaded(restoreScroll); 

Vì lý do nào đó, trên trình duyệt làm mới đầu vào bị ẩn của tôi không được đặt lại về 0, do đó, điều này đôi khi có hành vi lạ. Tôi rất muốn biết điều gì đang làm điều này, tôi nghĩ Firefox là nó không xảy ra trên IE, nhưng cuộc sống quá ngắn [anh ấy nói ... đã tải xuống một nửa mạng internet và dành hàng giờ cho việc này ..].