web开发控件基础 C#

1、第3讲 控件基础2学习目标学习目标基本基本WEBWEB服务器控件（结合服务器控件（结合HTMLHTML控件）控件）6 6种服务器验证控件种服务器验证控件用户控件用户控件3服务器控件属性 服务器控件的基类WebControl定义了一些可以应用于几乎所有的服务器控件的基本属性。 属性的使用方式有三种 ： (1) 在与控件对应的属性窗口里设置属性。 (2) 在定义控件的标记里设置属性。 (3) 在后台代码中利用“.”操作符设置属性。4服务器控件属性 BackColorBackColor：获取或设置：获取或设置WebWeb服务器控件的背景色。服务器控件的背景色。 BorderColorBorderCo

2、lor：获取或设置：获取或设置WebWeb控件的边框颜色。控件的边框颜色。 BorderStyleBorderStyle：获取或设置：获取或设置WebWeb服务器控件的边框样式。服务器控件的边框样式。 BorderWidthBorderWidth：获取或设置：获取或设置WebWeb服务器控件的边框宽度。服务器控件的边框宽度。 CssClassCssClass：获取或设置由：获取或设置由WebWeb服务器控件在客户端呈现的级联样式表服务器控件在客户端呈现的级联样式表(CSS)(CSS)类。类。 EnabledEnabled：获取或设置一个值，该值指示是否启用：获取或设置一个值，该值指示是否启用W

3、ebWeb服务器控件。服务器控件。 EnableThemingEnableTheming：获取或设置一个值，该值指示是否对此控件应用主题。：获取或设置一个值，该值指示是否对此控件应用主题。 FontFont：获取与：获取与WebWeb服务器控件关联的字体属性。服务器控件关联的字体属性。 ForeColorForeColor：获取或设置：获取或设置WebWeb服务器控件的前景色（通常是文本颜色）。服务器控件的前景色（通常是文本颜色）。 HeightHeight：获取或设置：获取或设置WebWeb服务器控件的高度。服务器控件的高度。 IDID： 获取或设置分配给服务器控件的编程标识符。获取或设置分

4、配给服务器控件的编程标识符。 SkinIDSkinID：获取或设置要应用于控件的外观。：获取或设置要应用于控件的外观。 VisibleVisible： 获取或设置一个值，该值指示服务器控件是否作为获取或设置一个值，该值指示服务器控件是否作为UIUI呈现在页上。呈现在页上。 WidthWidth：获取或设置：获取或设置WebWeb服务器控件的宽度。服务器控件的宽度。53.1 Web服务器控件 基本基本WebWeb服务器控件：服务器控件： 按钮控件（Button控件、LinkButton控件和ImageButton控件） TextBox控件 CheckBox控件和CheckBoxList控件 Ra

5、dioButton控件和RadioButtonList控件 ListBox控件和DropDownList控件。验证控件：验证控件：6按钮控件 VS2008中有以下3种类型的Web服务器按钮控件： （1 1）ButtonButton控件控件 （2 2）LinkButtonLinkButton控件控件 （3 3）ImageButtonImageButton控件控件 3种类型的按钮在鼠标单击时都可以将页面提交给服务器，并触发服务器端对应的ClickClick事件事件，然后在服务器端执行相应的事件代码。 7的语法格式：允许将一个图形指定为按钮，这个控件具有Image的界面和Button的功能。语法如下

6、：，它只是使按钮的界面呈现为超级链接状，并非真正的超级链接。语法如下：asp: LinksButton id=“LinksButton1” runat=“Server” Text=“Button上面的文本” 按钮控件8 例：在购物网站中每个商品都会有图片信息，这个图片一般会用ImageButton控件，当用户单击图片后就可进入该商品信息介绍的页面。按钮控件9标签控件标签控件LabelLabel控件：用于在网页上显示文本。控件：用于在网页上显示文本。声明声明LabelLabel的语法格式：的语法格式：asp:Label ID=LabelLabel控件只能用来显示文本，它只有控件只能用来显示文本，

7、它只有TextText属性，用来获取属性，用来获取或设置指定在或设置指定在LabelLabel控件上显示的文字。控件上显示的文字。10示例： 实现显示随机广告的浏览功能。11TextBox控件 TextBoxTextBox控件控件：用于让用户输入文本内容。 TextBoxTextBox控件常用属性和事件控件常用属性和事件：IDID属性属性 指定控件的名称，它是控件在页面中的唯一标识。AutoPostBackAutoPostBack属性属性 决定控件中文本内容修改后，是否自动回发到服务器。默认为false，即修改文本后并不立即回发到服务器，而是等页面被提交后一并处理。若为true，则每次更改文本

8、框的内容并且焦点离开控件时，都会自动回发，使服务器处理控件相应的TextChanged事件。12TextModeTextMode属性属性 设置文本框接受文本的行为模式。有3种属性值：MultiLine（多行输入模式）、Password（密码输入模式）、SingleLine（默认值，单行输入模式）。TextText属性属性 设置控件上所要显示的文本。TextChangedTextChanged事件事件 文本框中的内容发生更改且页面回传到服务器端处理时触发的事件。若AutoPostBack属性设置为true，则每次更改文本框中的内容都会使页面回传到服务器端，并同时触发TextChanged事件。T

9、extBox控件13语法如下：TextBox控件14示例： 实现用户登陆界面。15CheckBox控件与CheckBoxList控件CheckBoxCheckBox控件控件 用于向用户提供选项，适用于选项不多且比较固定的情况。除了一些基本属性外，常用的属性如下：lCheckedChecked属性属性: :表示是否选中表示是否选中CheckBoxCheckBox控件。控件。lTextText属性属性: :用于获取或设置与用于获取或设置与CheckBoxCheckBox关联的文本标签。关联的文本标签。lAutoPostBack:AutoPostBack:表示在单击控件时状态是否回传到服务器，表示在

10、单击控件时状态是否回传到服务器，默认是默认是FalseFalse。16CheckBox控件与CheckBoxList控件CheckBoxListCheckBoxList控件控件 用于向用户提供选项列表，适用于选项较多或在运行时动态地决定有哪些选项时。 常用的属性如下：ItemsItems属性：用于获取列表控件项的集合。属性：用于获取列表控件项的集合。.Items.Count.Items.Count属性：获取列表的总项数属性：获取列表的总项数 .Items0.Selected.Items0.Selected属性：是否选中属性：是否选中.Items0.Text.Items0.Text属性：该项的显

11、示文本属性：该项的显示文本 SelectedValueSelectedValue属性：获取列表控件中选定项的值或选择列属性：获取列表控件中选定项的值或选择列表控件中包含指定值的项表控件中包含指定值的项17例：创建web页，实现当用户进行多项选择后将选中项显示在页面中。（在实现过程中，观察和比较CheckBox和CheckBoxList这两个控件的使用区别）效果如图所示：CheckBox控件与CheckBoxList控件18RadioButton控件与RadioButtonList控件 RadioButtonRadioButton控件：控件： 属性：定义单选按钮组名，具有相同组名的单选按钮可以作

12、为一组互斥的控件来使用。 RadioButtonListRadioButtonList控件：控件： 封装了一组单选按钮控件的列表控件 属性:用于获取列表控件项的集合。 若要使事件起作用，必须将属性置为True19例：模拟软件安装时要用户选择安装类型的功能。当用户选择后，单击“下一步”按钮，在Label控件将用户选择的安装类型显示在页面上。（效果如图所示）RadioButton控件与RadioButtonList控件20ListBox控件和DropDownList控件ListBoxListBox控件（列表框控件）控件（列表框控件） 用来显示一组条目，用户可从中选择一项或多项多项。常用的属性常用的

13、属性 ItemsItems属性属性：用于查看列表中的项。 SelectionModeSelectionMode属性属性：设置ListBox的选择模式。如果要想实现多选，除了设置SelectionMode属性为Multiple外，在选择时需要按住Ctrl键。 RowsRows属性：属性：用于获取ListBox控件中显示的行数。 SelectedItemSelectedItem属性属性：表示当前选中的项 SelectedItemsSelectedItems属性属性：表示当前选中的所有项 SelectedValueSelectedValue属性属性：表示当前选中项的值21DropDownListDr

14、opDownList下拉列表框控件下拉列表框控件 为用户提供一些选项的控件，基本和ListBox控件类似。只不过此控件只能有一个选项处于选中状态，并且每次只能显示一个选项，而ListBox控件可以设置为允许多选，并且还可以设置为显示多行。 常用属性常用属性 AutoPostBackAutoPostBack属性：属性：是否自动回传 ItemsItems属性：属性：获取列表控件项的集合常用事件常用事件 SelectedIndexChanged SelectedIndexChanged事件事件：当选择项改变时所激发的事件。(AutoPostBackAutoPostBack属性设置为属性设置为true

15、true时才可激发）时才可激发）ListBox控件和DropDownList控件22例：在一些网站的登陆和注册页面，用户需要从两个相互关联的下拉列表框中选择用户所在的城市和城区，如果改变了第1个下拉列表框的当前选项，那么第2个下拉列表框的选项也将随之改变。（效果如图所示）ListBox控件和DropDownList控件23例：熟悉ListBox控件的使用，实现如图所示效果。ListBox控件和DropDownList控件24FileUpload文件上传控件 FileUpload控件可以使用户选择客户端上的文件并将其上传到 Web 服务器。 注意：用户选择要上载的文件后，FileUploadFi

16、leUpload 控件不会自动将该文件保存到服务器。-必须显式提供一个控件必须显式提供一个控件或机制，使用户能提交指定的文件或机制，使用户能提交指定的文件。如可以提供一个按钮，用户单击它即可上载文件。 25FileUpload文件上传控件 FileUpload控件的常用属性： 26FileUpload文件上传控件 例：利用FileUpload控件实现上传图片功能。效果如图所示：27Calendar日期选择控件 Calendar控件用于在浏览器中显示日历,该控件可显示某个月的日历，允许用户选择日期，也可以跳到前一个或下一个月。 主要属性：主要属性： 28Calendar日期选择控件 主要属性：主

17、要属性： 29Calendar日期选择控件 例：使用Calendar控件实现日期选择的功能，以保证日期输入的方便和正确。（效果如图所示）30TreeView控件（母版页） “TreeView”控件可按树形结构来显示分层数据树形结构来显示分层数据，如目录。它由一个或多个节点构成。树形结构中的每一项都称为“节点”。 TreeView 控件的节点类型 ：31 TreeView 控件中，常用属性如下： TextText属性属性为显示在“TreeView”控件中的节点名称。 ValueValue属性属性用于存储当前节点的附加数据 。 NavigateUrlNavigateUrl属性属性表示该节点所链接的

18、页面。 SelectActionSelectAction属性属性用于设定单击节点时所触发的特定操作。如展开或折叠子节点 ExpandDepthExpandDepth属性属性设置为要显示的节点级别所对应的数字。TreeView控件32 例：利用TreeView控件实现如图所示页面效果。进一步熟悉和掌握此控件的用法和功能。TreeView控件333.2 html控件与web服务器控件 HTMLHTML控件控件：以HTML标记呈现的控件，此类控件不仅可以在客户端运行又可将其作为服务器控件运行； WebWeb服务器控件服务器控件：以“asp:”为前缀的控件，此类控件都运行在服务器端。34HTML控件

19、HTML控件存在于【工具箱】的HTML选项卡下，它是基于HTML标记语言的，主要用于在客户端直接与用户交互。当需要在客户端客户端动态地响应用户的鼠标单击、鼠标移动、键盘输入等交互性比较频繁的操作时，可以使用HTML控件。35如向设计页面中拖放一个Input（Button）控件，则在【源】视图中会自动生成如下代码： HTML控件36将HTML控件转换为HTML服务器控件 默认情况下，服务器无法使用ASP.NET网页中的HTML元素，但可以通过将HTML元素转换为HTML服务器控件，将其转换为可在服务器上编程的对象。 ASP.NET页中的大部分HTML元素都可以通过以下方式转换成HTML服务器控件

20、： 1.1.添加属性添加属性 runat=server“runat=server“ 在分析过程中，ASP.NET页框架将创建包含runat=“server”属性的所有元素的实例。 2.2.在网页的在网页的【设计设计】视图下，用鼠标右键单击视图下，用鼠标右键单击HTMLHTML控件，在控件，在弹出的快捷菜单中选择弹出的快捷菜单中选择【作为服务器控件运行作为服务器控件运行】，该，该HTMLHTML控件会自动变为控件会自动变为HTMLHTML服务器控件服务器控件。37HTML服务器控件与Web服务器控件的区别（表面）：HTML服务器控件没有asp标记前缀。从外观上看，设计页面中控件左上方的绿色三角形

21、表示该控件为服务器控件。38HTML服务器控件与Web服务器控件的区别（实质）：1、隐藏客户端的不同，这样程序员可以把更多的精力放在业务上，而不用去考虑客户端的浏览器是ie还是firefox，或者是移动设备。2、事件处理模型不同，Html标注和Html服务器控件的事件处理都是在客户端的页面上，而A服务器控件则是在服务器上。举例 39 input id=Button4 type=button value=button runat=server/ 是Html服务器控件，此时我们点击此按钮，页面不会回传到服务器端，原因是我们没有为其定义鼠标点击事件。 input id=Button4 type=bu

22、tton value=button runat=server onserverclick=test / 我们为html服务器控件添加了一个onserverclick事件，点击此按钮页面会发回服务器端，并执行test(object sender, EventArgs e)方法。 是A服务器控件，并且我们没有为其定义click，但是我们点击时，页面也会发回到服务器端。由此可见：Html标注和Html服务器控件的事件是由页面来触发的，而A服务器控件则是由页面把Form发回到服务器端，由服务器来处理。403.3 3.3 验证控件验证控件 为什么要验证用户输入为什么要验证用户输入 验证过程验证过程 验证

23、控件的使用验证控件的使用413.3.1 3.3.1 为什么要验证用户输入为什么要验证用户输入 输入验证是检验输入验证是检验WebWeb窗体中用户的输入是否和期望的数据值、范围窗体中用户的输入是否和期望的数据值、范围或格式相匹配的过程，可以减少等待错误信息的时间，降低发生错或格式相匹配的过程，可以减少等待错误信息的时间，降低发生错误的可能性，从而改善用户访问误的可能性，从而改善用户访问WebWeb站点的体验站点的体验. . 用户输入验证的目的用户输入验证的目的 减少错误处理的等待时间。减少错误处理的等待时间。 避免非法的用户输入导致的错误结果。避免非法的用户输入导致的错误结果。 避免非法的用户输

24、入导致服务器崩溃。避免非法的用户输入导致服务器崩溃。 避免欺骗或恶意代码。避免欺骗或恶意代码。 阻止阻止 Web Web 窗体进行下一步处理，直到所有的用户输入都通过窗体进行下一步处理，直到所有的用户输入都通过验证。验证。423.3.2 3.3.2 验证过程验证过程 43客户端验证和服务器端验证的区别客户端验证和服务器端验证的区别客户端验证客户端验证服务器端验证服务器端验证依赖于客户端浏览器版本依赖于客户端浏览器版本与客户端浏览器版本无关与客户端浏览器版本无关使用使用JavascriptJavascript和和vbscriptvbscript实现实现使用基于使用基于.NET.NET的开发语言实

25、现的开发语言实现即时信息反馈即时信息反馈需要服务器往返以显示错误信息需要服务器往返以显示错误信息不能访问服务器资源不能访问服务器资源可与服务器上存储的数据进行比较验证，如与可与服务器上存储的数据进行比较验证，如与数据库密码进行比较数据库密码进行比较不能避免欺骗代码或恶意代码不能避免欺骗代码或恶意代码可以避免欺骗代码和恶意代码可以避免欺骗代码和恶意代码允许禁用客户端验证允许禁用客户端验证必然执行，重复所有客户端验证必然执行，重复所有客户端验证安全性较低安全性较低安全性较高安全性较高443.3.3 ASP.NET验证控件的使用 验证类型验证类型使用的控件使用的控件说说 明明必需项必需项Requir

26、edFieldValidator验证一个必填字段，确保用户不会跳过某验证一个必填字段，确保用户不会跳过某项输入。项输入。与某值与某值的比较的比较CompareValidator将用户输入与一个常数值或者另一个控件将用户输入与一个常数值或者另一个控件或特定数据类型的值进行比较。或特定数据类型的值进行比较。范围检查范围检查RangeValidator检查用户的输入是否在要求的范围内。检查用户的输入是否在要求的范围内。模式匹配模式匹配RegularExpressionValidator用于检查输入的内容与正则表达式所定义用于检查输入的内容与正则表达式所定义的模式是否匹配。如电子邮件地址、电话的模式是

27、否匹配。如电子邮件地址、电话号码等字符序列。号码等字符序列。验证总汇验证总汇ValidationSummary该控件不执行验证，但经常与其它验证控该控件不执行验证，但经常与其它验证控件一起用于显示来自网页上所有验证控件件一起用于显示来自网页上所有验证控件的错误信息。的错误信息。用户定义用户定义CustomValidator调用在服务器端编写的自定义验证函数。调用在服务器端编写的自定义验证函数。45验证控件的共有属性验证控件的共有属性 属性属性说说 明明Display获取或设置验证控件中错误信息的显示行为获取或设置验证控件中错误信息的显示行为ErrorMessage获取或设置验证失败时获取或设置

28、验证失败时 ValidationSummary 控件中显示控件中显示的错误信息的文本的错误信息的文本Text获取或设置验证失败时验证控件中显示的文本获取或设置验证失败时验证控件中显示的文本ControlToValidate获取或设置要验证的输入控件获取或设置要验证的输入控件EnableClientScript获取或设置一个值，该值指示是否启用客户端验证获取或设置一个值，该值指示是否启用客户端验证SetFocusOnError获取或设置一个值，该值指示在验证失败时是否将焦点获取或设置一个值，该值指示在验证失败时是否将焦点设置到设置到 ControlToValidate 属性指定的控件上属性指定的

29、控件上ValidationGroup获取或设置此验证控件所属的验证组的名称获取或设置此验证控件所属的验证组的名称IsValid获取或设置一个值，该值指示关联的输入控件是否通过获取或设置一个值，该值指示关联的输入控件是否通过验证验证46 DisplayDisplay属性属性：流布局模式下，设置多个验证控件的：流布局模式下，设置多个验证控件的错误信息的空间排列方式。错误信息的空间排列方式。NoneStaticDynamic在验证控件的位置上不显示错误信息在验证控件的位置上不显示错误信息在页面布局中分配用于显示验证消息的空间在页面布局中分配用于显示验证消息的空间如果验证成功，将不占据页面空间如果验证

30、成功，将不占据页面空间返回返回验证控件的共有属性验证控件的共有属性 47 ErrorMessage 属性指定验证失败后在验证控件中显示的文本指定验证失败后在验证控件中显示的文本如果设置了如果设置了 Text Text 属性，不显示属性，不显示 ErrorMessageErrorMessage Text 属性指定将在验证控件中显示的文本指定将在验证控件中显示的文本已设置已设置已设置已设置未设置未设置未设置未设置已设置已设置已设置已设置 显示显示 ErrorMessage 文本文本 显示显示 Text 文本文本 显示显示 Text 文本文本返回验证控件的共有属性验证控件的共有属性 481) Req

31、uiredFieldValidator1) RequiredFieldValidator控件控件 RequiredFieldValidatorRequiredFieldValidator控件通常用于在用户输入信息时控件通常用于在用户输入信息时，对某项必须输入的信息内容进行验证，是一个简单但最，对某项必须输入的信息内容进行验证，是一个简单但最常用的验证控件。常用的验证控件。 当与其关联的某个输入控件失去焦点时，且输入控件值为当与其关联的某个输入控件失去焦点时，且输入控件值为空，则会触发空，则会触发RequiredFieldValidatorRequiredFieldValidator控件。控件。

32、 其语法如下：其语法如下：491) RequiredFieldValidator1) RequiredFieldValidator控件控件 例：对用户登陆的页面进行验证，验证用户名和密码的输入是否为空。（效果如图所示）50测试用户的输入是否符合指定的值或者符合另一个输入测试用户的输入是否符合指定的值或者符合另一个输入控件的值。控件的值。空输入默认为有效验证。空输入默认为有效验证。常用属性：常用属性：ControlToCompare：确定要比较的另一个控件。确定要比较的另一个控件。Operator：指定使用的比较运算符。指定使用的比较运算符。Type：指定数据类型，希望输入控件中的值与某个数指定

33、数据类型，希望输入控件中的值与某个数据类型匹配。据类型匹配。ValueToCompare：确定要比较的某个常数值确定要比较的某个常数值2) CompareValidator控件512) CompareValidator控件 例：在设计用户注册页面时，希望用户输入两次密码，使用CompareValidator验证控件来判断两次输入的密码是否相等。 52验证输入值是否在给定的范围内。验证输入值是否在给定的范围内。输入值介于最小值和最大值之间是有效的。输入值介于最小值和最大值之间是有效的。空输入作为有效验证。空输入作为有效验证。常用属性：常用属性：p MinimumValue：指定有效范围的最小值。

34、指定有效范围的最小值。p MaxmumValue：指定有效范围的最大值。指定有效范围的最大值。pType：指定要比较的值的数据类型。指定要比较的值的数据类型。3) RangeValidator控件 53案例名称：范围验证控件案例名称：范围验证控件程序程序: 请输入1-6选项中的一项：3) RangeValidator控件 54 在需要确定该值是否与某个正则表达式所定义的模式相在需要确定该值是否与某个正则表达式所定义的模式相匹配的情况下使用匹配的情况下使用 ValidationExpressionValidationExpression属性属性：编辑正则表达式：编辑正则表达式 Visual St

35、udio.NET Visual Studio.NET 提供以下预定义模式提供以下预定义模式 电话号码电话号码 邮政编码邮政编码 E-mail E-mail 地址地址注意：提供的这些预定义的模式的正则表达式未必正确。注意：提供的这些预定义的模式的正则表达式未必正确。4) RegularExpressionValidator控件55正则表达式字符含义正则表达式字符含义？零次或一次匹配前面的字符或子表达式零次或一次匹配前面的字符或子表达式* *零次或多次匹配前面的字符或子表达式零次或多次匹配前面的字符或子表达式+ +一次或多次匹配前面的字符或子表达式一次或多次匹配前面的字符或子表达式. .匹配任意一

36、个字符匹配任意一个字符ww匹配任意一个字符匹配任意一个字符dd匹配任意一个数字字符匹配任意一个数字字符.匹配一个点字符匹配一个点字符n,mn,m长度是长度是n n到到m m的字符串的字符串, ,必须与必须与dd或或SS合用合用0-n0-n零到零到n n之间的整数值之间的整数值| |分隔多个有效的模式分隔多个有效的模式56例：例： S3,6S3,6 3 3到到6 6位字符位字符A-Za-z2,5 A-Za-z2,5 由由2-52-5个字母组成个字母组成A-Zd5A-Zd5 以一个大写字母开头，加以一个大写字母开头，加5 5位数字位数字d5d5 5 5位的整数位的整数. .* *#&.#&

37、amp;.* * 至少包含至少包含#&#&中的一个字符中的一个字符(d11)|(d3,4-)?d7,8)(d11)|(d3,4-)?d7,8) 中国电话号码中国电话号码正则表达式字符含义正则表达式字符含义57案例名称：正则表达式匹配验证案例名称：正则表达式匹配验证程序功能程序功能: 验证，数字接大写字母- dA-Z“请数字开头后接一个大写字母： 4) RegularExpressionValidator控件585) ValidationSummary控件 ValidationSummary控件用于收集本页所有验证错误，并将它们组织起来显示。 常用属性：常用属性：HeaderTe

38、xt显示在摘要上方的标题文本DisplayMode错误信息显示方式，该属性有3个值：BulletList:每个消息都显示为单独的项（默认）List:每个消息显示在单独的行中SingleParagraph:每个消息显示为段落中的一个句子ShowSummary是否显示本控件ShowMessageBox是否弹出一个错误列表的对话框。59案例名称：验证总结控件案例名称：验证总结控件程序：程序： 请填写您的个人信息： 姓名: * 性别: 男 女 * 5) ValidationSummary控件 606) CustomValidator自定义控件 CustomValidator自定义验证控件，该控件关注：

39、ponservervalidate事件：设置CustomValidator服务器端验证事件。格式为： onservervalidate=“方法名” 方法名(object source, ServerValidateEventArgs args) -在其中编写用户自定义的验证方法p如果args.IsValid=true则验证通过，否则显示错误信息。-例：验证输入是否为奇数61设置验证控件属性如下：asp:CustomValidator ID=CustomValidator1 runat=server ControlToValidate=TextBox1 ErrorMessage=不是奇数不是奇数 OnServerValidate=CustomValidator1_ServerValidate选中CustomValidator1控件，打开”事件”窗口，双击” ServerValidate“事件，编写代码：protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)try int i = int.Parse(TextBo