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"（禁用客户端验证）
在Page指令

MaintainScrollPositionOnPostback="true"

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

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

这是known bug，如Microsoft Connect中所述。 relevant issue有最佳解决方法的基础：

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's answer所述，这是known 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上直接发布它，现在connect issue似乎需要注册才能看到，这使得他的工作难以访问。）

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

);

基本上，它会在必要时替换ValidationSummaryOnSubmit函数，其版本暂时禁用window.scrollTo并滚动到锚点。它不应该很难修改，以便它不使用jquery。

Answer 6

页面将跳转到验证摘要所在的位置。如果您希望它靠近底部，请在提交按钮附近向下移动验证摘要。

编辑，您也可以尝试关闭验证摘要。

Answer 7

我遇到了使用MaintainScrollPositionOnPostback=true的问题但会破坏客户端验证滚动位置。所以我添加了一个脚本，以便在回发时将验证摘要控件带入视图。

 private void FocusControlOnPageLoad(Control ctrl)
    {

        this.Page.ClientScript.RegisterClientScriptBlock(
          typeof(System.Web.UI.Page), "ctrlFocus",
        @"<script> 
              function ScrollView()
              {
                 var el = document.getElementById('" + ctrl.ClientID + @"')
                 if (el != null)
                 {        
                    el.scrollIntoView();
                    el.focus();
                 }
              }
              window.onload = ScrollView;
        </script>");
    }

with：

protected void Page_PreRender(object sender, EventArgs e)
{
   if (Page.IsValid == false)
        {
          FocusControlOnPageLoad(TheValidationSummary);
        }
}

似乎我还必须将scrollTo函数消隐：

window.scrollTo = function() {
            return true;
        }

获得代码（主要是）from here。

Answer 8

也许您可以从必需的fieldvalidator继承并覆盖自定义控件中的客户端验证？

Answer 9

查看为html设置目标架构。

尝试http://msdn.microsoft.com/en-us/library/6379d90d(VS.71).aspx

在VS 2005之前，您可以逐页设置架构。

只是一个想法。

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

9 个答案: