2022年实验HTML控件和Web服务器控件的使用.sw .pdf

《2022年实验HTML控件和Web服务器控件的使用.sw .pdf》由会员分享，可在线阅读，更多相关《2022年实验HTML控件和Web服务器控件的使用.sw .pdf（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实验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.打开“视图”“属性”选项，在“属性”窗口中设置控件的

2、相应属性。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 个 HTM

3、L 的 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 控件Tex

4、tbox 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 ddlY ue ListItem 1-12 依次输入WEB 控件DropDownList ddlXx ListItem 黄冈师范学院湖北师范学院华中师范大

5、学依次输入名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 5 页 - - - - - - - - - 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

6、 控件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,

7、 str6, str7; str1 = 姓名： + txtXm.Text; str2 = 性别： +rbtnlist.SelectedV alue; str3 = 出生年月： +ddlNian.SelectedValue+年 +ddlY ue.SelectedValue+月; str4 = 爱好： ; if (chkBox1.Checked = true) str4 = str4 + chkBox1.Text; if (chkBox2.Checked = true) str4 = str4+ + chkBox2.Text ; if (chkBox3.Checked = true) str4 =

8、 str4 + + chkBox3.Text; if (chkBox4.Checked = true) str4 = str4 + + chkBox4.Text; str5 = 电话： +txtDh.Text ; str6 = 毕业学校： +ddlXx.SelectedV alue; str7 = 家庭地址： +txtDd.Text ; lblSc.Text = str1 + + str2 + + str3 + + str4 + + str5 + + str6 + + str7 + ; img2.ImageUrl = img1.ImageUrl; （5）保存文件，点击“启动测试”按钮，在浏览器

9、中运行文件，测试运行效果。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 5 页 - - - - - - - - - 图 3-2-2 填写用户注册信息（6）在页面中输入如图3-2-2 所示的信息，点击取消则自动清空填写的信息，点击提交，则在页面中输出基本信息，如图3-2-3。图 3-2-3 显示用户注册信息3.日历控件和链接控件的使用（1）在网站mysite3 中新建一个名为3-3.aspx 的 web 窗体。（2） 在 Web 窗体上1 个 1 列 4 行的表格，1 个

10、 Calendar 控件，1 个 Label 控件，1个 LinkButton 控件， 1 个 HyperLink 控件，并进行版面设计，基本布局如图3-3-1 所示（其中“链接三”是普通文本）。控件在页面中的布局（3）为“链接三”文本添加超链接，链接到3-2.aspx 页面。设置各个控件的基本属性，各主要属性设置如表1 所示。在页面3-3.aspx 中链接后的“链接三”对应的代码为： 链接三 。表 3-1 3-3.aspx 主要控件属性设置控件类型控件类型控件 ID 属性属性值备注HTML 控件Table - border 1 WEB 控件Calendar Calendar1 自动套用格式彩

11、色型 1 右击日历控件选择WEB 控件Label lblRq - - WEB 控件LinkButton lbtn Text 链接一WEB 控件LinkButton lbtn PostBackUrl /3-2.aspx WEB 控件HyperLink hlink Text 链接二WEB 控件HyperLink hlink NavigateUrl /3-2.aspx 设置基本属性后的效果（ 4 ）双 击Calendar1 ，打 开3_3.aspx 界 面 的 代 码 设 计 器 窗 口 。在Calendar1_SelectionChanged 事件处理器的编辑区中输入下列代码：protected

12、void Calendar1_SelectionChanged(object sender, EventArgs e) string xq; DateTime date = Calendar1.SelectedDate; if(date.DayOfWeek=DayOfWeek.Monday ) xq = 星期一 ; else if (date.DayOfWeek = DayOfWeek.Tuesday) xq = 星期二 ; else if (date.DayOfWeek = DayOfWeek.Wednesday) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - -

13、 - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 5 页 - - - - - - - - - xq = 星期三 ; else if (date.DayOfWeek = DayOfWeek.Thursday) xq = 星期四 ; else if (date.DayOfWeek = DayOfWeek.Friday) xq = 星期五 ; else if (date.DayOfWeek = DayOfWeek.Saturday) xq = 星期六 ; else xq = 星期日 ; lblRq.Text = Calendar1.SelectedDat

14、e.Year + 年 + Calendar1.SelectedDate.Month + 月 + Calendar1.SelectedDate.Day + 日+xq; （5）保存文件，点击“启动测试”按钮，在浏览器中运行文件，测试运行效果。例如：单击Calendar1 控件中的9 月 15 日，则在其下方的lblRq 控件中显示 “2010 年 9 月 15 日 星期三” ；单击下面的三个链接，查看并对比链接的机制及效果。运行效果（6）在设计视图中选中lbtn 控件，将其PostBackUrl 属性中的值清空，然后双击lbtn 控件，打开3_3.aspx 界面的代码设计器窗口。在 lbtn_Cl

15、ick 事件处理器的编辑区中输入下列代码：protected void lbtn_Click(object sender, EventArgs e) Response.Redirect(3-2.aspx); （7）保存，测试运行，在浏览器中单击“链接一”，观察运行效果。实验注意事项1. HTML 控件和标准WEB 控件中有些控件外观相似，在使用时要分清， 根据需要选择使用。2. 在 Visual Studio .net 中所提供的控件的类型较多，掌握控件的基本属性，对于自己不熟悉的属性， 可在属性面板中选中该属性，在属性面板下方一般有该属性的文字说明，有助于理解和使用。3. 对于单选按钮的功能

16、，系统提供了RadioButton 和RadioButtonList 两种选择。如选择RadioButton ，则需要将所有的RadioButton 按钮的GroupName 设置为相同，否则，各个按钮相名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 5 页 - - - - - - - - - 互独立， 不能实现该组按钮 “多选一” 的功能； 而 RadioButtonList则自动设置为 “多选一”。4. 要区别对待“=”和“ =” ，前者是关系运算符，用于比较两边的表达式是否相同；后者是赋值运算符，表示为变量赋值。而“+”除了可以作为算术运算符进行加法运算外，还可以作为字符串连接运算符进行字符串的连接。实验与思考1.HTML Server 控件与Web 控件的区别是什么？2.几种不同的链接方式有何异同？3.除了在属性面板中设置控件的属性，是否用其他方法进行设置，使页面运行后的效果和在属性面板中设置的效果一致？名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 5 页 - - - - - - - - -