我正在处理基于 CheckBoxList 中用户的勾选来累加其分数的问题。每当用户勾选一个框时,会将值 X
添加到总分中。当用户取消勾选一个框时,会从总分中减去值 X
。这方面没有问题。
我遇到的问题是,在 CheckBoxList 属性中使用 AutoPostback 选项会导致页面返回顶部而不是停留在用户所在位置,这意味着他们必须在每次勾选/取消勾选后继续向下滚动。有没有办法防止这种情况发生?
我正在处理基于 CheckBoxList 中用户的勾选来累加其分数的问题。每当用户勾选一个框时,会将值 X
添加到总分中。当用户取消勾选一个框时,会从总分中减去值 X
。这方面没有问题。
我遇到的问题是,在 CheckBoxList 属性中使用 AutoPostback 选项会导致页面返回顶部而不是停留在用户所在位置,这意味着他们必须在每次勾选/取消勾选后继续向下滚动。有没有办法防止这种情况发生?
当然,最好的方法是使用 Ajax 调用。页面不会移动,数据只是更新。UpdatePanel 是一个快速简单的解决方案 - 不是最优解,但如果您的页面较为简单,那么它是非常好的选择。
第二种解决方案是使用锚点 #。您可以设置您想要显示的位置:
<a name="PointA"></a>
当你使用锚点 page.aspx#PointA
来调用页面时,可以实现以下功能。
第三种解决方案是使用 ASP.NET 的内部 JavaScript 代码。在页面声明中(顶部第一行)添加如下代码:<%@ Page MaintainScrollPositionOnPostback="true" %>
。
或在 web.config 中对所有页面进行设置,添加如下代码:<pages maintainScrollPositionOnPostBack="true" />
。
或者以编程方式打开它并按需关闭它,使用以下代码:System.Web.UI.Page.MaintainScrollPositionOnPostBack = true;
。
通过只有两行 jQuery 代码,您可以使想要在 post back 后移动到的点上产生漂亮的动画效果:
var WhereToMove = jQuery("#PointA").position().top;
jQuery("html,body").animate({scrollTop: WhereToMove }, 1000);
你可以将页面滚动到该元素:
<a id="PointA" name="PointA"></a>
最后,您可以使用自定义JavaScript代码来实现同样的效果。互联网上有许多示例:https://www.google.com/?q=asp.net+remain+position
<system.web>
<pages maintainScrollPositionOnPostBack="true">
</system.web>
注意:这将应用于整个解决方案,它可以防止每个表单滚动。
2) 实现此目的的第二种方法是在aspx文件顶部添加以下代码行:
MaintainScrollPositionOnPostback=true
像这样:
<%@ Page MaintainScrollPositionOnPostback=true Language="C#" AutoEventWireup="true" CodeBehind="xx.aspx.cs" Inherits="xx.Global" %>
在需要禁用滚动条的页面中,在Page(“<%@ Page ....>”)指令中设置属性MaintainScrollPositionOnPostback为true,即<%@ Page MaintainScrollPositionOnPostback=true ...other settings... >
应该出现在aspx页面的顶部。
对于网站中的所有页面,在web.config文件中添加以下行:<pages MaintainScrollPositionOnPostback=true>
整合AJAX查询
<pages maintainScrollPositionOnPostBack="true">
由于runat标记,.NET中的HTML标记可以以编程方式引用。
只需在HTML中给body标记添加runat="server"和id="body"或任何你想在代码中引用的名称(我将在示例中使用body
)。
然后,您可以像这样在代码中添加/修改标记的属性:
Body.Attributes.Add("scroll", "no")
在页面加载时放置代码。
MaintainScrollPositionOnPostback在Chrome浏览器中并不总是有效,并且有时会在postback所需的逻辑方面引起问题。这是一段简单的JavaScript代码,相当于MaintainScrollPositionOnPostback。
window.onload = function () {
var scrollY = parseInt('<%=Request.Form["scrollY"] %>');
if (!isNaN(scrollY)) {
window.scrollTo(0, scrollY);
}
};
window.onscroll = function () {
var scrollY = document.body.scrollTop;
if (scrollY == 0) {
if (window.pageYOffset) {
scrollY = window.pageYOffset;
}
else {
scrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
}
if (scrollY > 0) {
var input = document.getElementById("scrollY");
if (input == null) {
input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("id", "scrollY");
input.setAttribute("name", "scrollY");
document.forms[0].appendChild(input);
}
input.value = scrollY;
}
};
你可以重写窗口的“scrollTo”方法并在其中什么也不做,这样updatePanel尝试设置页面滚动位置的尝试将失败 :)
function scrollTo(x, y) {
}