Question

我有以下标记。 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可见。我怎么能去做后者？

Answer 1

这是一种真正不推荐的方法，但我很乐意写它，它可能会引导你一些滑稽的想法！

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

从你的asp：Panel中取出Visible="false"，我们将在客户端进行。

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

足够简单 - 如果验证器返回true（页面验证），则隐藏面板;如果它返回false（页面未验证），则显示它。

使用风险自负！如果ASP.NET验证器生成的JavaScript发生了变化，这将会破坏性 - 但我确实在ASP.NET 2.0,3.5和4.0中进行了测试，并且它在所有三个中都运行相同。

Answer 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

Answer 3

老问题，但无论如何。

我找到了一个简单而干净的解决方案。没有服务器端，不需要JavaScript。您只需将 errorPanel 的内容放在ValidationSummary Control的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上钉了它：

当验证摘要变得可见时，使验证摘要的容器可见

3 个答案: