网页标准控件的使用.ppt

动态网站设计与开发(ASP.NETC#版),ASP.NET动态网页设计案例教程(C#版),动态网站设计与开发(ASP.NETC#版),第03讲Web服务器控件,教学目标Web服务器端控件、HTML控件和用户自定义控件是ASP.NET所支持的三种控件。Web服务器端控件是ASP.NET首选控件，包括标准控件和验证控件；本讲关注重点：常用Web服务器端标准控件,从标准控件开始,动态网站设计与开发(ASP.NETC#版),第03讲Web服务器控件,任务实践初识Web服务器控件案例1：“学生基本信息登记表”案例2：各类控件示例。其他控件,动态网站设计与开发(ASP.NETC#版),3.1Web服务器端控件概述,Web服务器端控件是ASP.NET重要的组成部分。服务器端控件包含方法以及与之关联的事件处理程序，并且这些代码都在服务器端执行。VisualStudio2005提供了可视化的编程环境，开发人员可以利用这些控件方便的创建动态网页。,动态网站设计与开发(ASP.NETC#版),3.1Web服务器端标准控件概述,Web服务器端控件先在服务器执行，执行的结果以HTML的形式发送给客户端浏览器进行解析，这样在使用ASP.NET编写服务器端程序时，不必考虑客户浏览器的兼容性问题。,动态网站设计与开发(ASP.NETC#版),3.1Web服务器端标准控件概述,控件类型,动态网站设计与开发(ASP.NETC#版),3.1Web服务器端标准控件概述,格式如下：或者写成代码需要写在一对尖括号内，前缀asp为必加项，Control表示控件的类型；ID为该控件的属性，是控件的唯一标识，即编程时使用的名字；runat是固有属性，其值为固定值“server”，表示这是一个服务器端控件。根据实际情况，里面还可以有更多的属性，可以在属性窗口设置或在源代码中直接添加。实例演示,控件结构,动态网站设计与开发(ASP.NETC#版),3.2“学生基本信息登记表”案例,3.2.1案例说明,动态网站设计与开发(ASP.NETC#版),3.2“学生基本信息登记表”案例步骤,1.创建一Web窗体文件2.页面的界面设计1)使用HTML中的表格控件搭建页面框架2)界面设计，在表格中添加各种控件3.为控件添加脚本4.测试页面,3.2.2操作步骤,动态网站设计与开发(ASP.NETC#版),给RadioButtonList控件添加脚本,protectedvoidradlistLanguage_SelectedIndexChanged1(objectsender,EventArgse)if(radlistLanguage.SelectedItem.Text=其他)lblLanguage.Text=您的外语种类是：;Panel1.Visible=true;elsePanel1.Visible=false;,动态网站设计与开发(ASP.NETC#版),本节知识点,1.文本框控件（TextBox）2.三种按钮控件(Button、ImageButton和LinkButton控件)3.显示控件(Label控件、Image控件)4.选择与列表控件(RadioButton控件和RadioButtonList控件、CheckBox控件和CheckBoxList控件、ListBox控件和DropDownList控件)5.文件上传控件(FileUpload控件)6.Table控件7.Panel控件和PlaceHolder控件,动态网站设计与开发(ASP.NETC#版),1.文本框控件（TextBox）,实例演示（P68/图5.12）,动态网站设计与开发(ASP.NETC#版),2.按钮控件Button,Button控件，源视图中对应的标签为：按钮控件均可以把页面上的输入信息提交给服务器，对其发生Click（单击）事件能激活服务器脚本中对应的事件过程代码。实例演示（P69/图5.13）,拓展知识（实验3之1）,动态网站设计与开发(ASP.NETC#版),代码部分,protectedvoidbtnButton_Click(objectsender,EventArgse)txtInfo.Text=您单击了提交按钮！;源代码视图模式，Button控件的标签为：OnClick为Button控件的一个属性，属性值为btnButton_Click，表明当Button控件发生Click事件时，激活了btnButton_Click事件过程脚本，该过程通过“txtInfo.Text=您单击了提交按钮！”语句，向TextBox控件中写入“您单击了提交按钮！”。,动态网站设计与开发(ASP.NETC#版),3.显示控件(Label控件、Image控件),Label控件用于在页面上显示文本，Image控件用于在页面上显示图像，使用Image控件的ImageUrl属性设置图形文件的URL地址，设置完成后对应的图标才会显示相应的图形。实例演示（P69-70/图5.14、5.15）,拓展知识（实验3之2）,动态网站设计与开发(ASP.NETC#版),4.选择与列表控件,1）RadioButton控件和RadioButtonList控件2）CheckBox控件和CheckBoxList控件3）ListBox控件和DropDownList控件,动态网站设计与开发(ASP.NETC#版),1)RadioButton控件和RadioButtonList控件,使用RadioButton控件可以生成一组单选按钮。实例演示（P71/图5.16）RadioButtonList控件具有和RadioButton控件同样的功能，并且可以方便管理各个数据项。实例演示（P72/图5.17）,动态网站设计与开发(ASP.NETC#版),RadioButton控件实例脚本,protectedvoidbtnSubmit_Click(objectsender,EventArgse)stringsex=;if(radMan.Checked=true)sex=男生;if(radWoman.Checked=true)sex=女生;lblResult.Text=您是一名+sex;,动态网站设计与开发(ASP.NETC#版),RadioButtonList控件完成数据项的添加后源代码部分,英语俄语法语,动态网站设计与开发(ASP.NETC#版),RadioButtonList控件脚本部分,protectedvoidbtnSubmit_Click(objectsender,EventArgse)lblResult.Text=您选择了+radlistLanguage.SelectedItem.Text;,动态网站设计与开发(ASP.NETC#版),2)CheckBox控件和CheckBoxList控件,CheckBox控件可以生成一组复选框实例演示CheckBoxList控件用于生成数量较多的复选框实例演示（P74/图5.19）,拓展知识（实验3之3）,动态网站设计与开发(ASP.NETC#版),CheckBox控件实例脚本,protectedvoidbtnSubmit_Click(objectsender,EventArgse)stringmsg=;if(chkFavorite1.Checked=true)msg=msg+chkFavorite1.Text+;if(chkFavorite2.Checked=true)msg=msg+chkFavorite2.Text+;if(chkFavorite3.Checked=true)msg=msg+chkFavorite3.Text+;if(chkFavorite4.Checked=true)msg=msg+chkFavorite4.Text+;lblResult.Text=您喜欢+msg+。;,拓展知识（实验3之3）,动态网站设计与开发(ASP.NETC#版),CheckBoxList控件实例脚本,protectedvoidbtnSubmit_Click(objectsender,EventArgse)stringmsg=;for(inti=0;ichklistFavorite.Items.Count-1;i+)if(chklistFavorite.Itemsi.Selected)msg=msg+chklistFavorite.Itemsi.Text+,拓展知识（实验3之3）,动态网站设计与开发(ASP.NETC#版),3)ListBox控件和DropDownList控件,ListBox控件用于创建允许单选或多选的列表框实例演示（P76/图5.20）DropDownList控件用创建下拉列表框，只能选择列表框中的某一项实例演示（P76/图5.21）,动态网站设计与开发(ASP.NETC#版),ListBox控件实例脚本,protectedvoidbtnSubmit_Click(objectsender,EventArgse)stringmsg=;for(inti=0;i1024*1024)strErr+=文件大小不能大于1Mn;if(strErr=)stringpath=Server.MapPath();/获得服务器文件当前路径/把上传文件保存在当前路径的upload文件夹中FileUpload1.PostedFile.SaveAs(path+upload+FileUpload1.FileName);lblInfo.Text=文件保存成功;elselblInfo.Text=请指定上传的文件;,（P77/图5.22）,动态网站设计与开发(ASP.NETC#版),6.Table控件,HTML提供了Table控件，但是这种Table控件生成的表格多用于显示静态数据，表格在使用之前就已经定义好了行数和列数，不能根据所要显示的数据动态的调整表格的行数和列数。服务器端Table控件也可以创建表格，它可以通过编程的方式根据数据内容动态生成表格或动态调整表格的行数和列数。动态表格的生成除了需要使用Table控件外，还需要使用TableRow控件和TableCell控件。Table控件代表整个表格，TableRow控件代表表格中的行，TableCell控件代表每一行中的单元格。,动态网站设计与开发(ASP.NETC#版),Table控件案例脚本,protectedvoidbtnSubmit_Click(objectsender,EventArgse)/获得表格的行数赋给变量rowsintrows=int.Parse(txtRow.Text);/获得表格的列数赋给变量cellsintcells=int.Parse(txtCell.Text);intcount=0;for(inti=0;irows;i+)/创建表格的一行TableRowr=newTableRow();for(intj=0;jcells;j+)/创建一个单元格TableCellc=newTableCell();count+;/将count的值转换为字符串在单元格中显示出来c.Controls.Add(newLiteralControl(count.ToString();/将单元格插入对应的行中r.Cells.Add(c);/将行插入表格中tableInfo.Rows.Add(r);,（P79-80/图5.23、5.24）,动态网站设计与开发(ASP.NETC#版),7.Panel控件和PlaceHolder控件,ASP.NET提供两种容器控件Panel控件和PlaceHolder控件。Panel控件可以将放入其中的一组控件作为一个整体来操作。案例演示（P79-81/图5.25/5.26）PlaceHolder控件用于在页面上保留一个位置，以便运行时在该位置动态放置其他的控件。实例演示（P81-82/图5.27/5.28）,动态网站设计与开发(ASP.NETC#版),Panel控件案例脚本,protectedvoidradlistLanguage_SelectedIndexChanged(objectsender,EventArgse)if(radlistLanguage.SelectedItem.Text=其他语种)Panel1.Visible=true;elsePanel1.Visible=false;,动态网站设计与开发(ASP.NETC#版),PlaceHolder控件案例脚本,protectedvoidPage_Load(objectsender,EventArgse)LabellblTitle=newLabel();lblTitle.Text=PlaceHolder控件实例！;holder.Controls.Add(lblTitle);holder.Controls.Add(newLiteralControl();ButtonbtnSubmit=newButton();btnSubmit.Text=按钮;holder.Controls.Add(btnSubmit);,动态网站设计与开发(ASP.NETC#版),拓展知识（实验3）,(1)登录界面设计（结合本讲的案例）,实践任务命名：XX_SY03_1作业提交,动态网站设计与开发(ASP.NETC#版),拓展知识（实验3）,(2)图片浏览程序设计,实践任务命名：XX_SY03_2作业提交,动态网站设计与开发(ASP.NETC#版),拓展知识（实验3）,(3)个人爱好调查程序,实践任务命名：XX_SY03_3作业提交,动态网站设计与开发(ASP.NETC#版),课外实践（实验4）,(1)列表框级联程序-”国家和城市”,实践任务命名：XX_SY04_1；作业提交,*指导：利用第一个Listbox控件的AutoPostBack，改变Listbox2的项目内容,第一阶段检查内容,动态网站设计与开发(ASP.NETC#版),课外实践（实验4）,(2)个人信息登记”程序（综合应用）,实践任务命名：XX_SY04_2；作业提交,第一阶段检查内容,*指导：可以运用Web服务器控件的Visible属性来控制哪些控件显示，只用一个页面完成所有功能,动态网站设计与开发(ASP.NETC#版),本讲小结,本讲使用“学生基本信息登记表”案例介绍了常用Web服务器端标准控件的使用方法。由于篇幅的限制，在知识点部分仅对常用标准控件的基本属性和使用方法进行了讲述，标准控件的属性和使用方法还有很多，感兴趣的读者可以查阅相关文献。,动态网站设计与开发(ASP.NETC#版),技能知识点测试,理论知识书中理论P83-84,动态网站设计与开发(ASP.NETC#版),技能知识点测试,操作技能书中操作P84,