防止页面在postback后滚动并保持位置

Question

防止页面在postback后滚动并保持位置

javascriptc#asp.netvb.net

17

我正在处理基于 CheckBoxList 中用户的勾选来累加其分数的问题。每当用户勾选一个框时，会将值 X 添加到总分中。当用户取消勾选一个框时，会从总分中减去值 X。这方面没有问题。

我遇到的问题是，在 CheckBoxList 属性中使用 AutoPostback 选项会导致页面返回顶部而不是停留在用户所在位置，这意味着他们必须在每次勾选/取消勾选后继续向下滚动。有没有办法防止这种情况发生？

- Kruug

8个回答

8

两种防止页面在Postback后滚动的最佳方法是：
将以下内容放入web.config中。
1） pages maintainScrollPositionOnPostBack="true"
许多人会问这行代码应该放在哪个位置。正确的位置是：

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

注意：这将适用于您想要防止的特定表单。

- Malik

4

我能想到三种可能的方法：

在需要禁用滚动条的页面中，在Page（“<%@ Page ....>”）指令中设置属性MaintainScrollPositionOnPostback为true，即<%@ Page MaintainScrollPositionOnPostback=true ...other settings... >应该出现在aspx页面的顶部。
对于网站中的所有页面，在web.config文件中添加以下行：<pages MaintainScrollPositionOnPostback=true>
整合AJAX查询

- John

1

当您想要停止滚动和页面刷新时，MaintainScrollPositionOnPostback="true" 标签是最重要的。

- thisal selaka

0

将此行代码放入webconfig文件中：

<pages maintainScrollPositionOnPostBack="true">

- Firoz Khan

2

你的回答与3年前发布的这个回答重复了。 - Bjørn-Roger Kringsjå

0

由于runat标记，.NET中的HTML标记可以以编程方式引用。

只需在HTML中给body标记添加runat="server"和id="body"或任何你想在代码中引用的名称（我将在示例中使用body）。

然后，您可以像这样在代码中添加/修改标记的属性：

Body.Attributes.Add("scroll", "no")

在页面加载时放置代码。

- Devendra Patel

0

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

- roshandeep singh

0

你可以重写窗口的“scrollTo”方法并在其中什么也不做，这样updatePanel尝试设置页面滚动位置的尝试将失败 :)

function scrollTo(x, y) {
}

- Saeed Taran

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aristos · Accepted Answer

Ajax 解决方案

当然，最好的方法是使用 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

通过只有两行 jQuery 代码，您可以使想要在 post back 后移动到的点上产生漂亮的动画效果：

var WhereToMove = jQuery("#PointA").position().top;
jQuery("html,body").animate({scrollTop: WhereToMove }, 1000);

你可以将页面滚动到该元素：

<a id="PointA" name="PointA"></a>

Google搜索

最后，您可以使用自定义JavaScript代码来实现同样的效果。互联网上有许多示例：https://www.google.com/?q=asp.net+remain+position