上述代码生成了Wizard控件,并在Wizard控件中自动生成了WizardSteps标签,这个标签规范了向导控件中的步骤,如左图所示。在向导控件中,系统会生成WizardSteps控件来显示每一个步骤, 如右图所示。"> 上述代码生成了Wizard控件,并在Wizard控件中自动生成了WizardSteps标签,这个标签规范了向导控件中的步骤,如左图所示。在向导控件中,系统会生成WizardSteps控件来显示每一个步骤, 如右图所示。">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

向导控件的样式 当创建了一个向导控件时,系统会自动生成向导控件的 HTML 代码,示例代码如下所示。

Similar presentations


Presentation on theme: "向导控件的样式 当创建了一个向导控件时,系统会自动生成向导控件的 HTML 代码,示例代码如下所示。"— Presentation transcript:

1

2 2.15.1 向导控件的样式 当创建了一个向导控件时,系统会自动生成向导控件的 HTML 代码,示例代码如下所示。
向导控件的样式 当创建了一个向导控件时,系统会自动生成向导控件的 HTML 代码,示例代码如下所示。 <asp:Wizard ID="Wizard1" runat="server"> <WizardSteps> <asp:WizardStep runat="server" title="Step 1"> </asp:WizardStep> <asp:WizardStep runat="server" title="Step 2"> </WizardSteps> </asp:Wizard> 上述代码生成了Wizard控件,并在Wizard控件中自动生成了WizardSteps标签,这个标签规范了向导控件中的步骤,如左图所示。在向导控件中,系统会生成WizardSteps控件来显示每一个步骤, 如右图所示。

3 向导控件的样式 向导控件还支持自动显示标题和控件的当前步骤。标题使用HeaderText属性自定义,同时还可以配置DisplayCancelButton属性显示一个取消按钮,如左图所示。不仅如此,当需要让向导控件支持向导步骤的添加时,只需配置WizardSteps属性即可,如右图所示。

4 向导控件的样式 Wizard向导控件还支持一些模板。用户可以通过编辑StartNavigationTemplate属性、FinishNavigationTemplate属性、StepNavigationTemplate属性以及SideBarTemplate属性来进行自定义控件的界面设定。这些属性的意义如下所示: 左述属性都可以通过可视化功能来编辑或修改,如图所示。 StartNavigationTemplate:该属性指定为 Wizard 控件的 Start 步骤中的导航区域显示自定义内容。 FinishNavigationTemplate:该属性为 Wizard 控件的 Finish 步骤中的导航区域指定自定义内容。 StepNavigationTemplate:该属性为 Wizard 控件的 Step 步骤中的导航区域指定自定义内容。 SideBarTemplate:该属性为 Wizard 控件的侧栏区域中指定自定义内容。 导航控件还能够自定义模板来实现更多的特定功能,同时导航控件还能够为导航控件的其他区域定义进行样式控制,如导航列表和导航按钮等。

5 向导控件的事件 左述代码为向导控件进行了初始化,并提示用户正在执行的步骤,当用户执行完毕后,会提示感谢您的使用并在相应的文本标签控件中显示“向导控件执行完毕”。当单击示导航控件时,会触发FinishButtonClick事件,通过编写FinishButtonClick事件能够为导航控件进行编码控制,示例代码如下所示。 当双击一个导航控件时,导航控件会自动生成FinishButtonClick事件。该事件是当用户完成导航控件时被触发。导航控件页面HTML核心代码如下所示。 <body> <form id="form1" runat="server"> <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="2" DisplayCancelButton="True" onfinishbuttonclick="Wizard1_FinishButtonClick"> <WizardSteps> <asp:WizardStep runat="server" title="Step 1">执行的是第一步</asp:WizardStep> <asp:WizardStep runat="server" title="Step 2">执行的是第二步</asp:WizardStep> <asp:WizardStep runat="server" Title="Step3">感谢您的使用</asp:WizardStep> </WizardSteps> </asp:Wizard> <div> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form> </body> protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e) { Label1.Text = "向导控件执行完 毕"; }

6 向导控件的事件 在执行的过程中,标签文本会显式执行的步骤,如图左所示。当运行完毕时,Label标签控件会显示“向导控件执行完毕”,同时向导控件中的文本也会呈现“感谢您的使用”字样。运行结果如图右所示。 向导控件 不仅能够 使用 FinishButtonClick 事件,同样也可以使用 PreviousButtonClick 和 FinishButtonClick 事件来自定义【上一步】按钮和【下一步】按钮的行为,同样也可以编写 CancelButtonClick 事件定义单击【取消】按钮时需要执行的操作。

7 表单验证控件 在ASP.NET中,系统提供了RequiredFieldValidator验证控件进行验证。使用RequiredFieldValidator控件能够指定某个用户在特定的控件中必须提供相应的信息,如果不填写相应的信息,RequiredFieldValidator控件就会提示错误信息,RequiredFieldValidator控件示例代码如下所示。 <body> <form id="form1" runat="server"> <div> 姓名:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="必填字段不能为空 "></asp:RequiredFieldValidator> <br /> 密码:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </form> </body>

8 表单验证控件 在进行验证时,RequiredFieldValidator控件必须绑定一个服务器控件,在上述代码中,验证控件RequiredFieldValidator控件的服务器控件绑定为TextBox1,当 TextBox1中的值为空时,则会提示自定 义错误信息“必填字段不能为空”,如图所示。 当姓名选项未填写时,会提示必填字段不能为空,并且该验证在客户端执行。当发生此错误时,用户会立即看到该错误提示而不会立即进行页面提交,当用户填写完成并再次单击按钮控件时,页面才会向服务器提交。

9 2.16.2 比较验证控件 当使用CompareValidator控件时,可以方便的判断用户是否正确输入,示例代码如下所示。
比较验证控件 当使用CompareValidator控件时,可以方便的判断用户是否正确输入,示例代码如下所示。 <body> <form id="form1" runat="server"> <div> 请输入生日: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> 毕业日期: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox2" ControlToValidate="TextBox1" CultureInvariantValues="True" ErrorMessage="输入格式错误!请改正!" Operator="GreaterThan" Type="Date"> </asp:CompareValidator> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </form> </body> CompareValidator比较验证控件能够比较控件中的值是否符合开发人员的需要。CompareValidator控件的特有属性如下所示: ControlToCompare:以字符串形式输入的表达式。要与另一控件的值进行比较。 Operator:要使用的比较。 Type:要比较两个值的数据类型。 ValueToCompare:以字符串形式输入的表达式。

10 2.16.2 比较验证控件 上述代码判断 TextBox1 的输入的格式是否正确,当输入的格式错误时,会提示错误,如图所示。
比较验证控件 上述代码判断 TextBox1 的输入的格式是否正确,当输入的格式错误时,会提示错误,如图所示。 CompareValidator验证控件不仅能够验证输入的格式是否正确,还可以验证两个控件之间的值是否相等。如果两个控件之间的值不相等,CompareValidator验证控件同样会将自定义错误信息呈现在用户的客户端浏览器中。

11 范围验证控件 范围验证控件(RangeValidator)可以检查用户的输入是否在指定的上限与下限之间。通常情况下用于检查数字、日期、货币等。范围验证控件(RangeValidator)控件的常用属性如下所示: MinimumValue:指定有效范围的最小值。 MaximumValue:指定有效范围的最大值。 Type:指定要比较的值的数据类型。 通常情况下,为了控制用户输入的范围,可以使用该控件。 当输入用户的生日时,今年是2008年,那么用户就不应该输入2009年,同样基本上没有人的寿命会超过100,所以对输入的日期的下限也需要进行规定,示例代码如下所示。 <div> 请输入生日:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="超出规定范围,请重新填写" MaximumValue="2009/1/1" MinimumValue="1990/1/1" Type="Date"> </asp:RangeValidator> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> 注意:RangeValidator 验证控件在进行控件的值的范围的设定时,其范围不仅仅可以是一个整数值, 同样还能够是时间、日期等值。

12 正则验证控件 上述控件中,虽然能够实现一些验证,但是验证的能力有限,限制了开发人员进行自定义验证和错误信息的开发。正则验证控件(RegularExpressionValidator)就解决了这个问题,其功能非常强大, 用于确定输入的控件的值是否与某个正则表达式所定义的模式相匹配,如电子邮件、电话号码以及序列号等。 客户端的正则表达式验证语法和服务端的正则表达式验证语法不同,因为在客户端使用的是JSript正则表达式语法,而在服务器端使用的是Regex类提供的正则表达式语法。使用正则表达式能够实现强大字符串的匹配并验证用户的输入的格式是否正确,系统提供了一些常用的正则表达式,开发人员能够选择相应的选项进行规则筛选,如图所示。

13 正则验证控件 运行后当用户单击按钮控件时,如果输入的信息与相应的正则表达式不匹配,则会提示错误信息,如图所示。 当选择了正则表达式后,系统自动生成的 HTML 代码如下所示。 <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="正则不 匹配,请重新输入!" ValidationExpression="\d{17}[\d|X]|\d{15}"> </asp:RegularExpressionValidator> 注意:在用户输入为空时,其他的验证控件都会验证通过。所以,在验证控件的使用中,通常需要 同表单验证控件(RequiredFieldValidator)一起使用。

14 自定义逻辑验证控件 自定义逻辑验证控件(CustomValidator)允许使用自定义的验证逻辑创建验证控件。例如,可以创建一个验证控件判断用户输入的是否包含“.”号,示例代码如下所示。 protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { args.IsValid = args.Value.ToString().Contains("."); //设置验证程序,并返回布尔值 } protected void Button1_Click(object sender, EventArgs e) if (Page.IsValid) Label1.Text = "验证通过"; else Label1.Text = "输入格式错误"; //用户自定义验证 //判断是否验证通过 //输出验证通过 //提交失败信息

15 自定义逻辑验证控件 从CustomValidator验证控件的验证代码可以看出CustomValidator验证控件可以在服务器上执行验证检查。如果要创建服务器端的验证函数,则处理CustomValidator控件的ServerValidate事件。使用传入的ServerValidateEventArgs对象的IsValid字段来设置是否通过验证。 而CustomValidator控件同样也可以在客户端实现,该验证函数可用VBScript或Jscript来实现,而在CustomValidator控件中需要使用ClientValidationFunction属性指定与CustomValidator控件相关的客户端验证脚本的函数名称进行控件中的值的验证。 上述代码不仅使用了验证控件自身的验证,也使用了用户自定义验证,运行结果如图所示。

16 验证组控件 验证组控件(ValidationSummary)能够对同一页面的多个控件进行验证。同时,验证组控件(ValidationSummary)通过ErrorMessage属性为页面上的每个验证控件显式错误信息。验证组控件(ValidationSummary)的常用属性如下所示。 DisplayMode:摘要可显示为列表,项目符号列表或单个段落。 HeaderText:标题部分指定一个自定义标题。 ShowMessageBox:是否在消息框中显示摘要。 ShowSummary:控制是显示还是隐藏 ValidationSummary 控件。

17 2.16.6 验证组控件 验证控件能够显示页面的多个控件产生的错误,示例代码如下所示。 运行结果如图所示。
验证组控件 验证控件能够显示页面的多个控件产生的错误,示例代码如下所示。 运行结果如图所示。 <body> <form id="form1" runat="server"> <div> 姓名: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="姓名为必填项"> </asp: RequiredFieldValidator> <br /> 身份证: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="身份证号码错误" ValidationExpression="\d{17}[\d|X]|\d{15}"></asp:RegularExpressionValidator> <asp:Button ID="Button1" runat="server" Text="Button" /> <asp:ValidationSummary ID="ValidationSummary1" runat="server" /> </div> </form> </body> 当有多个错误发生时,ValidationSummary 控件能够捕获多个验证错误并呈现给用户,这样就避免了一个表单需要多个验证时需要使用多个验证控件进行绑定,使用 ValidationSummary 控件就无需为每个需要验证的控件进行绑定。


Download ppt "向导控件的样式 当创建了一个向导控件时,系统会自动生成向导控件的 HTML 代码,示例代码如下所示。"

Similar presentations


Ads by Google