【问题标题】:ASP.NET: How to change the background color of a control that failed validation?ASP.NET:如何更改验证失败的控件的背景颜色?
【发布时间】:2009-03-20 10:24:32
【问题描述】:

我们以下面这个简单的网站为例:

<asp:TextBox id="TextBox1" 
runat="server"></asp:TextBox>
&nbsp; 
<asp:RequiredFieldValidator 
id="RequiredFieldValidator1" runat="server" 
ErrorMessage="Required!" 
ControlToValidate="TextBox1">
</asp:RequiredFieldValidator>

现在,我希望 TextBox1 在验证失败时将其 BackColor 更改为黄色。有没有一种简单的方法可以做到这一点?

【问题讨论】:

    标签: asp.net validation


    【解决方案1】:

    Page.Validators 是一个 ValidatorCollection。您可以迭代此集合,将每个成员转换为 BaseValidator。检查 BaseValidator.IsValid 并从 BaseValidator.ControlToValidate 获取控件的名称。使用 this.FindControl(control name) 获取对控件的引用(这将返回一个 Control 对象)。执行您需要执行的任何类型检查和转换,然后如果您可以将控件转换为 TextBox 或其他包含 BackColor 属性的控件,请对其进行转换并设置 BackColor。

    这是一个简化版:

       private void setInvalidControlsBackColor()
        {
            Control c;
            TextBox t;
            foreach (BaseValidator v in Page.Validators)
            {
                if (!v.IsValid)
                {
                    c = (Control)this.FindControl(v.ControlToValidate);
                    // check the type, make sure you can cast this...
                    t = (TextBox)c;
                    t.BackColor = Color.Yellow;
                    // or however else you want to handle this...
                }
            }
        }
    

    我没有包含类型检查代码的原因是因为您可能希望以不同的方式处理不同的控件类型等。此外,如果您没有在验证器上使用 ToolTip 字段,您可以使用它存储附加信息的字段(有点像 Tag 属性)。这可能被认为是丑陋的做法,但如果你需要它,它就在那里……可以用作提示如何处理有效/无效状态。

    【讨论】:

    • 我的页面有文本框和下拉框。当从 Control 向下转换(到 TextBox 或 Dropdown)时 - 我们如何动态确定是否需要向下转换到 TextBox 或 Dropdown(因为两者的验证都可能失败)。
    • @bflemi3 这个问题和答案来自三年多以前,但我相信模式是在用户提交表单时在代码中调用 Page.Validate() ,然后所有Page.Validators 中的 BaseValidators 将被设置,您可以在 Page.Validate() 之后立即调用这种方法。我认为这就是它的工作原理......我已经有大约三年没有做过任何 ASP.NET 编程了,我不知道现在在 MVC 中是否有什么不同
    • @Rich 在服务器端验证代码中,如果验证正常,如何将文本框的背景颜色恢复为 TextBox 的默认背景颜色?在将其更改为 Color.Yellow 之前,我们是否必须保留背面颜色值?
    【解决方案2】:

    更好的选择是从系统验证器继承并创建自己的验证器。您可以覆盖默认行为以更改 ControlToValidate 字段的背景颜色。大多数控件不需要检查类型,只需将样式值设置为“background-color:yellow”即可。

    【讨论】:

    • 我很想知道,但想问问是否有其他解决方案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-17
    • 1970-01-01
    • 2021-06-02
    • 1970-01-01
    相关资源
    最近更新 更多