《商务网站设计与开发》课件第10章 基本Web服务器控件.pptx

1、 按钮Button10.1 标签Label10.2 文本框TextBox10.3 复选框CheckBox10.4 复选框组CheckBoxList10.5 单选按钮RadioButton10.6 单选按钮组RadioButtonList10.7 超链接Hyperlink10.8 下拉列表Dropdownlist10.9 列表框ListBox10.10 验证控件Validator10.11 服务器控件的继承关系10.12 思考题10.13 名称名称说明说明ID获取或设置分配给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件，如果值为false，则按钮

2、呈现灰色，不响应用户点击。（继承自WebControl。）CausesValidation获取或设置在单击Button控件时是否执行验证。CommandArgument获取或设置可选参数，该参数与关联的CommandName一起被传递到Command事件。CommandName获取或设置命令名，该命令名与传递给Command事件的Button控件相关联。OnClientClick获取或设置在引发HTML按钮的Click事件时所执行的客户端脚本。PostBackUrl获取或设置单击Button控件时从当前页发送到的网页的URL。Text获取或设置在Button控件中显示的文本标题。UseSubm

3、itBehavior获取或设置是否使用客户端浏览器的提交机制，否则使用ASP.NET回发机制。ValidationGroup获取或设置在Button控件回发到服务器时要进行验证的控件组。ButtonForm.aspx文件的代码如下：ButtonForm.aspx.cs文件的代码如下：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace TextBoxCode pub

4、lic partial class ButtonForm:System.Web.UI.Page protected void Page_Load(object sender,EventArgs e)protected void Button1_Click(object sender,EventArgs e)Button1.Text=我已经被点击过了;Button1.Enabled=false;Label Web服务器控件为开发者提供了一种以编程方式显示网页文本的方法。与直接在HTML中写入静态文本不太，Label控件支持在服务器代码中更改文本的内容或其它特性。名称名称说明说明ID获取或设置分配

5、给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件。（继承自WebControl。）Text获取或设置Label控件的文本内容。Visible获取或设置是否在网页上显示。（继承自Control。）下面的例子中，网页中有一个文本和一个按钮，其中文本是以Label控件实现的。LabelForm.aspx文件的代码如下：LabelForm.aspx.cs文件的代码如下：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.

6、Web.UI;using System.Web.UI.WebControls;namespace TextBoxCode public partial class LabelForm:System.Web.UI.Page protected void Page_Load(object sender,EventArgs e)Label1.Text=Hello World!;protected void Button1_Click(object sender,EventArgs e)Label1.Text=Hello,Again!;TextBox服务器控件可以形成浏览器端的文本框，可以接受用户在浏

7、览器端输入的信息，并提交给服务器进行处理。TextBox的Text属性是最常用的属性，可以通过该属性来设置和获取文本框的内容。ReadOnly属性设置为true时将文本框设置为只读，可以防止用户对内容的修改。MaxLength属性用来设置用户可以输入的字符数上限，比如当MaxLength属性设置为10时，用户只能输入最多10个字符（英文字母、符号或数字）。TextBox的TextMode属性设置为TextBoxMode.SingleLine，意味着用户只能输入一行信息；如果希望用户输入密码时不要显示出来，则将TextMode属性设置为TextBoxMode.Password；如果将TextMo

8、de属性设置为TextBoxMode.MultiLine则可以接受多行信息。名称名称说明说明ID获取或设置分配给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件。（继承自WebControl。）AutoCompleteType获取或设置自动填写的方式，比如当用户在填写电子邮件的前几个字母时，自动帮助用户完成全部的地址填写。AutoPostBack获取或设置回发开关，决定当控件失去焦点时（比如鼠标离开此控件而点击了其它控件）是否产生页面回发。CausesValidation获取或设置验证开关，决定在页面回发时是否进行校验。Columns获取或设置以字

9、符为单位的显示宽度。MaxLength获取或设置文本框可以输入的字符数。ReadOnly获取或设置只读开关，决定是否允许用户修改文本框中的内容。Rows获取或设置多行输入情况下的行数。Text获取或设置文本框中的字符内容。TextMode获取或设置文本框的行为模式（包括单行、多行或者密码等）。ValidationGroup获取或设置内容验证是的分组信息。Wrap获取或设置折行开关，决定在多行文本框中是否自动折行。TextBoxForm.aspx文件代码如下：TextBoxForm.aspx.cs文件代码如下：using System;using System.Collections.Gener

10、ic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace TextBoxCode public partial class TextBoxForm:System.Web.UI.Page protected void Page_Load(object sender,EventArgs e)protected void Button1_Click(object sender,EventArgs e)TextBox2.Text=TextBox1.Text;复选

11、框允许用户在多个选项中选择0个到多个。每个选项之间相互独立，点击其中某个选项一次选中选项，再次点击将取消选择。下面的例子显示如何让用户从CheckBox1（体育）、CheckBox2（游戏）和CheckBox3（音乐）多种选项中选择自己的爱好。当用户点击按钮，将在Label1中显示用户的选择情况。CheckBoxForm.aspx文件的代码如下：CheckBoxForm.aspx.cs文件的代码如下：namespace TextBoxCode public partial class CheckBoxForm:System.Web.UI.Page protected void Page_Loa

12、d(object sender,EventArgs e)protected void Button1_Click(object sender,EventArgs e)Label1.Text=你的爱好包括：;if(CheckBox1.Checked)Label1.Text=Label1.Text+体育；;if(CheckBox2.Checked)Label1.Text=Label1.Text+游戏；;if(CheckBox3.Checked)Label1.Text=Label1.Text+音乐；;有两种方法可以向页面中添加多个复选框：多次添加CheckBox控件；添加CheckBoxList控件

13、，然后向该控件添加单个列表项。CheckBoxList控件更适合多个复选框的情况，并且可以方便地关联数据源中的数据。名称名称说明说明ID获取或设置分配给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件。（继承自WebControl。）Items获取列表控件项的集合。CellPadding获取或设置表单元格的边框和内容之间的距离（以像素为单位）。CellSpacing获取或设置单元格之间的距离（以像素为单位）。RenderWhenDataEmpty获取或设置决定如果数据源没有数据或控件未进行数据绑定时，是否呈现控件的值。RepeatColumns获取

14、或设置要在CheckBoxList控件中显示的列数。RepeatDirection获取或设置控件是垂直显示还是水平显示。RepeatLayout获取或设置在HTML中选项的呈现方式，可选方式包括table元素、ul元素、ol元素和span元素。TextAlign获取或设置组内复选框的文本对齐方式。CheckBoxListForm.aspx文件的代码如下：体育 游戏 音乐 CheckBoxListForm.aspx.cs文件的代码如下：protected void Button1_Click(object sender,EventArgs e)Label1.Text=你的爱好包括：;if(Che

15、ckBoxList1.Items0.Selected)Label1.Text=Label1.Text+体育；;if(CheckBoxList1.Items1.Selected)Label1.Text=Label1.Text+游戏；;if(CheckBoxList1.Items2.Selected)Label1.Text=Label1.Text+音乐；;多个单选按钮控件可以组成一组，让用户在多个选项中选择其中一个作为输入。用户选择那个单选按钮，它的Checked属性就被设置为true，否则设置为false。如果用户改变了选项，则原来被选择的控件自动被恢复为false，即一个组中的多个单选按钮时互

16、相排斥的，同一时间只能有一个被选中。例子中使用了两个单选按钮控件RadioButton1和RadioButton2，分别设置其Text属性为“男”和“女”。为了使其构成一组，将它们的GroupName属性设置为相同的值“sex”。如果需要，在设计时将RadioButton1的Checked设置为true，那么在网页加载时“男”的选项就会被默认地选择了。名称名称说明说明ID获取或设置分配给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件。（继承自WebControl。）Items获取列表控件项的集合。CellPadding获取或设置表单元格的边框和内

17、容之间的距离（以像素为单位）。CellSpacing获取或设置单元格之间的距离（以像素为单位）。RenderWhenDataEmpty获取或设置决定如果数据源没有数据或控件未进行数据绑定时，是否呈现控件的值。RepeatColumns获取或设置要在CheckBoxList控件中显示的列数。RepeatDirection获取或设置控件是垂直显示还是水平显示。RepeatLayout获取或设置在HTML中选项的呈现方式，可选方式包括table元素、ul元素、ol元素和span元素。TextAlign获取或设置组内复选框的文本对齐方式。RadioButtonForm.aspx文件的代码如下：Radi

18、oButtonForm.aspx.cs文件代码如下：protected void Button1_Click(object sender,EventArgs e)if(RadioButton1.Checked)Label1.Text=你的选择是男;if(RadioButton2.Checked)Label1.Text=你的选择是女;有两种方法可以向页面中添加多个单选按钮：多次添加RadioButton控件；添加RadioButtonList控件，然后向该控件添加单个列表项。前者在前文中已经介绍，而后者则在实际开发中更为常用，并且可以方便地关联数据源中的数据。需要注意的是：虽然RadioButt

19、onList的Items属性（集合类型）与CheckBoxList控件中的Items属性一样，其中每一个元素都具有Selected值，但Selected值并不能说明某个选项是否被选中。应该使用RadioButtonList的SelectedIndex来获取组中被选中项目的编号，如上面代码所示。如果选项较多，可以使用C#语言的switch语句来对不同的选择进行处理。名称名称说明说明ID获取或设置分配给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件。（继承自WebControl。）Items获取列表控件项的集合。CellPadding获取或设置表单元

20、格的边框和内容之间的距离（以像素为单位）。CellSpacing获取或设置单元格之间的距离（以像素为单位）。RenderWhenDataEmpty获取或设置决定如果数据源没有数据或控件未进行数据绑定时，是否呈现控件的值。RepeatColumns获取或设置要在CheckBoxList控件中显示的列数。RepeatDirection获取或设置控件是垂直显示还是水平显示。RepeatLayout获取或设置在HTML中选项的呈现方式，可选方式包括table元素、ul元素、ol元素和span元素。TextAlign获取或设置组内复选框的文本对齐方式。RadioButtonListForm.aspx文件

21、的代码如下；男 女 RadioButtonListForm.aspx.cs文件的代码如下：protected void Button1_Click(object sender,EventArgs e)if(RadioButtonList1.SelectedIndex=0)Label1.Text=你的选择是男;else Label1.Text=你的选择是女;ASP.NET程序员可以通过两种方式在网页上添加超链接：一种方式是通过HTML的超链接标签直接将超链接放在网页中；另一种方式则是在页面上放置HyperLink Web服务器控件并将它与一个URL相关联。这两种方式最后呈现在浏览器上时效果是一样

22、的，但使用HyperLink控件时可以在服务器代码中设置链接属性，比如可以根据不同的情况动态地更改链接文本或链接目标。HyperLink控件不仅可以文本方式呈现超链接，还可以图形方式呈现超链接。如果是文本链接，需要设置控件的Text属性；如果要创建一个图形链接，则要将控件的ImageUrl属性设置为一个gif、jpg或其它Web支持的图形文件的URL。如果同时设置了ImageUrl和Text属性，则ImageUrl属性优先，即优先呈现图形链接。NavigateUrl属性可以设置超链接的URL。Target 属性可以设置链接页面的目标窗口或框架，其取值可以是窗口名称或者预定义的目标值（例如_to

23、p、_parent等）。需要注意的是，与大多数 Web 服务器控件不同，当用户单击HyperLink控件时并不会在服务器代码中引发任何事件，只是按照超链接的地址进行页面切换。名称名称说明说明ID获取或设置分配给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件。（继承自WebControl。）ImageHeight获取或设置图像超链接的高度。ImageWidth获取或设置图像超链接的宽度。ImageUrl获取或设置图像超链接中图像的路径。NavigateUrl获取或设置超链接的URL。Target获取或设置超链接的目标窗口或框架。Text获取或设置超

24、链接的文本。HyperLinkForm.aspx文件的代码如下：HyperLink HyperLinkForm.aspx.cs文件的代码如下：protected void Button1_Click(object sender,EventArgs e)HyperLink1.Text=超链接1;HyperLink1.NavigateUrl=HyperLink1.htm;protected void Button2_Click(object sender,EventArgs e)HyperLink1.Text=超链接2;HyperLink1.NavigateUrl=HyperLink2.htm;D

25、ropDownList Web服务器控件可以让用户从下拉列表的多个选项中选中其中一个选项，DropDownList控件的执行结果在HTML中呈现为标签和其中的多个选项。虽然开发者可以定义下拉列表控件的宽度，但当用户点击下拉时，开发者无法控制下拉列表中显示的选项数量，当选项比较多时，浏览器会在列表旁自动显示滚动条。与复选框组CheckBoxList和单选按钮组RadioButtonList控件一样，DropDownList控件的Items属性中包含了所有的选项，可以通过可视化编辑或者编写代码来设定选项。当前所选项可在DropDownList控件的SelectedItem属性中得到。名称名称说明说

26、明ID获取或设置分配给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件。（继承自WebControl。）Items获取列表控件项的集合。SelectedIndex获取或设置控件中的选定项的索引。SelectedItem获取列表控件中索引最小的选定项。SelectedValue获取列表控件中选定项的值，或选择列表控件中包含指定值的项。DropDownListForm.aspx文件的代码如下：民族 汉族 回族 壮族 满族 您选择的民族是：DropDownListForm.aspx.cs文件的代码如下：namespace TextBoxCode publ

27、ic partial class DropDownListForm:System.Web.UI.Page protected void Page_Load(object sender,EventArgs e)protected void Button1_Click(object sender,EventArgs e)Label1.Text=DropDownList1.SelectedValue;ListBox Web服务器控件可以让户从多个选项组成的列表中选择一项或多项。与DropDownList控件的不同之处在于，ListBox控件可以一次显示多个项并使用户能够选择多个项。ListBox控件

28、是一个或多个列表项的容器，Items属性中包含了所有的选项。Items属性中的每个ListItem对象列表项都是具有各自的属性的。对Items属性的操作方式与复选框组CheckBoxList、单选按钮组RadioButtonList、DropDownList控件中的操作完全一致。如果将控件的设置为单选模式，即SelectionMode属性值为Single，则与DropDownList控件一样，当前所选项可在ListBox控件的SelectedItem属性中得到；如果将控件的设置为多选模式，即SelectionMode属性值为Multiple，则需要通过循环遍历整个Items集合并检查每个项的S

29、elected属性来获取选定的项。名称名称说明说明ID获取或设置分配给服务器控件的标识符。（继承自Control。）Enabled获取或设置是否启用Web服务器控件。（继承自WebControl。）Items获取列表控件项的集合。SelectedIndex获取或设置控件中的选定项的索引。SelectedItem获取列表控件中索引最小的选定项。SelectedValue获取列表控件中选定项的值，或选择列表控件中包含指定值的项。Rows获取或设置 ListBox 控件中显示的行数。SelectionMode获取或设置 ListBox 控件的选择模式。ListBoxForm.aspx文件的代码如下：

30、体育 游戏 音乐 你选择的爱好包括：ListBoxForm.aspx.cs文件的代码如下：protected void Button1_Click(object sender,EventArgs e)Label1.Text=;foreach(ListItem a in ListBox1.Items)if(a.Selected)Label1.Text=Label1.Text+a.Value+;在Web程序与用户的交互过程中，必须允许用户出现误操作，并且可以给出相应的提示，这是改善用户体验的需要。比如，当用户提交数据时，有些必须填写的信息用户没有填写，有些固定格式的信息（比如电子邮件地址、电话号码

31、等）用户写错了。这类错误都适合在浏览器端发现和提示，但需要使用JavaScript来编写相应的脚本程序。另外，出于系统安全的需要，后台程序还必须再次编写程序进行验证。使用ASP.NET验证控件可以非常方便地检查网页中的用户输入，而完成许多常用的验证都无需开发者编写代码。当然，这依赖于验证控件中封装了相应的后台代码以及自动编写的前台JavaScript代码。控件名称控件名称验证类型验证类型 说明说明 RequiredFieldValidator 必填检查确保用户必须填写某个信息，否则提示出错。CompareValidator 对比检查将用户输入的两个信息进行比较，或者将用户输入与固定的值进行比较

32、，确保小于、等于、大于或不等于，否则提示出错。RangeValidator 范围检查确保用户的输入是否在指定的上下限范围内，否则提示出错。RegularExpressionValidator 模式匹配确保用户输入与正则表达式定义的模式匹配，例如电子邮件地址、电话号码、邮政编码等，否则提示出错。CustomValidator 用户定义使用开发者自定义的验证逻辑检查用户输入。错误提示：此栏目为必填字段必选验证器错误提示：两栏目必须相同对比验证器错误提示：此栏目必须为电子邮件地址匹配验证器错误提示：此栏目必须填写18-80之间的整数范围验证器正则表达式是一种文本匹配模式，它可以用来描述文本的规则，方

33、便程序进行匹配或验证。正则表达式使用元字符的组合来描述文本模式，不同的元字符代表了某种上下文行为。目标目标正则表达式正则表达式电子邮件w+(-+.w+)*w+(-.w+)*.w+(-.w+)*身份证号（15位或18位数字）d140-9,0-9xX手机号码13|4|5|7|80-9d8$我们可以发现，CheckBoxList、RadioButtonList、DropDownList以及ListBox控件中都包含相同的Items属性，并且它们具有一些相似的行为。这不是一种巧合，而是ASP.NET类框架的刻意设计：这些控件类都继承自ListControl类。更普遍的，我们可以看到，所有的服务器控件都

34、具有继承自Control类的ID属性、Visible属性和继承自WebControl类的Enabled属性等。通常来讲，所有基类中定义的公共（Public）属性、方法和事件都会被子类继承，开发者可以应用这些类的成员进行开发。WebControlButtonCheckBoxRadioButtonHyperLinkImageImageButtonImageMapLabelTextBoxBaseDataBoundControlDataBoundControlListControlListControlBulletedListCheckBoxListDropDownListListBoxRadioButtonList（1）使用按钮、标签控件进行编程，达到如下效果：最初页面中显示数字0，当用户点击一次按钮，页面中的数字就加1。（2）使用复选框和文本框控件进行编程，达到如下效果：当用户在复选框中选择某个选项，文本框中就显示该选项的文本。（3）使用两个下拉列表控件进行编程，达到如下效果：一个下拉列表中放置“省”，一个下拉列表放置“市”，当用户在一个下拉列表中选择某个省时，另一个下拉列表中的数据改变为该省所包含的市。