随着.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
- 当字段聚焦时应用的CSSClientFocusLabel
- 当字段聚焦时应用样式的标签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
- 当字段包含错误时应用的CSSControlLabel
- 当字段包含错误时应用样式的标签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/
。