《网页标准控件的使用.ppt》由会员分享，可在线阅读，更多相关《网页标准控件的使用.ppt（41页珍藏版）》请在金锄头文库上搜索。
1、第第第第0303讲讲讲讲 WebWeb服务器控件服务器控件服务器控件服务器控件的使用的使用的使用的使用ASP.NET动态网页设计案例教程(C#版)动态网站设计与开发(ASP.NET C#版)第03讲 Web服务器控件n教学目标Web服务器端控件、HTML控件和用户自定义控件是ASP.NET所支持的三种控件。Web服务器端控件是ASP.NET首选控件，包括标准控件标准控件和验证控件验证控件；n本讲关注重点：常用Web服务器端标准控件服务器端标准控件从标准控件开始动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )第03讲 Web服务器控件n任务实践初识W
2、eb服务器控件案例1：“学生基本信息登记表”案例2：各类控件示例。其他控件动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )3.1 Web服务器端控件概述 nWeb服务器端控件是ASP.NET重要的组成部分。服务器端控件包含方法方法以及与之关联的事件处理程序事件处理程序，并且这些代码都在在服务器端执行服务器端执行。nVisual Studio 2005提供了可视化的编程环境，开发人员可以利用这些控件方便的创建动态网页。动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )3.1 Web服务器端标准控件概述 nW
3、eb服务器端控件先在服务器执行先在服务器执行，执行的结果以结果以HTML的形式的形式发送给客户端浏览器客户端浏览器进行解析进行解析，n这样在使用ASP.NET编写服务器端程序时，不必考虑客户浏览器的兼容性问题。 动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )3.1 Web服务器端标准控件概述控件类型控件类型动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )3.1 Web服务器端标准控件概述n格式如下：n或者写成nn代码需要写在一对尖括号内，前缀asp为必加项，Control表示控件的类型；ID为该控件的
4、属性，是控件的唯一标识，即编程时使用的名字；runat是固有属性，其值为固定值“server”，表示这是一个服务器端控件。根据实际情况，里面还可以有更多的属性，可以在属性窗口设置或在源代码中直接添加。n实例演示实例演示控件结构控件结构动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) ) 3.2 “学生基本信息登记表”案例3.2.1 案例说明案例说明动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )3.2 “学生基本信息登记表”案例步骤n1. 创建一Web窗体文件n2. 页面的界面设计 1)使用HTML中的表格
5、控件搭建页面框架 2)界面设计，在表格中添加各种控件n3. 为控件添加脚本n4. 测试页面3.2.2 3.2.2 操作步骤操作步骤操作步骤操作步骤动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )给RadioButtonList控件添加脚本nprotected void radlistLanguage_SelectedIndexChanged1(object sender, EventArgs e)nn if (radlistLanguage.SelectedItem.Text = 其他)n n lblLanguage.Text = 您的外语种类是：
6、;n Panel1.Visible = true;n n elsen Panel1.Visible = false;n 动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 本节知识点 n1. 文本框控件（TextBox）n2. 三种按钮控件(Button、ImageButton和LinkButton控件) n3. 显示控件(Label控件、Image控件)n4. 选择与列表控件(RadioButton控件和 RadioButtonList控件、CheckBox控件和CheckBoxList控件、ListBox控件和DropDownList控件)
7、n5. 文件上传控件(FileUpload控件)n6. Table控件n7. Panel控件和PlaceHolder控件动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 1. 文本框控件（TextBox）n实例演示（P68/图5.12）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 2. 按钮控件ButtonnButton控件，源视图中对应的标签为：nn按钮控件均可以把页面上的输入信息提交给服务器，对其发生Click（单击）事件能激活服务器脚本中对应的事件过程代码。n实例演示（P69/图5
8、.13）拓展知识（实验拓展知识（实验拓展知识（实验拓展知识（实验3 3之之之之1 1）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点代码部分nprotected void btnButton_Click(object sender, EventArgs e)nn txtInfo.Text = 您单击了提交按钮！;nn源代码视图模式，Button控件的标签为：nnOnClick为Button控件的一个属性，属性值为btnButton_Click，表明当Button控件发生Click事件时，激活了btnButton_Click事件过程脚本， 该
9、过程通过“txtInfo.Text = 您单击了提交按钮！”语句，向TextBox控件中写入“您单击了提交按钮！”。 动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 3. 显示控件显示控件(Label控件、控件、Image控件控件)nLabel控件用于在页面上显示文本，Image控件用于在页面上显示图像，使用Image控件的ImageUrl属性设置图形文件的URL地址，设置完成后对应的图标才会显示相应的图形。 n实例演示（P69-70/图5.14、5.15）拓展知识（实验拓展知识（实验拓展知识（实验拓展知识（实验3 3之之之之2 2）动态动
10、态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 4. 选择与列表控件 n1）RadioButton控件和RadioButtonList控件n2）CheckBox控件和CheckBoxList控件n3）ListBox控件和DropDownList控件动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点1)1)RadioButton控件和 RadioButtonList控件n使用RadioButton控件可以生成一组单选按钮。n实例演示（P71/图5.16）nRadioButtonList控件具有和Ra
11、dioButton控件同样的功能，并且可以方便管理各个数据项。n实例演示（P72/图5.17）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 RadioButton控件实例脚本nprotected void btnSubmit_Click(object sender, EventArgs e)n n string sex=;n if (radMan.Checked=true)n sex = 男生;n if (radWoman.Checked = true)n sex = 女生;n lblResult.Text = 您是一名 + sex;n
12、动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 RadioButtonList控件完成数据项的添加后源代码部分nn 英语n 俄语n 法语n动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 RadioButtonList控件脚本部分nprotected void btnSubmit_Click(object sender, EventArgs e)n n lblResult.Text = 您选择了 + radlistLanguage.SelectedItem.Text;n 动态动态网站设计与
13、开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点2)2)CheckBox控件和CheckBoxList控件nCheckBox控件可以生成一组复选框n实例演示nCheckBoxList控件 用于生成数量较多的复选框n实例演示（P74/图5.19）拓展知识（实验拓展知识（实验拓展知识（实验拓展知识（实验3 3之之之之3 3）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 CheckBox控件实例脚本nprotected void btnSubmit_Click(object sender, EventArgs
14、e)n n string msg = ;n if (chkFavorite1.Checked = true)n n msg = msg + chkFavorite1.Text+ ;n n if (chkFavorite2.Checked = true)n n msg = msg + chkFavorite2.Text + ;n n if (chkFavorite3.Checked = true)n n msg = msg + chkFavorite3.Text + ;n n if (chkFavorite4.Checked = true)n n msg = msg + chkFavorite4
15、.Text + ;n n lblResult.Text = 您喜欢您喜欢 + msg + 。;n 拓展知识（实验拓展知识（实验拓展知识（实验拓展知识（实验3 3之之之之3 3）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 CheckBoxList控件实例脚本nprotected void btnSubmit_Click(object sender, EventArgs e)n n string msg=;n for (int i = 0; i chklistFavorite.Items.Count-1; i+)n n if (chklis
16、tFavorite.Itemsi.Selected)n n msg = msg + chklistFavorite.Itemsi.Text + n n n lblResult.Text = 您喜欢的项目有+msg+。;n 拓展知识（实验拓展知识（实验拓展知识（实验拓展知识（实验3 3之之之之3 3）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点3)3)ListBox控件和控件和DropDownList控件控件nListBox控件用于创建允许单选或多选的列表框 n实例演示（P76/图5.20）nDropDownList控件用创建下
17、拉列表框，只能选择列表框中的某一项 n实例演示（P76/图5.21）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 ListBox控件实例脚本nprotected void btnSubmit_Click(object sender, EventArgs e)n n string msg = ;n for (int i = 0; i 1024 * 1024)n n strErr += 文件大小不能大于1Mn;n n n if (strErr = )n n string path = Server.MapPath();/获得服务器文件当前路径
18、n /把上传文件保存在当前路径的upload文件夹中nFileUpload1.PostedFile.SaveAs(path + upload + FileUpload1.FileName);n lblInfo.Text = 文件保存成功;n n n elsen n lblInfo.Text = 请指定上传的文件;n n n（P77/图5.22）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 6. Table控件控件nHTML提供了Table控件，但是这种Table控件生成的表格多用于显示静态数据，表格在使用之前就已经定义好了行数和列数，不能
19、根据所要显示的数据动态的调整表格的行数和列数。n服务器端Table控件也可以创建表格，它可以通过编程的方式根据数据内容动态生成表格或动态调整表格的行数和列数。n动态表格的生成除了需要使用Table控件外，还需要使用TableRow控件和TableCell控件。Table控件代表整个表格，TableRow控件代表表格中的行，TableCell控件代表每一行中的单元格。动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 Table控件案例脚本控件案例脚本n protected void btnSubmit_Click(object sender,
20、EventArgs e)nn /获得表格的行数赋给变量rowsn int rows = int.Parse(txtRow.Text);n /获得表格的列数赋给变量cellsn int cells = int.Parse(txtCell.Text);n int count = 0;n for (int i = 0; i rows; i+)n n /创建表格的一行n TableRow r = new TableRow(); n for (int j = 0; j cells; j+)n n /创建一个单元格n TableCell c = new TableCell(); n count+;n /将
21、count的值转换为字符串在单元格中显示出来n c.Controls.Add(new LiteralControl(count.ToString();n /将单元格插入对应的行中n r.Cells.Add(c); n n /将行插入表格中n tableInfo.Rows.Add(r); n nn（P79-80/图5.23、5.24）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 7. Panel控件和控件和PlaceHolder控件控件nASP.NET提供两种容器控件Panel控件和PlaceHolder控件。 nPanel控件可以将放入其
22、中的一组控件作为一个整体来操作。 n案例演示（P79-81/图5.25/5.26）nPlaceHolder控件用于在页面上保留一个位置，以便运行时在该位置动态放置其他的控件。 n实例演示（P81-82/图5.27/5.28）动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 Panel控件案例脚本控件案例脚本nprotected void radlistLanguage_SelectedIndexChanged(object sender, EventArgs e)nn if (radlistLanguage.SelectedItem.Text
23、 = 其他语种)n n Panel1.Visible = true;n n elsen Panel1.Visible = false;n动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )知识点 PlaceHolder控件案例脚本控件案例脚本nprotected void Page_Load(object sender, EventArgs e)n n Label lblTitle = new Label();n lblTitle.Text = PlaceHolder控件实例！;n holder.Controls.Add(lblTitle);n hol
24、der.Controls.Add(new LiteralControl();n Button btnSubmit = new Button();n btnSubmit.Text = 按钮;n holder.Controls.Add(btnSubmit);n 动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )拓展知识（实验3）n(1)登录界面设计（结合本讲的案例）实践任务命名：实践任务命名：实践任务命名：实践任务命名：XXXX_SY03_1_SY03_1 作业提交作业提交作业提交作业提交动态动态网站设计与开发网站设计与开发( (ASP.NETASP.N
25、ET C C# #版版) )拓展知识（实验3）n(2)图片浏览程序设计实践任务命名：实践任务命名：实践任务命名：实践任务命名：XXXX_SY03_2 _SY03_2 作业提交作业提交作业提交作业提交动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )拓展知识（实验3）n(3)个人爱好调查程序 实践任务命名：实践任务命名：实践任务命名：实践任务命名：XXXX_SY03_3_SY03_3 作业提交作业提交作业提交作业提交动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )课外实践（实验4）n(1)列表框级联程序-”
26、国家和城市”实践任务命名：实践任务命名：实践任务命名：实践任务命名：XXXX_SY04_1_SY04_1；作业提交；作业提交；作业提交；作业提交*指导：指导： 利用第一个利用第一个Listbox控件的控件的AutoPostBack，改变改变Listbox2的项目内容的项目内容 第一阶段第一阶段第一阶段第一阶段检查内容检查内容检查内容检查内容动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )课外实践（实验4）n(2) 个人信息登记 ”程序（综合应用）实践任务命名：实践任务命名：实践任务命名：实践任务命名：XXXX_SY04_2_SY04_2；作业提交；
27、作业提交；作业提交；作业提交第一阶段第一阶段第一阶段第一阶段检查内容检查内容检查内容检查内容*指导：指导： 可以运用可以运用Web服务器控件的服务器控件的Visible属性来控制属性来控制哪些控件显示，只哪些控件显示，只用一个页面完成所用一个页面完成所有功能有功能 动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )本讲小结 n本讲使用“学生基本信息登记表”案例介绍了常用Web服务器端标准控件的使用方法。n由于篇幅的限制，在知识点部分仅对常用标准控件的基本属性和使用方法进行了讲述，标准控件的属性和使用方法还有很多，感兴趣的读者可以查阅相关文献。动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )技能知识点测试n理论知识 书中理论P83-84动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )技能知识点测试n操作技能 书中操作P84动态动态网站设计与开发网站设计与开发( (ASP.NETASP.NET C C# #版版) )
