网页标准控件的使用.ppt

1、动态网站设计与开发(ASP.NET C#版),ASP.NET动态网页设计案例教程(C#版),动态网站设计与开发(ASP.NET C#版),第03讲 Web服务器控件,教学目标 Web服务器端控件、HTML控件和用户自定义控件是ASP.NET所支持的三种控件。 Web服务器端控件是ASP.NET首选控件，包括标准控件和验证控件； 本讲关注重点：常用Web服务器端标准控件,从标准控件开始,动态网站设计与开发(ASP.NET C#版),第03讲 Web服务器控件,任务实践 初识Web服务器控件 案例1：“学生基本信息登记表” 案例2：各类控件示例。 其他控件,动态网站设计与开发(ASP.NET C#

2、版),3.1 Web服务器端控件概述,Web服务器端控件是ASP.NET重要的组成部分。服务器端控件包含方法以及与之关联的事件处理程序，并且这些代码都在服务器端执行。 Visual Studio 2005提供了可视化的编程环境，开发人员可以利用这些控件方便的创建动态网页。,动态网站设计与开发(ASP.NET C#版),3.1 Web服务器端标准控件概述,Web服务器端控件先在服务器执行，执行的结果以HTML的形式发送给客户端浏览器进行解析， 这样在使用ASP.NET编写服务器端程序时，不必考虑客户浏览器的兼容性问题。,动态网站设计与开发(ASP.NET C#版),3.1 Web服务器端标准控件

3、概述,控件类型,动态网站设计与开发(ASP.NET C#版),3.1 Web服务器端标准控件概述,格式如下： 或者写成 代码需要写在一对尖括号内，前缀asp为必加项，Control表示控件的类型；ID为该控件的属性，是控件的唯一标识，即编程时使用的名字；runat是固有属性，其值为固定值“server”，表示这是一个服务器端控件。根据实际情况，里面还可以有更多的属性，可以在属性窗口设置或在源代码中直接添加。 实例演示,控件结构,动态网站设计与开发(ASP.NET C#版),3.2 “学生基本信息登记表”案例,3.2.1 案例说明,动态网站设计与开发(ASP.NET C#版),3.2 “学生基本

4、信息登记表”案例步骤,1. 创建一Web窗体文件 2. 页面的界面设计 1)使用HTML中的表格控件搭建页面框架 2)界面设计，在表格中添加各种控件 3. 为控件添加脚本 4. 测试页面,3.2.2 操作步骤,动态网站设计与开发(ASP.NET C#版),给RadioButtonList控件添加脚本,protected void radlistLanguage_SelectedIndexChanged1(object sender, EventArgs e) if (radlistLanguage.SelectedItem.Text = 其他) lblLanguage.Text = 您的外语种

5、类是：; Panel1.Visible = true; else Panel1.Visible = false; ,动态网站设计与开发(ASP.NET C#版), 本节知识点,1. 文本框控件（TextBox） 2. 三种按钮控件(Button、ImageButton和LinkButton控件) 3. 显示控件(Label控件、Image控件) 4. 选择与列表控件(RadioButton控件和 RadioButtonList控件、CheckBox控件和CheckBoxList控件、ListBox控件和DropDownList控件) 5. 文件上传控件(FileUpload控件) 6. Tab

6、le控件 7. Panel控件和PlaceHolder控件,动态网站设计与开发(ASP.NET C#版), 1. 文本框控件（TextBox）,实例演示（P68/图5.12）,动态网站设计与开发(ASP.NET C#版), 2. 按钮控件Button,Button控件，源视图中对应的标签为： 按钮控件均可以把页面上的输入信息提交给服务器，对其发生Click（单击）事件能激活服务器脚本中对应的事件过程代码。 实例演示（P69/图5.13）,拓展知识（实验3之1）,动态网站设计与开发(ASP.NET C#版),代码部分,protected void btnButton_Click(object s

7、ender, EventArgs e) txtInfo.Text = 您单击了提交按钮！; 源代码视图模式，Button控件的标签为： OnClick为Button控件的一个属性，属性值为btnButton_Click，表明当Button控件发生Click事件时，激活了btnButton_Click事件过程脚本， 该过程通过“txtInfo.Text = 您单击了提交按钮！”语句，向TextBox控件中写入“您单击了提交按钮！”。,动态网站设计与开发(ASP.NET C#版), 3. 显示控件(Label控件、Image控件),Label控件用于在页面上显示文本，Image控件用于在页面上显示

8、图像，使用Image控件的ImageUrl属性设置图形文件的URL地址，设置完成后对应的图标才会显示相应的图形。 实例演示（P69-70/图5.14、5.15）,拓展知识（实验3之2）,动态网站设计与开发(ASP.NET C#版), 4. 选择与列表控件,1）RadioButton控件和RadioButtonList控件 2）CheckBox控件和CheckBoxList控件 3）ListBox控件和DropDownList控件,动态网站设计与开发(ASP.NET C#版),1)RadioButton控件和 RadioButtonList控件,使用RadioButton控件可以生成一组单选按钮

9、。 实例演示（P71/图5.16） RadioButtonList控件具有和RadioButton控件同样的功能，并且可以方便管理各个数据项。 实例演示（P72/图5.17）,动态网站设计与开发(ASP.NET C#版), RadioButton控件实例脚本,protected void btnSubmit_Click(object sender, EventArgs e) string sex=; if (radMan.Checked=true) sex = 男生; if (radWoman.Checked = true) sex = 女生; lblResult.Text = 您是一名 +

10、sex; ,动态网站设计与开发(ASP.NET C#版), RadioButtonList控件完成数据项的添加后源代码部分, 英语 俄语 法语 ,动态网站设计与开发(ASP.NET C#版), RadioButtonList控件脚本部分,protected void btnSubmit_Click(object sender, EventArgs e) lblResult.Text = 您选择了 + radlistLanguage.SelectedItem.Text; ,动态网站设计与开发(ASP.NET C#版),2)CheckBox控件和CheckBoxList控件,CheckBox控件可

11、以生成一组复选框 实例演示 CheckBoxList控件 用于生成数量较多的复选框 实例演示（P74/图5.19）,拓展知识（实验3之3）,动态网站设计与开发(ASP.NET C#版), CheckBox控件实例脚本,protected void btnSubmit_Click(object sender, EventArgs e) string msg = ; if (chkFavorite1.Checked = true) msg = msg + chkFavorite1.Text+ ; if (chkFavorite2.Checked = true) msg = msg + chkFav

12、orite2.Text + ; if (chkFavorite3.Checked = true) msg = msg + chkFavorite3.Text + ; if (chkFavorite4.Checked = true) msg = msg + chkFavorite4.Text + ; lblResult.Text = 您喜欢 + msg + 。; ,拓展知识（实验3之3）,动态网站设计与开发(ASP.NET C#版), CheckBoxList控件实例脚本,protected void btnSubmit_Click(object sender, EventArgs e) str

13、ing msg=; for (int i = 0; i chklistFavorite.Items.Count-1; i+) if (chklistFavorite.Itemsi.Selected) msg = msg + chklistFavorite.Itemsi.Text + ,拓展知识（实验3之3）,动态网站设计与开发(ASP.NET C#版),3)ListBox控件和DropDownList控件,ListBox控件用于创建允许单选或多选的列表框 实例演示（P76/图5.20） DropDownList控件用创建下拉列表框，只能选择列表框中的某一项 实例演示（P76/图5.21）,动态

14、网站设计与开发(ASP.NET C#版), ListBox控件实例脚本,protected void btnSubmit_Click(object sender, EventArgs e) string msg = ; for (int i = 0; i lstCourse.Items.Count - 1; i+) if (lstCourse.Itemsi.Selected) msg = msg + lstCourse.Itemsi.Text + ,动态网站设计与开发(ASP.NET C#版), DropDownList控件实例脚本,protected void btnSubmit_Click

15、(object sender, EventArgs e) lblResult.Text = 您所在的班级是 + dlistClass.SelectedItem.Text; ,动态网站设计与开发(ASP.NET C#版), 5. 文件上传控件(FileUpload控件),FileUpload控件可以将用户提供文件从客户端传送到服务器。通过设置控件的相关属性，可以控制文件的传送方式并自动完成文件的上传过程。,动态网站设计与开发(ASP.NET C#版), FileUpload控件案例脚本,protected void btnSubmit_click(object sender, EventArgs

16、 e) if (FileUpload1.HasFile = true) string strErr = ; /获得上传文件的大小 int filesize = FileUpload1.PostedFile.ContentLength; if (filesize 1024 * 1024) strErr += 文件大小不能大于1Mn; if (strErr = ) string path = Server.MapPath();/获得服务器文件当前路径 /把上传文件保存在当前路径的upload文件夹中 FileUpload1.PostedFile.SaveAs(path + upload + Fil

17、eUpload1.FileName); lblInfo.Text = 文件保存成功; else lblInfo.Text = 请指定上传的文件; ,（P77/图5.22）,动态网站设计与开发(ASP.NET C#版), 6. Table控件,HTML提供了Table控件，但是这种Table控件生成的表格多用于显示静态数据，表格在使用之前就已经定义好了行数和列数，不能根据所要显示的数据动态的调整表格的行数和列数。 服务器端Table控件也可以创建表格，它可以通过编程的方式根据数据内容动态生成表格或动态调整表格的行数和列数。 动态表格的生成除了需要使用Table控件外，还需要使用TableRow控

18、件和TableCell控件。Table控件代表整个表格，TableRow控件代表表格中的行，TableCell控件代表每一行中的单元格。,动态网站设计与开发(ASP.NET C#版), Table控件案例脚本,protected void btnSubmit_Click(object sender, EventArgs e) /获得表格的行数赋给变量rows int rows = int.Parse(txtRow.Text); /获得表格的列数赋给变量cells int cells = int.Parse(txtCell.Text); int count = 0; for (int i = 0

19、; i rows; i+) /创建表格的一行 TableRow r = new TableRow(); for (int j = 0; j cells; j+) /创建一个单元格 TableCell c = new TableCell(); count+; /将count的值转换为字符串在单元格中显示出来 c.Controls.Add(new LiteralControl(count.ToString(); /将单元格插入对应的行中 r.Cells.Add(c); /将行插入表格中 tableInfo.Rows.Add(r); ,（P79-80/图5.23、5.24）,动态网站设计与开发(AS

20、P.NET C#版), 7. Panel控件和PlaceHolder控件,ASP.NET提供两种容器控件Panel控件和PlaceHolder控件。 Panel控件可以将放入其中的一组控件作为一个整体来操作。 案例演示（P79-81/图5.25/5.26） PlaceHolder控件用于在页面上保留一个位置，以便运行时在该位置动态放置其他的控件。 实例演示（P81-82/图5.27/5.28）,动态网站设计与开发(ASP.NET C#版), Panel控件案例脚本,protected void radlistLanguage_SelectedIndexChanged(object sender

21、, EventArgs e) if (radlistLanguage.SelectedItem.Text = 其他语种) Panel1.Visible = true; else Panel1.Visible = false; ,动态网站设计与开发(ASP.NET C#版), PlaceHolder控件案例脚本,protected void Page_Load(object sender, EventArgs e) Label lblTitle = new Label(); lblTitle.Text = PlaceHolder控件实例！; holder.Controls.Add(lblTitle); holder.Controls.Add(new LiteralControl(); Button btnSubmit = new Button(); btnSubmit.Text = 按钮; holder.Controls.Add(btnSub