65.9K
CodeProject 正在变化。 阅读更多。
Home

增强验证和扩展 ASP .NET Forms

Ronald Partridge
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (4投票s)

2010年9月23日

CPOL

4分钟阅读

viewsIcon

35218

downloadIcon

454

通过炫酷的突出显示和组合验证组来增强您的 ASP.NET 表单

问题描述

ASP.NET 自带的控件可以完成它们应有的功能，但自从 .NET 2.0 以来，网站变得越来越复杂和花哨。如果您想要一个外观精美、有特色的表单，ASP.NET 控件默认情况下无法提供。我认为，当用户浏览网站时，通过改变表单元素和标签周围的一些 CSS 样式，让他们确切地看到错误在哪里，这是很有帮助的。

有些表单太大了，需要分成几个步骤。将表单分解成小的部分，可以减轻用户输入信息的负担，并提高注册成功率。为了增加一些趣味性，我想出了一个在单个页面上实现这一目标的方法。

如何使用解决方案

只需将增强表单库添加到您的解决方案中，或者您可以简单地将 RDC.EhancedForm.dll 文件复制到您的 bin 目录，并且不要忘记也复制 Newtonsoft.Json.Net20.dll，它将 .NET 对象编码为 JSON，这样您就可以在 JavaScript 中轻松地读取对象中的数据。如果您想使用 Button 控件，则需要将 JQuery 加载到您的网页中。JQuery 库为你想分解的表单的各个部分提供了平滑的淡入效果。最后，在 web.config 文件的 <pages><controls> 下，添加以下行：

加载 DLL（增强表单库）。 

...
<pages>
 <controls>
  <add tagPrefix="ef" assembly="RDC.EnhancedForm" namespace="RDC.EnhancedForm" />
 </controls>
</pages>
...

我包含了一个完整的、可工作的示例，该示例使用了增强表单库。该示例还演示了 CSS3 的用法。所有内容都无需额外的图形图像即可渲染。我还发布了一个在线演示：http://www.ronald-douglas.com/Projects。

关于代码

加载完所有内容后，我们就可以开始查看代码了。这些控件的操作和功能与 ASP.NET 自带控件完全相同，但具有更进一步的功能。

我们来看一个 textbox 控件

<ef:TextBox ID="txtEmail"
    runat="server"
    Width="200px"
    CssClass="inputText"
    ClientFocusCssClass="inputTextFocus"
    ClientFocusLabel="lblEmail"
    ClientFocusLabelCssClass="labelTextFocus">
</ef:TextBox>

您会看到三个新属性，它们不是常规 ASP.NET textbox 控件的一部分

  • ClientFocusCssClass - 字段获得焦点时应用的 CSS
  • ClientFocusLabel - 字段获得焦点时要应用样式的标签
  • ClientFocusLabelCssClass - 字段获得焦点时应用的标签的 CSS

这三个新字段可以创建有趣的视觉效果，准确显示您正在处理表单的哪个部分。当 textfield 获得焦点时更改标签的 CSS 可能有点多余，但它能为您的表单增添一些漂亮的风格。

<ef:RequiredFieldValidator ID="vld_txtEmail" runat="Server"
    ControlToValidate="txtEmail" 
    ErrorMessage="Please enter your e-mail address."
    ToolTip="Please enter your e-mail address."
    Display="None"

    ControlErrorCssClass="inputTextError"
    ControlLabel="lblEmail"
    ControlLabelErrorCssClass="formLabelError"

    ValidationGroup="register1" />

您会看到三个新属性，它们不是常规 ASP.NET RequiredFieldValidator 控件的一部分

  • ControlErrorCssClass - 字段包含错误时应用的 CSS
  • ControlLabel - 字段包含错误时要应用样式的标签
  • ControlLabelErrorCssClass - 字段包含错误时应用的标签的 CSS

这三个新字段在字段包含错误时应用相同的 CSS 过渡。此外，当您聚焦进入和聚焦退出时，会记住 label 和 textfield 的 CSS。

最有趣的部分是将表单分解成小块。当用户填写完表单的一部分时，下一部分表单就会向他们显示。自定义按钮控件负责这一部分。

<ef:Button ID="btnSubmit" 
    runat="server" 
    Text="Continue"
    onclick="btnSubmit_Click" 
    CssClass="defaultButton"
    ValidationGroupStepping="true"
    ValidationGroupOrder="register1=formGroup2, register2=formGroup3"
    ValidationGroupEnd="register3" />

如果您查看演示文件（FormDemo1.aspx），您会发现每个表单部分都有自己的验证组。表单的最后两部分被隐藏了（'display: none'）。这个控件的行为与常规 ASP.NET 按钮完全相同，直到您输入到三个新属性中

  • ValidationGroupStepping - 告诉按钮按顺序遍历所有验证组
  • ValidationGroupOrder - 遍历验证组的顺序以及要显示的表单部分
  • ValidationGroupEnd - 要处理的最后一个注册组
register1=formGroup2, register2=formGroup3

这意味着，一旦验证组 register1 通过，fromGroup2 就会显示，用户就可以填写表单的下一部分，依此类推。在增强表单库项目中，请查看 EnhancedClientButton.js。

要下载库和示例，请访问 http://www.ronald-douglas.com/Projects。

如果您有兴趣帮助这个库发展，可以通过 http://www.ronald-douglas.com/Contact 联系我。

访问 CodePlex 上的项目：http://enhancedforms.codeplex.com/。

灵感

感谢 Alexander Kleshchevnikov 激发了我写这篇文章的灵感。他的作品是我库的基础。几年前我偶然发现了他的文章，并决定制作一个更强大、更完整的东西与大家分享。

您可以在此处查看他的原始文章： https://codeproject.org.cn/KB/validation/highlight_validators.aspx。

© . All rights reserved.