第 3 章 Web 服务器控件 控件是一种具有特殊作用的对象, 在 ASP.NET 中, 一切都由对象组成 Web 页面就是一个对象的容器, 而控件是 Web 页面的元素之一 常见的控件有按钮 复选框 下拉框 图片等, 直接在页面中展示给用户 了解这些控件的属性 方法和事件对以后的学习尤其重要 本章详细介绍服务器控件的类型 共有属性及控件和页面的综合应用 本章学习要点 : 了解服务器控件的特点 理解服务器控件的公共属性 掌握文本控件的使用 掌握按钮控件的使用 掌握复选框的使用 掌握列表控件的使用 掌握容器控件的使用 掌握控件与页面的结合 3.1 服务器控件基础 HTML 中也有控件的概念, 并实现指定的应用 但服务器控件拥有更好的数据处理方法和响应事件, 实现更为复杂的功能 本节介绍服务器控件的基础知识, 包括服务器控件概述 分类和公共属性等 3.1.1 服务器控件概述 服务器控件是需要在服务器端响应的控件 与 HTML 控件相比, 服务器控件有着更为便利的处理数据的方法和与用户交互的响应事件 例如, 服务器控件又有数据的回送功能, 在页面刷新或关闭时回送数据, 以确保重要的数据被记录下来 除此之外, 服务器控件还有以下几个特点 (1) 服务器控件可以触发服务器控件特有的事件 (2) 输入到服务器控件中的数据在请求之间可以维护 ( 即具有状态管理功能 ) (3) 服务器控件可以自动检测浏览器并调整到恰当的显示 (4) 每个服务器控件都具有一组属性, 可以在服务器端的代码中更改控件的外观和行为 ASP.NET 服务器控件可以自动检测客户端浏览器的类型, 产生一个或者多个适当的
Web 服务器控件 第 3 章 HTML 控件, 并且自动调整成适合浏览器的输出 服务器控件支持数据绑定技术, 可以和数据源进行连接, 用来显示或修改数据源数据 其优点如下所示 (1) 使制造商和开发人员能够生成容易的工具或者自动生成用户的应用程序接口 (2) 简化创建交互式 Web 窗体的过程 将服务器控件添加到 Web 窗体中非常简单, 最常用的方法有三种, 如下所示 (1) 从工具箱中拖动控件到窗体上或直接双击控件进行添加 (2) 在资源视图中, 直接添加控件的声明代码 (3) 以编程方式动态创建 Web 服务器控件 注意所有的 ASP.NET 控件必须定义在.aspx(ASP.NET 页面文件 ) 文件中, 如果是采用代码隐藏技术设计的程序, 其事件程序一般定义在代码文件 ( 如.cs 或.vb) 中 3.1.2 服务器控件分类 服务器控件种类繁多, 根据控件所实现的作用可将控件分为标准控件 数据控件 验证控件 导航控件和登录控件, 对其介绍如下 1. 标准控件 31 标准控件是所有控件中最为常用的, 有按钮控件 文本控件 复选框控件和容器控件等 而仅文本相关的控件就有文本输入框 文本显示标签和链接文本等控件 根据控件的样式可以将标准控件分为文本控件 按钮控件 选择控件 列表控件和容器控件 2. 数据控件 数据控件主要用于数据的处理, 包括数据的绑定和显示 ASP.NET 页面中的数据通常是动态数据, 需要不断变化 这些数据被存放在数据源文件中, 数据显示控件在绑定了数据源之后, 所显示的数据会随着数据源数据的变化而变化 除此之外, 数据控件也可以操作数据源中的数据 ASP.NET 页面通常与数据库结合, 以数据库作为数据源来存储数据 数据控件的使用将在第 10 章中介绍 3. 验证控件 网站通常是需要与用户 交流 的, 如用户在登录时需要提供用户名和密码 在查询时需要提供查询关键字 在注册的时候需要提交基本信息等 用户与网站之间的 交流 表现在信息的输入输出方面, 但是在大多情况下, 网站对用户的输入格式会有限制, 如用户注册时的邮箱地址不合法, 将直接影响用户的注册 为了确保用户输入的格式符合网站需求, 服务器控件中提供了验证控件对用户的输入进行验证, 只有通过了验证的输入才能被网站接收处理 验证控件通常与输入文本框进行绑定, 以验证用户的输入是否有效 验证控件将在第 8 章中介绍
ASP.NET 4.5 网站开发与应用实践教程 4. 导航控件导航控件与网站用户的关系, 相当于导游和旅行者的关系 导航控件能够将大型的网站系统结构化, 列出网页之间的逻辑关系, 使用和能够方便快捷地找到所需的页面进行访问 导航控件通常和站点地图等列举页面逻辑的文件结合使用, 在第 6 章中将详细介绍 5. 登录控件用户登录通常需要输入用户名 密码, 并由网站对用户名和密码的合法性进行验证, 在验证无误的情况下提交信息 由于登录功能是网站的常用功能, 因此 ASP.NET 将登录常用的控件定义为一个组合, 可直接从工具箱拉入页面使用 登录控件通常包含 用户名 文本框 密码 文本框等关于登录的常见控件 登录控件的使用减轻了开发人员的工作 3.1.3 服务器控件公共属性 32 ASP.NET 服务器控件有多种类型, 但这些控件有着它们共同的特点和属性 每一个 Web 服务器控件都有一个 <asp:> 的前缀, 该前缀表示此控件为 Web 服务器控件 其语法格式如下 <asp:control id="name" runat="server" /> 上述语法中,id 表示控件的唯一标识,runat 属性指示该控件为服务器控件, 这两个属性的含义与 HTML 控件中相应的属性的含义一致 例如, 下面的代码表示在 ASP.NET 页面中添加一个 Label 控件 <asp:label ID="Label1" runat="server" Text="Label"></asp:Label> ASP.NET 中的服务器控件继承自 System.Web.UI.WebControls 类, 该类提供了大多数 Web 服务器控件的公共属性 方法和事件 如表 3-1 所示对服务器控件的最常用的一些属性进行了说明 表 3-1 属性名称 AccessKey BackColor Enabled Visible ToolTip ID FailureText 服务器控件的常用属性 说明 获取或设置快速导航到控件的快捷键, 可以指定这个属性的内容为数字或者是英文字母设置对象的背景颜色, 其属性的值可以是颜色名称, 也可以是 #RRGGBB 格式获取或设置一个值, 该值指示是否启用 Web 服务器控件指定控件是否可见小提示 在设置该属性时, 当使用者停留在 Web 控件上时就会出现提示的文字所有控件的唯一标识列获取或设置当前登录尝试失败时显示的文本
Web 服务器控件 第 3 章 除了表 3-1 中的内容, 服务器控件都有 runat="server" 属性值, 以区分服务器控件和 HTML 控件 设置控件的属性时有以下两种方法 (1) 在设计时通过 属性 窗格设置控件的属性 (2) 在运行时以编程方式动态设计控件的属性 服务器控件是显示在页面中与用户进行交互的, 因此控件通常能够因为用户的操作而触发某些事件的执行 如用户单击按钮, 那么按钮的鼠标单击事件将被执行 ; 用户修改文本框中的内容, 那么若该文本框定义了修改事件, 该事件将被执行 事件是一种在满足某种条件 ( 如鼠标单击 ) 后开始运行的程序, 大部分的 ASP.NET 控件都可以引发服务器端事件完成某些功能, 页面事件是在页面加载时和撤销时所引发的事件 页面级别的事件主要有三种 :Page_Load Page_Init 和 Page_Unload Page_Init 事件和 Page_Load 事件都是在页面加载时引发并用来执行初始化程序的事件, 前者只是在页面第一次加载时执行的事件, 而 Page_Load 事件在每次加载时都执行 Page_Unload 事件执行最后的清理工作, 例如关闭打开的文件和数据库连接等 向 ASP.NET 服务器控件添加客户端事件时有三种方法, 如下所示 (1) 以声明方式向 ASP.NET 服务器控件添加客户端事件处理程序, 即在资源视图中直接为控件添加事件属性, 如 onmouseover 或 onclick 等 添加事件属性时需要针对不同的属性添加要执行的客户端脚本 (2) 以编程方式向 ASP.NET 控件添加客户端事件处理程序, 即在页面的 Init 或 Load 事件中调用控件的 Attributes 集合的 Add() 方法来动态添加客户端事件处理程序 (3) 向按钮控件添加客户端 onclick 事件 例如, 在按钮控件 (Button LinkButton 和 ImageButton) 中要添加客户端 onclick 事件, 可以在设计视图中将按钮控件的 onclientclick 属性设置为要执行的客户端脚本, 也可以在源视图中直接添加该属性 33 3.2 文本控件 文本控件是指文本相关的控件, 包括文本的显示和输出 本节主要介绍文本控件的适用范围和使用方法 3.2.1 Label 控件 Label 的英文含义是标签, 其在页面中的作用正如一个可以被写入文字的标签 Label 控件也称作标签控件, 其在页面中的显示是一行 ( 或一段 ) 文字 Label 控件的添加可以在工具箱中进行拖拉, 其在工具箱中的符号为 该控件的 Text 属性值, 是页面中所显示的文本 该属性的值可以是文本, 也可以是浏览器能够识别的页面元素, 如在文本当中含有 <br/> 元素, 则文本的显示会有换行 Label 提供了一种以编程方式设置文本的方法, 可以在后台对文字的内容和样式进行设置
ASP.NET 4.5 网站开发与应用实践教程 Label 控件中的文本可以是静态的和动态的, 静态的情况下在页面固定位置显示文本 ; 动态情况下可以绑定到数据源 声明 Label 控件有两种语法形式, 如下所示 <asp:label ID= "lblname" runat = "server" Text = " 文本内容 "></asp:label> // 或者 <asp:label ID= "lblname" runat = "server"> 文本内容 </asp:label> 直接从工具箱中拖出的 Label 控件, 其代码如下所示 <asp:label ID="Label1" runat="server" Text="Label"></asp:Label> 34 除了 runat="server" 属性以外,Label 控件默认含有 ID 和 Text 属性 其中,ID 用来设置控件的唯一标识列 ;Text 属性向用户显示文本信息, 该属性的值可以是 HTML 格式的内容 ID 属性是不可缺少的身份识别, 若同时存在多个 Label 控件, 该值是不可缺少的 ; 而 Label 控件的作用即为显示文本信息, 因此 Text 属性的默认值将使其失去意义 Label 控件的 Text 属性可以设置为任何字符串 ( 包括包含标记的字符串 ), 如果字符串包含标记,Label 控件将解释标记 Label 控件还提供了一系列的样式属性, 以设置其文本的展示样式, 如字体的颜色 字体背景色大小 下划线 是否加粗等, 如设置一个红色加粗的标签, 代码如下 <asp:label ID="Label1" runat="server" Text="Label" Font-Bold="True" ForeColor="Red"></asp:Label> 3.2.2 Literal 控件 Literal 控件的作用同样是在页面中显示文本, 但 Literal 控件不允许对所显示的文本应用样式 在工具箱中,Literal 控件的符号为 Literal 控件与 Label 控件一样用于显示文本, 但 Literal 控件可以在浏览器中进行动态的添加, 通常将其添加到指定容器内 Literal 控件与 Label 控件最大的区别在于 :Literal 控件不能向文本中添加任何的 HTML 元素 因此,Literal 控件不支持包括位置特性在内的任何样式特性 但是, 该控件允许对其内容进行编码 通常情况下, 如果开发人员希望文本和控件直接呈现在页面中而不使用任何附加标记时可以使用 Literal 控件 除了 ID 和 Text 属性外,Literal 控件最常用的属性是 Mode, 该属性用于指定控件对所添加的标记的处理方式 其值如下所示 (1)Transform: 将对添加到控件中的任何标记进行转换, 以适应请求浏览器的协议 如果向使用 HTML 外的其他协议的移动设备呈现内容, 设置该值时非常有用 该值为 Mode 属性的默认值 (2)PassThrough: 添加到控件中的任何标记都将按原样呈现在浏览器中 (3)Encode: 使用 HtmlEncode() 方法对添加到控件中的任何标记进行编码, 这会将 HTML 编码转换为其文本表示形式 例如,<b> 将呈现为 <b> 当开发人员希望浏
Web 服务器控件 第 3 章 览器显示而不解释标记时, 该方式将非常有用 如向页面中添加 Literal 控件, 使其 ID 为 Literal ; 显示文本为 动态添加 ; 将控件添加在 form1 中, 使用代码如下 protected void Page_Load(object sender, EventArgs e) Literal liter = new Literal(); // 通过 Literal 创建 liter 对象 liter.id = "Literal"; // 设置 ID 属性 liter.text = " 动态添加 "; // 设置 Text 属性 form1.controls.add(liter); // 将 liter 添加到表单中 上述代码中,form1 作为一个容器, 接收 Literal 控件的添加 但这个添加过程无法设置 Literal 控件的添加位置 3.2.3 TextBox 控件 Label 控件和 Literal 控件属于文本显示控件, 而 TextBox 控件属于文本输入控件 这三种控件都有 Text 属性, 该属性可设置 Label 和 Literal 控件的显示文本, 也可以获取用户在 TextBox 上面输入的文本 TextBox 控件又称作文本框控件, 其在工具箱中的符号为 TextBox 控件提供一个输入框, 供用户输入 文本框中输入的值即为该控件的 Text 属性值, 可在后台通过控件的 ID 进行获取 接下来对控件的属性 事件和自动完成功能进行介绍 35 1.TextBox 控件的常用属性 TextBox 控件是一种基本控件, 它为用户提供了一种在 Web 窗体中输入信息 ( 包括文本 数字和日期等 ) 的方法 该控件的常用属性如表 3-2 所示 表 3-2 属性名称 TextBox 控件的常用属性 说明 AutoPostBack 获取或设置当 TextBox 控件上的内容发生改变时, 是否自动将窗体数据回传到 服务器, 默认为 false 该属性通常和 TextChanged 事件配合使用 MaxLength 获取或设置文本框中最多允许的字符数 当 TextMode 属性设为 MultiLine 时, 此属性不可用 ReadOnly 获取或设置 TextBox 控件是否为只读 默认值为 false TextMode 获取或设置文本框的行为模式 默认值为 SingleLine Wrap 布尔值, 指定文本是否换行 默认为 true TextBox 控件可以通过 TextMode 属性设置出单行 多行和密码三种形式的文本框 TextMode 属性的可取值如下 (1)SingleLine: 默认值, 单行输入模式 用户只能在一行中输入信息, 还可以限制控件接受的字符数 (2)Password: 密码框, 用户输入的内容将以其他字符代替 ( 如 * 和 等 ), 以隐藏
ASP.NET 4.5 网站开发与应用实践教程 真实信息 (3)Multiline: 多行输入模式, 用户在显示多行并允许换行的框中输入信息 开发人员可以通过 Text 属性获取或设置 TextBox 控件中的值, 例如, 获取控件 ID 为 TextBox1 的属性值并将其赋予字符串变量 name, 代码如下 string name =TextBox1.Text; 2.TextBox 控件的事件 TextBox 控件最常用的事件是 TextChanged 事件, 当用户离开 TextBox 控件时就会引发该事件 默认情况下并不会立即引发该事件, 而是当下次发送窗体时在服务器代码中引发此事件 控制这一事件的属性是 AutoPostBack, 该属性的默认值为 false 将该属性的值设置为 true, 用户离开 TextBox 控件后将页面提交给服务器 例如, 为 TextBox 控件添加 TextChanged 事件, 当用户离开 TextBox1 文本框后触发该事件将值赋予 Label 控件进行显示, 代码如下 36 protected void TextBox1_TextChanged(object sender, EventArgs e) Label1.Text = Server.HtmlEncode(TextBox1.Text); 3.TextBox 控件的自动完成功能 许多浏览器都支持自动完成功能, 该功能可以帮助用户根据以前输入的值向文本框中填充信息 自动完成的精确行为取决于浏览器, 通常浏览器根据文本框的 name 特性存储值 ; 任何同名的文本框 ( 即使是在不同页上 ) 都将为用户提供相同的值 有些浏览器还支持 vcard 架构, 该架构允许用户使用预定义的名 姓 电话号码和电子邮件地址等值在浏览器中创建配置文件 TextBox 控件支持 AutoCompleteType 属性, 该属性为用户提供了用于控制浏览器如何使用自动完成的选项 3.2.4 HyperLink 控件 在文本的显示中, 还有一个特殊的控件 HyperLink 控件 HyperLink 控件用于显示文本和图片的超链接, 其在工具箱中的符号为 与大多数 Web 服务器控件不同, 当用户单击 HyperLink 控件时并不会在服务器代码中引发事件, 该控件只执行导航操作 HyperLink 控件有以下两个优点 (1) 可以在服务器代码中设置链接属性, 例如, 开发人员可以根据页面中的条件动态更改链接文本或目标页 (2) 可以使用数据绑定来指定链接的目标 URL( 以及必要时与链接一起传递的参数 ) 除了 ID 属性和 Text 属性外,HyperLink 控件还有如下几个常用属性 (1)ImageUrl: 获取或设置该控件显示的图像的路径
Web 服务器控件 第 3 章 (2)NavigateUrl: 获取或设置单击控件时链接到的 URL (3)Target: 获取或设置单击控件时显示链接到的网页内容的目标窗口或框架 该属性的值包括 _blank _self _top _parent 和 _search 使用 HyperLink 控件可单击页面中的文字或图片, 打开新的页面, 其功能相当于一个链接 如果同时设置了 LinkButton 控件的 ImageUrl 和 Text 属性的值, 则 ImageUrl 属性优先 范例 1 结合本节内容, 使用 Label 控件显示 早发白帝城 的诗词内容 ; 使用 Literal 控件显示 诗词的作者是 字样 ; 使用文本框供用户输入诗词作者 ; 添加按钮, 在单击按钮之后向页面添加 Literal 控件显示诗词的作者 ; 添加 HyperLink 控件指向下一条问题所在的页面, 步骤如下 (1) 创建页面并添加 Table 元素, 将需要使用的控件依次放在 Table 中的每一行, 代码省略 向 Table 中添加 Label 控件显示 早发白帝城 的诗词内容, 要求每两句之后添加换行标记, 代码如下 <asp:label ID="Label1" runat="server" Text="Label"> 朝辞白帝彩云间, 千里江陵一日还 <br/> 两岸猿声啼不住, 轻舟已过万重山 <br/> </asp:label> 37 (2) 向 Table 中添加 Literal 控件显示 诗词的作者是 字样 ; 添加文本框供用户输入诗词作者, 代码如下 <asp:literal ID="Literal1" runat="server"> 诗词的作者是 :</asp:literal> <asp:textbox ID="TextBox1" runat="server"></asp:textbox> (3) 向 Table 中添加 Panel 容器和按钮控件, 为按钮控件添加按钮单击事件, 代码如下 <asp:panel ID="Panel1" runat="server"> <asp:button ID="Button1" runat="server" Text=" 答案 : " OnClick="Button1_Click1" /> </asp:panel> (4) 向 Table 中添加 HyperLink 控件用于打开下一条问题所在的页面, 将新页面的地址设置为 WebForm1.aspx, 代码如下 <asp:hyperlink ID="HyperLink1" runat="server" NavigateUrl=" WebForm1. aspx "> 下一条 </asp:hyperlink> (5) 定义按钮的单击事件, 向 Panel 容器中添加 Literal 控件显示诗词的作者, 代码如下 Literal liter = new Literal(); liter.id = "litertext"; liter.text = " 李白 "; Panel1.Controls.Add(liter);
ASP.NET 4.5 网站开发与应用实践教程 (6) 运行页面, 其效果如图 3-1 所示 单击 答案 按钮, 在页面中多了 李白 两个字, 其效果如图 3-2 所示 图 3-1 文本控件显示效果图 3-2 向页面中添加 Literal 3.3 按钮控件 38 按钮不只是页面中的一个控件, 生活中随处可以见到按钮的实例, 如手机按键 键盘按键 自动取款机上面的按钮等 按钮通常由用户根据需求向系统发送指令 这个指令是按钮实现定义好的单击 ( 按下 ) 事件, 在用户单击按钮时执行 在 ASP.NET 中除了常见的按钮之外, 还提供了可以使用图片背景的按钮, 以及可以直接链接到其他页面的链接按钮等, 本节将详细介绍 3.3.1 Button 控件 最为常用的按钮控件是 Button 控件, 在 ASP.NET 中 Button 控件在工具箱中的符号为 Button 控件常用的属性除了 ID Text 和 Width 属性外, 还有一些自身的属性, 如表 3-3 所示 表 3-3 Button 控件的特有属性 属性名称 CommandArgument CommandName CausesValidation OnClientClick PostBackUrl UseSubmitBehavior 说明 获取或设置可选参数, 该参数与关联的 CommandName 一起被传递到 Command 事件获取或设置命令名, 该命令名与传递给 Command 事件的 Button 控件相关联获取或设置一个值, 该值指示在单击控件时是否执行验证获取或设置在引发某一个 Button 控件的 Click 事件时所执行的客户端脚本获取或设置单击控件时从当前页发送到的网页的 URL 获取或设置一个布尔值, 该值指示 Button 控件使用客户端浏览器的提交机制还是 ASP.NET 的回发机制 默认值为 true 表 3-3 中所列举的属性为按钮的功能相关属性,Button 控件最常用的事件是 Click 事件和 Command 事件, 它们都在单击 Button 控件时引发, 在页面中添加 Button 按钮时
Web 服务器控件 第 3 章 需要指出按钮所关联的事件, 而事件所执行的代码需要在页面对应的.cs 文档中进行编写 在 设计 窗口中双击按钮, 会同时在页面和页面对应的.cs 文档中生成按钮的单击事件, 默认为 Click 事件 实际上,Command 事件对于按钮并没有什么用,Command 事件的真正作用是作为 BubbleEvent 冒泡 的起点, 而 Click 是不冒泡的 在一个含有多个按钮的容器中, 按钮的 BubbleEvent 事件捕获到内部的 Command 事件所传递的 CommandName 参数值, 以确定与每一个按钮相关联的命令名 3.3.2 LinkButton 控件 LinkButton 控件又称作链接按钮, 其主要功能是执行打开新的页面 LinkButton 控件的外观与 HyperLink 控件相同, 但是它实现了与 Button 控件有关的功能 链接按钮在工具箱中的符号为, 它提供了 PostBackUrl 属性, 可指向项目中的任意页面或文件 LinkButton 控件的其他属性 事件以及用法可以参考 Button 控件, 这里不再详细介绍 3.3.3 ImageButton 控件 39 ImageButton 控件通常被称为图形化按钮, 该控件支持使用图片作为按钮的背景, 对于页面的美化非常有用 另外,ImageButton 控件还提供了获取图形内单击位置的坐标信息的方法 在工具箱中, 该按钮的符号为 ImageButton 控件的使用与 Button 和 LinkButton 控件大同小异, 因此该控件的主要属性和常用事件也可以参考 Button 控件, 除了那些属性外,ImageButton 控件还有以下三个常用属性 (1)ImageUrl: 需要在 ImageButton 控件中显示的图像路径 (2)ImageAlign: 获取或设置 Image 控件相对于网页上其他元素的对齐方式 (3)AlternateText: 图像无法显示时显示的文本 ; 如果图像可以显示则表示提示文本 例如, 在 Web 窗体页中添加 ImageButton 控件, 为该控件指定其显示的背景图片位置为 ~/Styles/first.gif, 若图片无法显示时显示 首页, 按钮代码如下所示 <asp:imagebutton ID="ImageButton1" runat="server" ImageUrl="~/Styles/ first.gif" AlternateText =" 首页 "/> 3.4 选项控件 选项控件又称作选择控件, 由开发人员事先将选项列出来, 让用户选择 常见的有在填写性别时, 提供两个选项 ( 男 女 ) 让用户选择 选项控件将程序能够接受并处理的选项内容列举出来, 以防止用户输入的多样性 如同样是性别, 用户的输入可能是 : 男性 男生 男人等词汇, 此时程序在对用户信息进行处理时需要对信息进行处理筛选,
ASP.NET 4.5 网站开发与应用实践教程 增加了程序的复杂度 而使用选项控件可以有效地防止这一情况发生, 简化对用户提交信息的处理 选项控件包括单选框和复选框等, 本节将一一介绍 3.4.1 RadioButton 控件 RadioButton 控件通常被称作单选按钮, 其显示样式是一个圆圈, 在用户选中时圆圈中心有一个实心圆 RadioButton 控件是单个出现的, 通常用于选项较少的选择 ; 若有多个选项可以选择, 可以使用 RadioButtonList 控件, 该控件是多个 RadioButton 控件的组合控件, 显示为一组 RadioButton 单选按钮在工具箱中的符号为, 通过 RadioButton 控件的相关属性可以设置其显示的外观, 常用的外观属性如表 3-4 所示 表 3-4 RadioButton 控件的常用属性 40 属性名称 CausesValidation Checked GroupName TextAlign Text 说明获取或设置一个值, 该值指示选中控件时是否激发验证 默认值是 false 控件选中的状态, 如果选中该值为 true; 否则为 false 指定单选按钮所属的组名, 在一个组内每次只能选中一个单选按钮获取或设置与控件关联的文本标签的对齐方式 其值有 Left 和 Right 获取或设置与控件关联的文本标签 单个 RadioButton 控件在用户选中时引发 Changed 事件, 默认情况下, 该事件并不导致向服务器发送页面, 但是通过将 AutoPostBack 属性设置为 true 可以使该控件强制立即发送 用户对单选框的选择结果, 通过控件的 Checked 属性来获取 注意若要在选中 RadioButton 控件时将其发送到服务器, 浏览器必须支持 ECMAScript( 如 JScript 和 JavaScript), 并且用户的浏览器要启用脚本撰写 3.4.2 RadioButtonList 控件 RadioButtonList 控件与 RadioButton 控件所展示的都是一个可选的圆形控件, 但 RadioButtonList 控件, 常用于多选项的选择 在这个组合中的每一个 RadioButton 控件都是互斥的, 即一个 RadioButtonList 中, 只能有一个 RadioButton 控件处于选中状态 RadioButtonList 控件中的选项可以水平排列, 也可以垂直排列 其在工具箱中的符号为, 默认为垂直排列 由于 RadioButtonList 控件派生自 ListControl 基类, 因此工作方式与列表控件 ( 如 ListBox DropDownList 和 BulletedList 等 ) 相似 RadioButtonList 控件包含 RadioButton 控件的多个属性, 同时有着自己独特的属性 RadioButtonList 还可以动态地绑定数据源, 其常用属性如表 3-5 所示
Web 服务器控件 第 3 章 表 3-5 RadioButtonList 控件的常用属性 属性名称 DataSourceID DataSource DataTextField DataValueField Item SelectedIndex SelectedItem SelectedValue RepeatColumns RepeatDirection RepeatLayout 说明 获取或设置控件的 ID, 数据绑定控件从该控件中检索其数据项列表指定该控件绑定的数据源获取或设置为列表项提供文本内容的数据源字段获取或设置为各列表项提供值的数据源字段列表控件项的集合获取或设置列表中选中项的最低序号索引获取列表控件中索引最小的选定项获取列表控件中选定项的值, 或选择列表控件中包含指定值的项获取或设置在该控件上显示的列数获取或设置组中单选按钮的显示方向, 它的值有 Vertical( 默认值 ) 和 Horizontal 获取或设置一个值, 该值指定是否使用 table 元素 ul 元素 ol 元素或 span 元素呈现列表 其值分别是 Table Flow UnorderedList 和 OrderedList 与单个 RadioButton 控件相反,RadioButtonList 控件在用户更改列表中选定的单选按钮时会引发 SelectedIndexChanged 事件 默认情况下, 该事件并不导致向服务器发送页面, 但是可以通过将 AutoPostBack 属性设置为 true 来指定此选项 单选按钮很少单独使用, 对单选按钮分组时有两种方式, 如下所示 (1) 先向页中添加单个 RadioButton 控件, 然后将所有这些控件手动分配到一个组中 (2) 向页中添加 RadioButtonList 控件, 该控件中的列表将自动分组 41 3.4.3 CheckBox 控件 CheckBox 控件也叫复选框, 它在 Web 窗体页面上显示为一个可选的方块, 常用于为用户提供多项选择 CheckBox 控件与 RadioButton 控件功能类似, 不同的是,RadioButton 控件显示为圆圈可选框, 而 CheckBox 控件显示为方形可选框, 其在工具箱中的符号为 CheckBox 控件的一般形式如下 <asp:checkbox ID=" 控件名称 " runat="server" AutoPostBack="true false" Checked="true false" Text=" 控件文字 " TextAlign="left right" OnCheckedChanged=" 事件程序名称 " /> 从语法形式中可以看出, 除了 ID 和 runat 属性外,CheckBox 控件最常用的有 4 个属性和一个事件 属性的说明如下 (1)AutoPostBack: 默认值为 false, 设置当使用者选择不同的项目时, 是否自动触发 CheckedChanged 事件 (2)Checked: 该属性传回或设置是否该项目被选取 (3)TextAlign: 该属性设置控件所显示的文字是在按钮的左方还是右方 (4)Text: 该属性设置 CheckBox 控件所显示的文本内容 单个 CheckBox 控件在用户单击该控件时会引发 CheckedChanged 事件, 但是由于
ASP.NET 4.5 网站开发与应用实践教程 AutoPostBack 属性的值为 false, 因此在默认情况下, 该事件并不导致向服务器发送页面 通过 Checked 属性, 可获取该控件是否为选中状态 3.4.4 CheckBoxList 控件 与 RadioButtonList 控件和 RadioButton 控件之间的关系一样,CheckBox 控件也有着用于多项选择的 CheckBoxList 控件, 其在工具箱中的符号为 CheckBoxList 控件与 RadioButtonList 不同,RadioButtonList 中只能有一个选项被选中, 而 CheckBoxList 支持同时选中多个选项 如网购大衣的人对大衣的材质要求不高, 可以是棉的也可以是羊毛的或羊绒的, 那么该客户在选择大衣的时候可同时在材质一栏选择棉 羊毛和羊绒这三个选项 如果想用数据库中的数据创建一组复选框, 那么 CheckBoxList 控件是很好的选择 CheckBoxList 控件也可以动态地绑定数据源, 其常用属性如表 3-6 所示 42 表 3-6 属性名称 DataSourceID DataSource DataMember DataTextField DataTextFormatString DataValueField Items SelectedIndex SelectedItem SelectedValue RepeatColumns RepeatDirection RepeatLayout CheckBoxList 控件的常用属性 说明 获取或设置控件的 ID, 数据绑定控件从该控件中检索其数据项列表指定该控件绑定的数据源用户绑定的表或视图获取或设置为列表项提供文本内容的数据源字段获取或设置格式化字符串, 该字符串用来控制如何显示绑定到列表控件的数据获取或设置为各列表项提供值的数据源字段获取列表项的集合获取或设置列表中选中项的最低序号索引获取列表控件中索引最小的选定项获取列表控件中选定项的值, 或选择列表控件中包含指定值的项获取或设置在该控件上显示的列数获取或设置组中单选按钮的显示方向, 它的值有 Vertical( 默认值 ) 和 Horizontal 获取或设置一个值, 该值指定是否使用 table 元素 ul 元素 ol 元素或 span 元素呈现列表 CheckBoxList 控件与 CheckBox 控件在事件处理方面也有不同,CheckBoxList 控件在选项改变时会引发 SelectedIndexChanged 事件 默认情况下, 该事件并不导致向服务器发送窗体, 但是可以通过 AutoPostBack 属性的值来控制 由于 CheckBoxList 控件可同时选择多个选项, 因此不能像 RadioButtonList 控件一样获取选中值, 而是需要遍历其所有选项, 以获取哪些选项被选中 范例 2 结合本节内容, 创建学生参加校园活动的统计表, 要求学生填写姓名, 选择性别和所参加的校园活动 由于学生的性别是男和女这两个互斥选项, 因此可以使用 RadioButtonList 控件 ; 由
Web 服务器控件 第 3 章 于一名学生可以同时参与多个校园活动, 因此可以使用 CheckBoxList 控件, 步骤如下 (1) 省略页面的部分代码, 页面中需要有填写学生姓名的文本框 有供学生选择性别的单选框和供学生选择参与活动的复选框, 还有 提交 按钮和信息显示标签, 这些控件的页面代码如下 <asp:textbox ID="nameBox" runat="server"></asp:textbox></td> <asp:radiobuttonlist ID="Sex" runat="server" RepeatDirection= "Horizontal" Width="120px"> <asp:listitem Selected="True"> 男 </asp:listitem> <asp:listitem> 女 </asp:listitem> </asp:radiobuttonlist> <asp:checkboxlist ID="sleeveA" runat="server" RepeatDirection= "Horizontal" Width="492px"> <asp:listitem Selected="True"> 体育项目 </asp:listitem> <asp:listitem> 舞蹈 </asp:listitem> <asp:listitem> 武术 </asp:listitem> <asp:listitem> 音乐 </asp:listitem> <asp:listitem> 计算机软件 </asp:listitem> <asp:listitem> 计算机硬件 </asp:listitem> </asp:checkboxlist> <asp:button ID="Submit" runat="server" Text=" 提交 " BackColor="#FFFFCC" BorderColor="#FFD800" BorderStyle="Outset" Height="24px" Width="103px" OnClick="Submit_Click" /></td> <asp:label ID="message" runat="server" Text=""></asp:Label></td> 43 (2) 为 提交 按钮添加鼠标单击事件, 获取学生的信息并显示在页面上, 代码如下 protected void Submit_Click(object sender, EventArgs e) if (namebox.text == "") message.text = " 姓名不能为空 "; message.forecolor = System.Drawing.Color.Red; else string sname = namebox.text; string ssex = Sex.SelectedValue; string active = ""; foreach (ListItem item in sleevea.items) // 遍历复选框 if (item.selected) // 判断选项是否被选中 active += item.value + " "; message.text = " 姓名 :" + sname+ " 性别 :"+ ssex + "<br/>"+" 爱好 :" +active;
ASP.NET 4.5 网站开发与应用实践教程 (3) 运行该页面, 在没有任何输入的情况下单击 提交 按钮, 其效果如图 3-3 所示 由于用户没有输入姓名, 因此有红色字体的提示语句, 没有读取用户的输入信息 图 3-3 单选框和复选框的应用 44 (4) 向页面中输入数据并单击 提交 按钮, 其效果如图 3-4 所示 在提交之后获取了用户的输入信息, 并成功赋值给名为 message 的标签控件来显示 由于图 3-4 是在图 3-3 的基础上重新提交, 因此字体显示为红色 ; 若是直接在填写完整的情况下提交的, 字体显示为黑色 图 3-4 单选框和复选框的数据获取 3.5 列表控件 除了选择控件以外, 还有一些列表控件同样可以提供选项的选择 不同的是, 列表控件在选项的控制上更为灵活 ; 而且无论选项数量有多大, 其在页面中所占有的空间是固定的 本节详细介绍 ASP.NET 中的列表控件
Web 服务器控件 第 3 章 3.5.1 DropDownList 控件 DropDownList 控件又称作下拉框控件, 能够让用户在下拉列表中进行选择, 该控件在工具箱中的符号为 开发人员也可以把 DropDownList 控件看作容器, 这些列表项都属于 ListItem 类型, 每一个 ListItem 对象都是带有单独属性 ( 如 Text 属性 Selected 属性和 Value 属性 ) 的对象 DropDownList 控件只能选择一个选项 DropDownList 控件在网页中, 较为常用的是对地区的选择, 即提供 省份 下拉框和 市区 下拉框, 在选择省份之后, 市区 下拉框将获取该省所管辖的市区, 供用户选择 开发人员可以通过 DropDownList 控件的 Width 和 Height 来控制其外观, 部分浏览器不支持以像素为单位设置的高度和宽度时, 这些浏览器将使用行计数设置 除了 Width 和 Height 外, 表 3-7 列举了其他的常用属性 表 3-7 DropDownList 控件的常用属性 属性名称 AutoPostBack DataSource DataTextField DataValueField Items SelectedIndex SelectedItem SelectedValue 说明获取或设置一个值, 该值指示用户更改列表中的内容时是否自动向服务器回发获取或设置对象, 数据绑定控件从该对象中检索其数据项列表获取或设置为列表项提供文本内容的数据源字段获取或设置各列表项提供值的数据源字段获取列表控件项的集合获取或设置列表中选定项的最低索引获取列表控件中索引最小的选定项获取列表控件中选定项的值, 或选择列表控件中包含指定值的项 45 除了属性外,DropDownList 控件经常使用 SelectedIndexChanged 事件, 当用户修改当前项时将会引发该事件 3.5.2 BulletedList 控件 BulletedList 控件所显示的是一个列表, 如新闻页面中列举的前 10 条新闻标题, BulletedList 控件在列举新闻标题的同时, 还可以为每一条标题提供一个链接, 通往该新闻的详细信息页面 BulletedList 控件在工具箱中的符号为, 可以在页面中创建一个无序或有序 ( 编号的 ) 的项列表 BulletedList 控件所呈现的样式相当于 HTML 中的 ul 或 ol 元素 通过 BulletedList 控件可以实现以下效果 (1) 可以指定项 项目符号或编号的外观 (2) 静态定义列表项或通过将控件绑定到数据来定义列表项 (3) 也可以在用户单击项时做出响应 通过创建静态项或将控件绑定到数据源, 可以定义 BulletedList 控件的列表项 而且
ASP.NET 4.5 网站开发与应用实践教程 通过该控件的相关属性可以设置其外观效果, 如表 3-8 所示为 BulletedList 控件的常用属性, 并对这些属性进行了说明 表 3-8 属性名称 BulletedList 控件的常用属性 说明 AppendDataBoundItems 获取或设置一个值, 该值指示是否在绑定数据之前清除列表项 默认 值为 false BulletImageUrl 获取或设置为控件中的每个项目符号显示的图像路径, 把 BulletStyle 的值设置为 CustomImage 时有效 BulletStyle 获取或设置控件的项目符号样式 DataSource 获取或设置对象, 数据绑定控件从该对象中检索其数据项列表 DataTextField 获取或设置为列表项提供文本内容的数据源字段 DataValueField 获取或设置为列表项提供值的数据源字段 DisplayMode 获取或设置控件中的列表内容的显示模式 其值包括 Text( 默认值 ) HyperLink 和 LinkButton FirstBulletMember 获取或设置排序控件中开始列表项编号的值 Items 获取列表控件项的集合 46 BulletedList 控件可以通过 BulletStyle 属性自定义列表项外观, 如果将控件设置为呈现项目符号, 则可以选择与 HTML 标准项目符号样式匹配的预定义项目符号样式字段 BulletStyle 属性的可取值有 10 个, 同一个值不同的浏览器所呈现项目符号的方式会不同, 甚至有些浏览器不支持特定的项目符号样式 ( 如 Disc 字段 ) BulletStyle 属性的值如表 3-9 所示 表 3-9 BulletStyle 属性可取值及其说明 可取值 说明 NotSet 未设置 Numbered 数字 LowerAlpha 小写字母 UpperAlpha 大写字母 LowerRoman 小写罗马数字 UpperRoman 大写罗马数字 Disc 实心圆 Circle 圆圈 Square 实心正方形 CustomImage 自定义图像 通过 BulletedList 控件添加集合项时有多种方法, 例如, 设计窗体添加 BulletedList 控件, 该控件右端有箭头按钮, 单击按钮有两条可选的链接, 一个是 选择数据源, 一 个是 编辑项 选择 编辑项, 可打开 ListItem 集合编辑器, 如图 3-5 所示 在如图 3-5 所示的对话框中单击 添加 按钮, 可添加新的集合项并打开对应集合 项的属性列表, 如图 3-6 所示 在属性列表中分别设置 Text 属性和 Value 属性 Text 属性定义控件在页上显示的内 容 ;Value 属性定义第二个值, 该值不会显示, 但用户在选择某个项时能返回该值
Web 服务器控件 第 3 章 图 3-5 集合编辑器图 3-6 集合项属性 所有项添加完成后单击图 3-6 中的 确定 按钮进行添加, 添加完成后, 页面上将有如下新增代码 <asp:bulletedlist ID="BulletedList1" runat="server" BulletStyle= "Circle"> <asp:listitem> 新建项 1</asp:ListItem> <asp:listitem> 新建项 2</asp:ListItem> <%-- 省略其他相关 ListItem 代码 --%> </asp:bulletedlist> 47 BulletedList 控件的 Items 属性返回所有集合项的列表对象, 该对象包含多个方法, 通过这些方法可以添加指定的项 删除项或查找项等, 它们的具体说明如表 3-10 所示 表 3-10 方法名称 Add() AddRange() Clear() CopyTo() Insert() Remove() RemoveAt() 集合列表项的常用方法说明将表示指定字符串的 ListItem 项添加到集合的结尾将 ListItem 数组中的项添加到集合从集合中移除所有的 ListItem 项将集合中的项复制到 Array 中, 从指定的索引开始复制将指定的 ListItem 插入到集合中的指定索引位置从集合中移除指定的 ListItem 从集合中移除指定索引位置的 ListItem 集合列表项除了上面列举的方法外, 还有一个最常用的属性 Count, 该属性获取集合中 ListItem 的对象总数 例如, 开发人员分别通过 Add() AddRange() 方法和 Insert() 方法向集合中添加项目, 然后使用 RemoveAt() 进行删除, 代码如下 BulletedList1.Items.Add(new ListItem("Add() 方法添加内容 ", "Add() 方法添加内容 ")); ListItem[] li = new ListItem("AddRange() 添加 1", "AddRange() 添加 1"), new ListItem("AddRange() 添加 2", "AddRange() 添加 2") ; BulletedList1.Items.AddRange(li); BulletedList1.Items.Insert(0, new ListItem(" 插入到第 1 位 ", " 插入到第一位 ")); BulletedList1.Items.RemoveAt(1);
ASP.NET 4.5 网站开发与应用实践教程 3.5.3 ListBox 控件 ListBox 控件是另一种形式的列表控件, 其列举项的添加和删除通常仅通过后台代码来控制 ListBox 控件允许用户从预定义的列表中选择一项或多项, 其显示的列表项目数量根据控件的大小来决定 其在工具箱中的符号为 读者可以从以下两个方面控制列表的外观 (1) 显示的行数 : 可以将该控件设置为显示特定的项数, 如果该控件包含比设置的项数更多的项, 则显示一个垂直滚动条 (2) 宽度和高度 : 可以以像素为单位设置控件的大小 在这种情况下, 控件将忽略已设置的行数, 而是显示足够多的行直至填满控件的高度 1.ListBox 控件的属性 ListBox 控件有许多常用属性, 如 DataSource AutoPostBack SelectedIndex 和 SelectedValue 等, 表 3-11 对常用的属性进行了说明 48 表 3-11 属性名称 AutoPostBack DataSource DataTextField DataValueField Items Rows SelectedIndex SelectedItem SelectedValue SelectionMode ListBox 控件的常用属性 说明 获取或设置一个值, 该值指示当用户更改列表中的选定内容时是否自动向服务器回发获取或设置对象, 数据绑定控件从该对象中检索其数据项列表获取或设置为列表项提供文本内容的数据源字段获取或设置各列表项提供值的数据源字段获取列表控件项的集合获取或设置该控件中显示的行数获取或设置列表中选定项的最低索引获取列表控件中索引最小的选定项获取列表控件中选定项的值, 或选择列表控件中包含指定值的项获取或设置控件的选择模式, 它的值有两个, 分别为 Single 和 Multiple 默认为 Single 通常情况下, 用户可以通过单击列表中的单个项来选择它 如果将 ListBox 控件 SelectionMode 属性的值设置 Multiple( 即允许进行多重选择 ), 则用户可以在按住 Ctrl 或 Shift 键的同时, 单击以选择多个项 如下代码通过 SelectedIndex 属性设置了 ListBox 控件的索引项 ListBox1.SelectedIndex = 2; 2.ListBox 控件的事件当用户选择某一项时,ListBox 控件就会引发 SelectedIndexChanged 事件 但是默认情况下, 该事件不会导致将页发送到服务器 例如, 在 ListBox 的 SelectedIndexChanged
Web 服务器控件 第 3 章 事件中判断某一项是否选中, 代码如下 protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e) foreach (ListItem item in ListBox1.Items) if (item.selected) // 省略代码 3. 向 ListBox 控件添加选项 ASP.NET 中可以使用三种方式向 ListBox 控件中添加项, 如下所示 (1) 在设计时添加静态项 (2) 使用编程的方式在运行时添加项 (3) 使用数据绑定添加项 如下代码通过 DataSource DataTextField 和 DataValueField 属性演示了如何通过编程动态绑定数据 ListBoxShow.DataSource = GetPlaceList(); ListBoxShow.DataTextField = "placename"; ListBoxShow.DataValueField = "placeid"; 4. 确定 ListBox 控件的所选内容 // 该方法可以返回 DataTable 对象 // 对应后台数据库中的字段名 // 对应后台数据库的字段名 49 使用 ListBox 控件时最常见的内容是确定用户已选择了哪一项或哪些项, 其主要取决于该控件允许单项选择还是多重选择 有两种方式确定单项选择列表控件的选定内容, 如下所示 (1) 如果获取选择项的索引值, 需要使用 SelectedIndex 属性的值 该属性的索引是从 0 开始的, 如果没有选择任何项, 则该属性的值是 1 (2) 如果获取选择项的内容, 需要使用 SelectedItem 属性, 该属性返回一个 ListItem 类型的对象 通过该对象的 Text 属性或 Value 属性可以获取选择项的内容 如果 ListBox 控件允许多重选择时, 确定 ListBox 控件所选中的内容, 需要依次通过控件的 Items 集合, 分别测试每一项的 Selected 属性 主要代码如下 Protected void Button1_Click(object sender, System.EventArgs e) string msg = "" ; foreach(listitem li in ListBox1.Items) // 遍历集合中的内容 if(li.selected == true) // 判断某一项是否选中 msg += "<br>" + li.text + " is selected."; Label1.Text = msg;
ASP.NET 4.5 网站开发与应用实践教程 3.6 容器控件 容器控件在页面中的作用相当于一个容器, 容器控件是没有显示样式的, 但容器控件可将其他控件 ( 如前面几节介绍的控件 ) 包含在内, 形成一个分组, 并对其内部的控件单独执行 容器控件可以作为 Web 服务器控件 HTML 服务器控件和 HTML 元素对象的父控件,ASP.NET 中提供了多个与容器相关的控件, 本节将介绍最常用的两个控件 :MultiView 控件和 Panel 控件 3.6.1 Panel 控件 50 Panel 控件是容器控件的一种, 可以容纳其他控件, 并将其子控件组合为一个整体 Panel 控件通常会被称作面板 Panel 控件在工具箱中的符号为 Panel 控件在 3.2.2 节中使用过, 即向 Panel 控件中添加 Literal 控件,Literal 控件是可以通过代码添加在容器中的 当开发人员需要以编程的方式创建内容并需要一种将内容插入到页中的方法时, Panel 控件最为适用 该控件的常用三种方式如下 (1) 容纳其他控件, 将其他控件组合为一个整体进行管理 (2) 可以在 Panel 内设置默认按钮, 当用户在 Panel 面板的文本框输入时按 Enter 键, 这与用户单击特定的默认按钮具有相同的效果 (3) 部分控件 ( 如 TreeView) 没有内置的滚动条, 通过在 Panel 控件中放置滚动条控件可以添加滚动行为 同时可以使用 Panel 控件的 Height 和 Width 属性添加滚动条, 将 Panel 控件设置为特定的大小, 然后再设置 ScrollBars 属性 Panel 控件有多个属性分别设置控件的外观和文本方向等数据, 如表 3-12 所示为 Panel 控件的常用属性 表 3-12 Panel 控件的常用属性 属性名称 BackImageUrl DefaultButton Direction GroupingText ScrollBars HorizontalAlign Wrap 说明 控件背景图像文件和 URL 控件中默认按钮的 ID 控件中内容的显示方向, 默认值为 NoSet, 其他的值有 LeftToRight 和 RightToLeft 获取或设置控件中包含的控件组的标题, 如果指定了滚动条则设置该属性将不显示滚动条获取或设置控件中滚动条的可见性和位置获取或设置面板内容的水平对齐方式获取或设置一个指示面板中内容是否换行的值 注意不能够在 Panel 控件中同时指定滚动条和分组文本, 如果设置了分组文本, 其优先级高于滚动条
Web 服务器控件 第 3 章 3.6.2 MultiView 控件 MultiView 控件通常用作 View 控件组的容器 它允许开发人员定义一组有着子控件的 View 控件 MultiView 和 View 控件用作其他控件的容器, 并提供一种视图切换方式 MultiView 和 View 控件结合, 可制作出选项卡的效果 MultiView 在工具箱中的符号为, 可执行以下两个任务 (1) 根据用户选择或其他条件提供备选控件集 (2) 创建多页窗体 由于 MultiView 控件通常和 View 控件一起使用, 因此该控件通常被称作多视图控件 一个 MultiView 中可以包含多个 View 控件, 但是 MultiView 控件的当前活动控件只能是这些 View 控件中的一个 无论是 MultiView 控件还是各个 View 控件, 除了当前 View 控件的内容外, 都不会在页面中显示任何标记 MultiView 控件最常用的属性有两个 :ActiveViewIndex 和 Views ActiveViewIndex 用来获取或设置 MultiView 控件的活动 View 控件的索引 ; 而 Views 控件用来获取 MultiView 控件的 View 控件的集合 设置 MultiView 控件的 ActiveViewIndex 属性可以在视图间移动 另外,MultiView 控件还支持可以添加到每个 View 控件的导航按钮 如果要创建导航按钮, 可以向每个 View 控件添加一个按钮控件 (Button LinkButton 或 ImageButton) 然后可以将每个按钮的 CommandName 和 CommandArgument 属性设置为保留值, 这些保留值以使 MultiView 控件移动到另一个视图 如表 3-13 所示列出了 CommandName 值和相对应的 CommandArgument 值 51 表 3-13 CommandName 和 CommandArgument 值 CommandName 值 CommandArgument 值 NextView ( 没有值 ) PrevView ( 没有值 ) SwitchViewByID 要切换到的 View 控件的 ID SwitchViewByIndex 要切换到的 View 控件的索引号 3.7 其他控件 除了上述控件以外, 还有其他常用控件, 如图片显示控件 日历控件和广告控件等 几乎每一个网页中都有图片的显示, 图片显示使用 Image 控件, 而根据图片的不同区域, 响应不同事件则需要使用 ImageMap 控件 此外, 还有常见的时间控件, 可供用户选择或查阅日期, 本节将详细介绍 3.7.1 图片显示控件 图片显示控件是一个容易操作的控件, 其图片的显示正如标签控件显示文本一样
ASP.NET 4.5 网站开发与应用实践教程 通过为图片控件指定图片位置, 即可显示指定图片 图片显示控件为 Image 控件, 其在工具箱中的符号为 与其他控件不同, Image 控件不支持任何事件, 通常情况下, 将通过使用 ImageMap 或 ImageButton 控件来创建交互式图像 但 Image 控件有着常用属性, 可在代码中通过属性来控制 Image 控件对图片的显示, 包括图片的位置 大小等, 常见的属性如表 3-14 所示 表 3-14 属性名称 Width Height ImageAlign ImageUrl Image 控件的常用属性说明显示图像的宽度显示图像的高度图像的对齐方式要显示图像的 URL 52 除了显示图像外,Image 控件还可以为图像指定各种类型的文本 与之相关的属性如下所示 (1)ToolTip: 在一些浏览器中作为工具提供显示的文本 (2)AlternateText: 在无法找到图形文件时显示的文本 如果没有指定任何 ToolTip 属性, 某些浏览器将使用 AlternateText 值作为工具提示 (3)GenerateEmptyAlternateText: 该属性的值如果为 true, 则所呈现的图像元素的 alt 特性将设置为空字符串 ImageUrl 属性可以显示指定的文本, 还可以通过该属性绑定数据源, 以显示数据库后台的图像 Image 控件的简单使用代码如下 <asp:image ID="imgShow" ImageUrl="~/sg_icon.png" runat="server" Width= "200px" Height="200px" /> 上述代码为图片显示控件指定了图片位置 ~/sg_icon.png, 以及图片显示的宽度 200px 和高度 200px 3.7.2 图片响应控件 ImageMap 控件同样可以显示图像, 但该控件可提供三种不同区域, 以响应不同的事件 ImageMap 控件在工具箱中的符号为, 若添加了该控件, 其区域内部可添加三种区域, 代码如下 <asp:imagemap ID="ImageMap1" runat="server" ImageUrl="~/Styles/ 1045.jpg"> <asp:circlehotspot /> <asp:polygonhotspot /> <asp:rectanglehotspot /> </asp:imagemap> ImageMap 控件创建具有用户可以单击的单个区域的图像, 这些单个的区域点称为
Web 服务器控件 第 3 章 作用点 每一个作用点都可以是一个单独的超链接或回发事件 ImageMap 控件由两个元素组件 : 一个是图像, 它可以是任何标准的 Web 图形格式的图形 ( 如.jpg.gif 或.png); 另一个是 HotSpot 的集合, 每个作用点都是一个类型为 CircleHotSpot RectangleHotSpot 和 PolygonHotSpot 的不同项 ImageMap 控件可以包含 Image 控件的属性, 除了那些属性外, 该控件还有两个重要属性 :HotSpots 和 HotSpotMode HotSpotMode 属性表示获取或设置单击 HotSpot 对象时该控件对象的默认行为 它的值是 HotSpotMode 枚举的值之一, 具体说明如下 (1)NotSet: 未设置 默认情况下控件会执行导航操作, 即导航到指定的网页 ; 如果未指定导航的网页, 则导航到当前网站的根目录 (2)Navigate: 导航到指定的网页, 如果未指定导航的网页则导航到当前网站的根目录 (3)PostBack: 执行回发操作, 用户单击区域时执行预先定义的事件 (4)Inactive: 无任何操作, 这时该控件和 Image 控件的效果一样 ImageMap 控件在页面中的使用, 首先需要为该控件添加相应的区域, 接着是对其单击事件代码的编写 如分别定义三种区域代码如下 <asp:imagemap ID="ImageMap1" ImageUrl="~/Styles/1045.jpg " runat= "server" ImageAlign="Left" style="border:none" onclick="imagemap1_ Click" Width="500"> <asp:circlehotspot Radius="80" X="100" Y="100" AlternateText=" 圆形区域 " HotSpotMode="PostBack" PostBackValue="CH" /> <asp:rectanglehotspot Bottom="200" Left="300" Right="500" Top="0" HotSpotMode="PostBack" AlternateText=" 方形区域 " PostBackValue="RH" /> <asp:polygonhotspot Coordinates="100,100,300,300,200,300" HotSpotMode= "PostBack" PostBackValue="PH" AlternateText=" 多边形区域 " /> </asp:imagemap> 53 接下来可定义其单击事件, 如单击不同区域, 弹出不同内容的对话框, 其单击事件代码如下所示 protected void ImageMap1_Click(object sender, ImageMapEventArgs e) String region = ""; // 弹出对话框的显示文字 switch (e.postbackvalue) case "CH": region = " 圆形区域 "; break; case "RH": region = " 方形区域 "; break; case "PH": region = " 多边形区域 "; break;
ASP.NET 4.5 网站开发与应用实践教程 Page.ClientScript.RegisterStartupScript(GetType(), "", "<script>alert ('"+region+"');</script>");// 弹出对话框 3.7.3 日历控件 一些网站中会有时间的选择或显示, 可以使用日历控件 Calendar 控件 但对于日期的选择或显示, 目前有多种第三方的控件可以使用, 本节介绍 ASP.NET 中自带的控件 Calendar 控件在工具箱中的符号为, 它显示日历中的可选日期, 并显示与特定日期关联的数据 使用该控件可以执行以下操作 (1) 捕获用户交互 ( 例如在用户选择一个日期或一个日期范围时 ) (2) 自定义日历的外观 (3) 在日历中显示数据库中的信息 Calendar 控件可以显示某个月的日历, 也允许用户选择日期, 还可以跳转日期到前一个或下一个月, 如表 3-15 所示对 Calendar 控件的主要属性进行了具体说明 54 表 3-15 属性名称 Caption CaptionAlign Calendar 控件的主要属性 说明 日历的标题日历标题文本的对齐方式 其值包含 NotSet( 默认值 ) Bottom Left Right 和 Top DayNameFormat 获取或设置周中各天的名称格式 其值包括 Short( 默认值 ) Full FirstTwoLetters FirstLetter 和 Shortest FirstDayOfWeek 获取或设置要在控件的第一天列中显示的一周中的某天 默认值为 Default NextMonthText 获取或设置为下一个月导航控件显示的文本 NextPrevFormat 获取或设置控件的标题部分中下个月和上个月导航元素的格式 其值包括 CustomText( 默认值 ) FullMonth 和 ShortMonth PrevMonthText 获取或设置为前一个月导航控件显示的文本 SelectedDate 获取或设置选定的日期 SelectionMode 获取或设置日期的选定模式 其值包括 Day ( 默认值 ) DayWeek DayWeekMonth 和 None SelectMonthText 获取或设置为选择器列中月份选择元素显示的文本 SelectWeekText 获取或设置为选择器列中周选择元素显示的文本 ShowDayHeader 获取或设置一个值, 该值指示是否显示一周中各天的标头 默认值为 true ShowGridLines 获取或设置一个值, 该值指示是否用网格线分隔控件上的日期 默认值为 false ShowNextPrevMonth 获取或设置一个值, 该值指示控件是否在标题部分显示下个月和上个月导航 元素 默认值为 false TitleFormat 获取或设置标题部分的格式 默认值为 MonthYear 读者在调用 SelectedDate 属性获取选定的日期时, 该属性返回一个 DateTime 对象, 通过 DateTime 对象的各个方法可以获取不同的内容 例如, 调用 Add() 方法可以返回一个新的日期对象 ; 调用 ToShortDateString() 方法将 DateTime 对象的值转换为其等效的短
Web 服务器控件 第 3 章 日期字符串表示形式 提示除了上述属性外,Calendar 控件还可以使用其他属性指定外观内容 如 ForeColor 属性设置文本的颜色 ;DayHeaderStyle 属性设置标头行的样式 ; 以及 BackColor 属性设置背景颜色等 Calendar 控件主要使用两个事件 :DayRender 和 SelectionChanged 当控件创建要发送到浏览器的输出时引发 DayRender 事件, 在准备要显示的日时将为每个日引发该事件 ; 当用户通过单击日期选择器控件选择一天 一周或整月时引发该事件 在 DayRender 事件的方法中带有两个参数 : 包括对引发事件的 Calendar 控件的引用和 DayRenderEventArgs 类型的对象 该对象提供对另外两个对象的访问 (1)Cell: 它是一个 TableCell 对象, 可以用于设置个别日的外观 (2)Day: 可以用于查询关于呈现日的信息 该对象不仅支持各种可用于了解有关日的信息的属性 ( 如 IsSelected 和 IsToday 等 ), 还支持 Controls 集合, 可操作该集合以将内容添加到日中 3.7.4 广告控件 广告控件 AdRotator 控件用来在页面上生成随机广告性质的元素, 并通过 AdvertisementFile 属性获取或设置包含广告信息的 XML 文件的路径 AdRotator 控件通常获取 XML 文件中的信息, 并将广告信息显示出来 其在工具箱中的符号为, 只需创建好相关的 XML 文件, 并通过 AdvertisementFile 属性获取 XML 文件的路径即可, 在 XML 文件中, 需要对广告进行设置的属性如表 3-16 所示 55 表 3-16 属性说明 ImageUrl NavigateUrl AlternateText keyword Impressions 广告信息属性描述图像文件的绝对路径或相对地址当图像被单击时, 可访问相应的网页当鼠标移动到图片上方时, 将显示的提示信息指定广告的分类, 可以利用此属性来对广告条进行分类指定图片显示频率 AdRotator 控件的 AdvertisementFile 属性获取 XML 文件, 必须确保 XML 文件内容的规范性 如创建一个 XML 文件, 则其文件内容格式如下 <?xml version="1.0" encoding="utf-8"?> <Advertisements> <Ad> <ImageUrl>Styles/1045.jpg</ImageUrl> <NavigateUrl> 广告链接地址 </NavigateUrl> <AlternateText> 提示信息 </AlternateText> <Keyword> 广告分类 / 关键字 </Keyword>
ASP.NET 4.5 网站开发与应用实践教程 <Impressions> 该广告出现的频率 </Impressions> </Ad> <Ad> <ImageUrl> 显示图片的地址 </ImageUrl> <NavigateUrl></NavigateUrl> <AlternateText></AlternateText> <Keyword> </Keyword> <Impressions>10</Impressions> </Ad> </Advertisements> 3.8 实验指导 常识调查页面 56 结合本章内容, 创建常识调查页面, 测试小学生对常识的了解情况 要求分别添加一道单选题和一道多选题, 在提交之后显示学生的答案和正确答案 ; 在提交之前需要学生选择自己所在的年级, 步骤如下 (1) 首先是页面的创建, 步骤省略 学生需要选择自己所在的年级, 可使用下拉列表 ; 选择题的选项是需要列举出来让学生选择的, 因此可分别使用 RadioButtonList 控件和 CheckBoxList 控件来编写单选题和多选题 另外, 需要 提交 按钮和用来显示信息的标签, 并额外添加一个容器, 显示正确答案 上述过程所涉及的控件代码如下 <asp:dropdownlist ID="classList" runat="server" Height="20px" Width= "80px"> <asp:listitem Selected="True"> 一年级 </asp:listitem> <asp:listitem> 二年级 </asp:listitem> <asp:listitem> 三年级 </asp:listitem> <asp:listitem> 四年级 </asp:listitem> </asp:dropdownlist> <asp:radiobuttonlist ID="direction" runat="server"> <asp:listitem> 东 </asp:listitem> <asp:listitem> 西 </asp:listitem> <asp:listitem> 南 </asp:listitem> <asp:listitem> 北 </asp:listitem> </asp:radiobuttonlist> <asp:checkboxlist ID="province" runat="server"> <asp:listitem> 哈尔滨 </asp:listitem> <asp:listitem> 黑龙江 </asp:listitem> <asp:listitem> 吉林 </asp:listitem> <asp:listitem> 辽宁 </asp:listitem> </asp:checkboxlist> <asp:button ID="Submit" runat="server" Text=" 提交 " BackColor="#E2F2FF" BorderColor="#007ACC" BorderStyle="Outset" Height="24px" Width="103px" OnClick="Submit_Click" /> <asp:label ID="subLabel" runat="server" Text=" 您的提交 :"></asp:label> <asp:panel ID="Panel1" runat="server"> 正确答案 :</asp:panel>
Web 服务器控件 第 3 章 (2) 接下来定义 提交 按钮的鼠标单击事件, 遍历学生的答案并显示, 同时添加 Literal 控件显示正确答案, 代码如下 protected void Submit_Click(object sender, EventArgs e) string cla = classlist.selectedvalue; string dir = direction.selectedvalue; string provinces = ""; foreach (ListItem item in province.items) // 遍历集合项 if (item.selected) // 某项是否选中 provinces += item.value + " "; if (cla == "" dir == "" provinces == "") sublabel.text = " 请填写完整 "; sublabel.forecolor = System.Drawing.Color.Red; else sublabel.text = " 您的提交 :" + cla + "; 您的答案是 :" + dir + ";" + provinces; sublabel.forecolor = System.Drawing.Color.Black; Literal liter = new Literal(); liter.id = "litertext"; liter.text = " 南 ; 黑龙江 吉林 辽宁 "; Panel1.Controls.Add(liter); 57 (3) 运行该页面, 选择 三年级 并选中一些答案, 单击 提交 按钮, 页面的运行效果如图 3-7 所示 图 3-7 常识调查页面
ASP.NET 4.5 网站开发与应用实践教程 思考与练习 58 一 填空题 1.Button 控件的 属性表示与控件相关联的命令名 2.CheckBox 控件的 属性表示某一项是否被选取 3. 如果 Image 控件设置的图像路径不存在, 可以通过 属性设置无法显示图像时的文本 4. 将 ListBox 控件的 SelectionMode 属性的值设置为 时允许用户选择多个项目 二 选择题 1. 与 HyperLink 外观和功能类似的控件是 A.LinkImage B.LinkLabel C.LinkButton D.LinkList 2. 设置按钮单击事件的属性是 A.OnClick B.On Checked C.Click D.ClickOn 3. 判断 CheckBoxList 中的选项是否被选中使用 属性 A.Checked B.Selected C.IsCheck D.IsSelect 4. 当用户修改 DropDownList 控件当前项时引发该控件的 事件 A.SelectedChanged B.IndexChanged C.ChangedSelected D.SelectedIndexChanged 三 简答题 1. 简述控件的分类 2. 概括服务器控件的特点 3. 概括 RadioButtonList 和 RadioButton 控件的区别 4. 概括 RadioButton 和 CheckBox 控件的区别