Samira Radwan Ответов: 2

Сохранение позиции страницы после обратной передачи


У меня есть якорь тег внутри listview, который расширяет / скрывает строку внутри listview, оба находятся внутри updatePanel.
код javascript anchor tage выглядит следующим образом:
<a onclick=" $(this).parent().parent().next().find('#notesTd').toggle();" href="#" id="notes_anch"><img src="../img/notes1.png" class="wiringImg" runat="server" id="notesImg" visible="false" width="40" /></a>

Это строка, которую показывает/скрывает тег привязки:
<td colspan="6" style="display: none;" id="notesTd" class="showHideNotes">Notes
 <div id="divScroll">
                                                                            <asp:ListView runat="server" ID="notesView" DataSource="<%# Eval("NOTES", "{0}").Split('|') %>">
<LayoutTemplate>                                                                    
<ul>                                                                                   <li runat="server" id="itemPlaceholder" style="list-style: none;"></li>            
</ul>                                                                         </LayoutTemplate>
                                                                                <EmptyItemTemplate>no notes to display</EmptyItemTemplate>
                                                                                <ItemTemplate>                                                                            <li style="list-style: none; color: #000 !important;">                                 <%#string.Format("{0}",Container.DataItem) %>                                      
</li>                                                                              <asp:Label runat="server" ID="lblNotes" Visible="false" Text='<%#string.Format("{0}",Container.DataItem) %>'></asp:Label>                                      </ItemTemplate>                                                                            </asp:ListView>                                                                            </div>
</td>

Он работает очень хорошо, показывает/скрывает, но проблема в том, что я хочу, чтобы страница оставалась в том же положении после щелчка якоря, но она продолжает идти наверх. Я перепробовал много решений, но безуспешно

любая помощь будет очень признательна
Заранее спасибо

Что я уже пробовал:

1-решение design / C#
MaintainScrollPositionOnPostback="true" OR Page.MaintainScrollPositionOnPostBack = true; //on page load

2-JavaScript решение:
<script type="text/javascript">

        function SetScrollerPosition() {
            if (document.getElementById("XPos").value != "") {
                var x = document.getElementById("XPos").value;
                var y = document.getElementById("YPos").value;
                window.scrollTo(x, y);
            }

            document.getElementById("XPos").value = "0";
            document.getElementById("YPos").value = "0";
        }

        function GetScollerPosition() {
            var scrollX, scrollY;

            if (document.all) {
                if (!document.documentElement.scrollLeft)
                    scrollX = document.body.scrollLeft;
                else
                    scrollX = document.documentElement.scrollLeft;

                if (!document.documentElement.scrollTop)
                    scrollY = document.body.scrollTop;
                else
                    scrollY = document.documentElement.scrollTop;
            }
            else {
                scrollX = window.pageXOffset;
                scrollY = window.pageYOffset;
            }

            document.getElementById("XPos").value = scrollX;
            document.getElementById("YPos").value = scrollY;
        }

    </script>
<input type="hidden" id="XPos" runat="server" />
<input type="hidden" id="YPos" runat="server" />

3-Еще одно решение javascript (аналогично #2)
<script type="text/javascript">
            var xPos, yPos;
            var prm = sys.WebForms.PageRequestManager.getInstance();

            function BeginRequestHandler(sender, args) {
                if ($get('<%=UpdatePanel1.ClientID%>') != null) {
                    xPos = $get('<%=UpdatePanel1.ClientID%>').scrollLeft;
                    yPos = $get('<%=UpdatePanel1.ClientID%>').scrollTop;
                }
            }

            function EndRequestHandler(sender, args) {
                if ($get('<%=UpdatePanel1.ClientID%>') != null) {
                    $get('<%=UpdatePanel1.ClientID%>').scrollLeft = xPos;
                    $get('<%=UpdatePanel1.ClientID%>').scrollTop = yPos;
                }
            }

            prm.add_beginRequest(BeginRequestHandler);
            prm.add_beginRequest(EndRequestHandler);
        </script>

Bryian Tan

Пожалуйста, покажите соответствующий код. Где находится элемент с идентификатором notesTd? Где находится якорь?

Samira Radwan

как якорь, так и (TD) внутри listview. notesTd-это таблица td пожалуйста, проверьте второй блок кода в моем вопросе. Спасибо!

2 Ответов

Рейтинг:
2

santosh_131

 put the list view in a div with some id(divLstView1)
 
 function setScrollValue(divlistViewid) {
            var divObj=$("[id$=_" + divlistViewid + "]")[0];              
            var objX = $get('<%= hidScrollPosX.ClientID %>');
            var objY = $get('<%= hidScrollPosY.ClientID %>');

            if (objX && objY) {
                if (divObjX) {
                    objX.value = divObj.scrollLeft;
                    objY.value = divObj.scrollTop;
                }
            }
        }
		
		  
        function setScrollPageload(divlistViewid) {
            var divObj = $("[id$=_" + divlistViewid + "]")[0];           
            var objX = $get('<%= hidScrollPosX.ClientID %>');
            var objY = $get('<%= hidScrollPosY.ClientID %>');
            if (divObj) {
                if (objX && objY) {
                    divObj.scrollLeft = objX.value;
                    divObj.scrollTop = objY.value;
                }
            }
        }
		var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function (sender, e) {
		setScrollPageload('divLstView1');
	};
		function pageLoad()
		{
			setScrollPageload('divLstView1');
		}

//for the on click of anchor tag call the setScrollValue method
<a onclick="setScrollValue('divLstView1');$(this).parent().parent().next().find('#notesTd').toggle();" ....

		//put these hidden variables and javascript code in main page, not in the user control
		<input type="hidden" id="hidScrollPosX" runat="server" />
		<input type="hidden" id="hidScrollPosY" runat="server" />


Samira Radwan

большое спасибо, что мне удалось ее решить. Пожалуйста, проверьте мое решение

Рейтинг:
10

Samira Radwan

удалось это сделать, добавив Javascript:void

<a onclick=" $(this).parent().parent().next().find('#notesTd').toggle();" href="javascript:void(0);" id="notes_anch">


Или добавить href="#!"
<a onclick=" $(this).parent().parent().next().find('#notesTd').toggle();" href="#!" id="notes_anch">


Но я бы предложил первое решение-почему? проверить это ссылка[^]