第4章标准控件

第4章ASP.NET3.5标准控件1本章要点：理解ASP.NET3.5页面事件处理流程了解HTML服务器控件熟悉ASP.NET3.5标准控件熟练掌握各个控件应用实例2目录4.1ASP.NET3.5页面事件处理4.1.1ASP.NET3.5事件4.1.2属性IsPostBack4.2ASP.NET3.5服务器控件概述4.2.1HTML服务器控件简介4.2.2Web服务器控件简介3目录4.3标准控件4.3.1Label控件4.3.2TextBox控件4.3.3Button、LinkButton和ImageButton控件4.3.4DropDownList控件4.3.5ListBox控件4.3.6CheckBox和CheckBoxList控件4.3.7RadioButton和RadioButtonList控件4.3.8Image和ImageMap控件4目录4.3.9HyperLink控件4.3.10Table控件4.3.11Panel和PlaceHolder控件4.3.12MultiView和View控件4.3.13Wizard控件4.4小结

54.1ASP.NET3.5页面事件处理只有熟悉ASP.NET3.5页面事件处理流程，才能理解代码的执行顺序。64.1.1ASP.NET3.5事件常用页面处理事件Page_PreInit：通过IsPostBack属性确定是否第一次处理该页、创建动态控件、动态设置主题属性、读取配置文件属性等。Page_Init：初始化控件属性。Page_Load：读取和更新控件属性。控件事件：处理特定事件，如Button控件的Click事件。事件处理的先后顺序Page_PreInit、Page_Init、Page_Load和控件的事件74.1.1ASP.NET3.5事件（续）Click事件被触发时会引起页面往返处理。Change事件被触发时，先将事件的信息暂时保存在客户端的缓冲区中，等到下一次向服务器传递信息时，再和其他信息一起发送给服务器。若要让控件的Change事件立即得到服务器的响应，就需要将该控件的属性AutoPostBack值设为true。84.1.2属性IsPostBack当控件的事件被触发时，Page_Load事件会在控件的事件之前被触发。如果想在执行控件的事件代码时不执行Page_Load事件中的代码，可以通过判断属性Page.IsPostBack实现。属性IsPostBack在用户第一次浏览网页时，会返回值false，否则返回值true。9实例4-1属性IsPostBack应用本实例在页面第一次载入时显示“页面第一次加载！”。当单击按钮时显示“执行Click事件代码！”信息。源程序：IsPostBack.aspx程序说明：当单击按钮时引起页面往返，此时首先处理Page_Load事件中代码，但因为“！IsPostBack”值为false，所以不执行“Response.Write(“页面第一次加载！”)”，然后处理Click事件中代码，显示“执行Click事件代码！”信息。104.2ASP.NET3.5服务器控件概述HTML服务器控件：常用于升级原有的ASP页面到ASP.NET页面。Web服务器控件：目前的ASP.NET3.5网站建设中，优先考虑Web服务器控件。当Web服务器控件无法完成特定的任务时，可考虑HTML服务器控件。114.2.1HTML服务器控件简介实现了将XHTML元素到服务器控件的转换。经过转换后，Web窗体页就可访问XHTML元素（HTML服务器控件），从而实现在服务器端对HTML服务器控件的编程。添加属性“runat="server"”将转换XHTML元素到HTML服务器控件。 <inputid="Button2"type="button"value="button"/> <inputid="Button2"type="button"value="button"runat="server"/>124.2.2Web服务器控件简介可以描述页面元素的功能、外观、操作方式和行为等。对于不同的浏览器，可能会得到不同的XHTML输出。根据功能不同分成标准控件、数据控件、验证控件、导航控件、登录控件、WebParts控件、AJAXExtensions控件和用户自定义控件。

134.3标准控件属性名说明属性名说明AccessKey控件的键盘快捷键Font控件的字体属性Attributes控件的所有属性集合Height控件的高度BackColor控件的背景色ID控件的编程标识符BoderWidth控件的边框宽度TabIndex控件的索引顺序BoderStyle控件的边框样式Text控件上显示的文本CssClass控件的CSS类名ToolTip当鼠标悬停在控件上时显示的文本CssStyle控件的样式Visible控件是否在Web页上显示Enabled是否启用Web服务器控件Width控件的宽度144.3.1Label控件用于在浏览器上显示文本，可以在服务器端动态地修改文本。通过Text属性指定控件显示的内容。定义的语法格式如下： <asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>很实用的属性AssociatedControlID：值可把Label控件与窗体中另一个服务器控件关联起来。15实例4-2通过键盘快捷键激活特定文本框当按下ALT+N时，将激活用户名右边的文本框；当按下ALT+P时将激活密码右边的文本框。源程序：Lable.aspx164.3.2TextBox控件用于显示数据或输入数据。语法格式如下：

<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>

17

TextBox控件常用属性、方法和事件表TextMode属性值“SingleLine”表示单行文本框；值“Password”表示密码框，将显示特殊字符，如“*”；值“MultiLine”表示多行文本框。AutoPostBack属性值“true”表示当文本框内容改变且把焦点移出文本框时触发TextChanged事件，引起页面往返处理。AutoCompleteType属性标注能自动完成的类型，如Email表示能自动完成邮件列表。Focus()方法设置文本框焦点。TextChanged事件当改变文本框中内容且焦点离开文本框后触发。18实例4-3控件TextBox综合应用当页面载入时，焦点自动定位在用户名右边的文本框中；当输入用户名并把焦点移出文本框时，将触发TextChanged事件，判断用户名是否可用，若可用则在lblValidate中显示“√”，否则显示“用户名已占用！”；密码右边的文本框显示为密码框；E-mail右边的文本框具有自动完成功能。源程序：TextBox.aspx

19程序说明当页面载入时，触发Page_Load事件，将焦点定位在用户名右边的文本框中。本示例中用户合法性判断是与固定用户名“jxssg”比较，实际使用需连接数据库，与数据库中保存的用户名比较。要看到自动完成Email列表的效果，需先输入E-mail并单击确认后再次输入信息时才能看到效果。204.3.3Button、LinkButton和ImageButton控件

Button：传统按钮外观。LinkButton：超链接外观。ImageButton：图形外观，其图像由ImageUrl属性设置。 <asp:ButtonID="Button1"runat="server"Text="Button"/> <asp:LinkButtonID="LinkButton1"runat="server">LinkButton</asp:LinkButton> <asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/pic/map.JPG"/>

21按钮控件实用属性和事件PostBackUrl属性：单击按钮时发送到的URL。Click事件：当单击按钮时被触发，执行服务器端代码。ClientClick事件：当单击按钮时被触发，执行客户端代码。22比较<a>与LinkButton两者都能呈现超链接形式设置具体的跳转方法不同。在<a>元素中通过属性href设置，如：

<ahref="">链接到21世纪</a>

而在LinkButton中需要设置PostBackUrl属性或在Click事件中输入代码，通过Response对象的重定向方法Redirect()实现，如：

Response.Redirect("");23实例4-4利用Button控件执行客户端脚本要在单击Button控件后执行客户端脚本，需要使用ClientClick事件和JavaScript。源程序：ClientClick.aspx程序说明：当单击删除按钮时，触发ClientClick事件，执行JavaScript代码“returnconfirm('确定要删除记录吗?')”，弹出确认对话框。若单击“确定”按钮，触发Click事件，执行删除操作（这里仅输出信息，实际操作需连接数据库）；若单击“取消”，将不再触发Click事件，运行结束。244.3.4DropDownList控件允许用户从预定义的下拉列表中选择一项。 <asp:DropDownListID="DropDownList1"runat="server"></asp:DropDownList>25DropDownList控件实用属性和事件表DataSource属性使用的数据源。DataTextField属性对应数据源中的一个字段，该字段所有内容将被显示于下拉列表中。DataValueField属性数据源中的一个字段，指定下拉列表中每个可选项的值。Items属性列表中所有选项的集合，经常使用Items.Add()方法添加项，Clear()方法删除所有项。SelectedItem属性当前选定项。SelectedValue属性当前选定项的属性Value值。SelectedIndexChanged事件当选择下拉列表中一项后被触发。DataBind()方法绑定数据源。26添加项到DropDownList中在属性窗口中直接对属性Items进行设置利用DropDownList对象的Items.Add()方法添加项，如： DropDownList1.Items.Add(newListItem("浙江","zhejiang"));通过属性DataSource设置数据源，再通过DataBind()方法显示数据。27实例4-5实现联动的下拉列表联动的下拉列表在实际工程项目中非常普遍，如要查询某班级的课表，需要“学年—学期—分院—班级”这样联动的下拉列表。本实例以日期联动为例，在默认情况下，显示系统日期，当改变年或月时，相应的每月天数会随之而变。28实例4-5实现联动的下拉列表（续）源程序：DropDownList.aspx程序说明：浏览时首先触发Page_Load事件，绑定年、月、日到三个DropDownList控件。当改变年或月份时，触发相应控件的SelectedIndexChanged事件形成页面往返，将相应月份的天数绑定到ddlDay。294.3.5ListBox控件DropDownList和ListBox控件都允许用户从列表中选择项，区别在于DropDownList的列表在用户选择前处于隐藏状态，而ListBox的选项列表是可见的，并且可同时选择多项。<asp:ListBoxID="ListBox1"runat="server"></asp:ListBox>SelectionMode属性：值为Multiple表示允许选择多项。30实例4-6实现数据项在ListBox控件之间的移动当选择左边列表框中的项，再单击按钮后相应的项将移动到右边的列表框。源程序：ListBox.aspx314.3.6CheckBox和CheckBoxList控件为用户提供“真/假”、“是/否”或“开/关”选项之间进行选择的方法，若需要多项选择，可以使用多个CheckBox或单个CheckBoxList，但一般采用CheckBoxList。<asp:CheckBoxID="CheckBox1"runat="server"/> <asp:CheckBoxListID="CheckBoxList1"runat="server"></asp:CheckBoxList>324.3.6CheckBox和CheckBoxList控件（续）注意：判断CheckBox是否选中的属性是Checked，而CheckBoxList作为集合控件，判断列表项是否选中的属性是成员的Selected属性。在实际工程项目中，一般设置CheckBoxList的属性AutoPostBack值为false。要提交数据到服务器，不采用CheckBoxList的自身事件，而是常配合Button控件实现。33实例4-7CheckBoxList应用当选择个人爱好并单击提交按钮后显示选中项的提示信息。源程序：CheckBoxList.aspx344.3.7RadioButton和RadioButtonList控件常用于在多种选择中只能选择一项的场合。单个的RadioButton只能提供单项选择，可以将多个RadioButton形成一组，方法是设置每个RadioButton的属性GroupName为同一名称。<asp:RadioButtonID="RadioButton1"runat="server"GroupName="group"/> <asp:RadioButtonID="RadioButton2"runat="server"GroupName="group"/>354.3.7RadioButton和RadioButtonList控件<asp:RadioButtonListID="RadioButtonList1"runat="server"><asp:ListItem>男</asp:ListItem><asp:ListItem>女</asp:ListItem></asp:RadioButtonList>注意：判断RadioButton是否选中使用Checked属性，而获取RadioButtonList的选中项使用属性SelectedItem。364.3.8Image和ImageMap控件Image控件用于在Web窗体上显示图像，图像源文件可以使用ImageUrl属性在界面设计时确定，也可以在编程时指定。在工程实际项目中常与数据源绑定，根据数据源指定信息显示图像。<asp:ImageID="Image1"runat="server"ImageUrl="~/pic/map.JPG"/>注意：Image控件不包含Click事件，如果需要Click事件处理流程，可使用ImageButton控件代替Image控件。374.3.8Image和ImageMap控件（续）ImageMap控件除可以用来显示图像外，还可以实现图像的超链接。可以将显示的图像划分为不同形状的热点区域，分别链接到不同的网页。在工程实际项目中，常用于导航条、地图等。热点区域通过属性HotSpot设置，划分的区域有圆形CircleHotSpot、长方形RectangleHotSpot和任意多边形PolygonHotSpot，每个区域通过属性NavigateUrl确定要链接到的URL。38实例4-8利用ImageMap设计导航条整个导航条是一张图片，当设置好热点区域后，点击不同区域将链接到不同网页。源程序：ImageMap.aspx394.3.9HyperLink控件用于在网页上创建链接，与元素<a>不同，HyperLink控件可以与数据源绑定。<asp:HyperLinkID="HyperLink1"runat="server"Target="_blank">HyperLink</asp:HyperLink>属性Target：值为框架名、_blank或_self。框架名决定了在指定的框架中显示链接页，_blank决定了在一个新窗口中显示链接页，而_self决定了在原窗口中显示链接页。404.3.9HyperLink控件注意：HyperLink控件不包含Click事件，要使用Click事件可用LinkButton控件代替。在同时设置属性Text和ImageUrl的情况下，ImageUrl优先。若找不到图片则显示属性Text设置的内容。在HyperLink中直接设置ImageUrl后显示的图形尺寸是不可调的，若要改变图形尺寸，可配合使用Image控件。41实例4-9组合使用HyperLink和Image控件本实例呈现页面中显示图片的尺寸与实际图片的尺寸不相同。源程序：HyperLink.aspx424.3.10Table控件用于在Web窗体上动态地创建表格，是一种容器控件。Table对象由行（TableRow）对象组成，TableRow对象由单元格（TableCell）对象组成。<asp:TableID="Table1"runat="server"GridLines="Both"><asp:TableRowrunat="server"><asp:TableCellrunat="server">学号</asp:TableCell><asp:TableCellrunat="server">姓名</asp:TableCell><asp:TableCellrunat="server">成绩</asp:TableCell></asp:TableRow></asp:Table>434.3.10Table控件（续）注意：向Table添加行使用属性Rows；向TableRow添加单元格使用属性Cells；向TableCell添加控件使用属性Controls。44实例4-10动态生成表格本实例页面上的简易成绩录入界面实质是动态生成的表格。源程序：Table.aspx454.3.11Panel和PlaceHolder控件都是Web窗体上的容器控件，常用于动态地建立控件和不同情况下在同一个页面上显示不同内容。相比较而言，Panel控件的属性要丰富得多。Panel控件把包含在其中的控件组当成一个整体看待，这样可以统一设置属性。 <asp:PanelID="Panel1"runat="server"></asp:Panel> <asp:PlaceHolderID="PlaceHolder1"runat="server"></asp:PlaceHolder>46实例4-11利用Panel实现简易注册页面源程序：Panel.aspx程序说明：当页面载入时，首先执行Page_Load事件代码，将pnlStep1设置为可见，而将其它两个Panel控件设置为不可见。判断用户名是否重复在实际工程项目中将与数据库连接。信息也将保存到数据库中。47实例4-12利用PlaceHolder动态添加控件PlaceHolder控件在Web窗体上起到占位的作用，可向其中动态地添加需要的控件。源程序：PlaceHolder.aspx程序说明：页面载入时，执行Page_Load事件代码，动态生成一个Button控件和一个TextBox控件。当单击“确认”按钮时，根据注册的事件执行btnSubmit_Click()中代码。48实例4-12利用PlaceHolder动态添加控件注意：如果一个包含动态生成控件的页面有往返处理，那么动态生成控件的代码要放在Page_Load事件中，当页面往返时触发Page_Load事件需要重复生成动态控件；动态生成的控件不能在设计时直接绑定事件代码，需手工注册；在获取动态生成控件中文本框等控件的输入信息时，需要使用FindControl()方法先找到控件。494.3.12MultiView和View控件提供了一种多视图切换显示信息的方式，可以容易地实现分页多步骤功能。在使用时，MultiView作为View的容器控件，View作为其它控件的容器控件。<asp:MultiViewID="MultiView1"runat="server"><asp:ViewID="View1"runat="server"></asp:View><asp:ViewID="View2"runat="server"></asp:View></asp:MultiView>ActiveViewIndex属性：决定了当前显示哪个视图，默认值为-1，值0表示MultiView中包含的第一个View。50View中Button类型控件实用属性表CommandNameCommandArgument说明NextView不需要设置显示下一个ViewPrevView不需要设置显示上一个ViewSwitchViewByID要切换到的View控件ID切换到指定ID的ViewViewByIndex要切换到的View控件索引号切换到指定索引号的View51实例4-13利用MultiView和View实现用户编程习惯调查源程序：MultiView.aspx524.3.13Wizard控件Wizard控件作为一种向导控件，主要用于搜集用户信息、配置系统等。<asp:WizardID="Wizard1"runat="server"><WizardSteps><asp:WizardSteprunat="server"title="Step1"></asp:WizardStep><asp:WizardSteprunat=