防止回发后页面滚动并保持位置

Prevent page scrolling after postback and maintain position

本文关键字：滚动 位置      更新时间：2023-09-26

我正在根据用户在复选框列表中的检查将用户的分数相加。 每次用户选中一个框时，都会将一个值 X 添加到总分中。 当用户取消选中某个框时，将从总分中减去一个值X。 这里没有问题。

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

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代码，您就可以在回发后想要移动的点上制作漂亮的动画：

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

防止回发后页面滚动的两种最佳方法是：把它放在 web.config 中。
1）pages maintenanceScrollPositionOnPostBack="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" %>

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

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

  1. 在应禁用滚动的页面上，将页面（"<%@ 页面....>"）指令中的属性MaintainScrollPositionOnPostback设置为 true，即 <%@ Page MaintainScrollPositionOnPostback=true ...other settings... >应显示在 ASPX 页的顶部

  2. 对于网站中的所有页面，请在 web.config 中添加以下行： <pages MaintainScrollPositionOnPostback=true>

  3. 合并 AJAX 查询

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

由于

runat标签，HTML标记可以在.NET中以编程方式引用。

只需在 HTML 中给 body 标签一个 runat="server"，然后给 id="body" 或任何你想在代码中引用它的东西（我将使用 body 作为示例）。

然后，您可以在代码中添加/修改标记的属性，如下所示：

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

将代码放在页面加载上。

把这一行放在 webconfig 文件中：

<pages maintainScrollPositionOnPostBack="true">

您可以覆盖窗口的"scrollTo"方法并且在其中不执行任何操作，因此尝试使用updatePanel设置页面滚动位置将失败:)

function scrollTo(x, y) {
}

MaintainScrollPositionOnPostback 并不总是在 chrome 中工作，有时会导致回发所需的逻辑出现问题。这是一个简单的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;
        }
    };
相关文章：