Download ppt - 第六章设计窗体和控件

1

第六章设计窗体和控件

6.1 Win Forms窗体控件6.2 ASP.NET Web服务器控件

6.3 Web窗体HTML控件和客户端脚本

6.4 Web窗体设计模式与HTML模式联合使用6.5 在代码隐藏类中编写HTML及客户端脚本的方法6.6 正则表达式6.7 Web服务器验证控件

2

6.1 Win Forms 窗体控件 6.1.1 控件中一些常用的属性和事件 1. 常用基本属性 1) Name ：表示控件的名称。 2) Enabled ：表示控件是否可以对用户交互作出响应。 3) Font ：表示控件中显示文字的字体格式，包括字体名称、

字号以及是否以斜体、加粗和下划线显示。 4) BackColor ：表示控件的背景色。 5) ForeColor ：表示控件的前景色。 6) Image ：表示控件上显示的图像。 7) Location ：这是一个复合属性，表示控件的左上角相对

于其容器的左上角的坐标。 8) Size ：这是一个复合属性，表示控件的高度和宽度。 9) Visible ：表示是否显示该控件。

3

2. 常用事件 1) MouseEnter 事件：鼠标进入控件区域内时触发。 2) MouseDown 事件：在控件区域内按下鼠标键时触发。 3) MouseLeave 事件：鼠标离开控件区域时触发。 6.1.2 Label 控件和 LinkLabel 控件 Label 控件通常用于提供控件或窗体的描述性文字，以

便为用户提供有帮助作用的信息。 1. Label 控件常用的基本属性 Text 属性：表示显示的文本内容。 2. 操作示例 ( 略 )

LinkLabel 控件与 Label 控件非常相似，不同的是它可以显示超级链接。当用户单击 LinkLabel 控件时，会触发 LinkClicked 事件，可以在 LinkClicked 事件中编写代码链接到指定的网页。

4

6.1.3 Button 控件常用： 1 ． Text 属性：显示控件文本信息例如： this.button1.Text=" 确定 "; 2 ． Click 事件：单击鼠标左键时触发。例如：

private void button1_Click(object sender, System.EventArgs e)

{MessageBox.Show(this,“ 你点击了 [ 确定 ] 按

钮。” , “ 提示信息” ,MessageBoxButtons.OK, MessageBoxIcon.Information);

}

5

参数的含义：（ 1 ） object sender ：代表发出事件的对象，此处指 button1 。使用时可以直接用 button1 ，

也可以像下面形式： Button button=(Button)sender; （ 2 ） System.EventArgs e ：封装了事件的

信息

6

3. MouseEnter 事件：鼠标进入按钮区域时触发。例如：

private void button1_MouseEnter(object sender, System.EventArgs e)

{ // 颜色在 System.Drawing 名称空间下

this.button1.BackColor=Color.Red; }

4. MouseLeave 事件：鼠标离开按钮区域时触发。例如：

private void button1_MouseLeave(object sender, System.EventArgs e)

{this.button1.BackColor=SystemColors.Contro

l;}

7

6.1.4 TextBox 控件常用： 1 ． Text 属性：表示文本框中的当前文本。例如： this.textBox1.Text="abcd"; 2 ． Multiline 属性：表示是否可以包含多行内容。 3 ． MaxLength 属性：表示用户可以在文本框控件中最多

键入的字符数。 4 ． PasswordChar 属性：用于屏蔽在单行文本框控件中

输入的的密码字符。 5 、 TextChanged 事件：更改 Text 属性值时触发。例如：

private void textBox1_TextChanged(object sender, System.EventArgs e)

{this.textBox2.Text=this.textBox1.Text;

}

8

6.1.5 CheckBox 控件

一般在下列情况下使用复选框：响应用户对复选框的选择，动态改变界面上其它控件的状态。访问复选框的状态，执行不同的操作。常用：（ 1 ） Text 属性：表示与复选框控件关联的文本。（ 2 ） Checked 属性：表示复选框是否处于选中状态。（ 3 ） CheckedChanged 事件：表示当 Checked 属性值

更改时触发的操作。

9

举例：

第一步：在工程中添加一新窗体 Form2 ，设计画面如图：

10

第二步：在 Form2 类中，直接添加方法 checkBox_CheckedChanged ，该方法的功能是当选中某个复选框时，该复选框的文字会变为绿色。

private void checkBox_CheckedChanged(object sender, System.EventArgs e)

{CheckBox checkbox=(CheckBox)sender;if(checkbox.Checked){

checkbox.ForeColor=Color.Green;}else{

checkbox.ForeColor=Color.Black;}

} 第三步：将三个 CheckBox 控件的 CheckedChanged 触发

事件均选择为 checkBox_CheckedChanged 。

11

第四步：添加 button1 按钮的 Click 事件代码。private void button1_Click(object sender, System.EventArgs e){ string str=" 选择结果： ";

str+=(this.checkBox1.Checked==true)?(this.checkBox1.Text+" 、 "):""; str+=(this.checkBox2.Checked==true)?(this.checkBox2.Text+" 、 "):""; str+=(this.checkBox3.Checked==true)?(this.checkBox3.Text+" 、 "):"";

if(str[str.Length-1]==' 、 '){ str=str.Substring(0,str.Length-1);}MessageBox.Show(str);

}第五步：直接执行窗体 Form2 的方法。当执行项目时， C# 会自动调用窗体 Form1, 此处示例不需执行 Form1 ，而

希望执行窗体 Form2 ，为了能够直接调用窗体 Form2 ，必须在 Form1 类中找到 Main 方法，对其进行修改：

static void Main() { Application.Run(new Form2());}

12

6.1.6 CheckedListBox 控件

当选项比较多时，或者在运行时动态的决定有哪些选项时，可以使用这种控件。常用：（ 1 ） Items 属性：表示控件对象中所有项的集合。（ 2 ） MultiColumn 属性：表示控件对象是否支持多列。（ 3 ） ColumnWidth 属性：表示控件对象支持多列时，列的

宽度。（ 4 ） CheckOnClick 属性：表示当选定某项时是否应同时改

变复选框状态。（ 5) Sorted 属性：表示控件对象中各项是否按字母有序。（ 6) CheckedItems 属性：表示控件对象中选中项的集合。（ 7) CheckedIndices 属性：表示控件对象中选中索引的集合。

13

举例：第一步：设计界面，添加 Items 属性选项：“足球篮球排球乒乓球羽毛球拳击体操射击跑步逛街象棋围棋跳棋军旗五子棋拱猪双升其它 ”。

14

第二步：添加 button1 按钮的 Click 事件代码：private void button1_Click(object sender, System.EventArgs e){

string str=" 选择结果： ";for(int i=0;i<this.checkedListBox1.CheckedItems.Count;i++){

str+=this.checkedListBox1.CheckedItems[i]+" 、 ";}if(str[str.Length-1]==' 、 '){

str=str.Substring(0,str.Length-1);}MessageBox.Show(str);

}第三步：运行，选中一项或者同时选中多项，点击按钮观察结果。

15

6.1.7 RadioButton 控件

单选按钮是以他们所在的容器划分组的，直接在 Form 上放置的单选按钮将自动成为一组，这时 Form 就是容器，当

选中容器中的一个单选按钮时，其他的将自动撤销选中。如果要在一个 Form 上创建多个单选按钮组，则需要使用GroupBox 或者 Panel 控件作为容器。

常用：（ 1 ） Text 属性（ 2 ） Checked 属性（ 3 ） CheckedChanged 事件

16

『举例』第一步：设计窗体。

17

第二步：添加下列代码：private void radioButton_CheckedChanged(object sen

der, System.EventArgs e){

RadioButton check=(RadioButton)sender;if(check.Checked){

this.textBox1.Text=check.Text;}

}第三步：将三个 RadioButton 控件的 CheckedChanged 触

发事件均选择为 radioButton_CheckedChanged 。第四步：运行，观察结果。

18

6.1.8 ListBox 控件列表框控件用来显示一组条目，以便让操作者从中选择一条或者多条，然后进行相应的处理。常用：（ 1 ） Items 属性（ 2 ） MultiColumn 属性、 SelectionMode 属性、 Anchor

属性其中： SelectionMode 属性有： None ：不能选择 One ：同一时刻只能选择一条 MultiSimple ：同一时刻可以选择一条或者多条 MultiExtended ：同一时刻可以选择一条或者多条，并且可以使用组

合键（如 Shift 和 Ctrl ）帮助选择（ Web Forms ） SelectionMode 属性

Single ：同一时刻只能选择一条 Multiple ：同一时刻可以选择一条或者多条

19

举例 1 ：初始化方法。string[] strArray={"1","2","3"};this.listBox1.Items.AddRange(strArray);举例 2 ：添加不重复条目的方法。bool itemExist=false;for(int i=0;i<this.listBox1.Items.Count;i++){

if(this.listBox1.Items[i].ToString()=="abc"){itemExist=true; break;

}}if(itemExist==false){

this.listBox1.Items.Add("abc");}else{

//……}

20

// 删除当前所选条目的方法if(this.listBox1.SelectedIndex>-1) // 如果选择了某项{ this.listBox1.Items.Remove(this.listBox1.SelectedItem);}// 删除选中的一条或者多个条目的方法for(int i=this.listBox1.SelectedItems.Count-1;i>=0;i--){

this.listBox1.Items.Remove(listBox1.SelectedItems[i]);}

思考：将上述代码改为for(int i=0;i<this.listBox1.SelectedItems.Count;i++){

this.listBox1.Items.Remove(listBox1.SelectedItems[i]);}可以吗？为什么？

21

6.1.9 ComboBox 控件这种控件有两部分组成，即一个文本框和一个列表框。文本框可以用来显示当前选中的条目，如果文本框可以编辑，则可以直接输入选择的条目。单击文本框旁边带有向下箭头的按钮，则会弹出列表框，使用键盘或者鼠标可以在列表框中选择条目。常用属性： 1 ． Text 属性、 Items 属性、 DropDownStyle 属性。其中 DropDownStyle 属性有： Simple ：同时显示文本框和列表框，文本框可以被编辑。 DropDown ：只显示文本框，需要通过键盘或者鼠标打开

列表框，文本框可以被编辑。 DropDownList ：只显示文本框，需要通过键盘或者鼠标打开列表框，文本框不可以被编辑。 2 ． SelectedIndexChanged 事件。

22

举例：第一步：设计窗体。

23

第二步：添加 comboBox1 的 SelectedIndexChanged事件。

private void comboBox1_SelectedIndexChanged(object sender,

System.EventArgs e){

if(this.comboBox1.SelectedIndex>-1 && this.comboBox2.SelectedIndex>-1)

{this.listBox1.Items[this.comboBox1.Se

lectedIndex]=this.comboBox1.SelectedItem.ToString()+"

"+this.comboBox2.SelectedItem.ToStrin

g();}

}

24

第三步：添加 comboBox2 的 SelectedIndexChanged 事件。private void comboBox2_SelectedIndexChanged(object sender,


if(this.comboBox1.SelectedIndex>-1 && this.comboBox2.SelectedIndex>-1)

{this.listBox1.Items[this.comboBox1.Sel

ectedIndex]= this.comboBox1.SelectedItem.ToString()+" “

+this.comboBox2.SelectedItem.ToString(); }}

第四步：运行，修改小组和项目选项，观察 ListBox 中内容的变化。

25

6.1.10 ToolTip 控件

该控件的用途是当鼠标位于某个控件上并停留一段时间后，显示该控件功能的提示信息。主要属性有： Active ：指示该控件当前是否处于激活状态。 AutomaticDelay ：设置经过多长时间显示提示信息，缺省值为 500ms 。 AutoPopDelay ：设置鼠标指针停留多长时间后消失提示信息。例如：向 6.1.7 例子中的设计窗体拖放一个 ToolTip 控件，然后在构造函数中加入下列代码：this.toolTip1.SetToolTip(this.comboBox1," 选择参加的小组。 ");this.toolTip1.SetToolTip(this.comboBox2," 选择左边小组参加的项目。 ");this.toolTip1.SetToolTip(this.listBox1," 各小组参加的项目列表。 ");运行，分别将鼠标在上述控件中停留一段时间，观察显示的提示信息。

26

6.1.11 PictureBox 控件常用属性有： 1 ． Image ：在 PictureBox 中显示的图像。 2 ． SizeMode ：图片在控件中的显示方式。其属性有： AutoSize ：调整控件 PictureBox 大小，使其等于所包含的图像大小。 CenterImage ：如果控件 PictureBox 比图像大，则图像

将居中显示。如果图像比控件大，则图片将居于控件中心，而外边缘将被剪裁掉。 Normal ：图像被置于控件的左上角。如果图像控件大，则超出部分被剪裁掉。 StretchImage：控件中的图像被拉伸或收缩，以适合控件的大小。

27

举例：第一步：向窗体上拖放一个 PictureBox 控件，一个 Label 控

件，分别调整为适当大小。第二步：设置 pictureBox1 的 Image 属性，将一个图片放入

控件内。然后修改 SizeMode 属性，观察效果。第三步：添加下列事件：private void pictureBox1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e){

this.label1.Text=string.Format(“ 鼠标在 PictureBox 中的位置： x={0},y={1}",e.X,e.Y);

}第四步：运行，在图片内移动鼠标，观察结果。

28

6.1.12 MainMenu控件

MainMenu 实际上是一个组件，该组件在运行时显示一个菜单。利用菜单设计器可以非常快地建立主菜单的结构。在菜单中，可以用 & 符号代表快捷键 ALT ，如 &F 代表 Al

t+F 。举例说明：（ 1 ）将 MainMenu 组件从“工具箱”拖动到窗体上。（ 2 ）在菜单设计器中，创建一个顶级菜单项，并将其 Te

xt 属性设置为“文件（ &F ）”，然后依次创建 4 个子菜单，并将其 Text 属性分别设置为 “新建（ &New ）”、“打开（ &Open ）”、 “ -” 和“退出（ &Exit ）”。

29

（ 3 ）再创建一个顶级菜单项，并将其 Text 属性设置为“背景色”，两个子菜单项，其 Text 属性分别设置为“红色”和“白

色”。（ 4 ）再创建一个顶级菜单项，并将其 Text 属性设置为“测试执行文件所在目录”。（ 5 ）双击对应菜单项，添加事件：private void menuItem2_Click(object sender, System.EventArgs e){

MessageBox.Show(" 你选择的是“新建” ");}private void menuItem3_Click(object sender, System.EventArgs e){

MessageBox.Show(" 你选择的是“打开” ");}private void menuItem5_Click(object sender, System.EventArgs e){

Application.Exit();}

30

private void menuItem7_Click(object sender, System.EventArgs e){

this.BackColor=Color.Red;}private void menuItem8_Click(object sender, System.EventArgs e){

this.BackColor=Color.White;}private void menuItem9_Click(object sender, System.EventArgs e){

MessageBox.Show("exe 文件所在目录为： \n\n"+ Application.StartupPath+"\n");}

（ 6 ）运行，观察结果。

31

6.1.13 ProgressBar控件

ProgressBar 控件用来动态显示一个过程的进行程度，当某个操作需要较长的时间（几秒钟或者几分钟或者更长）就需要使用 ProgressBar 向用户显示操作的进展情况。 1. PictureBox 控件中常用的基本属性 1) Minimum ：表示进度条的最小值，缺省值为 0 。 2) Maximum ：表示进度条的最大值，缺省值为 100 。 3) Value ：表示进度条的当前值，缺省值为 0 ，它应该

在 Minimum 和 Maximum 之间取值。 2. 操作示例下面的例子说明了如何使用进度条来显示一个较长时间的计算过程。

32

第一步：在窗体上放两个 ProgressBar 控件，两个Label 控件，两个 TextBox 控件，一个 Button 控件，

如图：

33

第二步：添加 [ 开始计算 ] 按钮的 Click 响应事件：private void button1_Click(object sender, System.EventArgs e){

this.button1.Enabled=false;int outLoop=Int32.Parse(this.textBox1.Text);int innerLoop=Int32.Parse(this.textBox2.Text);this.progressBar1.Maximum=outLoop;this.progressBar2.Maximum=innerLoop;for(int i=1;i<=outLoop;i++){

for(int j=1;j<=innerLoop;j++){

double d=i+j;if(j%100==0) this.progressBar2.Value=j;

}this.progressBar1.Value=i;

}this.button1.Enabled=true;

} 第三步：运行，观察结果。

34

6.1.14 TabControl控件

使用这个控件可以创建带有多个标签页的窗口，每个标签页都是一个容纳其它控件（比如 TextBox 或 Button ）

的容器。 1. TabControl 控件中常用的基本属性 1) Multiline 属性 2) ImageList 属性 3) TabPages 属性

35

2. 操作示例第一步：（ 1 ）创建一个 TestTabControl 的 Windows 应用程序，

向设计窗体上拖放一个 TabControl 控件，调整大小。（ 2 ）向窗体上拖放一个 ImageList 控件，添加三个图标，并修改 ImageSize 属性为 32,32 ；修改 ColorDepth 为Depth32Bit 。（ 3 ）设置 TabControl 的 ImageList 属性为 imageList1 。（ 4 ）设置 TabControl 的 TabPages 属性，添加三个 Tab

Page ，点击 [ 确定 ] ，再分别在三个 TabPage 上放一些控件便于区

分。

36

设计界面如图所示：

通讯录界面

37

记事薄界

面

38

日程安排界

面

39

第二步：运行，观察结果。第三步：修改 imageList1 的 ImageSize 属性为

16,16 ；修改 ColorDepth 为 Depth8Bit ，重新运行观察

结果。

40

6.1.15 ListView控件 ListView 用列表的形式显示一组数据，每条数据都是一个 ListItem 类型的对象。通常使用 ListView 来显示对

数据库的查询结果， Windows 系统中的文件浏览器就是一个ListView 控件。 1. ListView 控件中常用的基本属性 1) View 属性：表示数据的显示模式，用四种选择： ① Large Icons （大图标）：每条数据都用一个带有文本

的大图标表示。 ② Small Icons （小图标）：每条数据都用一个带有文本

的小图标表示。 ③ List （列表）：提供 ListItems 对象视图。 ④ Details （详细列表）：每条数据有多个字段组成，每

个字段各占一列。2) MultiSelect 属性：表示是否允许多行选择。

41

2. 操作示例 ⑴ 创建一个 TestListView 的应用程序，然后向窗体上拖放一个 ListView 控件， 4 个 Label 控件， 3 个 TextBox 控件（ textBoxName 、 textBoxAddress 、 textBoxPhone ），

两个Button 控件（ buttonAppend 、 buttonDelete ）和一个Combobox 控件，并适当调整控件和窗体的位置和大小。 ⑵ 设置 Combobox 控件的 [DropDownStyle] 属性为[DropDownList] ，并设置其 [Items] 属性为：大图标、小图标、列表、详细列表。

42

窗体如图所示：

43

（ 3 ）添加一个 ImageList 控件（ imageList1 ），设置然

后向该控件中加入 1 个 16*16 的图标文件。（ 4 ）添加一个 ImageList 控件（ imageList2 ），设置

然后向该控件中加入 1 个 32*32 的图标文件，并设置 ImageSi

ze 为32,32 。（ 5 ）设置 ListView 控件的属性： LargeImageList ：选 imageList2 SmallImageList ：选 imageList1 Columns ：姓名（ width:100 ）、地址 (width:250) 、电话 (width:100) View ：当前显示模式，设为 [Details] 。

44

（ 6 ）实现“添加”按钮的 Click 响应事件： private void buttonAppend_Click(object sender, System.EventArgs e){

int itemNumber=this.listView1.Items.Count;string[] subItem={this.textBoxName.Text,

this.textBoxAddress.Text,this.textBoxPhone.Text};this.listView1.Items.Insert(itemNumber,

new ListViewItem(subItem));this.listView1.Items[itemNumber].ImageIndex=0;

}

45

（ 7 ）实现“删除”按钮的 Click 响应事件： private void buttonDelete_Click(object sender, System.EventArgs e){ for(int i=this.listView1.SelectedItems.Count-1; i>=0;i--)

{ ListViewItem item =

this.listView1.SelectedItems[i]; this.listView1.Items.Remove(item);}

}

46

（ 8 ）添加 comboBox1 的 SelectedIndexChanged 事件private void comboBox1_SelectedIndexChanged(object sender, S

ystem.EventArgs e){

string str=this.comboBox1.SelectedItem.ToString();switch(str) {

case " 大图标 ": this.listView1.View=View.LargeIcon; break;case " 小图标 ": this.listView1.View=View.SmallIcon; break;case " 列表 ": this.listView1.View=View.List; break;default: this.listView1.View=View.Details; break;

}}

47

（ 9 ）在构造函数中加入this.comboBox1.SelectedIndex=3;

运行结果如图所示

48

6.1.16 TreeView （树形视图）控件

可以使用 TreeView 控件显示具有层次结构的数据，比如磁盘目录、文件和数据库结构等。下面通过具体例子说明该控件的用法。第一步：向设计窗体拖放一个 TreeView 控件，两个 TextBox 控件（ name 属性分别为 textBoxRoot 、 textBoxChild ），三个 Button 控件（ name 属性分别为 buttonAddRoot 、 buttonAddChild 、 buttonDelet

e ）如下图所示。

49

50

第二步：（ 1 ）选择“解决方案资源管理器”右击项目名“添加”“添加新项”“位图文件”，添加一个大小为 16×1

6 像素的 BMP 图像，用作根节点以及包含字节点的节点没有被展开时的图标图像。（ 2 ）再添加一个大小为 16×16 像素的 BMP 图像，用作他们被展开时的图标。（ 3 ）再添加一个大小为 16×16 像素的 BMP 图像，用作不包含子节点的节点图标。三幅图像效果如图：

51

第三步：从工具箱中向窗体拖放一个 ImageList 控件，选择其 [Image] 属性，然后添加做出的三幅图像。第四步：设置 TreeView 控件的属性： ImageList 属性： imageList1 。 Nodes 属性：添加初始的根节点和子节点以及节点的图像。如图：

52

53

第四步：添加展开某个节点后发出的 AfterExpand 事件。private void treeView1_AfterExpand(object sender, System.Windows.Forms.TreeViewEventArgs e){

e.Node.ImageIndex=1;e.Node.SelectedImageIndex=1;

}第五步：添加折叠某个节点后发出的 AfterCollapse 事件。private void treeView1_AfterCollapse(object sender, System.Windows.Forms.TreeViewEventArgs e){

e.Node.ImageIndex=0;e.Node.SelectedImageIndex=0;

}

54

第六步：添加下列事件。private void buttonAddRoot_Click(object sender,


// 构造节点显示内容、取消选定时显示图像索引号、选定时显示图像索引号

TreeNode newNode=new TreeNode(this.textBoxRoot.Text,2,2);

this.treeView1.Nodes.Add(newNode);this.treeView1.Select();

}

55

private void buttonAddChild_Click(object sender, System.EventArgs e)

{TreeNode selectedNode=this.treeView1.SelectedNode;if(selectedNode==null){

MessageBox.Show(" 添加子节点之前必须先选中一个节点。 "," 提示信息 ");

return;}TreeNode newNode=new

TreeNode(this.textBoxChild.Text,2,2);selectedNode.Nodes.Add(newNode);selectedNode.SelectedImageIndex=1;

56

selectedNode.Expand();this.treeView1.Select();

}

private void buttonDelete_Click(object sender, System.EventArgs e){

TreeNode selectedNode=this.treeView1.SelectedNode;if(selectedNode==null)

{MessageBox.Show(" 删除节点之前必须先选中一

个节点。 "," 提示信息 ");return;

} TreeNode parentNode=selectedNode.Parent;

57

if(parentNode==null){ this.treeView1.Nodes.Remove(selectedNode);}else

{parentNode.Nodes.Remove(selectedNode);if(parentNode.Nodes.Count==0)

{parentNode.ImageIndex=2;parentNode.SelectedImageIndex=2;

}}this.treeView1.Select();

}第七步：运行，测试结果。

58

6.2 ASP.NET Web服务器控件

特点：Web服务器控件是在服务器端执行的编程者不需要考虑客户端是哪种浏览器与 Windows 控件用法相似，但有区别三种形式：设计模式 HTML 模式代码隐藏类

59

6.2.1 按钮控件 1. 按钮控件分类 1) 标准命令按钮（ Button 控件）。 2) 超级链接样式按钮（ LinkButton 控件）。 3) 图形化按钮（ ImageButton 控件）。 2. 操作示例 1) 创建一个新的 ASP.NET Web 应用程序项目。界面如

图 6-15 所示 . 2) 实现 Click 事件：该事件的功能是在浏览器下当鼠

标单击按钮时，会弹出一个消息框。private void Button1_Click(object sender, System.EventArgs e){

Response.Write("<script>window.confirm('ok?');</script>");

}

60

6.2.2 TextBox 控件常用： 1 ． AutoPostBack 属性当更改文本框中的文本并使焦点离开该控件时，都会向服务器自动回送，则为 true ；否则为 false 。默认为 false 。注意：仅当内容改变后文本框失去焦点时，回送才会发生。 2 ． Text 属性如： this.textBox1.Text="abcd"; 3. TextMode 属性：表示文本框的行为模式。有三种属性值： ① MultiLine ：多行输入模式。 ② Password ：密码输入模式。 ③ SingleLine ：单行输入模式。默认值为： SingleLine 。

61

4 ． MaxLength 属性 5 ． TextChanged 事件例如：private void TextBox1_TextChanged(object sender, System.EventArgs e){ Response.Write("<script>window.alert('" +this.TextBox1.Text+"')</script>");}

62

思考 1 ：假如有下列画面

需要完成的功能是：当在 TextBox 中输入内容，按回车后，触发 Button2 的 Click 事件，如何实现？

答：将 TextBox 的 Text_Changed 触发事件选为 Button2_Click

63

6.2.3 Panel 控件

Panel 控件被作为容器，主要有下列用途： 1) 在页面内为其他控件提供一个容器。可以将多个控件

放入 Panel 控件中作为一个单元进行控制，比如隐藏或显示。

2) 可以使用 Panel 控件为一组控件创建独特的外观。 3) 可以利用 Panel 控件直接在页面上显示文字。

64

6.2.4 CheckBox 控件

一般在下列情况下使用复选框：响应用户对复选框的选择，动态改变界面上其它控件的状态。访问复选框的状态，执行不同的操作。常用属性：（ 1 ） Text 属性（ 2 ） Checked 属性（ 3 ） CheckedChanged 事件举例：

65

第一步：向设计窗体拖放一个 Panel 控件 , 设置其 BackColor属性为 Web 色的 Gainsboro, 然后向 Panel 内拖放 1 个 Label 控件， 3 个 CheckBox 控件， 1 个 Button 控件， 1个 TextBox 控件，如图：

66

第二步：添加 Button 控件的 Click 事件。private void Button1_Click(object sender, System.EventArgs e)

{

string str=" 选择结果： ";if(this.CheckBox1.Checked==true)

str+=this.CheckBox1.Text+" 、 ";if(this.CheckBox2.Checked==true)

str+=this.CheckBox2.Text+" 、 ";if(this.CheckBox3.Checked==true)

str+=this.CheckBox3.Text+" 、 ";if(str[str.Length-1]==' 、 ')

str=str.Substring(0,str.Length-1);this.TextBox1.Text=str;

}第三步：运行，分别选择一些选项，按 [ 确定 ] 按钮，观察

结果。

67

6.2.5 CheckBoxList 控件

当选项比较多时，或者在运行时动态的决定有哪些选项时，可以使用这种控件。常用属性：（ 1 ） Items 属性（ 2 ） RepeatColumns 属性、 RepeatDirection 属性

举例：第一步：向窗体拖放 1 个 CheckBoxList 控件，调整为适当大小，拖放 1 个 Button 控件。

68

第二步：在 Page_load 中添加下列代码：private void Page_Load(object sender, System.EventArgs e){ // 如果是第一次访问网页

if(! this.IsPostBack) {

ListItem[] item=new ListItem[10];for(int i=0;i<item.Length;i++)

{ item[i]=new ListItem(" 选项 "+i.ToString()); }this.CheckBoxList1.Items.AddRange(item);

}}

69

第三步：添加 Button 按钮的 Click 事件代码。private void Button1_Click(object sender,


string str=" 选择结果： ";for(int i=0;i<this.CheckBoxList1.Items.Count;

i++){ if(this.CheckBoxList1.Items[i].Selected) {

str+=this.CheckBoxList1.Items[i].Text +"、 ";

}}

70

if(str[str.Length-1]==' 、 ') str=str.Substring(0,str.Length-1); Response.Write("<script>window.alert('“ +str+"');</script>");}第四步：运行，选择一些选项，观察结果。

思考：不用 if(!this.IsPostBack) 结果会怎样？

71

6.2.6 RadioButton 控件 1. 常用属性 GroupName 属性：使用该属性指定一个单选按钮组，以

创建一组互斥的控件。 2. 操作示例 1) 创建一个 Web 应用程序，设计界面如图所示：

窗体中各控件属性见表 6-11 。

72

2) 添加 Button1 按钮的 Click 事件代码。private void Button1_Click(object sender, System.EventArgs e)

{

string str=" 你选择的是： ";

if(RadioButton1.Checked)

str+=RadioButton1.Text;

else if(RadioButton2.Checked)


else if(RadioButton3.Checked)


Response.Write("<script>window.alert('"+str+"')</script>");

}

3) 运行

73

6.2.7 RadioButtonList 控件

常用属性： 1 ． RepeatColumns 属性：选项所占的列数。 2 ． RepeatDirection 属性：选项显示顺序是先行后列或是先列后行。 3 ． Items 属性：各选项的内容。例如：第一步：将窗体的背景色设置为“ #33cccc” ，然后向设计窗体拖放 1 个 Label 控件， [Text] 属性为“请选择你参加的项目”，拖放 1 个 RadioButtonList 控件，设置[BorderStyle] 属性为“ Double” ， [RepeatColumns] 属

性为 5 ，[RepeatDirection] 属性为“ Horizontal” 。再向窗体拖放

一个 Button 控件，并设置其 [Text] 属性为“确定”。

74

第二步：在 Page_load 中添加初始化代码。private void Page_Load(object sender, System.EventArgs e){ string[] stra=new string[]{" 足球 ","篮球 ","排

球 ","乒乓球 ","羽毛球 ","拳击 ","体操 ","射击 ","跑步 ","逛街 ","象棋 ","围棋 ","跳棋 ","军旗 ","五子棋 "};if(!Page.IsPostBack)

{ListItem[] items=new ListItem[15];for(int i=0;i<items.Length;i++)

items[i]=new ListItem(stra[i]);this.RadioButtonList1.Items.AddRange(items);

}}

75

第三步：添加 Button 按钮的 Click 事件代码。private void Button1_Click(object sender, System.EventArgs e){

string str=" 你选择的是： ";if(this.RadioButtonList1.SelectedIndex>-1){ str+=this.RadioButtonList1.

SelectedItem.Text;}

Response.Write("<script>window.alert('" +str+"')</script>");

}第四步：运行，结果如图所示。

76

77

6.2.8 ListBox 控件

列表框控件用来显示一组条目，以便让操作者从中选择一条或者多条，然后进行相应的处理。常用属性：（ 1 ） Items 属性（ 2 ） SelectionMode 属性 Single ：同一时刻只能选择一条 Multiple ：同一时刻可以选择一条或者多条举例：

78

1. 初始化方法： private void Page_Load(object sender, System.Even

tArgs e){

if(!Page.IsPostBack){

ListItem[] stra={ new ListItem("1"),new ListItem("2"),new ListItem("3")};

this.ListBox1.Items.AddRange(stra);}

}

79

2. 添加一不重复条目的方法：bool ifExist=false;for(int i=0;i<this.ListBox1.Items.Count;i++){

if(this.ListBox1.Items[i].ToString()=="abc"){

ifExist=true;break;

}}if(ifExist==false){ this.ListBox1.Items.Add("abc");}else{ //……}

80

3. 删除当前所选条目的方法// 如果选择了某项if(this.ListBox1.SelectedIndex>-1){

this.ListBox1.Items.Remove(this.ListBox1.SelectedItem);

}4. 删除选中的一条或者多个条目的方法：for(int i=this.ListBox1.Items.Count-1;i>=0;i--){

if(this.ListBox1.Items[i].Selected){this.ListBox1.Items.Remove(this.ListBox1.Items[i]);}

}

81

6.2.9 DropDownList 控件

这种控件有两部分组成，即一个文本框和一个列表框。文本框可以用来显示当前选中的某项内容。单击文本框旁边带有向下箭头的按钮，则会弹出列表框，使用键盘或者鼠标可以在列表框中快速选择某一项。常用属性： 1 ． AutoPostBack 属性 2 ． Items 属性 3 ． SelectedIndexChanged 事件举例：第一步：在 Web 窗体上放一个 Label 控件，然后放一个DropDownList 控件，修改 AutoPostBack 属性为 true ，

再向窗体上拖放一个 Button 控件。

82

第二步：在 Page_load 中添加初始化代码。private void Page_Load(object sender, System.EventArgs e){

if(!Page.IsPostBack){

ListItem[] stra={ new ListItem(“ 操作系统” ), new ListItem(" 数据结构 "),new ListItem(" 数据库 ")};

this.DropDownList1.Items.AddRange(stra);}

}

83

第三步：添加 DropDownList 控件的 SelectedIndexChanged

响应事件。private void DropDownList1_SelectedIndexChanged( object sender, System.EventArgs e){

if(this.DropDownList1.SelectedIndex>0){

this.Label1.Text= this.DropDownList1.SelectedItem.Text;

}}

84

第四步：添加 Button 控件的 Click 响应事件。private void Button1_Click(object sender, System.EventArgs e){

if(this.DropDownList1.SelectedIndex>-1){Response.Write(“<script>window.alert(‘你选择的是 :“

+this.DropDownList1.SelectedItem.Text +"');</script>");

}}第五步：运行，观察结果。

85

6.2.10 Image 控件

Image 控件是专门用来显示各种类型的图像的，包括 GIF 格式、 JPG 格式、 JPEG 格式、 BMP 格式、

WMF格式、 PNG 格式等，与 ImageButton 的主要不同是，Image 控件没有 Click 响应事件。

Image 控件的主要属性就是 ImageUrl ，表示要显示的图像。

86

6.2.11 HyperLink 控件

可以利用此控件在 Web 页上创建链接，使用户点击此连接后自动转到另一页。常用属性： Text ：链接显示的文本。 NavigateUrl ：要定位到的 Url 。 Target ：目标框架，其值必须以 a 到 z 的字母（不区分大小写）开头，但下列特殊值除外： ① _blank ：将内容呈现在一个没有框架的新窗口中。 ② _parent ：将内容呈现在上一个框架集父级中。 ③ _self ：将内容呈现在含焦点的框架中。 ④ _top ：将内容呈现在没有框架的全窗口中。

87

6.2.12 Table控件

Table Web服务器控件的主要用途是以编程方式处理表格中的信息，这些信息可以是文字，也可以是 Web

控件的实例。 1. 常用基本属性 1) GridLines 属性：表示 Table 控件中显示的网格线样式。其属性值如下：

① None ：不显示单元格边框。 ② Horizontal ：仅显示水平单元格边框。 ③ Vertical ：仅显示垂直单元格边框。 ④ Both ：同时显示水平和垂直单元格边框。 2) Rows 属性：指表中行的集合，仅当以编程方式生

成表时使用该属性。

88

下面的例子说明了该控件的用法。 (1) 向窗体上拖放 1 个 Button 控件，一个 Table 控件，分别调整为适当大小。 (2) 修改 Table 控件的 GridLines 属性为 Both 。 (3) 添加 Button 控件的 Click 响应事件和调用的方法 .

89

private void Button1_Click(object sender, System.EventArgs e){

this.Table1.Rows.Clear();AddRow("搜狐企业在线 ","www.sohu.net",

" 包括招商引资、企业报道等信息。 ");AddRow("263 在线 ","www.263.net",

" 包括娱乐、生活、旅游等信息。 ");AddRow(“河大主页 ",“www.henu.edu.cn",

“ 包括……等信息。 ");} private void AddRow(string str1,string url,string str2){

TableRow row=new TableRow(); HyperLink hyperlink=new HyperLink();

hyperlink.Text=str1;hyperlink.NavigateUrl=url;hyperlink.Target="_top";

90

TableCell cell1=new TableCell();cell1.Font.Size=FontUnit.XSmall;cell1.Controls.Add(hyperlink);row.Cells.Add(cell1);

TableCell cell2=new TableCell();cell2.Font.Size=FontUnit.XSmall;cell2.ForeColor=Color.YellowGreen;cell2.Text=str2;row.Cells.Add(cell2);

this.Table1.Rows.Add(row);}

(4) 运行，观察结果。

91

6.3 Web窗体 HTML控件和客户端脚本

与服务器控件不同， HTML 控件是在客户端运行的，这就

减轻了服务器的负担，节省了服务器资源，另外，有些功能必须使用 HTML 控件才能完成。

使用 HTML 控件，可以在 HTML 视图下直接修改控件的属性、添加脚本。

目前流行的浏览器脚本主要有： ECMAScript 、 Jscript 、 JavaScript 、 VBScript 等。注意：由于只有 IE 浏览器支持 VBScript ，所以除非有特殊需要，一般情况下不要使用 VBScript 。

92

6.3.1 基本 HTML标注 1 、 <P></P> 一个回车两个换行 2 、 <BR> 一个回车一个换行 3 、 <HR> 一条横线 4 、 <PRE> 和 </PRE> 保持其内的文本原样输出 5 、 <TABLE> 和 </TABLE> 表格，表格中行列标注为： <TR> <TD></TD> <TD></TD> …… </TR> <TR> <TD colspan= 列数 rowspan= 行数 ></TD> <TD></TD> …… </TR>

93

6.3.2 File Field控件

可以利用 File Field 控件上传文件（比如 .doc 文件） . 下面举例说明该控件的用法：（ 1 ）向设计窗体拖放一个 File Field 控件，一个Button 控件。（ 2 ）右击 File Field 控件，选“作为服务器控件运行” （ 3 ）切换到 HTML 视图，在 <form id=……> 中添加enctype= “multipart/form-data” ，比如：<form id="Test“ method= "post" enctype= "multipart/form-data" runat= "server">

94

（ 4 ）添加 Button 控件的响应事件private void Button1_Click(object sender, System.Eve

ntArgs e){

string str=this.File1.PostedFile.FileName;str=str.Trim();if(str.Length!=0)

{ string str1=

str.Substring(str.LastIndexOf("\\")+1); this.File1.PostedFile.SaveAs(

Server.MapPath(str1)); Response.Write("<script>window.alert(

'上传成功！ ');</script>");}

}

95

6.3.3 Table控件 HTML 的 Table 控件也是一个容器，主要用于在设计模式下向表格中添加文本或控件。比如设计如下形式的表格：

96

设计步骤为：（ 1 ）向窗体拖放一个 HTML Table 控件。（ 2 ）切换到 HTML 模式，修改 Table 内为如下形式：

<TR> <TD colSpan="3"></TD> </TR>

<TR> <TD></TD> <TD></TD> <TD></TD> </TR>

<TR><TD colspan="2" rowspan="2"></TD><TD></TD>

</TR><TR>

<TD></TD></TR>

97

<TR><TD></TD><TD></TD><TD></TD>

</TR>

当然，也可以在设计模式下直接设计上表，并向表格内输入一些文字、拖放一些控件，具体做法请同学们自己尝试。

98

6.3.4 Grid Layout Panel控件

在设计模式下，系统默认为绝对坐标 .但由于客户端显示器分辨率和设计者使用的分辨率不一定相同，所以有可能导致设计者期望的界面与浏览者使用的界面产生误差。一般情况下，有下面几种解决方法：根据不同的分辨率，设计不同的界面。这种方法对设计者

来讲工作量比较大。利用 HTML 的 Table 控件，采用百分比的方法设计界面。

这种方法对一些图形图像及文字可能会产生不希望的效果。在 800*600流模式（ Flow Layout ）下设计，用 HTML

的 Table 控件做容器。这种方法不太好控制控件和图像以及前景背景的范围和位置等。

在 800*600流模式（ Flow Layout）下设计，利用 HTML Grid Layout Panel控件做容器。这种方法使用方便，又能达到期望的效果。

99

下面举例说明实现方法。（ 1 ）首先确认当前分辨率为 800*600 ，然后创建一

个Web 应用程序，将文档属性改为流模式（ Flow Layou

t ）。（ 2 ）向文档中拖放一个 HTML Grid Layout Panel

控件，用鼠标点击一下控件右侧文档部分，此时窗体右上方居中符号就可以使用了。选择该控件在文档中的位置为居中，然后调整该控件到合适大小。至此，就可以和系统默认的模式一样继续设计界面了。

100

6.4.1 使用 MARQUEE 显示滚动文字显示滚动字幕。例如：（ 1 ）切换到 HTML 模式，在 Form 中加入 <MARQUEE></MARQUEE >

（ 2 ）切换到设计模式，调整控件大小和位置，然后在控件中输入显示内容（ 3 ）鼠标右击该控件，选择“作为服务器控件运行”，这样做的目的是为了保证不同种类的浏览器均能正常显示。（ 4 ）修改该控件的 behavior 属性为 scroll 。（ 5 ）修改该控件的 direction 为希望滚动的方向。（ 6 ）运行，观察效果。

6.4 Web 窗体设计模式与 HTML 模式联合使用

101

选择“作为服务器控件运行”后，也可以在代码隐藏类中动态的设置显示内容、滚动方向等属性。例如：在 Page_load 中加入

this.MARQUEE1.InnerHtml="演示滚动字幕 ";this.MARQUEE1.Attributes["direction"]="right";

运行即可看到向右滚动的显示内容。6.4.2 使用 EMBED 显示 Flash 动画

显示扩展名为 SWF 的 Flash 动画。例如：（ 1 ）切换到 HTML 模式，在 Form 中加入 <EMBED></EMBE

D>（ 2 ）切换到设计模式，调整控件大小和位置。（ 3 ）鼠标右击该控件，选择“作为服务器控件运行”。（ 4 ）修改该控件的 src 属性为要显示的 Flash 动画。（ 5 ）运行，观察效果。

102

6.4.3 使用 IFRAME嵌入其它网页可以在网页的指定区域嵌入其它网页。例如：（ 1 ）切换到 HTML 模式，在 Form 中加入 <IFRAME></IFRAME>（ 2 ）切换到设计模式，调整控件大小和位置。（ 3 ）修改该控件的 src 属性为要显示的网页（也可以是 HTML 格式的 word 文档。）（ 4 ）运行，观察效果。

103

在代码隐藏类中输出 HTML 标注和客户端脚本可以大大增加编程的灵活性，比如：

设置脚本属性，例如： Button1.Attributes.Add("onmouseenter", "this.style.color='red'"); Button1.Attributes.Add("onmouseleave", "this.style.color='black'");

弹出消息框 window.alert( [sMessage] ) window.confirm( [sMessage]) window.prompt( [sMessage] [, sDefaultValue])

6.5 在代码隐藏类中编写 HTML及客户端脚本的方法

104

弹出模式对话框 window.showModalDialog(sURL [, vArguments] [, sFeatures])

弹出非模式对话框 window.showModelessDialog(sURL [, vArgument

s] [, sFeatures])

播放背景音乐例如：

Response.Write("<bgsound src=‘mysound.mp3'>");

105

举例说明：（ 1 ）用 Microsoft word 建一个 test.htm 文件，然后随

便输入一些内容。（ 2 ）创建一个 Web 应用程序，向设计窗体拖放两个 Butto

n 控件， Text 属性分别为“显示文档”和“显示警告信息”。

（ 3 ）在 Page_load 中加入初始化代码：private void Page_Load(object sender, System.EventArgs e){

// 在此处放置用户代码以初始化页面 this.Button1.Attributes.Add("onmouseenter",

"this.style.color='red'");this.Button1.Attributes.Add("onmouseleave",

"this.style.color='black'");}

106

（ 4 ）分别添加两个 Button 按钮的 Click 响应事件：private void Button1_Click(object sender, System.Eve

ntArgs e){

Response.Write("<script>window.showModalDialog('test1.htm','Dialog Arguments Value','dialogHeight: 341px; dialogWidth: 656px; dialogTop: 86px; dialogLeft: 100px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;');</script>");

}private void Button2_Click(object sender, System.Eve

ntArgs e){

Response.Write("<script>window.alert(' 这是警告信息！ ');</script>");

}（ 5 ）运行，观察结果。

107

6.6正则表达式正则表达式提供了功能强大、灵活而又高效的方法来处理文本。

正则表达式的全面模式匹配表示法使您可以快速地分析大量的文本以找到特定的字符模式；

提取、编辑、替换或删除文本子字符串；将提取的字符串添加到集合以生成报告。对于处理字符串（例如 HTML 处理、日志文件分析和 HTTP

标头分析）的许多应用程序而言，正则表达式是不可缺少的工具。本节只介绍部分正则表达式的字符串匹配及其在RegularExpressionValidator 控件中的使用方法，更多的内容请参看相关资料。

108

6.6.1 书写形式 1) [ ] 用来定义可接收的字符。 2) { } 用来定义必须输入的字符数。 3) | 用来表示“或”。 4) ( ) 表示可以使用括号。 5) \ 表示转义。6.6.2 常用匹配符号 1) · 匹配除 \n 之外的任何字符。 2) [ 指定字符集 ] 匹配指定字符集中包含的任何单个字

符。 3) [^ 指定字符集 ] 匹配不在指定字符集中的任何单个字

符。 4) [0-9a-fA-F] 使用连字号“ –”允许指定连续字符范围。

109

6.6.3 正则表达式的书写举例 1) [a-zA-Z]{4,8} 表示要求 4-8 个英文字母。 2) [^a-zA-Z]{1,} 表示不能包含字母，至少 1 个字符。 3) [0-9]{3,} 表示至少 3 个数字。 4) {3,} 表示至少 3 个字符。 5) [a-zA-Z]{3,} 表示至少 3 个英文字母。 6) .{0,} 表示任意字符。 7) [A-Za-z0-9]{3} 表示 3 个字母或数字，如 123 ， r3a 等。 8) \.{3} 表示 3 个点。 9) .{1,}@ .{3,} 表示 @ 前至少有 1 个字符， @ 后至少有 3 个字符。 10) \( 表示必须输入左括号。 11) \([0-9]{2,3}\)[0-9]{2,4}-[0-9]{4} 表示 2 到 3 个数字放入括号中，其后

是 2 到 4 个数字，后面跟一个减号，最后是 4 个数字。 12) .{0,}河南 .{0,} 表示必须包含有“河南”两个字。

110

6.6.4 在 RegularExpressionValidator 控件中使用正则表达式

1. RegularExpressionValidator 控件的常用属性 1) ControlToValidate 属性：用于指定需要验证的输入控

件。 2) ErrorMessage 属性：表示校验错误时的文本内容。

3) ValidationExpression 属性：指定字段验证模式的正则表达式。

2. 操作示例

111

例 2 ：正则表达式的字符串匹配在 RegularExpressionValidator 控件中的使用方法。

（ 1 ）向设计窗体拖放一个 Label 控件（ Text 属性为“家庭电话”），一个 Button 控件，一个 TextBox 控件，然后在 TextBox 的右边放一个 RegularExpressionValidator 控件。（ 2 ）设置 RegularExpressionValidator 控件的下列属性： ControlToValidate ： TextBox1 Text ：要求格式为“ 1234-1234567” ValidationExpression ： [0-9]{4}-{1}[0-9]{7}（ 3 ）运行，在 TextBox 中输入一些信息，点击 Button 控件，观察结果。

112

6.7 Web服务器验证控件

Web服务器验证控件用于检查用户输入信息是否有效验证控件总是在服务器上执行验证检查，同时还具有完

整的客户端实现如果输入信息有多种限制，可以对该输入信息同时使用

多个验证控件。使用验证控件要注意的是：如果输入控件为空，则验证

控件会认为验证成功。所以一般情况下我们需要同时使用 RequiredFieldValidator 控件要求用户必须输入内容。

113

6.7.1 RequiredFieldValidator 控件

此控件要求指定的输入控件必须修改初始值。1. 常用属性 1) ControlToValidate 属性：用于指定需要验证的输入控

件。 2) Display 属性：表示验证控件中错误信息的显示行为。

其值为： ① None ：验证消息从不内联显示。 ② Static ：在页面布局中分配用于显示验证消息的空

间。 ③ Dynamic ：如果验证失败，将用于显示验证消息的

空间动态添加到页面。

114

2. 操作示例（ 1 ）向设计窗体拖放一个 Label 控件（ Text 属性为“家庭电

话”），一个 Button 控件，一个 TextBox 控件，然后在 TextBox 的右边放一个 RegularExpressionValidator 控件。（ 2 ）设置 RegularExpressionValidator 控件的下列属性： ControlToValidate ： TextBox1 Display ： static Text ：不允许空值（ 3 ）运行，点击 Button 控件，观察结果。

115

6.7.2 CompareValidator1 ．常用属性 1) ControlToValidate 属性：用于指定需要验证的输入控

件。 2) ControlToCompare 属性：指定与所验证的输入控件进

行比较的输入控件。 3) ValueToCompare 属性：指定一个常数值，该值要与

输入到所验证的输入控件中的值进行比较。 4) Operator 属性：指定执行的比较操作。其值如下： ① Equal NotEqual GreaterThan② ③ ④ GreaterThanEqual LessThan⑤ ⑥ LessThanEqual DataTypeCheck ⑦ 5) Type 属性：指定在比较之前将所比较的值转换到的数

据类型。

116

2 ．利用该控件经常进行的验证操作 1) 使用 ControlToValidate 和 ControlToCompare 属

性将一个输入控件（如 TextBox 控件）中的值同另一个输入控件中的值相比较。

2) 使用 ControlToValidate 和 ValueToCompare 属性将一个输入控件（如 TextBox 控件）中的值与某个常数

值相比较。 3) 使用 Operator 属性的 DataTypeCheck 确定输入控

件中的值是否可以转换为 Type 属性所指定的数据类型。

117

举例：（ 1 ）向设计窗体拖放下列控件控件 ID 属性属性值 Label1 Label1 Text 最小年龄 TextBox TextBox1 Label Label2 Text 最大年龄 TextBox TextBox2 Button Button1 Text 确定（ 2 ）在 TextBox1 控件的右边放置 1 个 RegularExpressionValidator 控件，属性为： ControlToValidate ： TextBox1 Display ： static Text ：不允许空值

118

（ 3 ）在 TextBox2 控件的右边放置 1 个 RegularExpressionValidator 控件，属性为： ControlToValidate ： TextBox2 Display ： Dynamic Text ：不允许空值（ 4 ）在 TextBox2 控件的右边、 RegularExpressionValid

ator 控件的上面放置 1 个 CompareValidator 控件，设置属性

为 ControlToValidate ： TextBox2 ControlToCompare ： TextBox1 Display ： Dynamic Operator ： GreaterThan Type ： Integer Text ：必须大于最小年龄（ 5 ）运行，点击 Button 控件，观察结果。

119

6.7.3 RangeValidator 该控件用于验证输入控件值的范围 .1. 常用属性 1) MinimumValue 属性：指定验证范围的最小值。 2) MaximumValue 属性：指定验证范围的最大值。 3) Type 属性：指定比较之前将所比较的值转换到的数据类型。2. 操作示例（ 1 ）向设计窗体拖放 1 个 Label 控件， Text 属性为“成绩”， 1 个 Button 控件， 1 个 TextBox 控件，然后在 TextBox 控件的右边放 1 个 RangeValidator 控件，设置下列属性： ControlToValidate ： TextBox1 MinimumValue ： 0 MaximumValue ： 100 Type ： Integer Text ：范围： 0-100（ 2 ）运行，在 TextBox 中输入值，点击 Button 控件，观察结果。

120

6.7.4 CustomValidator

可以利用该控件使用自定义验证逻辑来控制要验证的控件。例如检查在文本框中输入的值是否为偶数等。使用该控件的步骤：第一步：利用 ServerValidate 事件处理程序的 ServerValidateEventArgs 对象的 Value 属性访问要验证的输入控件的字符串。第二步：将验证结果存储在 ServerValidateEventArgs 对象的 IsValid 属性中。原理：当客户端将数据提交给服务器时，服务器会自动引发 ServerValidate 事件，然后检查 Page.IsValid 属性是否为真，如果该属性不为真，则会自动在页面上显示ErrorMessage 。

121

第三步：通过代码检查 Page.IsValid 属性，从而执行相应的操作。举例：(1) 向设计窗体拖放 1 个 Label 控件， [Text] 属性为 [请输入偶数 ] ，拖放 1 个 TextBox 控件。 1 个 Button 控件。(2) 拖放 1 个 CustomValidator 控件，设置属性为： ControlToValidate ： TextBox1 ErrorMessage ：必须输入偶数(3) 添加 CustomValidator 控件的 ServerValidate 响应事

件：private void CustomValidator1_ServerValidate(object source, Sy

stem.Web.UI.WebControls.ServerValidateEventArgs args){

int i = int.Parse(args.Value);args.IsValid = ((i%2) == 0);

}

122

（ 4 ）添加 Button 控件的 Click 响应事件： private void Button1_Click(object sender, System.Eve

ntArgs e) {

if(Page.IsValid){ Response.Write("<script>window.alert('验

证成功！ )</script>");}

}

（ 5 ）运行，观察结果。

123

6.7.5 ValidationSummary

可以利用 ValidationSummary 控件在某个固定位置显示

Web 页上所有验证控件的错误信息。错误信息显示形式由 DisplayMode 属性的值决定

（列表、项目符号列表或单个段落）。为每个验证控件显示的错误信息是由对应验证控件

的 ErrorMessage 属性指定的。如果某验证控件没有设置 ErrorMessage 属性，则

在 ValidationSummary 控件中将不为该验证控件显示错误信息。

还可以通过设置 HeaderText 属性在 ValidationSummary 控件的标题部分指定一个自定义标题。

124

1. 常用属性 1) DisplayMode 属性：表示验证摘要的显示模式。其值

如下： ① BulletList ：显示在项目符号列表中的验证摘要。

② List ：显示在列表中的验证摘要。 ③ SingleParagraph ：显示在单个段落内的验证摘要。 2) HeaderText 属性：显示在摘要上方的标题文本。2. 操作示例

125

(1) 向设计窗体拖放 2 个 Label 控件， [Text] 属性分别为 [ 姓名 ]和 [ 成绩 ] ，拖放 2 个 TextBox 控件分别放在两个 Label 控件的右边。(2) 在 TextBox1 的右边放 1 个 RequiredFieldValidator 控件，属性为： ControlToValidate ： TextBox1 ErrorMessage ：姓名字段不能为空 Text ： *(3) 在 TextBox2 的右边放 1 个 RequiredFieldValidator 控件，属性为： ControlToValidate ： TextBox2 ErrorMessage ：成绩字段不能为空 Text ： *(4) 再向窗体拖放 1 个 Button 控件。然后在该控件的下面拖放 1个 ValidationSummary 控件，设置属性为： HeaderText ：提示信息(5) 运行，直接点击 Button 按钮，观察结果。

Download ppt - 第六章 设计窗体和控件

Download ppt - 第六章设计窗体和控件