第4章构建基本Web页面.ppt

1、第4章 构建基本Web页面,第4章 构建基本Web页面,4.1 服务器控件概述 4.2 显示文本信息 4.3 提交页面 4.4 收集用户输入信息 4.5 显示图像 4.6 列表显示 4.7 超级链接,4.1 服务器控件概述,4.1.1 服务器控件基本知识 ASP.NET服务器控件封装了页面元素，以及能够完成相关功能并且运行在服务器端的对象。 ASP.NET服务器控件分为： HTML服务器控件 Web 服务器控件 验证控件 用户控件 Web部件 AJAX控件,4.1.2 HTML服务器控件,HTML服务器控件是与HTML标记相对应的服务器端控件，具有属性、方法和事件，可以对其编程，从而解决了无法

2、利用程序直接控制HTML标记的问题。 任何HTML标记可以通过添加属性runat=“server”和id转换为 HTML服务器控件。例如， ,4.1.2 HTML服务器控件,4.1.3 Web服务器控件,1. Web服务器控件的共有属性 Attributes：获取服务器控件标记上表示的所有属性名称和值对的集合。只能在编程时使用此属性。 BackColor：控件的背景色。 BorderStyle：控件的边框样式。 CssClass：分配给控件的级联样式表 (CSS) 类。 Style：为控件设置CSS样式属性。 Enabled：控件是否被禁用。 Font控件：显示的字体。 ForeColor：控

3、件的前景色。,4.2 显示文本信息,4.2.1 Label控件 用于在页面上显示静态文本。语法格式为： 1. 显示静态文本 使用Text属性指定要在控件中显示的内容，例如， 例4-1 显示当前日期,4.2.2 Literal控件,在页面上显示静态文本。语法格式： Mode属性：决定是否编码其输出。取值为： PassThrough：直接显示控件内容而不进行编码。 Encode：先编码，然后再显示控件内容。 Transform：直接删除设备（例如手机）不支持的标记，然后再显示控件内容。 例4-2 获取用户IP地址，并用Literal控件显示该IP地址,4.3 提交页面,三个用于向服务器提交页面的控

4、件：Button、LinkButton和ImageButton控件。 4.3.1 Button控件 显示一个按钮，默认为提交按钮。利用提交按钮可以向服务器端提交整个页面。语法格式： ,4.3.1 Button控件,1. Click事件 当点击按钮时，引发Click事件。 与之相关的事件处理过程： void Submit_Click(Object sender, EventArgs e) lblMsg.Text=Hello ASP.NET; ,4.3.1 Button控件,2. Command事件 如果希望页面上的按钮共用一个事件处理过程，则可以使用Command事件。 如何区分用户点击了哪个按

5、钮？ 使用CommandName属性。CommandArgument属性可以向Command事件处理过程传递附加信息 例4-3 简易四则运算器,4.3.1 Button控件,3. 引发客户端按钮单击事件 控件的OnClientClick属性允许我们添加JavaScript代码，当单击按钮时，就会在客户端运行这些代码。 例4-4 利用OnClientClick属性弹出确认框,4.3.2 LinkButton控件,与Button控件类似，但它的外观显示为超级链接，而不是按钮。 在单击LinkButton时，引发Click事件，而不是超级链接的页面跳转。 语法格式： 控件的属性、方法和事件与Butt

6、on控件完全相同，使用方法也一样。,4.3.3 ImageButton控件,与Button控件类似，但使用定制的图像作为按钮的外观。语法格式： ImageUrl属性：指定所使用的图像。 控件的事件处理过程：第二个参数类型为ImageClickEventArgs，它提供鼠标单击处的坐标（e.X和e.Y）。 例4-5 文本编辑器,4.4 收集用户输入信息,4.4.1 TextBox控件 用于显示单行文本框、多行文本框和密码框。语法格式为： ,4.4.1 TextBox控件,1. 设置显示模式 TextMode属性： SingleLine：显示为单行文本框，此为默认值； MultiLine：显示为多

7、行文本框； Password：显示为密码框。 例如， ,4.4.1 TextBox控件,2. 获取控制焦点 使用Focus方法，可以使文本框获得控制焦点。例如， protected void Page_Load(object sender, EventArgs e) TextBox1.Focus(); 3. 设置是否自动换行 当TextBox控件显示为多行文本框时，若设置TextBox控件的Wrap属性值为true，则文本框会自动换行。例如， ,4.4.1 TextBox控件,4. 自动完成 为AutoCompleteType属性赋相应值。 5. 其它常用属性 Columns属性：以字符为单位

8、指定文本框的显示宽度。 MaxLength属性：在文本框中允许输入的最多字符数。 Rows属性：指定多行文本框的显示行数。例如， ,4.4.1 TextBox控件,6. TextChanged事件 当文本框中的内容发生改变，且控制焦点移出文本框时，该事件被引发。 如果希望该事件能够立即被响应，则应该设置TextBox控件的AutoPostBack属性为true。 例4-6 用户登录,4.4.2 CheckBox控件,显示为复选框，它允许用户在真和假之间做出选择。 语法格式： 1. 确定复选框是否被选中 Checked属性取值为true时，表示复选框被选中，为false表示未选中。例如， Che

9、ckBox1.Checked = true;,4.4.2 CheckBox控件,2. 改变复选框的文本排列方向 TextAlign属性：设置复选框的文本显示在复选框的哪一边边。例如， 3. CheckedChanged事件 当复选框的状态改变（由选中变为未选中，或反之）时，该事件被引发。 例4-7 多选题,4.4.3 RadioButton控件,显示为单选按钮。语法格式： GroupName属性：使多个单选按钮形成一组，组成互斥按钮。例如， ,4.5 显示图像,在页面上显示图像。语法格式： 1. 显示指定图像 把图像文件的路径赋值给ImageUrl属性，即可显示指定的图像。例如， 例4-8 无

10、限风光,4.6 列表显示,五个列表显示控件：ListBox、DropDownList、RadioButtonList、CheckBoxList和BulletedList控件。 4.6.1 ListBox控件 显示为列表框，允许从一个给定的选项列表中选择一项或多项。语法格式： Item 1 ,4.6.1 ListBox控件,1. 定义列表项 控件是列表项的一个容器。每个列表项均由ListItem对象所创建。 列表项的常用属性为： Text属性：列表项所显示的文字内容。 Value属性：与列表项关联的值，通常是一些能被程序处理的值。 Selected属性：确定列表项是否被选中。 例如，显示一个价格

11、列表 十一元五角 八元三角 ,4.6.1 ListBox控件,2. 单选还是多选 SelectionMode属性: Single：允许单选； Multiple：允许多选。用户可以使用Ctrl或Shift键配合进行多选。例如， ,3. 获取选定项 若列表框为单选，则使用SelectedIndex、SelectedItem和SelectedValue属性获取用户所选项。如， Image1.ImageUrl = /images/ + DropDownList1.SelectedValue.ToString() + .jpg; 若列表框为多选，则获取选定项： foreach( ListItem li

12、in ListBox1.Items) if(li.Selected)/判断该列表项是否被选中 lblMsg.Text += li.Text + ; /输出选中列表项,4.6.1 ListBox控件,4. 添加或删除列表项 控件的Items属性是一个集合属性，保存了列表框中的所有列表项，每个列表项均是ListItem对象。 可以使用两种方法添加或删除列表项。 （1）使用Visual Studio.NET集成开发环境的属性窗口。 （2）使用代码动态添加或删除列表项 5. SelectedIndexChanged事件 当用户所选的列表项发生改变时，引发该事件。 例4-9 装机清单,4.6.2 Dro

13、pDownList控件,显示为下拉列表框，用户可以从列表框中选择一项。语法格式： Item 1 Item 2 控件的属性、方法和事件与ListBox控件均一样，所不同的是DropDownList控件只允许单选，不允许多选。 例4-10 选课,4.6.3 CheckBoxList控件,生成一组复选框，相当于多个CheckBox控件。语法格式 Item 1 控件是多个复选框的一个容器。每个复选框均由ListItem对象所创建。CheckBoxList控件的属性、方法和事件与ListBox控件几乎一样。,4.6.3 CheckBoxList控件,1. 显示多列复选框 使用RepeatColumns属

14、性，设定在一行中显示多少列复选框。例如， 1 2 3 4 ,4.6.3 CheckBoxList控件,2. 复选框在页面上的布局方式 RepeatLayout： Table（默认设置）：以表格布局方式呈现； Flow：以流式布局方式呈现。 RepeatDirection： Vertical：复选框以垂直方式呈现。 Horizontal：以水平方式呈现。,4.6.4 RadioButtonList控件,生成一组单选按钮，相当于多个RadioButton控件。语法格式： Item 1 控件是多个单选按钮的一个容器。每个单选按钮均由ListItem对象所创建。控件的属性、方法和事件与CheckBox

15、ListItem控件一样。 例4-11 单选题,4.6.5 BulletedList控件,显示一个有序或无序列表，相当于HTML的或标记。语法格式： Item1 Item2 Item3 ,4.6.5 BulletedList控件,1. 设置项目符号样式 BulletStyle属性：列表项前的项目符号样式，取值为： NotSet（未设置） Numbered（数字） LowerAlpha（小写字母）、UpperAlpha（大写字母） LowerRoman（小写罗马数字）、UpperRoman Disc（实心圆）、Circle（圆圈）、Square（实心正方形） CustomImage（自定义图像）

16、。,4.6.5 BulletedList控件,2. 为列表指定一个起始编号 FirstBulletNumber属性：有序列表的起始编号。如果是无序列表，即BulletStyle 属性值为Disc、Square、Circle 或 CustomImage，则忽略FirstBulletNumber属性的值。例如， C# VB ,4.6.5 BulletedList控件,3. 设置列表项的显示模式 DisplayMode属性：将列表项内容显示为文本、超级链接或LinkButton。取值为： Text：列表项的内容显示为文本； HyperLink：列表项的内容显示为超级链接，此时必须使用Value属性指

17、定超级链接的URL； LinkButton：列表项的内容显示为LinkButton，当用户单击LinkButton时，可以触发BulletedList控件的Click事件。,4.7 超级链接,4.7.1 HyperLink控件 为页面添加超级链接，相当于标记。语法格式： 1. 文本超级链接 Text属性：为超级链接设置文本标题。例如， ,4.7.1 HyperLink控件,2. 图像超级链接 ImageUrl属性：指定图像文件的路径，从而显示一个带有超级链接的图像。例如， 3. 指定URL NavigateUrl属性：指定单击 HyperLink 控件时链接到的 URL。,4.7.1 Hype

18、rLink控件,4. 指定目标窗口 Target属性：指定单击 HyperLink 控件时加载目标网页的窗口或框架。 取值为：_blank、_self、_top、_parent或_search。 例4-12 使用搜索引擎,4.7.2 ImageMap控件,热区：图像上的一个区域，该区域有超级链接功能。当用户单击图像的不同区域（热区）时，会产生回发或导航到不同的URL上。 一个ImageMap控件就相当于多个图像超级链接。利用它可以实现网站导航、网站地图、游戏地图、各种流程图等。 语法格式： 热区 ,4.7.2 ImageMap控件,1. 指定图像 ImageUrl属性：指定控件上所显示图像的图像文件的路径。例如， 2. 设置热区 ImageMap控件提供三种类型的热区： （1）圆形区域热区 由CircleHotSpot定义。语法格式：,4.7.2 ImageMap控件, 其中，Radius属性定义半径；X和Y属性定义圆心坐