Enhanced Forms Library for 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> <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

这三个新字段创建了一个有趣的效果,可以清楚地显示正在处理表单的哪一部分。当文本字段聚焦时,标签的CSS发生变化可能有些过分,但它为表单增添了一些风格。

让来看一下RequiredFieldValidator控件:

<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过渡。同时,标签和文本字段的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 - 要处理的最后一个注册组

HTML register1=formGroup2, register2=formGroup3这意味着一旦验证组register1通过,formGroup2将被显示,用户可以填写表单的下一部分,依此类推。在增强表单库项目中,查看EnhancedClientButton.js

要下载库和示例,请访问http://www.ronald-douglas.com/Projects。如果有兴趣帮助这个库成长,可以在http://www.ronald-douglas.com/Contact联系。在codeplex.com上查看这个项目:http://enhancedforms.codeplex.com/

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485