当验证摘要可见时，使验证摘要的容器可见答案

【问题标题】：Make the container of a validation summary visible when the validation summary becomes visible当验证摘要可见时，使验证摘要的容器可见
【发布时间】：2014-03-25 17:33:30
【问题描述】：

我有以下标记。 errorPanel 最初仅用于显示服务器端异常消息，并且可以正常工作。现在我想将我的验证摘要合并到同一个errorPanel。

<asp:Panel ID="errorPanel" runat="server" CssClass="error" Visible="false">
    <div style="float: right;">
        <a href="#" class="error-close" style="font-size: 10px">Close</a></div>
    <asp:Label ID="errorLabel" runat="server"></asp:Label>
    <asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true" />
</asp:Panel>
<fieldset>
    <legend>Create New Role</legend><asp:Label ID="newRoleNameLabel" runat="server" AssociatedControlID="newRoleNameText">Role Name:</asp:Label>
    <asp:TextBox ID="newRoleNameText" runat="server" Width="100px"></asp:TextBox>
    <asp:RequiredFieldValidator ID="newRoleNameRequired" runat="server" EnableClientScript="true" ControlToValidate="newRoleNameText" Display="Dynamic" ErrorMessage="Please enter a role name.">*</asp:RequiredFieldValidator>
    <asp:Button ID="createButton" runat="server" Text="Create" OnClick="createButton_Click" />
</fieldset>

我现在的问题是所需的验证发生在客户端，我想保留它，所以我没有服务器端机会使errorPanel 可见，以使验证摘要可见。

我看到我有两个选择：在服务器端进行验证，并在那里使用我的代码使面板可见，或者以某种方式挂钩到客户端代码并在应该使摘要可见时捕获那里的事件，然后还使errorPanel 可见。后者怎么办？

【问题讨论】：

标签： asp.net validation

【解决方案1】：

这是一个非常不推荐的方法，但我写得很开心，它可能会让你产生一些奇怪的想法！

（p.s. 我正在使用 jQuery 让生活更轻松）

将Visible="false" 从您的 asp:Panel 中删除，我们将在客户端完成所有操作。

<asp:Panel ID="errorPanel" runat="server" CssClass="error">

现在，在文档准备就绪时，我们将隐藏面板，并弄乱 ASP.NET 的验证代码。

$(document).ready(function () {
    // This is more like it!
    $("#<% =errorPanel.ClientID %>").hide();
    eval('ValidatorCommonOnSubmit = ' + ValidatorCommonOnSubmit.toString().replace('return result;', 'myValidatorHook(result); return result;'));
});

该 eval 采用由 ASP.NET 验证器生成的 ValidatorCommonOnSubmit() 函数，并对其进行适当的修改，以便在它返回其结果之前，使用该结果调用 myValidatorHook()。

（请参阅 this StackOverflow question 了解我的想法）

现在，我们的钩子：

function myValidatorHook(validated) {
    if (validated) {
        $("#<% =errorPanel.ClientID %>").hide();
    }
    else {
        $("#<% =errorPanel.ClientID %>").show();
    }
}

很简单——如果验证器返回真（页面验证），隐藏面板；如果它返回 false（页面未验证），则显示它。

使用风险自负！如果由 ASP.NET 验证器生成的 JavaScript 发生变化，这将非常糟糕 - 但我确实在 ASP.NET 2.0、3.5 和 4.0 中对其进行了测试，并且在所有三个版本中都一样。

【讨论】：

它有一个很好的厚脸皮。

【解决方案2】：

我有一个类似的问题，我在一组 ASP 验证字段周围有一个包含 div，我只想在出现错误时显示容器。

根据 Carson63000 的回答，我使用 jQuery 隐藏容器，然后使用 jQuery 查看错误的可见性，并在可见的情况下再次显示容器。

jQuery(function () {
    jQuery(".checkout-validation").hide();
    var show = false;
    jQuery(".checkout-validation span").each(function () {
        if (jQuery(this).css('display') != 'none' && jQuery(this).css('visibility') != 'hidden') {
            show = true;
        }
    });
    if (show == true) {
        jQuery(".checkout-validation").show();
    }
});

我要补充的唯一说明是标准验证字段默认设置为visibility: hidden，Display="Dynamic" 验证是display: none

【讨论】：

【解决方案3】：

老问题，但无论如何。

我找到了一个简单而干净的解决方案。没有服务器端，不需要javascript。您可以简单地将 errorPanel 的内容放在 ValidationSummary 控件的 HeaderText 中。就像在MSDN site 上说的：

HeaderText 属性不是 HTML 编码的。因此，HTML 标签可以包含在 HeaderText 中。

你的例子：

<asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true"  CssClass="error"
HeaderText='<div style="float: right;"><a href="#" class="error-close" style="font-size: 10px">Close</a></div><span ID="errorLabel" runat="server"></span>'/>
<fieldset>
...

而 PLBlum 也将其钉在了 Microsoft asp.net forum:

【讨论】：