ASP-NET-4.0-基础教程(C#)第三章-Web-控

1、 内容： Web控件类 控件事件 列表控件 表控件 验证控件第3章 ASP.NET服务器控件 一、基本控件 ASP.NET提供了与HTML元素相对应的基本的Web控件，诸如Label、TextBox控件等。 编辑课件一、基本控件 示例: 参考本书例3-1.二、Web控件类 Web控件类都被放置在System.Web.UI.WebControls命名空间下面 。 二、Web控件类 1、基本属性 Web控件的基类WebControl定义了 一些可以应用于几乎所有的Web控件的基本属性，见书中的表3-2. 二、Web控件类 1、基本属性 单位 Web控件提供了诸如Borderwidth、Width和

2、Hight属性来控制控件显示的大小，可以使用一个数值加一个度量单位设置这些属性，这些度量单位包括相素(pixels)、百分比等。在设置这些属性时，必须添加单位符号px(表示相素)或%(百分比)以指明使用的单位类型。 二、Web控件类 1、基本属性 示例:在页面中定义: 在代码中定义:1. TextBox1.Height = Unit.Pixel(20);2. TextBox1.Width = Unit.Pixel(300); 二、Web控件类 1、基本属性 (2)枚举Web控件的一些属性的值只能为类库提供的枚举值 示例:例如，设置一个控件的BackColor的属性，可以从颜色的枚举值中选取一个

3、值:textBox1.BackColor = Color.Red; 1、基本属性 (3)颜色 在.NET框架中，命名空间System.Drawing提供了一个Color对象，使用该对象可以设置控件的颜色属性。创建颜色对象的方式有如下几种：使用ARGB(alpha，red，green，blue)颜色值：可以为每个值指定一个从0到255的整数。其中alpha表示颜色的透明度，当alpha的值为255时表明完全不透明；red表示红色，当red的值为255时表示颜色为纯红色；green表示绿色，当green的值为255时表示颜色为纯绿色；blue表示蓝色，当blue的值为255时表示颜色为纯蓝色。使用

4、颜色的枚举值，可供挑选的颜色名有140个。使用HTML颜色名，可以使用类ColorTranslator把字符串转换成颜色值。 1、基本属性 示例:int alpha = 255,red = 0;green = 255,blue = 0;textBox1.BackColor = Color.FromArgb(alpha,red,green,blue);textBox1.BackColor = Color.Red;textBox1.BackColor = ColorTranslator.FromHtml(“Blue”); 1、基本属性 (4)字体 控件的字体属性依赖于定义在命名空间System.W

5、eb.UI.WebControls中的对象FontInfo，FontInfo提供的属性如下表。 属性说明Name指明字体的名称(例如Arial)。Names指明一系列字体，浏览器会首先选用第一个匹配用户安装的字体。Size字体的大小，可以设置相对值或者真实值。Bold,Italic,Strikeout,Underline,和Overline布尔属性，用来设定是否应用给定的样式特性。编辑课件1、基本属性 示例:/设置按钮Button1的字体属性 Button1.Font.Name = “Verdana”;/设置字体为Verdana Button1.Font.Bold = true;/加粗 But

6、ton1.Font.Size = FontUnit.Small;/设置字体的相对大小 Button1.Font.Size = FontUnit.Point(14);/设置字体的实际大小为14像素 编辑课件二、Web控件的事件 1、事件模型 Web控件的事件的工作方式与传统的HTML标记的客户端事件工作方式有所不同，这是因为HTML标记的客户端事件是在客户端引发和处理的，而ASP.NET页面中的Web控件的事件是在客户端引发，在服务器端处理。 Web控件的事件模型是这样来描述的，客户端捕捉到事件信息，然后通过HTTP POST将事件信息传输到服务器，而且页框架必须解释该POST以确定所发生的事件

7、，然后在要处理该事件的服务器上调用代码中的相应方法。下图描述了Web控件的模型. 二、Web控件的事件 1、事件模型二、Web控件的事件 2、基本的事件 基于以上的事件模型，Web控件事件可能会影响到页面的性能，因此，Web控件仅仅提供有限的一组的事件,如下表所示. 事件支持的控件ClickButton，ImageButtonTextChangedTextBoxCheckedChangedDropDownList，ListBox，CheckBoxList，RadioButtonList编辑课件二、Web控件的事件 3、事件的绑定 在处理Web控件时，需要把事件绑定到方法(事件处理程序)。 一个

8、事件就是一条信息，例如“某按钮被单击”。在应用程序中，必须将信息转换成代码中的方法调用，事件消息与特定方法之间的绑定是通过事件委托来实现的。在ASP.NET页面中，如果控件是以声明的方式在页中创建的，则就不需要显示地对委托进行编码。 二、Web控件的事件 3、事件的绑定 例如把一个Button控件的Click事件绑定到名为ButtonClick的方法，代码如下： 如果控件是被动态创建的，则就需要使用代码动态地绑定事件到方法:Button b = new Button;b.Text = “按钮”;b.Click += new System.EventHandler(ButtonClick); 三

9、、列表控件 1、ListBox控件 ListBox控件用于创建多选的下拉列表，而可选项是通过ListItem元素来定义的。 ListBox控件提供如右表所示的属性1、ListBox控件ListBox控件提供如下表所示的方法例 3-2:页面代码: Page_Load事件函数中的代码:protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) /数据生成 DataSet ds = new DataSet(); ds.Tables.Add(stu); ds.Tablesstu.Columns.Add(stuNo

10、, typeof(int); ds.Tablesstu.Columns.Add(stuName, typeof(string); ds.Tablesstu.Columns.Add(stuScore, typeof(int); ds.Tablesstu.Rows.Add(new object 1, 张一, 100 ); ds.Tablesstu.Rows.Add(new object 2, 王二, 100 ); ds.Tablesstu.Rows.Add(new object 3, 李三, 100 ); ds.Tablesstu.Rows.Add(new object 4, 赵四, 100 );

11、 ds.Tablesstu.Rows.Add(new object 5, 周五, 100 );/绑定数据到ListBox控件 this.ListBox1.DataSource = ds.Tablesstu; this.ListBox1.DataValueField = stuNo; this.ListBox1.DataTextField = stuName; this.ListBox1.DataBind(); 示例:事件： ListBox1_SelectedIndexChanged :protected void ListBox1_SelectedIndexChanged(object sen

12、der, EventArgs e) this.Label1.Text = 你选择的学生是：学号 + this.ListBox1.SelectedValue.ToString() + 姓名 + this.ListBox1.SelectedItem.Text.ToString(); 2、DropDownList控件 DropDownList控件提供可为用户单选的下拉列表框，该控件类似于ListBox控件，只不过它只在框中显示选定项和下拉按钮，而当用户单击下拉按钮时将显示可选项的列表。 2、DropDownList控件DropDownList控件提供如下表所示的属性2、DropDownList控件D

13、ropDownList控件提供如下表所示的方法2、DropDownList控件示例:页面代码: 2、DropDownList控件Page_Load事件函数中的代码:if (!Page.IsPostBack) /数据生成 DataSet ds = new DataSet(); ds.Tables.Add(stu); ds.Tablesstu.Columns.Add(stuNo, typeof(int); ds.Tablesstu.Columns.Add(stuName, typeof(string); ds.Tablesstu.Columns.Add(stuScore, typeof(int);

14、 ds.Tablesstu.Rows.Add(new object 1, 张一, 100 ); ds.Tablesstu.Rows.Add(new object 2, 王二, 100 ); ds.Tablesstu.Rows.Add(new object 3, 李三, 100 ); ds.Tablesstu.Rows.Add(new object 4, 赵四, 100 ); ds.Tablesstu.Rows.Add(new object 5, 周五, 100 ); /绑定数据到ListBox控件 this.DropDownList1.DataSource = ds.Tablesstu; th

15、is.DropDownList1.DataValueField = stuNo; this.DropDownList1.DataTextField = stuName; this.DropDownList1.DataBind(); 3、CheckBoxList控件 CheckBoxList控件用来创建多项选择复选框组，该复选框组可以通过将控件绑定到数据源动态创建。 3、CheckBoxList控件CheckBoxList控件提供如下表所示的属性3、CheckBoxList控件CheckBoxList控件提供如下表所示的方法示例:页面代码 Page_Load事件函数中的代码:if (!Page.

16、IsPostBack) /数据生成 DataSet ds = new DataSet(); ds.Tables.Add(stu); ds.Tablesstu.Columns.Add(stuNo, typeof(int); ds.Tablesstu.Columns.Add(stuName, typeof(string); ds.Tablesstu.Columns.Add(stuScore, typeof(int); ds.Tablesstu.Rows.Add(new object 1, 苹果, 100 ); ds.Tablesstu.Rows.Add(new object 2, 香蕉, 100

17、); ds.Tablesstu.Rows.Add(new object 3, 梨, 100 ); ds.Tablesstu.Rows.Add(new object 4, 哈密瓜, 100 ); ds.Tablesstu.Rows.Add(new object 5, 仙人果, 100 ); /绑定数据到ListBox控件 this.CheckBoxList1.DataSource = ds.Tablesstu; this.CheckBoxList1.DataValueField = stuNo; this.CheckBoxList1.DataTextField = stuName; this.C

18、heckBoxList1.DataBind(); 4、RadioButtonList控件 RadioButtonList控件为网页开发人员提供了一组单选按钮，这些按钮可以通过绑定动态生成。 RadioButtonList控件提供如下表所示的属性4、RadioButtonList控件RadioButtonList控件提供如下表所示的方法示例:页面代码: Page_Load事件函数中的代码:if (!Page.IsPostBack) /数据生成 DataSet ds = new DataSet(); ds.Tables.Add(stu); ds.Tablesstu.Columns.Add(stuN

19、o, typeof(int); ds.Tablesstu.Columns.Add(stuName, typeof(string); ds.Tablesstu.Columns.Add(stuScore, typeof(int); ds.Tablesstu.Rows.Add(new object 1, 乒乓球, 100 ); ds.Tablesstu.Rows.Add(new object 2, 篮球, 100 ); ds.Tablesstu.Rows.Add(new object 3, 排球, 100 ); ds.Tablesstu.Rows.Add(new object 4, 羽毛球, 100

20、 ); ds.Tablesstu.Rows.Add(new object 5, 足球, 100 ); /绑定数据到ListBox控件 this.RadioButtonList1.DataSource = ds.Tablesstu; this.RadioButtonList1.DataValueField = stuNo; this.RadioButtonList1.DataTextField = stuName; this.RadioButtonList1.DataBind(); 四、表控件 表控件可以用来创建类似于HTML标记table的表，但Table控件是可以创建可编程的表，而Table

21、Row和TableCell则为Table控件提供了一种显示实际内容的方法。四、表控件 其实在页面上创建表的方式有很多，常用的有如下三种方式：(1) HTML表，使用标记来创建，这种方式创建的表是静态的表。(2) HtmlTable控件，这个控件其实就是由标记加上runat=server属性转换而来的，允许程序员在服务器代码中对该控件编程。(3) 表控件，作为一种Web控件，它具有和其他Web控件一致的对象模型，这样可以使用服务器代码很方便的创建和操作表。 四、表控件 1、表控件模型 表控件提供了三个类：Table类、TableRow类和 TableCell类。 Table类提供一个名为Row的

22、属性，意为表的行，对应于TableRow类，TableRow类提供名为Cell的属性，意为表的列，对应于TableCell类。 在表控件中，其对象的层次是这样的：首先是表对象(Table)，表对象包含行对象(TableRow)，行对象包含列对象(TableCell)。其中，表要显示的内容则包含在TableCell对象中。 四、表控件 1、表控件模型Table类Table类用来在页面上显示表。 提供如下表所示的属性:四、表控件 1、表控件模型(2) TableRow类TableRow类表示表控件中的行。提供如下表所示的属性:四、表控件 1、表控件模型(3) TableCell类 TableCel

23、l类表示表控件中的单元格。提供如下表所示的属性:四、表控件 2、向页面中添加表控件向页面中添加表控件可分为两个步骤：(1) 添加表。(2) 添加行和单元格。下面通过一个例子来介绍向页面中添加表控件的步骤： (1)从工具箱中把Table控件拖放到页面上。Table控件在页面上最初只显示一个不包含行或列的简单文本框控件。 四、表控件 2、向页面中添加表控件(2) 选择上面添加的表控件，在“属性”窗口中，找到Rows属性，单击其后的省略号按钮，如左图所示，这样会打开“TableRow集合编辑器”窗口，如右图所示。 四、表控件 2、向页面中添加表控件(3) 单击“添加”按钮，则可以添加一个新行，如图所

24、示。 四、表控件 2、向页面中添加表控件(4) 可以通过窗口右边的TableRow属性窗口部分为新添加的行设置相关属性，例如可以设置新行的字体以及显示颜色等显示属性。 (5)向行内添加单元格，则单击Cells属性后面对应的省略号按钮，这样就会出现“TableCelll集合编辑器”窗口，如图所示。 四、表控件 2、向页面中添加表控件(6) 单击“添加”按钮，可以为行添加添加单元格，如图所示。 四、表控件 2、向页面中添加表控件(7) 添加完行以及对应的单元格后，单击“确定”按钮即可。 经过以上几步,可得如下图所示的表 。四、表控件 3、动态操作表控件 在前面已经介绍在.NET框架中，为表控件提供

25、的支持的有三个类：Table类、TableRow类和TableCell类。其中，Table控件是Table类的对象，Table控件的行是TableRow类的对象，而Table控件的行的单元格是TableCell类的对象。 这样若要向Table控件中插入行，就可以向Table控件的Rows属性中添加TableRow类的对象即可，而若要添加单元格，则向TableRow对象的Cell属性中添加TableCell对象即可。 四、表控件 3、动态操作表控件 向Table控件中添加行:TableRow tRow = new TableRow();/声明一个TableRow对象Table1.Rows.Add

26、(tRow);/Table1表示一个Table控件 向Table控件中添加单元格 :TableCell tCell = new TableCell();tRow.Cells.Add(tCell); 五、验证控件 1、RequiredFieldValidator控件 RequiredFieldValidator控件的功能是指定用户必须为某个在ASP.NET网页上的特定控件提供信息，比如在登陆一个网站时，用户名不能为空，此时就可以利用RequiredFieldValidator控件绑定到用户名文本框，当用户名为空时RequiredFieldValidator控件就会弹出“用户名为空”的提示信息。五

27、、验证控件 1、RequiredFieldValidator控件属性如下表:五、验证控件 1、RequiredFieldValidator控件示例:当登陆一个网站时，用户名一般不能为空，这里通过RequiredFieldValidator控件来控制用户名不能为空。 页面代码: 用户名 运行效果五、验证控件 2、CompareValidator控件 CompareValidator控件的功能是验证某个输入控件里输入的信息是否满足事先设定的条件。比如当输入某种商品的价格时，希望用户输入的值大于0，这样利用CompareValidator控件绑定到商品价格文本框，并设置适当条件来控制操作人员的误输入

28、小于0的数值。 属性如下页表:五、验证控件 2、CompareValidator控件 示例:在一个超市的商品价格管理系统中，对于商品的价格输入会加以控制，以使小于0的价格不会被录入到数据库中，这就可以利用CompareValidator控件来加以控制。 页面代码: 价格 运行效果五、验证控件 3、RangeValidator控件 RangeValidator控件的功能是验证用户对某个文本框的输入是否在某个范围之内，如输入的数值是否在某两个数值之间，输入的日期是否在某两个日期之间等。属性如下表:五、验证控件 3、RangeValidator控件示例:在一个超市的商品价格管理系统中，对于商品的价格

29、输入会加以控制，以使小于0的价格不会被录入到数据库中，这就可以利用CompareValidator控件来加以控制。 页面代码: 价格 运行效果五、验证控件 4、RegularExpressionValidator控件 RegularExpressionValidator控件的功能是验证用户输入的数据是否符合规则表达式预定义的格式，如输入的数据是否符合电话号码、电子邮件等的格式。规则表达式一般都是利用正则表达式来描写，因此如果想要利用这个的话，读者需要了解一些有关正则表达式的知识。不过如果读者对正则表达式没有一点知识基础的话也没有关系，因为很多常用格式的正则表达式都可以在网上查询到的，如中国国内

30、电话号码的格式是(d3)|d3-)?d8。 属性如下表:4、RegularExpressionValidator控件五、验证控件 4、RegularExpressionValidator控件示例:在用户填写注册信息时有时要求用户输入电话号码，为了保证用户输入的格式正确性，就可以利用RegularExpressionValidator控件来进控制。 页面代码: 电话号码 运行效果五、验证控件 5、CustomValidator控件 CustomValidator控件的功能是能够调用程序员在服务器端编写的自定义验证函数。有时使用现有的验证控件可能满了程序员的需求，因此有时可能需要程序员自己来编写验

31、证函数，而通过CustomValidator控件的服务器端事件可以该验证函数绑定到相应的控件。 五、验证控件 5、CustomValidator控件示例:在用户登陆时，执行身份验证过程其实也是一个验证控件可以做到的，这里利用CustomValidator控件自定义验证过程可以实现。这个例子包括一个用户名输入文本TextBox1一个密码输入文本框TextBox2，一个CustomValidator控件CustomValidator1和一个Button控件。设置CustomValidator1的ControlToValidate为TextBox2，ErrorMessage为“用户名或密码不正确”，Display为Dynamic，ValidationEmptyText为true， 页面代码见本书程序清单3.25.运行效果六、Rich控件 1、Calendar控件Calendar控件用来在Web页面中显示日历中的可选日期，并显示与特定日期关联的数据。使用Calendar控件可以执行完成如下的功能：与用户交互，例如在用户选择一个日期或一个日期范围时显示相