《ASP.NET2.0 Web数据库开发教程 教学课件 ppt 作者 宫继兵 第6章 Web服务器控件》由会员分享,可在线阅读,更多相关《ASP.NET2.0 Web数据库开发教程 教学课件 ppt 作者 宫继兵 第6章 Web服务器控件(79页珍藏版)》请在金锄头文库上搜索。
1、第6章 Web服务器控件,本章要点及学时安排,了解ASP.NET中提供的各类Web服务器控件 熟悉并掌握各类Web服务器控件的使用方法 在学生信息管理系统中Web服务器控件的应用,本章授课学时为6学时 练习和上机学时为6学时,-本章要点,-学时安排,教学内容,ASP.NET服务器控件的作用 ASP.NET各种服务器控件的用法 ASP.NET各种服务器控件实例开发,6.1 ASP.NET服务器控件简介,ASP.NET Web 服务器控件是 ASP.NET 网页上的对象,这些控件在该页被请求时运行并向浏览器呈现标记,许多 Web 服务器控件类似于常见的 HTML 元素,而其它一些控件则包含复杂的行
2、为。这些控件比 HTML 服务器控件具有更多内置功能。 Web 服务器控件不仅包括窗体控件(例如按钮和文本框),而且还包括特殊用途的控件(例如日历、菜单和树视图控件)。,6.1 ASP.NET服务器控件简介,ASP.NET中提供的Web服务器控件可分为: 显示控件,主要有:标签Label控件、图片Image控件、面板Panel控件; 输入控件,主要有:文本框TextBox控件、复选框CheckBox件、单选框RadioButton控件; 控制控件,主要有:按钮 Button控件、超链接HyperLink控件、LinkButton控件、ImageButton控件; 列表控件,主要有:下拉列表框D
3、ropDownList控件、列表框ListBox控件、复选列表框CheckBoxList控件、单选列表框RadioButtonList 控件和表格Table控件。,6.1 ASP.NET服务器控件简介,本章将重点介绍“Web窗体”控件 Web服务器控件层次结构图如下,6.1 ASP.NET服务器控件简介,在Web页面中使用Web服务器控件一般遵循如下步骤: 1)声明服务器控件 2)操作服务器控件 3)处理控件操作事件 声明的基本语法为: 文本 或者 ,6.2 用Label控件动态显示文本信息,Label标签控件是最简单常用的控件,用于向页面显示输出文本。然而,若要显示静态文本,可以使用HTML
4、呈现,而不必用Label控件;仅当需要在服务器代码中更改文本的内容或其它特性,在ASP.NET网页中显示处于编程控制下的文本,才使用Label控件。 Label标签控件的定义语法为: 输出的文本 或 ,6.2 用Label控件动态显示文本信息,开发准备过程参考书例6-1的操作过程,窗体设计如图,6.2 用Label控件动态显示文本信息,例6-1中用到的控件和属性设置,6.2 用Label控件动态显示文本信息,private void btnSubmit_Click(object sender, System.EventArgs e) string name=this.txtName.Text;
5、 /获取文本框txtName的用户名 string gender=this.txtGender.Text; /获取文本框txtGender的用户性别 if (gender=“男“) /进行性别判断,动态显示不同的文本 this.lblWelcome.Text=name+“ 先生,欢迎你光临我的网站!“; else this.lblWelcome.Text=name+“ 小姐,欢迎你光临我的网站!“; ,例6-1动态改变Label内容的部分代码如下:,6.3 命令的执行和选择按钮的使用方法,按钮控件在应用系统的开发中是使用得较多的控件,它提供命令按钮的操作,用于将 Web窗体页面回发给服务器,或
6、完成用户设定的数据处理程序。 Web服务器控件包括有三种类型的按钮:普通命令按钮(Button 控件)、超链接样式按钮(LinkButton 控件)和图形按钮(ImageButton 控件)。这三种按钮提供类似的功能,但具有不同的外观。,6.3.1 普通按钮(Button)在运行时更改标签,Button服务器控件显示一个标准命令按钮,默认是“提交”按钮,当用户单击按钮时,会向服务器提交一个窗体,将Web页发送回服务器。默认情况下,Button控件使用HTML POST操作提交页面,之后该页回发到其本身,在这里重新生成相同的页面并处理该页上控件的事件处理程序。 Button按钮控件定义语法为:
7、,6.3.1 普通按钮(Button)在运行时更改标签,设计过程参见例6-2 窗体设计图如下,6.3.1 普通按钮(Button)在运行时更改标签,例6-2中用到的控件和属性设置,6.3.1 普通按钮(Button)在运行时更改标签,例6-2按钮的代码如下:,protected void btnRed_Click(object sender, EventArgs e) this.lblSelectColor.Text = “你选择了红色!“; /显示红色文本 protected void btnBlue_Click(object sender, EventArgs e) this.lblSel
8、ectColor.Text = “你选择了蓝色!“; /显示蓝色文本 ,6.3.2 多个链接按钮(LinkButton)使用同一个事件处理过程,与Button控件相似,LinkButton用于将Web窗体页回发给服务器或执行用户编写的事件代码,但它呈现为页面中的一个超链接样式按钮,与HyperLink控件的外观相同。若只需要实现链接到另一个Web页,使用HyperLink控件即可;若还需要执行一些相应的操作和处理,则需使用LinkButton控件。 LinkButton链接按钮控件的定义语法为: 显示的文本,6.3.2 多个链接按钮(LinkButton)使用同一个事件处理过程,设计过程参见书
9、例6-3 窗体设计如下,6.3.2 多个链接按钮(LinkButton)使用同一个事件处理过程,例6-3中用到的控件和属性设置,6.3.2 多个链接按钮(LinkButton)使用同一个事件处理过程,例6-3按钮事件代码如下,protected void lbnPixel_Command(object sender, CommandEventArgs e) string result = “选购数码相机时,你的首选项是:“; switch (e.CommandName) /判断用户所点击的链接按钮CommandName属性 case “1“: this.lblShowSelect.Text =
10、 result + “像素值“; break; case “2“: this.lblShowSelect.Text = result + “体积小“; break; case “3“: this.lblShowSelect.Text = result + “显示屏大“; break; case “4“: this.lblShowSelect.Text = result + “变焦能力“; break; ,6.3.2 多个链接按钮(LinkButton)使用同一个事件处理过程,例6-3页面代码如下,像素值高 体积小巧 显示屏大 光学变焦高,6.3.3 创建前进后退图片按钮ImageButton)
11、,ImageButton控件即图片按钮,功能与Button控件相同,只是ImageButton控件使用图片作为其外观,这对于提供丰富的按钮外观和美化界面非常有帮助。 当单击ImageButton控件时,将同时引发Click和Command事件。通过设置ImageUrl属性质指定在控件中显示的图像存放路径,其它属性和Button控件相同。 ImageButton图片按钮的定义语法为: ,6.3.3 创建前进后退图片按钮ImageButton),设计过程参见书例6-4 窗体设计如下,6.3.3 创建前进后退图片按钮ImageButton),例6-4中用到的控件和属性设置,6.3.3 创建前进后退图
12、片按钮ImageButton),图片按钮事件处理代码,protected void ibnPrevous_Click(object sender, ImageClickEventArgs e) this.imgGoodsPic.ImageUrl = “images/pic1.jpg“; /显示pic1图片 protected void ibnNext_Click(object sender, ImageClickEventArgs e) this.imgGoodsPic.ImageUrl = “images/pic2.jpg“; /显示pic2图片 ,6.4 TextBox控件在程序中输入和显
13、示数据,TextBox控件在Web页上创建单行或多行文本框,是录入或显示文本的控件。 TextBox文本框控件的定义语法为: ,6.4 TextBox控件在程序中输入和显示数据,TextBox控件属性列表,6.4 TextBox控件在程序中输入和显示数据,设计过程参考书本 例6-5 窗体设计图,6.4 TextBox控件在程序中输入和显示数据,例6-5中用到的控件和属性设置,6.4 TextBox控件在程序中输入和显示数据,提交按钮的事件处理代码如:,protected void btnSubmit_Click(object sender, EventArgs e) string name,
14、contact; name = this.txtName.Text; /获取用户名 contact = this.txtContact.Text; /获取用户联系方式 this.txtConfirm.Text = “你提交的信息如下:n姓名:“ + name + “n联系方式:“ + contact; ,6.5 数据的选择DropDownList控件的使用方法,6.5.1 下拉框数据项的动态添加 1、使用DropDownList下拉列表框控件可以创建单选的下拉列表,让用户从已设置好的选项中选择一项。 2、通过设置BorderColor边框颜色、BorderStyle边框样式和BorderWid
15、th边框宽度属性可以控制DropDownList控件的外观。 3、DropDownList控件还支持数据绑定。,6.5.1 下拉框数据项的动态添加,DropDownList下拉列表框控件的定义语法为: 选项显示的内容 ,6.5.1 下拉框数据项的动态添加,DropDownList控件属性列表,6.5.1 下拉框数据项的动态添加,参考书中例6-6设计过程 设计窗体如下,6.5.1 下拉框数据项的动态添加,例6-6中用到的控件和属性设置,6.5.1 下拉框数据项的动态添加,部分代码如下:,protected void btnAdd_Click(object sender, EventArgs e)
16、 if (txtNewColor.Text.Trim() != “) /判断用户是否填写了新的颜色 int intIndex = this.ddlColors.Items.Count; /获取当前下拉列表中选项的数目 this.ddlColors.Items.Insert(intIndex,txtNewColor.Text.Trim(); /在Index位置添加新选项 ,6.5.2 显示和改变下拉框中的选择项,例6-7使用下拉列表框控件的选择索引SelectedIndex属性和选择项SeletedItem属性,通过按钮的控制来选择项目 。窗体如下:,6.5.2 显示和改变下拉框中的选择项,例6-7中用到的控件和属性设置,6.5.2 显示和改变下拉框中的选择项,代码如下:,protected void Page_Load(object sender, EventArgs e) / 在此处放置用户代码以初始化页面,设置