Question

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

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

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

有没有办法阻止此页面跳转？

提前谢谢！

更新

我上面描述的行为似乎与浏览器无关。我已经在五种不同的浏览器中进行了测试，并且它在任何地方都是相同的。

Answer 1

我在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"添加到Validators以强制回发。它也有效，但价格是人为的回发。

Answer 2

您可以使用Page属性MaintainScrollPositionOnPostBack：

在代码隐藏中：

Page.MaintainScrollPositionOnPostBack = true;

或在您的网络表单中：

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback="true" %>

Answer 3

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

Answer 4

我发现设置属性：

maintainScrollPositionOnPostBack="true"

您Web.config <pages>部分的

效果很好。

Answer 5

页面闪烁，因为整个页面都会回发到服务器，内容会再次从服务器发回。您需要使用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

Answer 6

不幸的是，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>

另见我的回答here。

Answer 7

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

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

$(document).scrollTop($('form#formCheckout').offset().top);
    event.stopPropagation();
    event.preventDefault();

Answer 8

禁用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（）。

如何在验证失败后阻止页面跳转到顶部位置？

8 个答案: