代码之家 › 专栏 › 技术社区 › ProfK

使验证摘要的容器在验证摘要变为可见时可见

validation asp.net

ProfK · 技术社区 · 14 年前

我有以下的标记。这个 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>

我现在的问题是,所需的验证是在客户端进行的,我想保留这一点,所以我没有机会在服务器端进行 错误面板 可见,以便使验证摘要可见。

我看到我有两个选项:在服务器端执行验证,在那里使用我的代码使面板可见,或者以某种方式钩住客户端代码,在那里捕捉应该使摘要可见的事件,然后也使 错误面板 看得见。我该怎么处理后者呢?

3 回复 | 直到 14 年前

Community CDub 8 年前

这里有一个方法是真的不推荐,但我写它的乐趣,它可能会导致一些可笑的想法!

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

那个评估员 ValidatorCommonOnSubmit() 由ASP.NET验证器生成的函数,并在其返回结果之前就地修改它,它调用 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中进行了测试,三者的工作原理都是一样的。

Alan Whitelaw 13 年前

我也遇到过类似的问题 div 在一组ASP验证字段周围,我只想在显示错误时显示容器。

根据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

RenatoIvancic 11 年前

老问题,但无论如何。

我找到了一个简单而干净的解决方案。不需要服务器端,也不需要javascript。你可以简单地把你的内容 错误面板 在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>
...

以及 普卢姆 也把它钉上了 Microsoft asp.net forum :