网页设计Web常用控件

实验4 常用控件

专业班级信息122 学号____ 姓名____ 报告日期2014.11.7

实验类型：●验证性实验○综合性实验○设计性实验

实验目的：通过上机操作进一步掌握常用Web控件的属性、事件和方法，掌握控件在程序设计中的作用及特点。通过本实训掌握在程序运行时动态地向页面添加控件的程序设计方法。

实验要求：本实验为了避免将程序设计得过于复杂，又兼顾到实验的覆盖面，将实验分为以下两个独立的部分进行。

1）使用选择性控件（下拉列表框和复选框）设计一个能根据用户选择查询员工信息的Web应用程序。

2）使用向页面中动态添加控件的技术，设计一个简易的在线测验web 应用程序。

注意：本实验中所所涉及的技术都是在实际开发中常用到的，主要的不同在于实际应用中原始数据存放在数据库中，而本实训则将原始数据存放在结构数组中。

实验步骤提示

1. 设计员工信息查询程序（设计要求见实验指导书第49页）

（1）设计WEB页面；（2）设置对象属性

（3）创建下拉列表框的共享事件：创建复选框组控件CheckBoxList1和“姓名”下拉列表框DropName的“选项改变”事件发生后要执行的共享函数代码：Drop_SelectedIndexChanged(object sender ,EventArgs e)；创建单位下拉列表框DropUnit的选项改变时执行的事件函数代码

（4）编写事件代码。（5）调试运行

2. 设计简易在线测试程序（设计要求见实验指导书第54页）

(1) 问题分析，分析该系统的界面应当怎样布局，需要哪些控件，控件的属性应当怎样取值才能达到布局及动态效应的要求。

(2) 设计Web页面；(3) 创建控件对象、设置对象属性

(4) 编写事件代码；(5) 调试运行

实验步骤

一、使用选择性控件（下拉列表框和复选框）设计一个能根据用户选择查询员工信息的Web应用程序。

1、设计Web页面以及对象属性，得到如下界面：

2、编写事件代码：

页面装入时执行在事件代码如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class_Default : System.Web.UI.Page

{

struct Info

{

public string Name;

public string Sex;

public string Birthday;

public string Address;

public string Phone;

public string Education;

}

Info[,] Employloy = new Info[3, 3];

protected void Page_Load(object sender, EventArgs e)

{

this. Title ="选择控件应用事例";

Employloy [0,0].Name ="张三";

Employloy [0,0].Sex="男";

Employloy [0,0].Address="1号楼"; Employloy [0,0].Phone="1234567"; Employloy [0,0].Education="本科"; Employloy [0,1].Name ="李四"; Employloy [0,1].Sex="女";

Employloy [0,1].Birthday="1983-12-26"; Employloy [0,1].Address="2号楼"; Employloy [0,1].Phone="2345678"; Employloy [0,1].Education="本科"; Employloy [0,2].Name = "李好"; Employloy [0,2].Sex = "女";

Employloy [0,2].Birthday = "1983-12-26"; Employloy [0,2].Address = "2号楼"; Employloy [0,2].Phone = "2345678"; Employloy [0,2].Education = "本科";

Employloy [1,0].Name ="赵六"; Employloy [1,0].Sex="女";

Employloy [1,0].Birthday="1980-1-30"; Employloy [1,0].Address="1号楼"; Employloy [1,0].Phone="4567890"; Employloy [1,0].Education="高中"; Employloy [1,1].Name ="陈七"; Employloy [1,1].Sex="女";

Employloy [1,1].Birthday="1983-2-26"; Employloy [1,1].Address="2号楼"; Employloy [1,1].Phone="5678901"; Employloy [1,1].Education="专科"; Employloy [1,2].Name = "陈美"; Employloy [1,2].Sex = "女";

Employloy [1,2].Birthday = "1983-2-26"; Employloy [1,2].Address = "2号楼"; Employloy [1,2].Phone = "5678901"; Employloy [1,2].Education = "专科";

Employloy [2,0].Name ="何南"; Employloy [2,0].Sex="男";

Employloy [2,0].Birthday="1981-3-6"; Employloy [2,0].Address="1号楼"; Employloy [2,0].Phone="7890123"; Employloy [2,0].Education="本科"; Employloy [2,1].Name ="贺北"; Employloy [2,1].Sex="男";