第4章构建基本Web页面

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服务器控件 nHTML服务器控件是与HTML标记相对应的服务器端控件，具有属性、方法和事件，可以对其编程，从而解决

2、了无法利用程序直接控制HTML标记的问题。n任何HTML标记可以通过添加属性runat=“server”和id转换为 HTML服务器控件。例如， 4.1.2 HTML服务器控件HTML服务器控件HTML标记名称控件事件HtmlAnchor超级链接ServerClickHtmlButton按钮ServerClickHtmlSelect 列表框ServerChangeHtmlTextArea多行文本框ServerChangeHtmlInputButton按钮ServerClickHtmlInputCheckBox复选框ServerChangeHtmlInputRadioButton单选按钮Serv

3、erChangeHtmlInputText 和 单行文本框ServerChangeHtmlInputHidden隐藏框ServerChangeHtmlInputImage图像ServerClickHtmlInputFile上载文件HtmlForm表单HtmlImage图像HtmlGenericControl任何其它没有对应控件的标记，如 等4.1.3 Web服务器控件 1. Web服务器控件的共有属性服务器控件的共有属性 nAttributes：获取服务器控件标记上表示的所有属性名称和值对的集合。只能在编程时使用此属性。nBackColor：控件的背景色。nBorderStyle：控件的边框样

4、式。nCssClass：分配给控件的级联样式表 (CSS) 类。nStyle：为控件设置CSS样式属性。 nEnabled：控件是否被禁用。nFont控件：显示的字体。nForeColor：控件的前景色。4.2 显示文本信息 4.2.1 Label控件控件 用于在页面上显示静态文本。语法格式为： 1. 显示静态文本显示静态文本使用Text属性指定要在控件中显示的内容，例如， 例例4-1 显示当前日期 4.2.2 Literal控件 在页面上显示静态文本。语法格式： Mode属性：决定是否编码其输出。取值为：PassThrough：直接显示控件内容而不进行编码。Encode：先编码，然后再显示控

5、件内容。Transform：直接删除设备（例如手机）不支持的标记，然后再显示控件内容。例例4-2 获取用户IP地址，并用Literal控件显示该IP地址 4.3 提交页面 三个用于向服务器提交页面的控件：Button、LinkButton和ImageButton控件。4.3.1 Button控件控件n显示一个按钮，默认为提交按钮。利用提交按钮可以向服务器端提交整个页面。语法格式： 4.3.1 Button控件控件1. Click事件事件当点击按钮时，引发Click事件。与之相关的事件处理过程：void Submit_Click(Object sender, EventArgs e) lblMs

6、g.Text=Hello ASP.NET; 4.3.1 Button控件控件n2. Command事件事件n如果希望页面上的按钮共用一个事件处理过程，则可以使用Command事件。n如何区分用户点击了哪个按钮？ 使用CommandName属性。CommandArgument属性可以向Command事件处理过程传递附加信息n例例4-3 简易四则运算器 4.3.1 Button控件控件3. 引发客户端按钮单击事件引发客户端按钮单击事件n控件的OnClientClick属性允许我们添加JavaScript代码，当单击按钮时，就会在客户端运行这些代码。n例例4-4 利用OnClientClick属性弹

7、出确认框 4.3.2 LinkButton控件控件n与Button控件类似，但它的外观显示为超级链接，而不是按钮。n在单击LinkButton时，引发Click事件，而不是超级链接的页面跳转。n语法格式： n控件的属性、方法和事件与Button控件完全相同，使用方法也一样。 4.3.3 ImageButton控件控件n与Button控件类似，但使用定制的图像作为按钮的外观。语法格式： nImageUrl属性：指定所使用的图像。n控件的事件处理过程：第二个参数类型为ImageClickEventArgs，它提供鼠标单击处的坐标（e.X和e.Y）。n例例4-5 文本编辑器 4.4 收集用户输入信息

8、收集用户输入信息4.4.1 TextBox控件控件n用于显示单行文本框、多行文本框和密码框。语法格式为： 4.4.1 TextBox控件控件1. 设置显示模式设置显示模式nTextMode属性：SingleLine：显示为单行文本框，此为默认值；MultiLine：显示为多行文本框；Password：显示为密码框。n例如， 4.4.1 TextBox控件控件2. 获取控制焦点获取控制焦点使用Focus方法，可以使文本框获得控制焦点。例如，protected void Page_Load(object sender, EventArgs e) TextBox1.Focus();3. 设置是否自动

9、换行设置是否自动换行 当TextBox控件显示为多行文本框时，若设置TextBox控件的Wrap属性值为true，则文本框会自动换行。例如， 4.4.1 TextBox控件控件4. 自动完成自动完成为AutoCompleteType属性赋相应值。 5. 其它常用属性其它常用属性nColumns属性：以字符为单位指定文本框的显示宽度。nMaxLength属性：在文本框中允许输入的最多字符数。nRows属性：指定多行文本框的显示行数。例如， 4.4.1 TextBox控件控件6. TextChanged事件事件n当文本框中的内容发生改变，且控制焦点移出文本框时，该事件被引发。n如果希望该事件能够立

10、即被响应，则应该设置TextBox控件的AutoPostBack属性为true。n例例4-6 用户登录 4.4.2 CheckBox控件控件 显示为复选框，它允许用户在真和假之间做出选择。 语法格式： 1. 确定复选框是否被选中确定复选框是否被选中 Checked属性取值为true时，表示复选框被选中，为false表示未选中。例如， CheckBox1.Checked = true;4.4.2 CheckBox控件控件2. 改变复选框的文本排列方向改变复选框的文本排列方向 TextAlign属性：设置复选框的文本显示在复选框的哪一边边。例如， 3. CheckedChanged事件事件 当复选

11、框的状态改变（由选中变为未选中，或反之）时，该事件被引发。例例4-7 多选题 4.4.3 RadioButton控件 n显示为单选按钮。语法格式： nGroupName属性：使多个单选按钮形成一组，组成互斥按钮。例如， 4.5 显示图像显示图像n在页面上显示图像。语法格式： 1. 显示指定图像显示指定图像n把图像文件的路径赋值给ImageUrl属性，即可显示指定的图像。例如， n例例4-8 无限风光 4.6 列表显示列表显示 五个列表显示控件：ListBox、DropDownList、RadioButtonList、CheckBoxList和BulletedList控件。4.6.1 ListB

12、ox控件控件 显示为列表框，允许从一个给定的选项列表中选择一项或多项。语法格式： Item 1 4.6.1 ListBox控件控件1. 定义列表项定义列表项控件是列表项的一个容器。每个列表项均由ListItem对象所创建。n列表项的常用属性为：Text属性：列表项所显示的文字内容。Value属性：与列表项关联的值，通常是一些能被程序处理的值。Selected属性：确定列表项是否被选中。n例如，显示一个价格列表十一元五角八元三角 4.6.1 ListBox控件控件2. 单选还是多选单选还是多选SelectionMode属性:Single：允许单选；Multiple：允许多选。用户可以使用Ctrl

13、或Shift键配合进行多选。例如， 3. 获取选定项获取选定项n若列表框为单选，则使用SelectedIndex、SelectedItem和SelectedValue属性获取用户所选项。如， Image1.ImageUrl = /images/ + DropDownList1.SelectedValue.ToString() + .jpg;n若列表框为多选，则获取选定项：foreach( ListItem li in ListBox1.Items)if(li.Selected)/判断该列表项是否被选中lblMsg.Text += li.Text + ; /输出选中列表项4.6.1 ListBo

14、x控件控件4. 添加或删除列表项添加或删除列表项n控件的Items属性是一个集合属性，保存了列表框中的所有列表项，每个列表项均是ListItem对象。n可以使用两种方法添加或删除列表项。（1）使用Visual Studio.NET集成开发环境的属性窗口。 （2）使用代码动态添加或删除列表项 5. SelectedIndexChanged事件事件n当用户所选的列表项发生改变时，引发该事件。n例例4-9 装机清单 4.6.2 DropDownList控件控件n显示为下拉列表框，用户可以从列表框中选择一项。语法格式： Item 1 Item 2n控件的属性、方法和事件与ListBox控件均一样，所不

15、同的是DropDownList控件只允许单选，不允许多选。n例例4-10 选课 4.6.3 CheckBoxList控件控件n生成一组复选框，相当于多个CheckBox控件。语法格式 Item 1 n控件是多个复选框的一个容器。每个复选框均由ListItem对象所创建。CheckBoxList控件的属性、方法和事件与ListBox控件几乎一样。 4.6.3 CheckBoxList控件控件1. 显示多列复选框显示多列复选框n使用RepeatColumns属性，设定在一行中显示多少列复选框。例如， 1 2 3 44.6.3 CheckBoxList控件控件2. 复选框在页面上的布局方式复选框在页

16、面上的布局方式nRepeatLayout：Table（默认设置）：以表格布局方式呈现；Flow：以流式布局方式呈现。nRepeatDirection：Vertical：复选框以垂直方式呈现。Horizontal：以水平方式呈现。4.6.4 RadioButtonList控件控件n生成一组单选按钮，相当于多个RadioButton控件。语法格式： Item 1 n控件是多个单选按钮的一个容器。每个单选按钮均由ListItem对象所创建。控件的属性、方法和事件与CheckBoxListItem控件一样。n例例4-11 单选题 4.6.5 BulletedList控件 n显示一个有序或无序列表，相当

17、于HTML的或标记。语法格式： Item1 Item2 Item3 4.6.5 BulletedList控件1. 设置项目符号样式设置项目符号样式nBulletStyle属性：列表项前的项目符号样式，取值为：NotSet（未设置）Numbered（数字）LowerAlpha（小写字母）、UpperAlpha（大写字母）LowerRoman（小写罗马数字）、UpperRomanDisc（实心圆）、Circle（圆圈）、Square（实心正方形）CustomImage（自定义图像）。 4.6.5 BulletedList控件2. 为列表指定一个起始编号为列表指定一个起始编号nFirstBullet

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

19、户单击LinkButton时，可以触发BulletedList控件的Click事件。 4.7 超级链接 4.7.1 HyperLink控件控件n为页面添加超级链接，相当于标记。语法格式： 1. 文本超级链接文本超级链接nText属性：为超级链接设置文本标题。例如， 4.7.1 HyperLink控件控件2. 图像超级链接图像超级链接nImageUrl属性：指定图像文件的路径，从而显示一个带有超级链接的图像。例如， 3. 指定指定URLnNavigateUrl属性：指定单击 HyperLink 控件时链接到的 URL。4.7.1 HyperLink控件控件4. 指定目标窗口指定目标窗口nTarg

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