Duy trì vị trí cuộn trong hộp danh sách trong bảng cập nhật, KHÔNG phải trang

Question

Tôi có một hộp danh sách bên trong bảng điều khiển cập nhật. Khi tôi cuộn xuống và chọn một mục, nó cuộn trở lại đầu danh sách. Tôi nghe nói rằng các dom không theo dõi vị trí di chuyển trên một postback. Có ai có một giải pháp/ví dụ về cách giải quyết này?

Cảm ơn, XaiSoft

Answer 1

Bạn đang chạy vào vấn đề này bởi vì UpdatePanel thay thế hoàn toàn cuộn <select> yếu tố của bạn với một cái mới khi yêu cầu không đồng bộ trở lại.

giải pháp có thể:

1. Sử dụng JavaScript để lưu trữ các scrollTop tài sản của các yếu tố <select> trong một phần tử biểu mẫu ẩn trước khi UpdatePanel được gửi (bằng cách gọi phương thức ClientScriptManager.RegisterOnSubmitStatement) và sau đó đặt nó trên mới <select> khi cuộc gọi AJAX quay lại. Điều này sẽ tẻ nhạt, dễ bị lỗi và có thể không tương thích lắm (xem here).

2. Sử dụng JavaScript để lưu trữ thuộc tính <select> 's selectedIndex và chọn lại mục đó khi cuộc gọi AJAX quay lại. Rõ ràng điều này sẽ không hoạt động nếu người dùng chưa chọn bất cứ điều gì.

3. Don't use UpdatePanels. Thay vào đó, hãy thử jQuery + ASP.NET page methods.

Answer 2

Dường như cuộn mã ví dụ sau đây trong các cách sau:

• Internet Explorer 8: Sau khi postback mục đã chọn là mục có thể nhìn thấy đầu tiên.

• Firefox: Sau khi đăng lại, mục được chọn luôn hiển thị (nhưng có thể là mục hiển thị cuối cùng).

• Chrome: Sau khi đăng lại, mục đã chọn có thể bị ẩn vì hộp danh sách cuộn lên trên cùng, như bạn nói.

 
<asp:UpdatePanel ID="up1" runat="server"> 
    <ContentTemplate> 
     <asp:ListBox ID="lb1" runat="server" Height="100px" AutoPostBack="true"> 
      <asp:ListItem>A</asp:ListItem> 
      <asp:ListItem>B</asp:ListItem> 
      <asp:ListItem>C</asp:ListItem> 
      <asp:ListItem>D</asp:ListItem> 
      <asp:ListItem>E</asp:ListItem> 
      <asp:ListItem>F</asp:ListItem> 
      <asp:ListItem>G</asp:ListItem> 
      <asp:ListItem>H</asp:ListItem> 
     </asp:ListBox> 
    </ContentTemplate> 
</asp:UpdatePanel> 

Answer 3

var xPos, yPos; 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    function BeginRequestHandler(sender, args) { 
     if (($get('Panel1')) != null) { 
      xPos = $get('Panel1').scrollLeft; 
      yPos = $get('Panel1').scrollTop; 
     } 
    } 

    function EndRequestHandler(sender, args) { 
     if (($get('Panel1')) != null) { 
      $get('Panel1').scrollLeft = xPos; 
      $get('Panel1').scrollTop = yPos; 
     } 
    } 
    prm.add_beginRequest(BeginRequestHandler); 
    prm.add_endRequest(EndRequestHandler); 

    //Note: "Panel1" Panel or div u want to maintain scroll position 
    //Note: This Java Script should be added after Scriptmanager***** 

// Duy trì Scroll Chức vụ cho Panel/Div với bảng điều khiển Cập nhật ra

window.onload = function() { 
     var strCook = document.cookie; 
     if (strCook.indexOf("!~") != 0) { 
      var intS = strCook.indexOf("!~"); 
      var intE = strCook.indexOf("~!"); 
      var strPos = strCook.substring(intS + 2, intE); 
      document.getElementById('Panel1').scrollTop = strPos; 
     } 
    } 
    function SetDivPosition() { 
     var intY = document.getElementById('Panel1').scrollTop; 
     document.title = intY; 
     document.cookie = "yPos=!~" + intY + "~!"; 
    } 


    //Note: "Panel1" Panel id or div id for which u want to maintain scroll position 

Answer 4

Bạn vẫn có thể đạt được postback một phần bằng cách sử dụng UpdatePanel chứa một ListBox, nhưng ngăn chặn nó bị ghi đè bởi một phiên bản mới bằng cách đặt thông số sau trên UpdatePanel:

ChildrenAsTriggers="False" 

này như đã nêu trong MSDN:

Gets hoặc thiết lập một giá trị cho biết liệu đăng lại từ ngay điều khiển con của một điều khiển UpdatePanel cập nhật nội dung của bảng điều khiển. Đặt thuộc tính ChildrenAsTriggers thành false nếu KHÔNG bạn muốn đăng lại từ các điều khiển con ngay lập tức của điều khiển UpdatePanel thành gây ra cập nhật nội dung của bảng điều khiển.

Thông báo trước một vấn đề này là nếu bạn đang cố gắng làm bất cứ thao tác trực quan khác để ListBox từ phía máy chủ (tức là thêm CSS thuộc tính đến các mục trên postbacks), sau đó bạn sẽ không nhìn thấy chúng làm cho đến khi một postback không liên quan khác xảy ra. Nếu tất cả những gì bạn đang làm là thực hiện các lựa chọn hơn là thiết lập ChildrenAsTriggers="False" sẽ hoạt động.

Answer 5

Đối với ứng dụng doanh nghiệp mà tôi đang làm việc, hóa ra trang MasterPage.Master đã xử lý Sys.WebForms.PageRequestManager.getInstance(). Add_endRequest sự kiện và thiết lập window.scroll (0,0) bên trong nó. Các trang nội dung rõ ràng đang thực thi window.scroll (0,0) trên mỗi trình kích hoạt của UpdatePanel của contentpage. Tôi đã cố gắng ghi đè chức năng add_endRequest trong trang nội dung nhưng không thể làm việc đó. Cuối cùng tôi vừa sửa Master.Master để không làm window.scroll (0,0).