《ASP.NET网页开发实用教程 教学课件 ppt 作者 陈运海 电子教案 第4章》由会员分享，可在线阅读，更多相关《ASP.NET网页开发实用教程 教学课件 ppt 作者 陈运海 电子教案 第4章（74页珍藏版）》请在金锄头文库上搜索。
1、ASP.NET网页开发实用教程,Title slide,2,第4章 特殊WEB服务器控件的应用,本章应知 1. 几种特殊服务器控件的特点 2. 一般控件和特殊控件结合使用的方法 本章应会 1. 使用基本控件和特殊控件制作动态广告条 2. 表格控件的综合应用 3. 制作网站中的日历 4. 数据显示控件的使用,3,4.1特殊服务器控件的应用概述,我们在前面的章节已经学习过了一些ASP.NET的基本控件以及它们的使用方法，接下来要学习的是在ASP.NET中的一些较为复杂而且使用频率较高的特殊控件。这些控件往往同许多基本的Web控件和HTML控件结合使用，来完成一些较为复杂或功能较强的操作。它们往往使
2、我们的系统或页面更加规范、美观，功能更加完善、强大。下面我们就来一步步学习这些特殊服务器控件的使用方法。,4,4.2 项目1 动态广告条的制作,我们常常可以在各类网站上看到动态的广告条。即每次将该页面加载到浏览器中时，都会从预定义列表中随机选择一个广告，展示在浏览者的眼前。这使得我们的网站显得生机勃勃，变化多端。而达到这种效果实际上主要采用了ASP.NET中的一种特殊控件“AdRotator”。下面我们就来制作一个动态的广告条。要求如下： （1）最终效果如图4-1、图4-2、图4-3所示。三个画面轮流切换，呈现出一种动态的广告效果。,5,图4-1第一时间画面,6,图4-2第二时间画面,7,图4
3、- 3 第三时间画面,图4- 3 第三时间画面,图4-3 第三时间画面,8,（2）当点击其中一个广告条的时候，页面就会链接到相关的网站上，如图4-4所示。,图4-4 点击广告条链接到微软网站,9,4.2.1 任务1 储备广告条所需图片,“工欲善其事，必先利其器”，我们首先要把手头上的资料准备好。我们需要三个广告图片，分别让它们链接到微软、网易和搜狐三个网站上。图片的规格大致为45080或者47060，最好为gif格式，并分别将它们命名为banner1 、banner2、 banner3，如图4- 5所示。,10,图4-5 banner1、banner2、banner3,11,4.2.2 任务2
4、 使用Form 控件和AdRotator控件制作动态广告条页面,使用Form 控件和AdRotator控件制作动态广告条页面的操作步骤如下： （1）我们需要使用一个表单（Form 控件）将动态广告条放置在其中，制作代码如下： ,12,(2) 使用AdRotator控件调用外部XML文件。与ASP 3.0所不同的是，在ASP.NET中，AdRotator控件调用的是外部XML文件而不再是普通的文本文件，这样不论从安全性或是传输效率都有了显著提高。 我们将AdRotator控件放置在表单（Form 控件）中，制作代码如下： 在这里我们将调用一个外部的Ads.xml文件。外部文件Ads.xml在下面
5、的叙述中会给出其内容。 （3）为页面添加说明文字。为了便于网页浏览者浏览，我们为这个页面上加上一句说明性的话“动态广告条示例”，我们使用文本Lable控件，制作代码如下： 动态广告条示例 ,13,4.2.3 任务3 制作ads.xml 文件中的轮换时间表,XML文件的结构在第9章有专门介绍，这里只是用它来与组件AdRotator配合使用。表示所使用的XML规范与1.0版本兼容，所使用的编码gb2312。每一显示广告切换画面用之间的内容来定义。所有的切换画面均位于。,14,表4- 1 广告控件所用到的属性,表4-1 广告控件所用到的属性,15,在ASP3.0中存在着AdRotator组件，它可以
6、在页面中生成动态的广告条，并可以自由的设置各广告条的显示比例。而在我们ASP.NET中也同样存在AdRotator，不过在ASP.NET中AdRotator是以控件形式存在的，而它读取的数据也不再是简单的文本文件了，而是网络上流行的XML文件。 伴随着这一系列的改良，AdRotator功能变得更加规范，更加强大了，已经逐渐成为.NET开发者们比较青睐的一个特殊控件了！,16,4.3 项目4 动态生成的表格,在我们进行Web设计时，Table控件（表格）是一个十分常用的工具，它可以为我们合理的放置各式各样的数据元素，诸如文字数据、图像数据、字符数据等；它往往可以使我们的页面更为规范美观、结构更为
7、紧凑合理。但在实际的操作中，我们往往需要根据数据的改变而适当的调整表格的区域，这往往是一个比较麻烦的过程，因此，我们通常需要通过一些其他简单控件的组合使用，来方便的操作表格，使之能够动态的、及时的为我们服务，下面我们看这样一个相关的实例。,17,效果描述如下： （1）表格的初始状态，如图4-6所示。,图4-6表格的初始状态,18,（2）通过选择两个下拉列表，来决定需要生成怎样的表格，如图4-7所示。,图4-7 控制表格的行和列,19,（3）点击按钮“生成表”，根据下拉列表中的条件动态生成表格，如图4-8所示。,图4-8 生成符合条件的表格,20,4.3.1 任务1 使用基本的表单控件制作表格条
8、件,在这里，我们使用服务器控件中的3个基本控件：Form、Button、 DropDownList来设置生成动态表格的选择条件。 制作表格条件操作步骤如下： (1)首先我们需要使用一个表单（Form 控件）将所有的服务器控件都放置在其中。 (2）接着我们使用下拉列表“DropDownList”来控制表格的行和列，这里我们将下拉列表的长度定为4，即下拉列表中的选项只为“1、2、3、4”。,21,（3）设置初始表格。我们在表单中还要制作一个初始表格，即在无任何选择条件时屏幕上的表格为一个1行1列只有一个单元格的表格；同时我们还可以稍微调整一下表格的属性，如字体设置为“宋体”（Font-Name=“
9、宋体“），字体大小为“9pt”（Font-Size=“9pt“），单元格边距为“5”（CellPadding=5），单元格间距为“0”（CellSpacing=0），表格边框大小为“1”（BorderWidth=“1“），表格边框颜色为“黑”（BorderColor=“black“）。网格中的水平线和垂直线都显示（Gridlines=“Both“）。,22,（4）为表单添加说明和提交按钮。我们使用Label控件为表单添加一个说明： 动态生成表格 再设置提交按钮，代码如下： ,23,4.3.2 任务2 将表格和其他表单元素关联起来,“万事具备，只欠东风”，现在我们通过C#语言将动态表格和表单控件
10、联结起来，使他们之间形成关系，让表格随着表单元素的变化而转变 我们来简单分析一下上述程序： 首先，程序第一步就将表格的行数和列数用两个整型变量储存起来，即“int numrows”和“int numcells”；接着，将它们与表单中的两个下拉列表“DropDown1”和“DropDown2”关联连起来，“int numrows = int.Parse(DropDown1.SelectedItem.Value);” 和“int numcells = int.Parse(DropDown2.SelectedItem.Value);” 再接着使用了一个双重循环嵌套结构，依次由行到列的生成出根据条件而
11、变化的表格。,24,在上面的实例中，我们实际上还特别的使用了Table控件中的TableRow和TableCell两个子控件，通过将它们与其它常规控件一起结合使用，可以大大提高我们Web制作的灵活性，使我们的页面功能更加强大!,25,4.4 项目3 制作电子日历,在其他动态Web技术中设计一个日历是一个很麻烦的工程，往往需要使用很多技术，考虑很多问题。而在ASP.NET中，设计一个日历却是一个非常简单的事情，它往往只需要一个特殊控件Calendar就可以了。在第1章已经介绍了一个简单日历显示的网页，下面的实例是在此基础上增加一些功能。,26,4.4.1 任务1 制作一个最简单的日历,实际上，在
12、这里我们只需要一句代码就可以完成我们这个任务，代码如下： 当我们将上面的代码加入到某一页面的表单中时，页面上就会出现如图4-9所示。此网页的详细代码见第1章。,27,图4-9最简单的日历,28,4.4.2 任务2 为日历添加日期选择模式,Calendar支持四种日期选择模式，如表4-2所述。,表4- 2 Calendar支持的日期选择模式,29,下面的示例说明 Calendar 控件的模式选择。 （1）初始状态，如图4-10所示。,图4-10 选择日期模式初始状态,30,（2）选择“日”，如图4-11所示。,图4-11 选择“日”模式,31,（3）选择“日/周”，如图4-12所示。,图4-12
13、 选择“日/周”模式,32,（4）选择“日/周/月”，如图4-13所示。,图4-13 选择“日/周/月”模式,33,制作一个日历操作步骤如下：,（1）使用文本控件（Label）、表单控件（Form）和下拉列表控件（DropDownList）制作日历显示方式选择器。 （2）在表单“Form”中添加Calendar控件，并将其的选择变化关联到“Date_Selected”。 （3）使用C#脚本将表单中的各个控件关联起来。 在这里，我们定义了一个Date_Selected函数，通过它与Calendar控件相关联。在这个函数中，我们使用了“switchcase”选择结构，当下拉列表“DropDownL
14、ist”的值变化时，通过文本“Label1”反映出相应的情况。,34,4.4.3 任务3 向日历中添加自定义内容,在我们日常使用的日历中，往往会在一些特定的日期上出现一些提示性的文字，提醒人们这些日期的特别，如1月1日元旦、5月1日劳动节等等，我们能不能制作一个带有文字提醒的电子日历呢，答案是肯定的，下面我们就来制作一个这样的电子日历。最终效果如图4- 14所示。,35,图4-14 日历网页,36,向日历中添加自定义内容的操作步骤如下：,（1）使用文本控件（Label）、表单控件（Form）制作日历。 （2）添加日历控件（Calendar），并将日历通过“Date_Selected”关联 (3
15、)我们为日历添加节日信息 (4)定义函数Date_Selected将日历控件“Calendar”与文本控件“Lebel”关联起来。 Calendar控件是一个很实用的工具，它往往和其他控件结合在一起，就能发挥很大的作用，使我们的Web设计更加完善。,37,4.5 项目5 数据列表显示控件的应用,ASP.NET提供了DataGrid、DataList、Repeater三个Web服务器控件，可以方便地进行数据显示。 4.5.1任务1 DataGrid控件的应用 DataGrid 控件显示表格数据而且还可以支持数据的选择、排序、分页及编辑。默认情况下，DataGrid 为数据源 (AutoGener
16、ateColumns=true) 中的每个字段生成一个 BoundColumn。数据中的每个字段按照在数据中出现的顺序呈现在单独的列中。字段名称显示在网格的列标题上，而值呈现在文本标签中。默认格式应用于非字符串值。,38,（1）简单 DataGrid 控件的使用,下面的示例说明简单 DataGrid 控件的使用。通过定义DataGrid 控件所显示的内容，以及控件中所显示的样式来呈现如图4- 15所示的效果。,39,图4-15 简单 DataGrid 控件的使用,40,通过直接处理网格的列集合，可以控制各个列的顺序、行为和呈现。标准列类型 (BoundColumn) 在文本标签中呈现值。网格还支持以不同方式呈现的其他列类型。任何列类型都可以与 DataGrid 的列集合一起使用。 请注意，显式声明的列和自动生成的列 (AutoGenerateColumns=true) 可以一起使用。当二者一起使用时，列集合中显式声明的列将首先呈现，然后才呈现自动生成的列。自动生成的列不添加到列集合中。如表4-
