第四章Web服器控件课件.ppt

《第四章Web服器控件课件.ppt》由会员分享，可在线阅读，更多相关《第四章Web服器控件课件.ppt（38页珍藏版）》请在三一办公上搜索。

1、第4章 Web服务器控件,第4章 Web服务器控件,第4章 Web服务器控件,4.1 服务器控件概述4.2 基本控件4.3 复杂控件本章小结,第4章 Web服务器控件 4.1 服务器控件概述,4.1 服务器控件概述,4.1.1 理解服务器控件在ASP.NET中，我们可以把一切都视为对象，包括每一个WEB页面。同时，我们可以把WEB页面看作一种特殊的对象，即容器类对象，它可以容纳很多对象，其中就包括服务器控件（Server Controls）。服务器控件（Server Controls）就是一个可重用的组件或对象，具有自己的属性和方法，大部分组件还可以响应事件。这些控件在初始化时会根据客户端的浏

2、览器的版本来自动生成适合浏览器的HTML代码，这就解决了ASP编程时要考虑客户端浏览器的问题。,4.1 服务器控件概述 4.1.1 理解服务器控件,4.1 服务器控件概述,4.1.2 服务器控件的种类1.服务器控件的分类在ASP.NET网页的服务器端的控件可以分为四类，他们分别是HTML服务器控件、Web服务器控件、验证控件和用户自定义控件，本书主要介绍前三类控件。这些控件都可以称为服务器控件，因为只有在服务器端的环境下才能正常工作。当用户请求包含这些控件的网页时，被请求的网页首先在服务器端执行，以生成HTML代码，在客户端的浏览器中显示执行的结果。此外，服务器端控件的某些高级功能必须在特定浏

3、览器中才能正常运行。例如：有些功能必须在IE5以上版本的浏览器上方可运行。,4.1 服务器控件概述4.1.2 服务器控件的种类,4.1 服务器控件概述,4.1.2 服务器控件的种类2.Web服务器控件的分类Web服务器控件拥有比HTML服务器控件更多的功能，拥有类似XML的语法，而且使用规则与Visual Basic控件的使用规则类似。它不只提供文本与按钮等窗体类型的控件，还提供了诸如DataGrid、DataList、AdRotator、Calendar等特殊用途的控件。,返回,4.1 服务器控件概述4.1.2 服务器控件的种类返回,4.2 基本控件,4.2.1 使用标签控件标签（Label

4、）控件用于在Web页面上显示静态文本。标签控件的主要属性如表4-2所示。,4.2 基本控件4.2.1 使用标签控件,表4-2 标签控件的主要属性,属性功能BackColor指定标签控件的背景色BorderC,4.2.1 使用标签控件,例4-1 利用Label控件显示文本“欢迎光临本网站”具体操作步骤如下：1）启动Microsoft Visual Studio.NET。2）单击“文件”“新建”“项目”菜单，弹出如图4-1所示对话框。在“项目类型”列表框中选择“Visual C#”项目；在“模板”列表中选中“ASP.NET Web应用程序”；在位置框中，将项目的名称设置为example1，单击“确

5、定”按钮。,4.2.1 使用标签控件例4-1 利用Label控件显示文,4.2.1 使用标签控件,3）在“解决方案资源管理器”窗口中的项目名称“example1”上单击右键，在快捷菜单中单击“添加”“添加Web窗体”菜单，弹出对话框，输入页面名称Label1.aspx。然后单击“打开”按钮即可。4）在Web窗体中默认的是设计视图，在设计视图中可以添加任意控件，而在HTML视图中会自动生成相应的代码。在工具箱中单击“Web窗体”选项卡，从中拖入一个Label控件，并放在页面中合适的位置。其ID属性设为LA，Text属性设为“欢迎光临本网站”。再利用Font属性设置字体和大小。,4.2.1 使用标

6、签控件3）在“解决方案资源管理器”窗口中,4.2.1 使用标签控件,5）在“解决方案资源管理器”窗口中的Label1.aspx文件上单击右键，在快捷菜单中单击“设为起始页”，然后单击工具栏上的“启动”按钮运行程序。,4.2.1 使用标签控件5）在“解决方案资源管理器”窗口中,4.2.2 使用选择控件,在选择类控件中我们分别讲解CheckBox控件和RadioButton控件。1.CheckBox控件CheckBox控件用于建立复选框。当用户需要一个或多个选项时，就应使用复选框。CheckBox控件的主要属性如表4-3所示：,4.2.2 使用选择控件在选择类控件中我们分别讲解Chec,表4-3

7、CheckBox控件的主要属性,表4-3 CheckBox控件的主要属性属性功能AutoPo,表4-4 CheckBox控件的主要事件,表4-4 CheckBox控件的主要事件事件功能Checke,4.2.2 使用选择控件,例4-2 利用CheckBox控件来实现多选。具体操作步骤如下：1）在例4-1中创建的项目“example1”中再添加一个新的窗体CheckBox1.aspx。2）在CheckBox1.aspx的网页“设计”视图下，向该窗体拖入三个CheckBox控件，ID分别设置为CB1、CB2、CB3，Text属性分别设为“体育”、“财经”、“娱乐”，再拖入一个标签控件，ID设为LA1

8、，Text属性设为“你喜欢的是：”，最后再拖入一个Button按钮控件，ID设为BN1，Text属性设为“选择”。,4.2.2 使用选择控件例4-2 利用CheckBox控件,4.2.2 使用选择控件,3）在“设计”视图中双击按钮控件BN1，则在代码文件中的Click事件中添加如下程序代码：private void BN1_Click(object sender,System.EventArgs e)LA1.Text=”你选择的是：”;if(CB1.Checked)LA1.Text+=CB1.Text+“”;if(CB2.Checked)LA1.Text+=CB2.Text+“”;if(CB3

9、.Checked)LA1.Text+=CB3.Text+“”;注意：关于Button按钮控件的具体用法在下一节中会详细介绍。另外程序中的标点符号要采用英文状态下的标点符号。,4.2.2 使用选择控件3）在“设计”视图中双击按钮控件B,4.2.2 使用选择控件,4）在“解决方案资源管理器”窗口中的CheckBox1.aspx文件上单击右键，在快捷菜单中单击“设为起始页”，然后单击工具栏上的“启动”按钮运行程序。,4.2.2 使用选择控件4）在“解决方案资源管理器”窗口中,4.2.2 使用选择控件,2.RadioButton控件RadioButton控件用于建立单选按钮。当用户需要从多个选项中选取

10、一项时，就应使用该控件。单选按钮的主要属性与CheckBox控件的属性差不多，但因为同组单选按钮之间具有互斥性，所以就多了一个GroupName的属性，用来指明多个按钮是否在同一组中，即同一组中的单选按钮只能有一个被选中。下面来看一个例子。,4.2.2 使用选择控件2.RadioButton控件,4.2.2 使用选择控件,例4-3 利用RadioButton控件来实现单选。具体操作步骤如下：1）在例4-1中创建的项目“example1”中再添加一个新的窗体RadioButton1.aspx。2）在RadioButton1.aspx的网页“设计”视图下，向该窗体拖入两个RadioButton控件

11、，ID分别设置为RB1、RB2，Text属性分别设为“男”、“女”，GroupName属性都设置为Sex；再拖入一个标签控件，ID设为LA1，Text属性设为“你选择的是：”；最后再拖入一个Button按钮控件，ID设为BN1，Text属性设为“选择”。,4.2.2 使用选择控件例4-3 利用RadioButto,4.2.2 使用选择控件,3）在“设计”视图中双击按钮控件BN1，则在代码文件中的Click事件中添加如下程序代码：private void BN1_Click(object sender,System.EventArgs e)if(RB1.Checked)LA1.Text=“你选择

12、的性别是：”+RB1.Text;if(RB2.Checked)LA1.Text=“你选择的性别是：”+RB2.Text;4）在“解决方案资源管理器”窗口中的RadioButton1.aspx文件上单击右键，在快捷菜单中单击“设为起始页”，然后单击工具栏上的“启动”按钮运行程序。,4.2.2 使用选择控件3）在“设计”视图中双击按钮控件B,4.2.3 使用按钮控件,Button按钮控件是最常用的服务器控件之一，使用该控件的目的是让用户根据内容作出选择或判断，达到与用户交互的目的。Button按钮控件的主要属性除了常见的属性之外还有CauseValidation属性，它是用来控制该按钮是否导致激发

13、验证。Button按钮控件的主要事件就是Click事件，就是用户按下该按钮以后将会触发的事件。常常用来完成文本的显示、表单的提交或选择的确认等。下面来看一个例子。,4.2.3 使用按钮控件,4.2.3 使用按钮控件,例4-4 利用前面所学的几个控件来设计一个简易的留言板。具体操作步骤如下：1）在例4-1中创建的项目“example1”中再添加一个新的窗体Memory.aspx。2）在Memory.aspx的网页“设计”视图下，向该窗体拖入四个标签控件，ID分别为LA1、LA2、LA3和LA4，Text属性分别为“留言板”、“用户名”、“留言”和空；再向该窗体拖入两个RadioButton控件，

14、ID分别设置为RB1、RB2，Text属性分别设为“男”、“女”，GroupName属性都设置为Sex；再拖入一个Button按钮控件，ID设为BN1，Text属性设为“提交”。最后再向该窗体拖入两个TextBox文本框控件，ID分别为TB1、TB2，其中TB2的TextMode的属性设置为MultiLine，Columns和Rows的属性设置为40和5。,4.2.3 使用按钮控件例4-4 利用前面所学的几个控件来,4.2.3 使用按钮控件,3）在“设计”视图中双击按钮控件BN1，则在代码文件中的Click事件中添加如下程序代码：private void BN1_Click(object se

15、nder,System.EventArgs e)LA4.Text=“用户”+TB1.Text+“的留言是：”+TB2.Text;4）在“解决方案资源管理器”窗口中的Memory.aspx文件上单击右键，在快捷菜单中单击“设为起始页”，然后单击工具栏上的“启动”按钮运行程序，在输入用户名和留言之后单击“提交”按钮，在下方就可以看到用户的留言。,4.2.3 使用按钮控件3）在“设计”视图中双击按钮控件B,4.2.4 使用容器控件,容器类控件是作为其他控件的容器来使用的，包括Panel控件和PlaceHolder控件。Panel控件通常用于显示或隐藏一组控件，PlaceHolder控件用于事先在页面

16、中保留一个位置以便动态增加控件。在本小节中以Panel控件为例讲解一下容器控件的使用方法。Panel控件的主要属性如表4-5所示。,4.2.4 使用容器控件容器类控件是作为其他控件的容器来使,表4-5 Panel控件的主要属性,表4-5 Panel控件的主要属性 属性功能BackImag,4.2.4 使用容器控件,例4-5利用Panel控件和LinkButton按钮控件来显示和隐藏图片。具体操作步骤如下：1）在例4-1中创建的项目“example1”中再添加一个新的窗体Panel1.aspx。2）在Panel1.aspx的网页“设计”视图下，向该窗体拖入一个Image控件（ImageUrl属性

17、设为“image1.jpg”，Width属性设置为“200px”）；再向该窗体拖入一个Panel控件（ID设置为PA1，HorizontalAlign属性分别为“Left”，ForeColor属性设置为#FFC0C0）；最后再拖入一个LinkButton控件（ID设置为LB1，Text属性分别设为“隐藏图片”）。,4.2.4 使用容器控件例4-5利用Panel控件和Lin,4.2.4 使用容器控件,3）在“设计”视图中双击LinkButton按钮控件LB1，则在代码文件中的Click事件中添加如下程序代码：private void LB1_Click(object sender,System.

18、EventArgs e)if(PA1.Visible=true)PA1.Visible=false;LB1.Text=”显示图片”;,4.2.4 使用容器控件3）在“设计”视图中双击LinkB,4.2.4 使用容器控件,else PA1.Visible=true;LB1.Text=”隐藏图片”;4）在“解决方案资源管理器”窗口中的Panel1.aspx文件上单击右键，在快捷菜单中单击“设为起始页”，然后单击工具栏上的“启动”按钮运行程序，当单击LinkButton按钮时就会显示和隐藏图片，并且按钮的文字也会动态改变。,返回,4.2.4 使用容器控件else返回,4.3 复杂控件,4.3.1 使

19、用AdRotator广告控件4.3.2 使用Calendar日历控件,4.3 复杂控件4.3.1 使用AdRotator广告控,4.3.1 使用AdRotator广告控件,AdRotator广告控件用于制作一些横幅广告，可以随机的显示广告集中的某一条广告。单击某一幅广告图像时会定位到一个新的Web地址中。AdRotator广告控件使用单独的XML公布文件存储公布信息，如要显示图像的位置以及要链接到页的URL。AdRotator广告控件的AdvertisementFile属性指定该文件的路径。AdRotator广告控件的主要属性如表4-6所示：,4.3.1 使用AdRotator广告控件AdRo

20、tato,表4-6 AdRotator广告控件的主要属性,表4-6 AdRotator广告控件的主要属性 属性功能Ad,4.3.1 使用AdRotator广告控件,首先建立XML文档名称为ad.xml内容如下：sina.gif 新浪 新闻 30,4.3.1 使用AdRotator广告控件首先建立XML文,4.3.1 使用AdRotator广告控件,.gif 搜狐 新闻 60,4.3.1 使用AdRotator广告控件,4.3.1 使用AdRotator广告控件,下面建立AdRotator1.aspx文件用于显示页面广告的代码。广告控件的使用,返回,4.3.1 使用AdRotator广告控件下面

21、建立AdRo,4.3.2 使用Calendar日历控件,Calendar控件为设计者提供了一种极为方便的在Web窗体页中显示一个月历的方法，并且该月历允许用户选择日期和移动到下一个月或上一个月。,4.3.2 使用Calendar日历控件,4.3.2 使用Calendar日历控件,例4-6 利用Calendar控件实现日期的选择具体操作步骤如下：1）在例4-1中创建的项目“example1”中再添加一个新的窗体Calendar1.aspx。2）在Calendar1.aspx的网页“设计”视图的工具箱中单击“Web窗体”选项卡，从工具箱中向设计视图中拖入Calendar控件，ID设置为Calend

22、ar1，两个Label控件，ID分别设为LA1、LA2，LA1的Text属性设置为“日历示例”，Calendar控件的其他属性的设置见表4-10。,4.3.2 使用Calendar日历控件例4-6 利用Ca,表4-10 Calendar控件属性的设置,表4-10 Calendar控件属性的设置属性设置值Firs,4.3.2 使用Calendar日历控件,3）双击该Calendar控件，则在Calendar1.aspx.cs中自动添加了此控件的SelectionChanged事件。在该事件中请添加如下代码：private void Calendar1_SelectionChanged(objec

23、t sender,System.EventArgs e)LA2.Text=”你选中的日期是：”+Calendar1.SelectedDate.Year+”年”+Calendar1.SelectedDate.Month+”月”+Calendar1.SelectedDate.Day+”日”;4）在“解决方案资源管理器”窗口中的Calendar1.aspx文件上单击右键，在快捷菜单中单击“设为起始页”，然后单击工具栏上的“启动”按钮运行程序，当你选中日历中的某个日期时，下方的标签中就会显示你所显示的日期。,返回,4.3.2 使用Calendar日历控件3）双击该Cale,小 结,在本章课程中重点介绍了Web服务器控件的使用。通过本章的学习，读者可以对Web控件的整体概况有了比较全面的了解。在本章的前半部分对Web基本控件通过举例进行了详细的介绍，在本章的后半部分介绍了两个常用的复杂控件。由于篇幅所限不能对所有的Web控件进行介绍，如果读者想继续了解其他Web控件请查阅有关技术资料。,结束,小 结在本章课程中重点介绍了Web服务器控件的使用。通过,