回发后保持页面位置 [英] Maintain page position after postback
问题描述
我在listview中有一个 anchor 标记，它扩展/隐藏了listview中的一行，它们都在updatePanel中。
锚定标记javascript代码如下：
I have an anchor tag inside listview that expands/hides a row inside the listview both are inside an updatePanel.
the anchor tage javascript code is the following:
<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>
这是锚标记显示/隐藏的行：
This is the row that the anchor tag show/hide:
<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＃solution
It's working very well show/hides BUT the problem is I want the page to stay in the same position after anchor click but it keeps going to the top. I tried many solutions with no luck
any help will be very much appreciated
Thanks in advance
What I have tried:
1-design / C# solution
MaintainScrollPositionOnPostback="true" OR Page.MaintainScrollPositionOnPostBack = true; //on page load
2-JavaScript解决方案：
2-JavaScript solution:
<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 ）
3- another javascript solution (similar to #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>
推荐答案
（this）.parent（）。parent（）。next（）。find （'#notesTd'）。toggle（）;href =＃id =notes_anch>< img src =../ img / notes1.pngclass =wiringImgrunat =serverid =notesImgvisible =falsewidth =40/>< / a>
(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>
这是锚标记显示/隐藏的行：
This is the row that the anchor tag show/hide:
<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＃solution
It's working very well show/hides BUT the problem is I want the page to stay in the same position after anchor click but it keeps going to the top. I tried many solutions with no luck
any help will be very much appreciated
Thanks in advance
What I have tried:
1-design / C# solution
MaintainScrollPositionOnPostback="true" OR Page.MaintainScrollPositionOnPostBack = true; //on page load
2-JavaScript解决方案：
2-JavaScript solution:
<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 ）
3- another javascript solution (similar to #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%>') != null) { xPos =
get（'<％= UpdatePanel1.ClientID％>'）。scrollLeft;
yPos =
get('<%=UpdatePanel1.ClientID%>').scrollLeft; yPos =
这篇关于回发后保持页面位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
