ASP.Net验证摘要导致页面跳转到顶部

Question

我有一个简单的表单,其中包含一些必需的字段验证器和一个验证摘要控件.当我提交表单时,客户端验证将使表单跳转到页面顶部.如果我删除验证摘要,页面不会移动.

下面是一个简单的例子:

<asp:TextBox ID="test" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="testrequired" runat="server" ControlToValidate="test">*</asp:RequiredFieldValidator>
<asp:ValidationSummary ID="summary" runat="server" />
<asp:Button ID="submit" runat="server" Text="submit" />

我已经尝试设置SetFocusOnError="true"必需的字段验证器和MaintainScrollPositionOnPostback="true"咯咯笑 - 即使这不是一个回发 - 没有任何运气.这个问题有一个已知的解决方案吗？

编辑:

我在WebResource.axd生成的js中发现了问题.似乎在ValidationSummaryOnSubmit()功能中归结为一行.

line 534: window.scrollTo(0,0);

有关如何删除或绕过此的任何想法？

EDIT2:

暂时快速解决:

• EnableClientScript="false"为所有验证控件设置(禁用客户端验证)
• MaintainScrollPositionOnPostback="true"在Page指令中设置

仍然希望客户端解决方案......

EDIT3:

似乎更好的解决方法是覆盖window.scrollTo()函数,以便在验证脚本调用时不执行任何操作:

<script type="text/javascript">
    window.scrollTo = function() { }
</script>

在页面上的任何位置添加上述内容会使客户端验证,但在window.scrollTo()整个页面中禁用该方法

Answer 1

两种可能的解决方法:

禁用客户端验证并跳回到回发后的正确位置:

* set EnableClientScript="false" for all validation controls (disabling client validation)
* set MaintainScrollPositionOnPostback="true" in Page directive

禁用javascript中的scrollTo函数:

<script type="text/javascript">
    window.scrollTo = function() { }
</script>

Answer 2

这是一个已知的错误,如Microsoft Connect中所述.在相关的问题有最好的解决办法的基础:

var ValidationSummaryOnSubmitOrig = ValidationSummaryOnSubmit;
var ValidationSummaryOnSubmit = function() {
    var scrollToOrig = window.scrollTo;
    window.scrollTo = function() { };
    var retVal = ValidationSummaryOnSubmitOrig();
    window.scrollTo = scrollToOrig;
    return retVal;
}

Answer 3

代替

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

这将不加选择地覆盖所有回发的ScrollTo函数,我把该函数放在按钮的OnClientClick事件中.如下.

onClientClick="window.scrollTo = function(x,y) { return true; };"

不确定它是否是最好的解决方案,但它似乎已经完成了我的工作.

Answer 4

正如cleek的回答所说,这是一个已知的bug,有一些解决方法.

这是bdukes one,它在我看来是目前最好的.

(function () {
  var originalValidationSummaryOnSubmit = window.ValidationSummaryOnSubmit;
  window.ValidationSummaryOnSubmit = function (validationGroup) {
    var originalScrollTo = window.scrollTo;
    window.scrollTo = function() { };
    originalValidationSummaryOnSubmit(validationGroup);
    window.scrollTo = originalScrollTo;
  }
}());

(他没有在SO上直接发布它,现在连接问题似乎需要注册才能被看到,这使得他的工作难以访问.)

Answer 5

我用这个:(需要jquery和jquery.scrollTo)

首先,您将一个特定类的锚放在验证摘要之上,如下所示:

<a class="custom_valsum_anchor" />
<asp:ValidationSummary ID="valSum" runat="server" EnableClientScript="true" />

然后包括这个javascript:

$(document).ready(
        function () {
            var $valSum = $(".custom_valsum_anchor");
            if ($valSum.size() > 0) {
                var backup_ValidationSummaryOnSubmit = ValidationSummaryOnSubmit;
                ValidationSummaryOnSubmit = function (validationGroup) {
                    var backup_ScrollTo = window.scrollTo;
                    window.scrollTo = function () { };
                    backup_ValidationSummaryOnSubmit(validationGroup);
                    window.scrollTo = backup_ScrollTo;
                    setTimeout(function () { $("body").scrollTo($valSum); }, 1);
                };
            }
        }

);

Basicaly,它会在必要时替换ValidationSummaryOnSubmit具有暂时禁用window.scrollTo和滚动到锚点的版本的函数.它不应该很难修改,以便它不使用jquery.