动态网页设计实训指导书.doc

动态网页设计()实训指导书编写：颜煜二0 0三 年 八 月编写说明 本课程实验实训指导书是我们根据教学的需要，在试用的基础上，编写了这套实验实训指导书。其中包括实验实训8个，内容包括.NET基本知识，简单网站开发设计，内置对象的使用，数据访问技术ADO.NET及综合系统的开发实训等。目的是使学生通过实验实训，加深对HTML标记语言，C#程序设计，基本控件的使用，用户界面交互及网页间的数据传递，使用Web服务器常用控件，状态管理对象的应用，设计数据库应用网站，ASP.NET技术综合应用的理解，并将其运用到实际的工作当中，增强学生的实践能力，培养创新精神。目录一实训1 创建 Web应用程序1二.实训2 Web应用程序的界面设计6三.实训3 Web应用程序的界面设计10四.实训4 Web应用的状态管理21五.实训5 Web应用的状态管理28六.实训6 Web应用开发中的数据访问.41七.实训7 主题 母页和用户控件48八.实训8 .NET中数据库程序设计54 63实训 1 创建 Web应用程序一.实训目的：1. 掌握 IIS 的基本配置方法2. 熟悉.NET 开发环境二.实训内容： 1.IIS 的安装 IIS 是 Windows 操作系统的一个服务器组件，默认情况下，除了 Server 系统以外，该组件是不会随系统而安装的，需要另外添加，添加方法为找开控制面版，选择添加删除程序，选择添加删除 Windows 组件中的“Internet 信息服务(IIS)”后单击“下一步”完成安装。2.IIS 基本配置 （1）打开 IIS 服务管理器，方法为选择开始菜单设置控制面板，在控制面板窗口中选择管理工具项目，在管理工具项目窗口中选择 Internet 信息服务项目，并双击将其打开（如图 ST1-1,ST1-2 所示）图ST1-1图ST1-2（2）在 IIS 信息服务窗口中展开网站，在展开的选项中选择默认网站项，然后单击鼠标右键在出现菜单中选择属性，出现默认网站属性窗口(如图 ST1-3所示)图 ST1-3（3）默认网站属性窗口中选择网站选项卡，在此选项卡中可以设置此服务器的 IP 地址，如果此服务器作为单机使用，网络中其它客户机无法访问此服务器可以在此选项卡中 IP 地址项文本框中选择“全部未分配”，则访问此服务器可以使用如下地址访问 http:/localhost 或 进行。如果作为一个可以被网络中其它客户机访问的服务器，在 IP 地址项文本框中选择 IP 地址即可（单击该文本框旁边的箭头进行选择）（如图 ST1-3 所示）（4）然后在默认网站属性窗口中选择主目录选项卡，在选项卡中指定此服务器页面程序文件的存放路径。设置方法为在此选项卡中的本地路径项中指定一个目录路径（默认路径为系统盘的 Inteput 目录下的 wwwroot 目录），如F:myweb(即在 F 盘下新建一个 myweb 目录)，可以使用浏览按钮进行选择。还可以设置本服务器的文件访问权限，这些可以在此选项卡中一些复选框中进行选择。如目录浏览项目录可以控制客户机是否可以查看服务器主目录中的文件列表，读取和写入这两个选项可以控制对服务器主目录文件的读写权限（如图 ST1-4 所示）。图 ST1-4（5）然后可以指定客户机访问服务器时第一个被访问页面文件，这个项目需要在默认站点属性窗口中文档选项卡中进行添加。（如图 ST1-5 所示）（6）设置完所有属性后，单击确定按钮完成设置。图 ST1-52.编写简单的 ASP.NET 应用程序 具体的步骤：第一步：新建网站第二步：创建Web页面第三步：添加控件及设置属性第四步：添加事件代码第五步：调试运行任务一：设计一个单页Web应用程序，网页界面由1个表格、1个标签（Label）、2个文本框和1个命令按钮（Button）组成，另外还包含若干文字。设计界面如图1.10所示。 h 1创建应用程序界面（1）创建Web应用程序项目。启动Visual Studio 2008，选择“新建/项目”，项目类型选择“Web”，模板选择“ASP.NET Web应用程序”，然后指定该应用程序的保存路径，确定后系统则新建了一个解决方案（默认名为WebApplication1），该解决方案中包含一个Web项目（默认名为WebApplication1），该项目中包含一个网页文件（默认名为Default.aspx），此时屏幕上会出现一个空白窗体（2）向网页中添加控件。将Default.aspx改名为Login.aspx，对于本例界面，首先使用“表/插入表”菜单命令，插入一个2行2列的表格，居中显示。然后使用工具箱中标签（Label）、文本框（TextBox）和按钮（Button）3种控件放入表格中：先将光标定位到表格的单元格中，将鼠标移到左侧“工具箱”位置，自动弹出“工具箱”窗口，选择其中的“TextBox”控件对象，然后双击即可在网页中放入一个文本框对象，完成后的效果如图1.11所示。按类似的操作方法可分别添加标签和按钮，完成后的界面如图1.10所示。h 2设置控件的属性可以通过属性窗口为控件设置属性。单击按钮“Button1”，在“属性”窗口中出现按钮“Button1”的所有属性，在“属性”窗口中滚动属性列表，选定属性名“Text”，在右列中输入属性值为“确定”，属性窗口的设置如图1.12所示。另外将输入密码的文本框的TextMode属性设置为Password。h 3编写程序代码为按钮对象“确定”添加鼠标单击事件代码有两种方法：（1）双击要编写代码的命令按钮，系统自动打开代码编辑器，并出现如下代码行：protected void Button1_Click(object sender, EventArgs e)（2）在Button控件的属性窗口中，单击“ ”图标，添加Click事件方法“Button1_ Click”，双击则系统自动切换到代码编辑器并生成如（1）所示的代码。也可以直接双击Click事件所要输入的空白响应方法，系统自动生成Button1_Click方法。在事件代码中输入如下的程序代码：protected void Button1_Click(object sender, EventArgs e) if (TextBoxName.Text = admin) & (TextBoxPwd.Text = admin) Label1.Text = 欢迎进入论坛系统; else Label1.Text = 用户名或密码错！; h 4保存应用程序使用“文件”菜单中的“全部保存”命令或单击工具栏上的“全部保存”按钮，可以将所有编辑过的代码和设计的网页存盘。h 5运行和调试程序（1）右键单击项目中的aspx网页文件，在弹出的快捷菜单中选择“在浏览器中查看”选项即可浏览选择的网页。（2）从“调试”菜单中选择“开始执行（不调试）”命令。（3）单击工具栏中的 按钮。（4）按Ctrl+F5组合键。运行程序后，即显示网页界面，输入用户名“admin”，密码“admin”，单击“确定”按钮，标签中将显示“欢迎进入论坛系统”，如图1.13所示图1.13 实例运行效果 三、思考与练习 1.如何配置.NET的运行环境及调试一个简单的ASP.NET程序。实训2 Web应用程序的界面设计一.实训目的：1、 掌握文本类型控件的常用属性，事件，方法的设置方法 2能熟练掌握Label,TextBox,Button控件的使用二.实训内容：任务一：设计一个模拟的用户登录页面，当用户名文本框为空时，输出“请输入用户名“，当输入用户名，按Enter键或单击页面空白处时，则在页面中输出欢迎信息”尊敬的用户你好！“具体操作步骤：1.建立网站：2.设计页面3.添加控件及置属性各控件对象的属性设置：控件属性值说明TextBox1IDtxtName文本框1的名字AutoPostBackTrue文本修改后，数据自动回传给服务器Label1IDlblInfo标签控件在程序中使用的名字Text标签倥件初始状态不显示文本4.编写事件代码using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) this.Title = 文本类型控件学习页面; txtName.Focus(); if (txtName.Text.Trim() = ) lblInfo.Text = 请输入用户名; protected void TextBox1_TextChanged(object sender, EventArgs e) if (txtName.Text.Trim() = ) lblInfo.Text = 请输入用户名; else lblInfo.Text = 尊敬的用户 + txtName.Text + 你好！; 程序说明：1. 在中，字符串连接用“+“。2. Focus( ) 此方法用于获取光标的焦点。3. Trim( ) 为了避免用户输入若干空格来通过程序判断，所以在获取文本框的值时调用Trim( )方法，将字符串前后的空格移除，即从当前String 对象中移除所有前导空白字符和尾部空白字符，避免空格对程序产生的影响。任务二：创建一个“用户管理“的页面，要求当输入用户名，密码，联系电话，个人描述后，单击”添加“按扭，用户管理信息就会在下方的Label控件中显示，程序运行效果如图：具体操作步骤：1.建立网站：2.设计页面3.添加控件及设置属性4.编写事件代码using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void Button1_Click(object sender, EventArgs e) if (TextBox1.Text.Trim() = ) | (TextBoxpwd.Text.Trim() = ) | (TextBox2.Text.Trim() = ) | (TextBox3.Text.Trim() = ) Label1.Text = 输入框不能为空,请输入完全; else Label1.Text = TextBox1.Text +你的密码是： +TextBoxpwd.Text +联系电话：+ TextBox2.Text + 个人描述：+TextBox3.Text; 三、思考与练习 1.如何灵活运用Label,TextBox,Button等控件。 实训3 Web应用程序的界面设计一.实训目的：1、 掌握选择类型类型控件的常用属性，事件，方法的设置方法2、 能熟练掌握CheckBox, CheckBoxList, RadioButton,RadioButtonList，DropDownList,FileUpLoad的控件的使用二.实训内容：任务一：模拟制作一个“在线学习系统”的注册页面Register.aspx,性别的选择要求用单选按钮实现；专业的选择用单选按钮组来实现；所学语言的选择用复选按钮组来实现；当单击“注册”按钮时，将设置的信息显示，当单击“清空”按钮时，将页面中的信息进行清空处理。 效果图如下：具体操作步骤：1.建立网站：2.设计页面3.添加控件及设置属性4.编写事件代码：using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void Button1_Click(object sender, EventArgs e) string strsex = , strlan = ; if (RadMale.Checked) strsex = 男 ; else strsex = 女 ; for (int i = 0; iChklLan.Items.Count; i+) if (ChklLan.Itemsi.Selected) strlan = strlan + ChklLan.Itemsi.Text +    Label1.Text = TextBox1.Text +   密码： + TextBoxpwd.Text +   性别: + strsex; Label1.Text +=   专业： + Radlspec.SelectedItem.Text +   所学语言： + strlan; protected void Button2_Click(object sender, EventArgs e) TextBox1.Text = ; TextBoxpwd.Text = ; RadMale.Checked = false; RadFemale.Checked = false; Radlspec.ClearSelection(); ChklLan.ClearSelection(); Label1.Text = ; protected void RadMale_CheckedChanged(object sender, EventArgs e) 任务二： 创建“WEB开发技术基础试题”页面（综合运用单选按钮组和复选按钮组）页面运行效果如图：具体操作步骤：1.建立网站：2.设计页面：3.添加控件及设置属性：4.编写事件代码：using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void BtnOk_Click(object sender, EventArgs e) int score = 0; if (Radl1.Items1.Selected = true) score += 25; if (Radl2.Items2.Selected = true) score += 25; if (Chkl1.Items0.Selected = true & Chkl1.Items1.Selected = true & Chkl1.Items2.Selected = false & Chkl1.Items3.Selected = true) score += 25; if (Chkl2.Items0.Selected = true & Chkl2.Items1.Selected = false & Chkl2.Items2.Selected = true & Chkl2.Items3.Selected = false) score += 25; LblInfo.Text = 您的最后得分是： + score; protected void BtnCLear_Click(object sender, EventArgs e) Radl1.ClearSelection(); Radl2.ClearSelection(); Chkl1.ClearSelection(); Chkl2.ClearSelection(); LblInfo.Text = ; 任务三： 设计一个小计算器，能够进行基本的加，减，乘，除运算即可，程序运行效果如图：具体操作步骤：1.建立网站：2.设计页面：3.添加控件及设置属性：4.编写事件代码：using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) this.Title = 我的小计算器; txtresult.ReadOnly = true; protected void Button1_Click(object sender, EventArgs e) float fnum1 = 0, fnum2 = 0, fresult = 0; fnum1 = float.Parse(txtnum1.Text); fnum2 = float.Parse(txtnum2.Text); string strope = dropclass.SelectedValue; switch (strope) case +: fresult = fnum1 + fnum2; break; case -: fresult = fnum1 - fnum2; break; case *: fresult = fnum1 * fnum2; break; case /: fresult = fnum1 / fnum2; break; txtresult.Text = fresult.ToString(); protected void Button2_Click(object sender, EventArgs e) txtnum1.Text = ; txtnum2.Text = ; txtresult.Text = ; 任务四：制作如图所示的用户注册页面，当单击“注册”按钮后就在Label控件中显示相应注册信息，当单击“重置”按钮后所有的信息清空。具体操作步骤：1.建立网站：2.设计页面：3.添加控件及设置属性：4.编写事件代码：using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void Button1_Click(object sender, EventArgs e) Label1.Text = 您的个人信息如下:; string message = ; message += 姓名： + txtname.Text + ; message += 密码： + txtpwd1.Text + ; message += 性别： + Rdoltsex.SelectedValue + ; message += 出生日期： + txtbirthday.Text + ; message += 专业： + ddlspeciality.SelectedItem.Text + ; message += 爱好：; for (int j = 0; j Chkhobby.Items.Count; j+) if (Chkhobby.Itemsj.Selected = true) message += + Chkhobby.Itemsj.Value; message += + 联系地址： + txtaddress.Text + ; message += 邮政编码： + txtyb.Text + ; message += 联系电话： + txttel.Text + ; message += 简介： + txtintroduction.Text + ; Label1.Text += message; protected void Button2_Click(object sender, EventArgs e) txtname.Text = ; txtpwd.Text = ; txtpwd1.Text = ; Rdoltsex.ClearSelection(); txtbirthday.Text = ; ddlspeciality.ClearSelection(); Chkhobby.ClearSelection(); txtaddress.Text = ; txtyb.Text = ; txttel.Text = ; txtintroduction.Text = ; Label1.Text = ; 任务五： 使用FILeUpLoad控件上传图象文件到Web服务器，并将图象文件在Image控件中显示出来，同时要显示出文件上传的相关信息。程序启动后，由于没有上传图象，所以此时Image控件显示替换文本“尚未上传图象”如图；图象文件上传成功，提示“文件上传成功”，并在Image控件中显示出图象，如图；图象文件上传失败时，要给出具体的原因，例如，没有选择上传的文件，文件类型不正确，文件已经存在等。具体操作步骤：1.建立网站：2.设计页面：3.添加控件及设置属性：4.编写事件代码：using System;using System.IO;（在程序中要用到File类，故在编写代码前，首先应引入命名空间）using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page 页面载入执行的事件代码如下： protected void Page_Load(object sender, EventArgs e) this.Title = 上传控件与图象控件的应用; ImgShow.AlternateText = 尚未上传图象; /设置图象控件的替换文本“上传”按钮被单击时，所触发的事件代码如下： protected void btnUp_Click(object sender, EventArgs e) if (fulFileUp.HasFile)/判断上传控件中是否包含文件 string strFileName = fulFileUp.FileName; /获取上传文件的名称 string strWebFilePath = Server.MapPath(upload/ + strFileName); /服务器端图象文件所存在的路径 string strFileType = fulFileUp.PostedFile.ContentType; /获取上传文件的类型 if (strFileType = image/bmp | strFileType = image/pjpeg | strFileType = image/gif)/判断上传文件的扩展名 if (!File.Exists(strWebFilePath) /如果文件不存在 fulFileUp.SaveAs(strWebFilePath);/按照指定的服务器路径文件保存 ImgShow.ImageUrl = upload/ + strFileName; /在Image控件中显示所上传图象 ImgShow.Height = 150;/指定图象控件的宽度 ImgShow.Width = 200;/指定图象控件的高度 Label1.Text = 文件上传成功; else Label1.Text = 文件已存在！; else Label1.Text = 文件类型不符合要求，只能上传.bmp jpg gif格式的文件; else Label1.Text = 请选择要上传的文件; 三、思考与练习 1.如何设置选择类型类型控件的常用属性，事件，方法及其综合运用。实训4 Web应用的状态管理一.实训目的：1、掌握数据验证控件的常用属性，事件，方法的设置方法。2、能熟练掌RequiredFieldValidator，ComPareValidator，RegularExpressionValidator，RangeValidator，ValidationSummary的控件的使用二.实训内容：任务一：创建一个模拟的用户登录页面，要求用户名，身份证号两项内容必填写，同时要求在专业下拉列表框中必须选择一个专业，否则出现错误提示，如图所示，当页面通过验证时的运行效果如图。具体操作步骤：1.建立网站：2.设计页面：3.添加控件及设置属性：4.编写事件代码：using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void btnOk_Click(object sender, EventArgs e) lblInfo.Text = txtName.Text + 你的身份证号是： + txtIDCard.Text + 你的专业是 + ddlSpec.Text; 任务二： 设计一个模拟的用户注册页面，要求用户，密码都不能为空，密码必须与确认密码相同，出生日期的格式必须是日期格式，作品数量大于5。当页面验证通过时，程序运行效果如图；当页面未通过时，程序运行效果如图操作步骤：1. 创建网站设计页面：2. 添加控件并设置属性：3. 编写事件代码：具体代码如下： using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) txtName.Focus();/页面加载时，用户名文本框得到焦点 protected void btnOk_Click(object sender, EventArgs e) lblInfo.Text =用户名是：+ txtName.Text + 密码是： + txtPwd.Text + 出生日期是： + txtBirthDay.Text+作品数量是：+txtNum.Text ; 任务三：设计一个模拟的企业注册页面，要求使用格式验证控件（RegularExpressionValidator）对公司的URL,公司邮箱，公司编码进行格式验证，使用必需项验证控件对公司名称，公司邮箱进行必需项验证。操作步骤：1.创建网站设计web页面2.添加控件及设置属性3编写事件代码：using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) txtComName.Focus(); protected void btnOk_Click(object sender, EventArgs e) lblInfo.Text = 公司名称: + txtComName.Text + 公司URL: + txtComUrl.Text + 公司邮箱： + txtComEmail.Text + 公司地址： +txtComAddress.Text + 公司邮编： + txtPostalcode.Text; protected void btnClear_Click(object sender, EventArgs e) txtComName.Text = ; txtComUrl.Text = ; txtComEmail.Text = ; txtCom