《ASP.NET程序设计 普通高等教育“十一五”国家级规划教材 教学课件 ppt 作者 李德奇 第05讲 信息浏览页面设计》由会员分享，可在线阅读，更多相关《ASP.NET程序设计 普通高等教育“十一五”国家级规划教材 教学课件 ppt 作者 李德奇 第05讲 信息浏览页面设计（19页珍藏版）》请在金锄头文库上搜索。
1、第五讲 信息浏览页面设计,教学内容 一、信息浏览页面示例 二、DropDownList控件 三、ListBox控件 四、Image控件 五、信息浏览页面设计,教学目标,掌握DropDownList控件的使用； 掌握ListBox控件的使用； 掌握Image控件的使用； 掌握信息浏览页面设计方法。,一、信息浏览页面 （1/2）,(一)信息浏览页面 这个页面中，使用Label控件、DropDownList控件和Image控件展示员工信息。,(二)信息浏览页面设计步骤 1.建立ASP.NET应用程序项目。 2.向页面中加入Web服务器控件，这里使用了Label控件、DropDownList控件和Im
2、age控件。 3.设置页面和控件的属性。 4.编写后台代码将页面连接到数据库，从数据表中提取员工数据显示出来。,一、信息浏览页面 （2/2）,二、DropDownList控件（1/7）,DropDownList控件称为下拉列表，它含有一个项目列表供用户选择，需要在大量项目中选择一项时使用这种控件。 (一)HTML标记 (二)常用属性 Items属性：列表中项的集合。构建项目集合有两种方式：使用ListItem集合编辑器编辑或者在程序代码中创建。前者用于集合中的项在程序设计阶段就可预知的情况，后者用于需要在程序运行后动态创建的情况。,1.使用ListItem集合编辑器编辑列表项 在DropDow
3、nList控件的属性窗口单击Items属性名右侧的浏览按钮，打开ListItem集合编辑器，如下图。 单击【添加】按钮向集合中依次加入项目，在右侧的杂项列表中为每一项设定文本（例如北京）。单击【移除】可以撤消当前项，单击 或 可以调整当前项在列表中的上下位置。单击【确定】完成项目集合的编辑。,二、DropDownList控件（2/7）,2.在C#程序代码中添加或移除项目 Items属性的Add方法可以向集合添加一项，如：DropDownList1.Items.Add(“长沙“); 向控件DropDownList1追加一个项目“长沙”, 。 Items属性的RemoveAt方法可以从集合中移除一
4、项，例如：DropDownList1.Items.RemoveAt(0); 从控件DropDownList1移除第1项。该方法的参数需要移除项的索引号。 Items属性的Insert方法可以向集合插入一项，例如DropDownList1.Items.Insert(1,“武汉“); 向控件DropDownList1插入一个项目“武汉”。方法的第一个参数指明插入项的索引号，第二个参数是项目的内容。 Items属性的Clear方法清空集合中的所有项。例如DropDownList1.Items.Clear(); 将使控件DropDownList1中没有任何项目。,二、DropDownList控件（3/
5、7）,Items属性的Count属性获取集合中的项目数。它的值比最后一项的索引号大1。 DataSource属性：控件项目列表的数据源，一般将它指定到一个数据集。 DataMember属性：控件项目列表要绑定到的数据表，它是DataSource指定的那个数据集的某个数据表。 DataTextField属性：提供项目列表的文本字段，它是DataMember指定的那个数据表的某个文本字段。 例如要将控件DropDownList1绑定到数据集dataSet11的数据表memberInfo的“账号”字段，在属性窗口中的设置方法如下图。,二、DropDownList控件（4/7）,SelectedInd
6、ex属性：控件中被选择项的索引号。 SelectedItem属性：控件中被选择的项。它还有下一级的属性Text，通常使用这个值。例如DropDownList1.SelectedItem.Text就是控件DropDownList1中被选中的那一项的文本。,二、DropDownList控件（5/7）,(三)常用事件 SelectedIndexChanged方法：当控件内的选择项发生改变后激发。通常需要为这个事件编写事件处理程序代码，因为当用户改变了选择后，必定要处理这个改变。 使用DropDownList控件的几个要点： 程序运行后，用户只能在控件内选择，不可以在控件内输入。 可以使用设置Item
7、s属性和绑定数据两种方式来控制控件内的项目，这是两个不同的范畴，不能混为一谈。例如控件中的项目来自一个数据源，你就不可以使用Items的方法（例如Add方法）来操作控件内的项目，这时你必须去控制数据源来改变控件内的项目。只有当控件的项目来自Items属性时，才可以使用Items的方法（例如Add方法）和属性（例如Count属性）来操作属性。一般来说，使用Items属性控制项目可能更灵活一点。,二、DropDownList控件（6/7）,若要判断用户选择了哪一项，请获取SelectedIndex属性，若要知道选择项的文本，请使用SelectedItem.Text属性，使用后者的情况可能更多一些。
8、 如果为控件的SelectedIndexChanged事件编写了事件处理程序，请将控件的AutoPostBack属性改为true，否则该事件不会回传，事件发生后代码不会被执行。,二、DropDownList控件（7/7）,三、ListBox控件,ListBox控件称为列表框，将一系列的项目列表出来供用户选择。列表框是不可收缩的，允许一次选择多项。除此之外，ListBox控件与DropDownList控件大多数的属性和事件是相同的，使用方法也基本相同。 (一)HTML标记 (二)常用属性 SelectionMode属性：列表的选择模式，其值可为Single(单选，默认)和Multiple（多选）
9、。 当采用单选模式时，获取选择项的序号仍然利用其SelectedIndex属性，获取选择项的文本仍然利用SelectedItem.Text属性。采用多选模式时，若还使用这两个属性来判断，得到的是多个选择项中第一个被选项的索引号或文本。为了得到多个选择项，请使用循环依次检查Items集合中每一个项目的Selected属性，为true的那一项被选中。,四、Image控件,Image控件称为图像（框）控件，用来在页面上展示图片。 (一)HTML标记 (二)常用属性 ImageUrl属性：图片的路径和文件名，可以是绝对路径或相对路径。既然是URL，这个资源也可能在别的主机上，那时还必须在最前面加上传输
10、协议。 ToolTip属性：当鼠标停留在控件上时显示的提示信息。这个属性对于以图片表现的控件很重要，可能有些读者看不懂图片的含义，或者通过它还可以导航到其他URL去时（ImageButton控件），都得需要提示信息的帮助。 AlternateText属性：当图片无法显示时替代显示的文本。,五、信息浏览页面设计（1/6),(一)数据表设计 在数据库 MMIS中增加一个数据表employeeInfo，其结构如下表。,(二)页面设计 向页面中加入Label控件、DropDownList和Image控件用来显示公司员工的信息，其效果如右图。,本例中使用一下拉列表控件（id=DropDownList1）
11、显示数据表中所有员工的编号供用户选择。其中展示的员工信息不允许修改，所以使用10个标签控件（id=LabelBH等）显示员工的文本信息，一个图像框控件（id=Image1）显示员工的相片。,五、信息浏览页面设计（2/6),(三)数据库连接 使用数据连接向导将页面连接到数据库MMIS，访问数据表employee的数据。连接方式同6.2.5节。 (四)编写C#后台代码 编写WebForm1的Page_Load事件处理代码。 private void Page_Load(object sender, System.EventArgs e) if(!IsPostBack) SqlCommand myC
12、ommand=sqlConnection1.CreateCommand(); myCommand.CommandText=“select * from employeeInfo“; sqlDataAdapter1.SelectCommand=myCommand; dataSet11.Clear(); int n=sqlDataAdapter1.Fill(dataSet11,“employeeInfo“); this.DataBind();,五、信息浏览页面设计（3/6),for(int i=0;in;i+) string name=dataSet11.Tables“employeeInfo“.
13、Rowsi“编号“.ToString(); DropDownList1.Items.Add(name); if(n!=0) LabelBH.Text=dataSet11.Tables“employeeInfo“.Rows0“编号“.ToString(); LabelXM.Text=dataSet11.Tables“employeeInfo“.Rows0“姓名“.ToString(); LabelXB.Text=dataSet11.Tables“employeeInfo“.Rows0“性别“.ToString(); LabelRQ.Text=dataSet11.Tables“employeeIn
14、fo“.Rows0“出生日期“.ToString(); LabelBM.Text=dataSet11.Tables“employeeInfo“.Rows0“部门“.ToString(); LabelGZ.Text=dataSet11.Tables“employeeInfo“.Rows0“工资“.ToString(); LabelBX.Text=dataSet11.Tables“employeeInfo“.Rows0“保险“.ToString(); LabelZZ.Text=dataSet11.Tables“employeeInfo“.Rows0“家庭住址“.ToString(); LabelD
15、H.Text=dataSet11.Tables“employeeInfo“.Rows0“联系电话“.ToString(); LabelEmail.Text=dataSet11.Tables“employeeInfo“.Rows0“Email“.ToString(); Image1.ImageUrl=dataSet11.Tables“employeeInfo“.Rows0“相片RL“.ToString(); ,五、信息浏览页面设计（4/6),编写下拉列表控件的DropDownList1_SelectedIndexChanged事件处理程序，在该段程序中实现当用户改变在下拉列表中的选择时重新显示数
16、据的处理。 Private void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e) string number=DropDownList1.SelectedItem.Text; SqlCommand myCommand=sqlConnection1.CreateCommand(); myCommand.CommandText=”select * from employeeInfo where 编号=”+number+”; sqlDataAdapter1.SelectCommand=myCommand; dataSet11.Clear(); sqlDataAdapter1.Fill(dataSet11,”employeeInfo”); LabelBH.Text=dataSet11.Tables“
