Asp.net 维护ScrollPositionOnPostBack 和表单验证失败

Question

我有一个很长的表格需要填写。我启用了维护ScrollPositionOnPostBack，因为我有多个根据用户输入隐藏/显示的控件。

由于表单很长，我希望页面能够聚焦并滚动到导致验证失败的第一个控件，并且我启用了关注验证失败选项。但是，maintainScrollPositionOnPostBack 似乎覆盖了它（控件确实聚焦但不会向上滚动）。

对此有任何解决方法的想法吗？到目前为止我所尝试的一切都没有奏效。这是一个 asp.net 网络表单项目。

Answer 1

这是一个很好的问题，但要开始工作真的很棘手。但我设法获得了一个版本，您可以尝试并在此基础上进行构建。

MaintainScrollPositionOnPostback="true" 设置在表单提交和窗口加载时设置一系列 javascript 事件，这些事件如您所说，“覆盖”验证器设置的焦点。

所以我所做的就是向所有验证器添加一个通用的 css 类，如下所示：

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" CssClass="error" ErrorMessage="RequiredFieldValidator" SetFocusOnError="true"
    EnableClientScript="false" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

然后我在 window.load 中添加了另一个事件监听器（注意我们还需要保留 Asp.Net 添加的那个，所以我们不能执行 windows.load = function...）：

<script>
    window.addEventListener("load", function () {
        var el = document.getElementsByClassName("error");
        if (el.length > 0) {
            window.location.hash = "#" + el[0].id;                
        }
    });        
</script>

这里你可能会受益于 jQuery 使用能够支持更多的浏览器，但 addEventListener 是pretty well supported。

脚本搜索错误消息并通过它的 id 和锚来关注它。 Javascript 有 focus-method，但它是针对表单元素的，所以这就是这个解决方法的原因。

希望这会有所帮助！