24

我有一个带有几个文本框和一个提交按钮的简单 aspx 页面。某些字段是必需的，按钮下方是 ValidationSummary。完整的表单大于屏幕高度，因此必须向下滚动才能到达提交按钮。如果我没有填写所有必填字段并单击提交验证会按预期失败，并且验证摘要会在按钮下方显示一些信息消息。验证发生在客户端上，不会发生回发。

所以这一切都如愿以偿。但令人不安的是，当我单击提交按钮时，页面会移动（“跳转”）到顶部位置。要查看验证摘要，必须再次向下移动页面。

我试图将ShowSummary属性设置为false（这没有多大意义）：验证仍然有效（无回发）但在这种情况下页面不会移动到顶部位置。所以问题似乎取决于呈现验证文本。

有没有办法防止这个页面跳转？

先感谢您！

更新：

我上面描述的行为似乎并不依赖于浏览器。我已经在五种不同的浏览器中进行了测试，而且到处都是一样的。

4

8 回答 8

33

我在 asp.net ( http://forums.asp.net/p/1545969/3779312.aspx ) 上提出了这个问题，并得到了两种解决方案的回复。更好的是这段保持滚动位置的Javascript：

<script type="text/javascript">
    window.scrollTo = function( x,y ) 
    {
        return true;
    }
</script>

这只是放在页面上而无处可调用。

另一个解决方案类似于 RioTera 在此处的提议（使用MaintainScrollPositionOnPostBack），但添加EnableClientScript="false"到验证器以强制回发。它也有效，但价格是人为的回发。

于 2010-04-11T21:10:50.343 回答
23

您可以使用 Page 属性 MaintainScrollPositionOnPostBack ：

在代码隐藏中：

Page.MaintainScrollPositionOnPostBack = true;

或在您的网络表单中：

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback="true" %>
于 2010-04-10T13:11:15.117 回答
6

尝试设置页面焦点Page.SetFocus(control); 我有一个插入按钮，它向我的 gridview 添加了一个额外的行，这是页面上的许多项目之一，因此我可以将Page.SetFocus(control)其作为最后一个方法添加到我的 btnInsert_Click 事件中。

于 2012-03-19T17:30:53.753 回答
4

我发现设置属性：

maintainScrollPositionOnPostBack="true"

在你的Web.config <pages>部分运作良好。

于 2015-06-08T18:10:39.173 回答
1

页面闪烁是因为整个页面被回发到服务器并且内容再次从服务器发回。您需要使用 UpdatePanel 标记来包围您要刷新的位置。它只会回发标签内的信息

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>

阅读http://msdn.microsoft.com/en-us/library/bb386573(v=vs.100).aspx#CodeExamples

于 2013-01-14T23:05:42.233 回答
1

不幸的是 MantainScrollPositionOnPostback 不再适用于现代浏览器。对于跨浏览器兼容的解决方案，您可以使用此代码段（需要 jQuery）：

<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
    $(function () {
        var f = $("#<%=hfPosition.ClientID%>");
        window.onload = function () {
            var position = parseInt(f.val());
            if (!isNaN(position)) {
                $(window).scrollTop(position);
            }
        };
        window.onscroll = function () {
            var position = $(window).scrollTop();
            f.val(position);
        };
    });
</script>

另请参阅我的答案。

于 2014-12-16T13:47:19.890 回答
0

我正在使用 MVC5，停止跳转的唯一方法是使用下面的 JQuery 代码。

我已经在 Safari、Chrome、Mozilla、Internet Explorer 和 Opera 上测试了该解决方案。

$(document).scrollTop($('form#formCheckout').offset().top);
    event.stopPropagation();
    event.preventDefault();
于 2015-07-17T03:16:37.663 回答
0

禁用 window.scrollTo 不是一个好的解决方案，因为它可能会在不知不觉中破坏页面上的其他脚本。

相反，在您的 ValidationSummary 上，将 ClientIDMode 设置为 Static 并定义一个非常唯一的 ID，例如：

<asp:ValidationSummary id="VeryUniqueValidationSummaryID"
    ClientIDMode="Static" ...

接下来，在您的提交按钮上，设置 OnClientClick 以将验证摘要滚动回视图，如下所示：

<asp:LinkButton ID="MyButton"
    OnClientClick="ScrollToValidationSummary();"

Javascript 函数首先检查页面是否有效。如果不是，那么它会在短暂超时后将验证摘要滚动回视图：

function ScrollToValidationSummary() {
    if (!Page_ClientValidate()) {
        setTimeout(function () {
            var summary = document.getElementById('VeryUniqueValidationSummaryID');
            summary.scrollIntoView();
        }, 500);
     }
 }

由于 setTimeout 没有在正确的时间触发，偶尔滚动位置可能仍然关闭。但是对于绝大多数用户来说应该是正确的。

注意：如果您使用的是 ValidationGroup，则需要调用 Page_ClientValidate("ValidationGroupName") 而不是 Page_ClientValidate()。

于 2020-11-08T21:32:10.683 回答