APSNET沈士根实验报告(五).doc

Web编程基础实验报告班级 计专141 学号14501111姓名 黄跃翔 完成日期 2015.6.10实验室 理工楼320 指导老师 沈士根、叶晓彤 成绩_实验题目管理用户和统一网站风格 （1） 实验目的(1) 掌握Form验证的配置方法(2) 掌握ASP.NET网站管理工具的应用(3) 掌握登录系列控件的应用(4) 掌握常用的用户和角色管理方法(5) 掌握建立和使用用户控件的方法(6) 掌握母版页和内容页的建立方法(7) 掌握主题的建立和使用方法(8) 掌握Web部件技术的使用方法(9) 掌握网站导航控件TreeView(10) 掌握使用Microsoft Ajax技术的方法（2） 实验内容及步骤实验9读者自己申请或使用已有的一个支持SMTP发送邮件的邮箱，该邮箱将在新建用户和重置用户密码时向用户发送邮件。根据邮箱的用户名、密码、SMTP服务器名、SMTP服务器端口号等信息，在网站根文件夹下的Web.config中的元素中输入代码如下： 在Admin文件夹下，建立用于实现Admin文件夹授权的Web.config，代码如下： 1. 修改ProShow.aspx和ProShow.aspx.cs。备份原先的ProShow.aspx和ProShow.aspx.cs文件。需要注意的是，本步骤不是必须的，但建议养成在修改文件之前先备份文件夹的习惯。在ProShow.aspx的源视图中，将光标定位在 和两个标记间，添加一个切换到设计视图，在元素中添加一个用于布局的三行四列表格，再向相应的单元格中添加一个Image、三个LinkButton控件和一个LoginView控件，输入您的位置。并设置相应的ID属性和相应的样式。如下图1所示。设置LoginView控件的ID属性值为logvHeader。单击logvHeader的智能标记，选择编辑RoleGroups选项，在呈现的对话框中添加如图2,所示的2个角色。图1 图2 单击logvHeader的智能标记，选择AT视图，输入“您还未登录！”；选择RoleGroup0-Admin视图，添加一个LoginName控件、两个LinkButton控件和一个LoginStatus控件；选择RoleGroup0-Member视图，添加一个LoginName控件、两个LinkButton控件和一个LoginStatus控件，各控件属性设置后的效果如图：9.设计NewUser.aspx在源视图中，将ProShow.aspx中的整个元素复制到和两个标记间。将原来的更改为。在元素中添加一个CreateUserWizard控件。最终设计界面如图:CreateUserWizard控件的属性设置见书本。需要注意的是，MailDefinition属性集中的From属性值应根据Web.config文件的元素中的邮箱信息进行设置。10. 编写NewUser.aspx.cs中的方法代码在NewUser.aspx.cs中，添加lnkbtnRegister和lnkbtnLogin链接按钮被单击后触发Click事件时执行的方法代码。当成功注册用户后，触发CreateUserWizard1.CreateUser事件，执行的方法代码如下：protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e) Roles.AddUserToRole(CreateUserWizard1.UserName,Member); 11. 在源视图中，将ProShow.aspx中的整个元素复制到和两个标记间。将原来的更改为。在元素中添加一个Login控件。如图：13. 设计GetPwd.aspx在源视图中，将ProShow.aspx中的整个元素复制到和两个标记间。将原来的更改为。在元素中添加一个PasswordRecovery控件。设计后如图：设置PasswordRecovery控件的MailDefinition属性集中的BodyFileName属性值为/GetPwd.txt,MailDefinition属性集中的其他属性设置参考第9部NewUser中的设置。14. 设计ChangePwd.aspx在源视图中，将ProShow.aspx中的整个元素复制到和两个标记间。将原来的更改为。在元素中添加一个LoginView控件。21.编写RolesUsers.aspx.cs中的方法代码添加lnkbtnRegister和lnkbtnLogin链接按钮被单击后触发Click事件时执行的方法代码。页面首次载入时，将绑定所以角色到lstRoles和所有用户到lstUsers。页面往返后，将判断当前是否已选择角色，若是，则调用自定义方法GetUsersInRole（）显示已选择角色中的用户，执行的方法代码如下：protected void Page_Load(object sender, EventArgs e) if(!IsPostBack) string roles = Roles.GetAllRoles(); lstRoles.DataSource = roles; lstRoles.DataBind(); MembershipUserCollection users = Membership.GetAllUsers(); lstUsers.DataSource = users; lstUsers.DataBind(); if(lstRoles.SelectedItem!=null) GetUsersInRole(); Click事件，将选中的用户添加到选中的角色中，执行的方法代码如下： protected void btnToRole_Click(object sender, EventArgs e) if(lstRoles.SelectedItem=null) lblMsg.Text = 请选择角色！; return; if(lstUsers.SelectedItem=null) lblMsg.Text = 请选择用户！; return; string newUsers = new stringlstUsers.GetSelectedIndices().Length; for(int i=0;i附加样式表命令，将网站根文件夹下的StyleTableDiv.css附加到母版页(3)删除元素中系统自动添加的层。(4)将实验9中的ProShow.aspx页面的整个元素复制到元素中，修改lnkbtnDefault控件的PostBackUrl属性值为Default.aspx(5)在标记下面添加元素，之后再元素中添加一个用于布局的1行2列表格，分别在表格的两个单元格中添加一个ContentPlaceHolder控件并分别设置ID属性值为cphLeft和cphRight。编写ProShow.aspx.cs中的方法代码在所有方法外声明一个MyPetShopDataContext类实例，使得该方法能多次调用MyPetShopDataContext db = new MyPetShopDataContext(); protected void Page_Load(object sender, EventArgs e) Bind();自定义的Bind方法，首先判断QueryString数据集合中的CategoryId值是否为空值，若非空，则查找该CategoryId值对应分类中的所有商品并绑定到gvProduct，否则将Product表中的所以商品绑定到gvProduct。 protected void Bind() if (Request.QueryStringProductId != null) int productId = int.Parse(Request.QueryStringProductId); var products = from p in db.Product where p.ProductId = productId select p; gvProduct.DataSource = products; gvProduct.DataBind(); if (Request.QueryStringCategoryId != null) int categoryId = int.Parse(Request.QueryStringCategoryId); var products = from p in db.Product where p.CategoryId = categoryId select p; gvProduct.DataSource = products; gvProduct.DataBind(); 当改变gvProduct的当前页时触发PageIndexChanging事件，设置新的页面索引值，并重新显示包含的商品，执行的方法代码如下： protected void gvProduct_PageIndexChanging(object sender, GridViewPageEventArgs e) gvProduct.PageIndex = e.NewPageIndex; Bind(); System.Threading.Thread.Sleep(3000); 预览效果3. 利用Web部件技术设计网站首页以MasterPage.master为母版，新建内容页Default.aspx其中ContentPlaceHolderID属性值为cphLeft的元素中添加控件Category.ascx，再在ContentPlaceHolderID属性值为cphRight的元素中添加一个用于布局的2行3列表格。在表格中添加控件。板鞋Default.aspx.cs中的方法代码当页面载入时的Page_Load事件: protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) foreach (WebPartDisplayMode mode in MyPartManager.DisplayModes) if (mode.IsEnabled(MyPartManager) ddlMode.Items.Add(mode.Name); int i = 1; foreach (WebPart part in MyPartManager.WebParts) if (part is GenericWebPart) part.Title = string.Format(控件0, i); i+; 当选择下拉列表框中的不同模式值时，触发SelectedIndexChanged事件，此时，需要修改MyPartManager.DisplayMode的值来改变页面模式，代码如下 protected void ddlMode_SelectedIndexChanged(object sender, EventArgs e) MyPartManager.DisplayMode = MyPartManager.DisplayModesddlMode.SelectedValue; 4. 设计并应用主题设计Blue主题在网站中添加一个Blue主题，向Blue主题对应的文件夹中分别添加外观文件Blue.skin、样式表文件Blue.css和子文件夹Images。在Images中添加两个图片文件Loge.gif，Bar.jpg。在Blue.skin文件中输入代码如下：在Blue.css文件中输入样式代码如下body form font-size:12px;table width:100%.navigation text-align:center;background-color:#C8E3FF;.status background-color:#C1FFFF;.position background-color:#5B6DB5;background-image:url(Images/logo.jpg);应用Blue主题（1）为避免冲突，分别复制MasterPage.master和Default.aspx到网站根文件夹下的ThemeMasterPage.master和ThemeDefault.aspx（2）将ThemeMasterPage.master中的imgLogo控件的SkinID属性值设置为logo。（3）将ThemeDefault.aspx中Page指令的MasterPageFile和Theme属性值分别设置为/ThemeMasterPage.master和Blue。（4）查看效果实验113. 利用TreeView控件显示所有的商品分类及包含的商品设计用户控件PetTree.ascx在MyPetShop网站的UserControl文件夹中添加一个用户控件PetTree.ascx，切换到设计视图，添加一个TreeView控件，设置其ID属性值为tvProduct、ExpandDepth属性值为0.编写PetTree.ascx.cs中的方法代码在所有方法外声明一个MyPetShopDataContext类实例，使得该方法能多次调用MyPetShopDataContext db = new MyPetShopDataContext();载入页面时触发Page_Load事件，若为首次载入，则调用自定义方法BindTree()将所有的商品分类添加到TreeView控件的父节点中，执行的方法代码如下： protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) BindTree(); 自定义方法BindTree()的代码如下： protected void BindTree() var categories = from c in db.Category select c; foreach (var category in categories) TreeNode treeNode = new TreeNode(); treeNode.Text = category.Name; treeNode.Value = category.CategoryId.ToString(); treeNode.NavigateUrl = /ProShow.aspx?CategoryId= + category.CategoryId.ToString(); tvProduct.Nodes.Add(treeNode); BindTreeChild(treeNode, category.CategoryId); 自定义方法BindTreeChild()将制定分类下的所以商品添加到该分类节点下。代码如下： protected void BindTreeChild(TreeNode tn, int categoryId) var products = from p in db.Product where p.Category.CategoryId = categoryId select p; foreach (var product in products) TreeNode treeNode = new TreeNode(); treeNode.Text = product.Name; treeNode.Value = product.ProductId.ToString(); treeNode.NavigateUrl = /ProShow.aspx?ProductId= + product.ProductId.ToString(); tn.ChildNodes.Add(treeNode); 修改ProShow.aspx先备份再打开ProShow.aspx，切换到设计视图，删除用户控件Category.ascx。将用户控件PetTree.ascx拖到用户控件Category.ascx所处的位置。最终的设计界面如图所示:修改ProShow.aspx.cs中的方法代码修改ProShow.aspx.cs中的自定义方法Bind()代码如下： protected void Bind() if (Request.QueryStringProductId != null) int productId = int.Parse(Request.QueryStringProductId); var products = from p in db.Product where p.ProductId = productId select p; gvProduct.DataSource = products; gvProduct.DataBind(); if (Request.QueryStringCategoryId != null) int categoryId = int.Parse(Request.QueryStringCategoryId); var products = from p in db.Product where p.CategoryId = categoryId select p; gvProduct.DataSource = products; gvProduct.DataBind(); 浏览页面效果实验121. 设计并实现能自动显示下一个商品的页面修改实验步骤1中的ProShow.aspx先备份再打开ProShow.aspx，在ContentPlaceHolderID属性值为