实验3 HTML控件和Web服务器控件的使用.swf.docVIP

实验 3 HTML 控件和 Web服务器控件的使用 实验目的 1.了解 HTML控件及 WEB 服务器控件的种类及其功能 2.掌握常用控件的基本属性的设置； 3.熟悉 HTML控件及其应用； 4.掌握 WEB服务器控件及其应用； 实验学时 2 学时 实验内容及步骤 1.熟悉基本的 HTML 控件和 Web服务器控件 （1）创建一个 ASP.NET 的网站 mysite3，并新建一个名为 3-1.aspx 的 web窗体。 （2）在 Web窗体中用标准控件和 HTML控件进行界面设计。 a.打开“视图”→“工具箱”选项，从“工具箱”的“HTML”选项卡中选取各种不同的 控件。 b.打开“视图”→“属性”选项，在“属性”窗口中设置控件的相应属性。 c.通过快捷菜单中的“作为服务器控件运行”菜单项将 HTML 标记转换为 HTML Server 控件，分别在设计视图及代码视图中观察控件的变化。 （3）保存文件，按 F5 执行程序，查看执行结果。 2.基本控件的使用 制作一个用户注册页面，点击提交按钮后， 隐藏注册界面并把结果输出显示在当前页面 上，点击取消则清空填写的信息。基本步骤如下： （1）在网站mysite3中新建一个名为 3-2.aspx的 web 窗体 （2） 在 3-2.aspx 中添加2 个 Panel控件， 2个 HTML 表格， 1 个 Label控件， 3 个 Textbox 控件，1个Button控件，1个HTML的input按钮控件，1个RadioButtonList控件，3个DropDownList控 件，4个CheckBox控件，2 个 Image控件，制作一个用户注册界面，布局如图3-2-1 所示。 图 控件布局 （3）为各个控件设置基本属性，其主要属性设置如表 3-1 所示。 表 3-1 3-1.aspx 文件包含的主要控件及其属性 控件类型 控件类型 控件ID 属性 属性值 备注 WEB控件 Label lblSc Font-Size 13px 输出信息 WEB控件 Textbox txtXm -- --- 输入姓名 WEB控件 Textbox txtDd -- --- 输入地址 WEB控件 Textbox txtDh -- --- 输入电话 WEB控件 Button btnTj text 提交 HTML控件 input Button1 value 取消 HTML控件 input Button1 type reset WEB控件 RadioButtonList rbtnlist ListItem 男/女 依次输入 WEB控件 DropDownList ddlNian ListItem 1996-1990 依次输入 WEB控件 DropDownList ddlYue ListItem 1-12 依次输入 WEB控件 DropDownList ddlXx ListItem 黄冈师范学院 湖北师范学院 华中师范大学 依次输入 WEB控件 CheckBox chkBox1 Text 运动 WEB控件 CheckBox chkBox2 Text 旅游 WEB控件 CheckBox chkBox3 Text 购物 WEB控件 CheckBox chkBox4 Text 音乐 WEB控件 Image img1 ImageUrl ~/pictures/kt.jpg WEB控件 Image Img2 -- -- WEB控件 Panel Panel1 Width 90% WEB控件 Panel Panel2 Visible False WEB控件 Panel Panel2 style text-align:left （4）双击提交按钮，打开 3_2.aspx 界面的代码设计器窗口。在 btnTj_Click事件处理器 的编辑区中输入下列代码： protected void btnTj_Click(object sender, EventArgs e) { Panel1.Visible = false; Panel2.Visible = true; string str1, str2, str3, str4, str5, str6, str7; str1 = 姓名： + txtXm.Text; str2 = 性别：+rbtnlist.SelectedValue; str3 = 出生年月：+ddlNian.SelectedValue+年+ddlYue.SelectedValue+月; str4 = 爱好：; if (chkBox1.Checked == true) { str4 = str4 + chk