Как сохранить положение прокрутки страницы после обратной передачи страницы в asp.net
<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>
не работает, где я ошибаюсь
<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>
Я пытаюсь сделать страницу оставаться в том же положении, когда страница обновляется каждые 5 секунд, и страница идет наверх. Я попробовал страницу MaintainScrollPositionOnPostback=" true". Это не сработало, я попытался использовать Ajax, но понятия не имею, как его использовать. Может кто-нибудь помочь мне, как это сделать с Ajax.
11 ответов
MaintainScrollPositionOnPostback работает только в IE. Для этого вы можете либо свернуть свой собственный клиентский скрипт, либо использовать якорные ссылки в разных разделах вашей страницы/формы.
подобные вопросы здесь:
MaintainScrollPositionOnPostback не работает-как отлаживать?
MaintainScrollPositionOnPostback не работает с javascript: _ _ doPostBack
попробуйте следующий код на странице дизайна..он отлично работает для меня..
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmName.aspx.vb" Inherits="frmName" MaintainScrollPositionOnPostBack = "true" %>
дешевое исправление для того, что звучит как ужасный пользовательский интерфейс (страница обновляется каждые 5 секунд), было бы добавить " # " и идентификатор элемента, который вы хотите сохранить в поле зрения URL-адреса в адресной строке, но это автоматически прокручивается в верхней части связанного с ID элемента.
Если это коммерческий продукт, и вы спешите, я бы рекомендовал проверить реализацию ajax jQuery и полностью отключить эти перезагрузки.
это может быть так же просто, как строка например:
$.ajax(
{
url:"/thisPath/requestPath",
complete:function(data){
//apply data (the http-response) to HTML
}
);
Если это выглядит странно для вас, это просто объект-литерал, подаваемый в метод ajax объектов jQuery. Функция, назначенная "полной" срабатывает при получении http-ответа, который подается функции в качестве аргумента "данные", который устанавливается на внутренней стороне.метод "Аякс".
UpdatePanels ужасны с точки зрения производительности. Я бы сделал это с jquery и полностью избегал обратных ссылок.
$.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);
}
});
Если это опция, настройте url для чтения на основе этого руководства:
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
Если вы не хотите использовать jquery, вы все равно можете использовать MS AJAX, просто пропустите эти панели обновления. http://www.geekzilla.co.uk/View7B75C93E-C8C9-4576-972B-2C3138DFC671.htm
<%@ Page MaintainScrollPositionOnPostback="true" %>
как объявление plage будет держать положение прокрутки, как это
@{
}
<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>
вы можете использовать это для поддержания положения прокрутки после обратной передачи.
источник: http://www.aspsnippets.com/Articles/Maintain-Scroll-Position-of-DIV-on-PostBack-in-ASPNet.aspx
для кого-то борется с этим. Простое решение-сохранить расположение прокрутки всего окна
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();
});
Ad как начало, так и конец запроса. При запросе begin получите положение прокрутки windows с помощью Jquery. По запросу end просто прокрутите до этого места.
попробуйте это в коде:
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
Page.MaintainScrollPositionOnPostBack = true;
}
}
Posdata: я пробовал это с C#.
есть ответы по всей сети на эту проблему, и лично ни один из них не работал, так как для меня Firefox попытался бы восстановить предыдущую позицию прокрутки (ошибочно), вызвать window.scroll
событие, которое перезапишет мое скрытое поле с его неправильной позицией, которая моя читал. (У меня есть gridviews, поступающие из postbacks с последующим автоматическим сворачиванием некоторых строк.)
Итак, вот еще одно решение этой проблемы - я решил, что хочу только восстановить положение прокрутки после отправки, а не обновления, поэтому это было адекватно:
страница ASPX:
<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);
по какой-то причине при обновлении браузера мой скрытый вход не сбрасывается до нуля, поэтому иногда это ведет себя странно. Я хотел бы знать, что это делает, я думаю, что это Firefox, поскольку это не происходит на IE, но жизнь слишком коротка [он говорит...загрузив половину интернета и потратив на это часы..].