实验五(3).doc

实验5-3 ASP.NET服务器控件应用目的与要求(1) 熟练掌握常用的Html服务器控件的主要属性、方法、事件。(2) 熟练掌握常用的Web服务器控件的主要属性、方法、事件。(3) 掌握六种验证控件的主要属性、方法、事件。(4) 学会创建和使用自定义服务器控件。内容和步骤【练习1】创建用户注册表单并验证注册信息。图T.7 sy1.aspx页面(1) 打开Visual Studio 2010，点击【文件】下的【新建网站】，创建一个使用文件系统的ASP.NET网站，命名为“实验二”。新建网页sy1.aspx，仿照图T.7中所示布局创建一个的用于用户注册的Web窗体页，所包含的控件的相关说明列于表T-2中。 (2) 在网页的后台文件sy1.aspx.cs中添加代码，使得出生年月日在页面首次加载（Page_load）时动态添加。代码如下：protected void Page_Load(object sender, EventArgs e) int i; string x; if (!IsPostBack) for (i = 1980; i = 2010; i+) x = System.Convert.ToString(i); DropDownList1.Items.Add(x); for (i = 1; i = 12; i+) DropDownList2.Items.Add(System.Convert.ToString(i); for (i = 1; i = 31; i+) DropDownList3.Items.Add(System.Convert.ToString(i); (3) 利用验证控件对注册信息进行验证，如图T.7所示，要求如下：用户名 （非空）密码 （长度大于6）固定电话 （区号-电话号）Email（ ）表T-2 sy1.aspx文件控件及其属性控件类别控件名控件标识备注Web控件TextBoxTextBox1用于输入用户名TextBoxTextBox2用于输入真实姓名TextBoxTextBox3用于输入密码，设置TextMode属性为PasswordTextBoxTextBox4用于输入固定电话TextBoxTextBox5用于输入移动电话TextBoxTextBox6用于输入电子邮箱TextBoxTextBox7用于输入个人主页TextBoxTextBox8用于显示注册信息，设置TextMode属性为MultiLineRadioButtonListRadioButtonList1用于选择性别ListBoxListBox1用于选择职业DropDownListDropDownList1用于选择出生年份DropDownListDropDownList2用于选择出生月份DropDownListDropDownList3用于选择出生日期ButtonButton1确定按钮ButtonButton2清空按钮ButtonButton3显示密码按钮(4) 编写代码实现“清空”按钮的功能：单击“清空”按钮后，立刻清空用户输入的内容（无论各项数据输入正确与否）。在设计视图中双击“清空”按钮button2，为其Click事件添加事件处理代码如下：protected void Button2_Click(object sender, EventArgs e) TextBox1.Text= ; TextBox2.Text= ; TextBox3.Text= ; TextBox4.Text = ; TextBox5.Text = ; TextBox6.Text = ; TextBox7.Text = ; TextBox8.Text = ; RadioButtonList1.ClearSelection(); ListBox1.ClearSelection(); DropDownList1.ClearSelection(); DropDownList2.ClearSelection(); DropDownList3.ClearSelection(); (5) 编写代码实现“确定”按钮的功能：当单击“确定”按钮后，要求在浏览器中弹出确认对话框（利用客户端javascript），若选择取消将不提交；若选择确认后，在按钮下面的多行文本框中，分行显示出用户填写的各项信息，并再次在浏览器中弹出提示成功的对话框。给“确定”按钮button1添加客户端处理代码，首先添加如下属性：OnClientClick=return confirm(确实要提交吗?);双击“确定”按钮，在后台文件中添加Click事件事件处理代码，如下：protected void Button1_Click(object sender, EventArgs e) string x=; x += TextBox1.Text + n; x += TextBox3.Text + n; x += TextBox2.Text + n; x += TextBox4.Text + n; x += TextBox5.Text + n; x += TextBox6.Text + n; x += TextBox7.Text + n; x += ListBox1.SelectedItem.Text + n; x += DropDownList1.SelectedValue + 年 + DropDownList2.SelectedValue + 月 + DropDownList3.SelectedValue + 日 + n; TextBox8.Text = x; Response.Write(alert(提交成功); (6) 编写代码实现：当用户选择职业为“学生”时，要求立刻将文字“固定电话”改为“宿舍电话”；当用户选择职业不是“学生”时，要求立刻将文字“宿舍电话”改为“固定电话”。设置选择职业的列表框ListBox1的属性AutoPostBack=True，并双击它，为其OnSelectedIndexChanged事件添加代码如下：protected void ListBox1_OnSelectedIndexChanged(object sender, EventArgs e) if (ListBox1.SelectedValue = 学生) Label4.Text = 宿舍电话：; else Label4.Text = 固定电话：; (7) 编写“显示密码”按钮的客户端事件，为其添加属性OnClientClick=fCheck()，在sy1.aspx中添加客户端代码如下：function fCheck() alert(您输入的密码： + form1.TextBox3.value);(8) 调试，保存，然后按F5运行网页，查看效果如图T.8所示。 图T.8 sy1.aspx结果【练习2】利用Wizard向导控件实现用户注册。(1) 在练习1建立的网站“实验二”中，新建页面sy2.aspx。(2) 拖放一个Wizard控件至页面，选择智能标签中的【自动套用格式】，设置一种喜爱的格式。选择【添加/移除WizardSteps】，添加成4个步骤，并分别设置每步的Title属性。(3) 参考图T.9，在四个步骤中分别添加控件。在步骤3中，放一个日历控件和选择年、月的下拉框，设置相应的外观样式。在步骤4中添加一个多行文本框。(4)设置选择职业的列表框ListBox1自动回传属性为真，并编写ListBox1_OnSelectedIndexChanged事件代码。如果选择“学生”，则下面的标签由“固定电话”变为“宿舍电话”。具体事件代码参考练习一。(5) 添加验证控件，对用户输入的信息进行验证，具体要求参考练习一。(6) 添加页面加载事件代码，页面首次加载时初始化步骤3中的出生年(DropDownList1)月(DropDownList2)的两个下拉列表框，定义一个全局数组用来存储节日名，并在页面加载事件中赋值。代码如下：string, SpecialDays = new string13, 32; protected void Page_Load(object sender, EventArgs e) int i; string x; if (!IsPostBack) for (i = 1980; i = 2010; i+) x = System.Convert.ToString(i); DropDownList1.Items.Add(x); for (i = 1; i = 12; i+) DropDownList2.Items.Add(System.Convert.ToString(i); SpecialDays1, 1 = 元旦; SpecialDays2, 14 = 情人节; SpecialDays3, 8 = 妇女节; SpecialDays4, 1 = 愚人节; SpecialDays5, 1 = 劳动节; SpecialDays10, 1 = 国庆节; SpecialDays12, 25 = 圣诞节;图T.9 sy2.aspx页面 (7) 为步骤3中的出生年(DropDownList1)月(DropDownList2)的两个下拉列表框添加OnSelectedIndexChanged事件，使得选项改变，自动传回，改变日历控件(Calendar1)显示的年月。代码如下：protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) Calendar1.VisibleDate = new DateTime(System.Convert.ToInt32(DropDownList1.SelectedValue), 1, 1); protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e) Calendar1.VisibleDate = new DateTime(System.Convert.ToInt32(DropDownList1.SelectedValue), System.Convert.ToInt32(DropDownList2.SelectedValue),1);(8) 为日历控件Calendar1添加DayRendar事件，使得元旦、国庆、五一等节假日显示相应的汉字节日名，并在元旦日期中显示一个小图片。代码如下：protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) Style SpecialDayStyle = new Style(); SpecialDayStyle.BackColor = System.Drawing.Color.Red; SpecialDayStyle.ForeColor = System.Drawing.Color.DarkBlue; SpecialDayStyle.BorderColor = System.Drawing.Color.DarkGreen; SpecialDayStyle.BorderWidth = new Unit(5); SpecialDayStyle.BorderStyle = BorderStyle.Ridge; SpecialDayStyle.Font.Size = FontUnit.Parse(11pt); try string MyDay = SpecialDayse.Day.Date.Month, e.Day.Date.Day; if (MyDay != null) e.Cell.Controls.Add(new LiteralControl( + MyDay); if (MyDay = 元旦) System.Web.UI.WebControls.Image MyImage = new System.Web.UI.WebControls.Image(); MyImage.ImageUrl = /Image/newyear.jpg; e.Cell.Controls.Add(MyImage); e.Cell.ApplyStyle(SpecialDayStyle); catch (Exception exc) Response.Write(exc.ToString(); (9) 添加Wizard1控件的Finish事件，在步骤4的多行文本框tbxFinish中显示前3步的注册信息。代码如下：protected void wizard1_Finished(object sender, EventArgs e) string x; x = ; x += TextBox1.Text + n; x += TextBox2.Text + n; x += TextBox3.Text + n; x += TextBox4.Text + n; x += TextBox5.Text + n; x += TextBox6.Text + n; x += TextBox7.Text + n; x += ListBox1.SelectedItem.Text + n; x += Calendar1.SelectedDate; tbxFinish.Text = x; (10) 调试，保存，然后按F5运行网页，查看效果如图T.9所示。【练习3】创建和使用用户控件。(1) 在练习1建立的网站“实验二”中，右键单击网站根目录，选择【Web用户控件】，新建一个用户控件header.ascx。(2) 右键单击App_Data，选择【XML文件】，新建一个XML文件ad.xml，打开ad.xml添加如下代码： /image/phei.png / 电子工业出版社 门户 20 /image/sohu.gif http:/www.sohu