Поддерживать положение прокрутки в списках в панелях обновления, а НЕ на странице

Question

У меня есть список внутри панели обновления. Когда я прокручиваю вниз и выбираю элемент, он прокручивается обратно к верхней части списка. Я слышал, что DOM не отслеживает положение прокрутки на обратной передаче. У кого-нибудь есть решение / пример как это решить?

Спасибо, XaiSoft

Answer 1

Вы столкнулись с этой проблемой, потому что UpdatePanel полностью заменяет прокрученный элемент <select> новым, когда асинхронный запрос возвращается.

Возможные решения:

1. Используйте JavaScript, чтобы сохранить свойство scrollTop элемента <select> в скрытом элементе формы перед отправкой UpdatePanel (путем вызова метода ClientScriptManager.RegisterOnSubmitStatement) и затем установить его для нового <select> когда возвращается вызов AJAX. Это будет утомительно, подвержено ошибкам и, вероятно, не очень совместимо (см. здесь ).

2. Используйте JavaScript для сохранения свойства <select> selectedIndex и повторно выберите этот элемент, когда вызов AJAX возвращается. Очевидно, это не сработает, если пользователь еще ничего не выбрал.

3. Не использовать UpdatePanel с . Попробуйте jQuery + Методы страницы ASP.NET вместо.

Answer 2

    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*****

// Сохранение позиции прокрутки для панели / Div без панели обновления

    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 3

Для корпоративного приложения, над которым я работал, оказалось, что страница MasterPage.Master обрабатывает событие Sys.WebForms.PageRequestManager.getInstance (). Add_endRequest и устанавливает в нем window.scroll (0,0). Страницы контента, очевидно, выполняли window.scroll (0,0) для каждого триггера UpdatePanel страницы контента. Я попытался переопределить функцию add_endRequest на странице содержимого, но не смог заставить это работать. В конце концов я просто изменил Master.Master, чтобы не делать window.scroll (0,0).

Answer 4

Вы все еще можете добиться частичной обратной передачи, используя UpdatePanel, содержащий ListBox, но предотвратите его перезапись новым экземпляром, установив в UpdatePanel следующее:

ChildrenAsTriggers="False"

Это как указано в MSDN :

Получает или задает значение, которое указывает, будут ли обратные вызовы от немедленного дочерние элементы управления UpdatePanel обновляют содержимое панели. Установите для свойства ChildrenAsTriggers значение false, если НЕ хотите обратные передачи от непосредственных дочерних элементов управления UpdatePanel для вызвать обновление содержимого панели.

Единственное предостережение: если вы пытаетесь выполнить какие-либо другие визуальные манипуляции с ListBox со стороны сервера (т. Е. Добавляете атрибуты CSS к элементам в обратных передачах), то вы не увидите их визуализацию до следующего происходит несвязанный постбэк Если все, что вы делаете, - это выбор, тогда настройка ChildrenAsTriggers="False" будет работать.

Answer 5

Кажется, что следующий пример кода прокручивается следующим образом:

• Internet Explorer 8: после обратной передачи выбранный элемент является первым видимым элементом.

• Firefox: после обратной передачи выбранный элемент всегда виден (но может быть последним видимым элементом).

• Chrome: после обратной передачи выбранный элемент может быть скрыт, поскольку, как вы говорите, список прокручивается вверх.

<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>