前言
为了帮助同学们完成痛苦的实验课程设计，本作者将其作出的实验结果及代码贴至CSDN中，供同学们学习参考。如有不足或描述不完善之处，敬请各位指出，欢迎各位的斧正！
一、实验目的
1．掌握建立和使用用户控件的方法。
2．掌握母版页和内容页的建立方法。
3．掌握主题的建立和使用方法。
4．理解网站地图文件的结构并能合理建立网站地图。
5．掌握网站导航控件SiteMapPath、TreeView和Menu的用法。
6．掌握母版页中网站控件的用法。
二、实验环境
Visual Studio 2019 ASP.Net Framework
三、实验内容
1、在实验5的基础上设计并实现“商品分类列表”用户控件。该用户控件用于显示商品分类及每个分类中包含的商品数量，其中商品分类名显示为超链接，浏览效果如图1所示。
图1 “商品分类列表”用户控件浏览效果
2、创建母版页。基于母版页且不额外添加其他信息的内容页浏览效果如图2所示。
图2 基于母版页且不额外添加其他信息的内容页浏览效果
在图2中，“您的位置：”和“Copyright 2018 MyPetShop”之间包含左右两个ContentPlaceHolder控件。
3、利用母版页重新设计MyPetShop应用程序首页。在实验5的基础上进行修改，浏览效果如图3所示。
图3 基于母版页的MyPetShop应用程序首页浏览效果
4、构建MyPetShop应用程序的网站地图文件，要求包含于网站地图中的页面层次结构如图4所示。
图4 页面层次结构
5、修改母版页实现面包屑导航功能。在母版页中的“您的位置：”栏添加面包屑导航功能。
四、代码及截图
1.“商品分类列表”用户控件：
创建Category.ascx文件，源代码如下所示：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Category.ascx.cs" Inherits="UserControl_WebUserControl" %>
<asp:GridView ID="gvCategory" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="imgArrow" runat="server" ImageUrl="~/Images/arrow.gif"/>
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField DataNavigateUrlFields="CategoryId" DataNavigateUrlFormatString="~/ProShow.aspx?CategoryId={0}" DataTextField="Name" HeaderText="分类名称" />
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" Width="90px" />
<headerTemplate>商品数量</headerTemplate>
<ItemStyle HorizontalAlign="Center" Width="90px" />
<ItemTemplate>
<asp:Label ID="lblCount" runat="server" Text='<%#GetProductCountByCategoryId(Eval("CategoryId").ToString()) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
设计界面如下所示：
Category.asax.cs代码如下所示：
using System;
using MyPetShop.BLL;
public partial class UserControl_WebUserControl : System.Web.UI.UserControl
{
CategoryService categorySrv = new CategoryService();
protected void Page_Load(object sender, EventArgs e)
{
gvCategory.DataSource = categorySrv.GetAllCategory();
gvCategory.DataBind();
}
protected string GetProductCountByCategoryId(string id)
{
return "(" + categorySrv.GetProductCountByCategoryId(int.Parse(id)).ToString() + ")";
}
}
2.创建母版页
创建MasterPage.master文件，其源代码如下：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<header class="header">
<asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/logo.gif" />
<ul class="nav nav-pills">
<li class="navDark">
<asp:LinkButton ID="lnkbtnDefault" runat="server" CausesValidation="False" ForeColor="White" PostBackUrl="~/Default.aspx">首页</asp:LinkButton></li>
<li class="navDark">
<asp:LinkButton ID="lnkbtnRegister" runat="server" CausesValidation="False" ForeColor="White" OnClick="LnkbtnRegister_Click" >注册</asp:LinkButton></li>
<li class="navDark">
<asp:LinkButton ID="lnkbtnLogin" runat="server" CausesValidation="False" ForeColor="White" OnClick="LnkbtnLogin_Click" >登录</asp:LinkButton></li>
<li class="navDark">
<asp:LinkButton ID="lnkbtnCart" runat="server" CausesValidation="False" ForeColor="White" >购物车</asp:LinkButton></li>
<li class="navDark">
<asp:LinkButton ID="lnkbtnSiteMap" runat="server" CausesValidation="False" ForeColor="White" PostBackUrl="~/SiteMapTest.aspx">网站地图</asp:LinkButton></li>
</ul>
<div class="status">
<asp:Label ID="lblWelcome" runat="server" Text="您还未登录！"></asp:Label>
<asp:LinkButton ID="lnkbtnPwd" runat="server" CausesValidation="False" ForeColor="White" Visible="False" PostBackUrl="~/ChangePwd.aspx">密码修改</asp:LinkButton>
<asp:LinkButton ID="lnkbtnManage" runat="server" ForeColor="White" Visible="False" PostBackUrl="~/Admin/Default.aspx">系统管理</asp:LinkButton>
<asp:LinkButton ID="lnkbtnOrder" runat="server" CausesValidation="False" ForeColor="White" Visible="False" PostBackUrl="~/OrderList.aspx">购物记录</asp:LinkButton>
<asp:LinkButton ID="lnkbtnLogout" runat="server" CausesValidation="False" ForeColor="White" Visible="False" OnClick="LnkbtnLogout_Click" >退出登录</asp:LinkButton>
</div>
</header>
<nav class="sitemap">
您的位置：
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</nav>
<section class="mainbody">
<div class="leftside">
<asp:ContentPlaceHolder ID="cphLeft" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="rightside">
<asp:ContentPlaceHolder ID="cphRight" runat="server">
</asp:ContentPlaceHolder>
</div>
<%-- 下面div元素左右两侧均不允许其他浮动元素，并显示分割线 --%>
<div class="clear"></div>
</section>
<footer class="footer">
Copyright 2018 MyPetShop
</footer>
</form>
</body>
</html>
其设计界面如下：
MasterPage.master.cs代码如下：
using System;
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["CustomerId"] != null) //一般用户登录
{
lblWelcome.Text = "您好，" + Session["CustomerName"].ToString();
lnkbtnPwd.Visible = true;
lnkbtnOrder.Visible = true;
lnkbtnLogout.Visible = true;
}
}
protected void LnkbtnRegister_Click(object sender, EventArgs e)
{
Session.Clear(); //注销当前用户
Response.Redirect("~/NewUser.aspx");
}
protected void LnkbtnLogin_Click(object sender, EventArgs e)
{
Session.Clear(); //注销当前用户
Response.Redirect("~/Login.aspx");
}
protected void LnkbtnLogout_Click(object sender, EventArgs e)
{
Session.Clear(); //注销当前用户
Response.Redirect("~/Default.aspx");
}
}
3.重新设计的MyPetShop应用程序首页
创建Default.aspx，其源代码如下所示：
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@Register Src="~/UserControl/Category.ascx" TagPrefix="ucl" TagName="Category" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphLeft" Runat="Server">
<ucl:Category runat="server" ID="Category" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphRight" Runat="Server">
<asp:GridView ID="gvProduct" runat="server" AllowPaging="True"
AutoGenerateColumns="False"
PagerSettings-Mode="NextPrevious" PageSize="1" Width="100%"
OnPageIndexChanging="GvProduct_PageIndexChanging" >
<PagerSettings FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PreviousPageText="上一页" Mode="NextPrevious" Position="TopAndBottom" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table style="border:1px solid #808080;width:100%">
<tr>
<td style="text-align:center;border:1px;vertical-align:middle;width:40%" rowspan="7">
<asp:Image ID="imgProduct" runat="server" imageUrl='<%# Bind("Image") %>' Height="60px" Width="60px"/>
</td>
<td style="border:1px solid #808080;">商品名称：</td>
<td style="border:1px solid #808080;">
<asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="border:1px solid #808080;">商品价格：</td>
<td style="border:1px solid #808080;">
<asp:Label ID="lblListPrice" runat="server" Text='<%# Bind("ListPrice") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="border:1px solid #808080;">商品描述:</td>
<td style="border:1px solid #808080;">
<asp:Label ID="lblDecsn" runat="server" Text='<%# Bind("Descn") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="border:1px solid #808080;">库存：</td>
<td style="border:1px solid #808080;">
<asp:Label ID="lblQty" runat="server" Text='<%# Bind("Qty") %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField DataNavigateUrlFields="ProductId"
DataNavigateUrlFormatString="~/ShopCart.aspx?ProductId={0}"
HeaderText="放入购物车" Text="购买" />
</Columns>
</asp:GridView>
</asp:Content>
其设计界面如下：
Default.aspx.cs如下：
using System;
using System.Web.UI.WebControls;
using MyPetShop.BLL;
public partial class _Default : System.Web.UI.Page
{
ProductService productSrv = new ProductService();
protected void Page_Load(object sender, EventArgs e)
{
Bind();
}
protected void Bind()
{
gvProduct.DataSource = productSrv.GetAllProduct();
gvProduct.DataBind();
}
protected void GvProduct_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvProduct.PageIndex = e.NewPageIndex;
Bind();
}
}
4.构建MyPetShop应用程序的网站地图文件
创建站点地图文件Web.sitemap：
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="首页" description="首页">
<siteMapNode url="~/NewUser.aspx" title="注册" description="注册" />
<siteMapNode url="~/Login.aspx" title="登录" description="登录" />
<siteMapNode url="~/OrderList.aspx" title="购物记录" description="购物记录" />
<siteMapNode url="~/ChangePwd.aspx" title="更改密码" description="更改密码" />
<siteMapNode url="~/GetPwd.aspx" title="重置密码" description="重置密码" />
<siteMapNode url="~/ProShow.aspx" title="商品展示" description="商品展示" />
<siteMapNode url="~/ShopCart.aspx" title="购物车" description="购物车">
<siteMapNode url="~/SubmitCart.aspx" title="订单提交" description="订单提交" />
</siteMapNode>
<siteMapNode url="~/Map.aspx" title="网站地图" description="网站地图" />
</siteMapNode>
</siteMap>
创建PetTree.asax，其源代码如下：
<asp:TreeView ID="tvProducts" runat="server" ExpandDepth="0">
<Nodes>
<asp:TreeNode SelectAction="None" Text="分类商品" Value="分类商品"></asp:TreeNode>
</Nodes>
</asp:TreeView>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PetTree.ascx.cs" Inherits="UserControl_PetTree" %>
其设计界面如下：
PetTree.asax.cs代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MyPetShop.BLL;
public partial class UserControl_PetTree : System.Web.UI.UserControl
{
CategoryService CategorySrv = new CategoryService();
ProductService ProductSrv = new ProductService();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//调用自定义方法BindTree()将所有的商品分类添加到TreeView控件tvProducts的父节点中
BindTree();
}
}
protected void BindTree()
{
var categories = CategorySrv.GetAllCategory();
foreach (var category in categories)
{
//将一个商品分类添加到TreeView控件tvProducts的父节点中
TreeNode treeNode = new TreeNode
{
Text = category.Name,
Value = category.CategoryId.ToString(),
NavigateUrl = "~/ProShow.aspx?CategoryId=" + category.CategoryId.ToString()
};
tvProducts.Nodes.Add(treeNode);
//调用自定义方法BindTreeChild()将指定分类号下的所有商品添加到该分类节点下
BindTreeChild(treeNode, category.CategoryId);
}
}
protected void BindTreeChild(TreeNode tn, int categoryId)
{
var products = ProductSrv.GetProductByCategoryId(categoryId);
//
foreach (var product in products)
{
TreeNode treeNode = new TreeNode()
{
Text = product.Name,
Value = product.ProductId.ToString(),
NavigateUrl = "~/ProShow.aspx?ProductId=" + product.ProductId.ToString()
};
tn.ChildNodes.Add(treeNode);
}
}
}
创建SiteMapTest.aspx，其源代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SiteMapTest.aspx.cs" Inherits="SiteMapTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
</form>
</body>
</html>
其设计界面如下：
SiteMapTest.aspx.cs如下：
using System;
public partial class SiteMapTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
5.修改母版页实现面包屑导航功能
MasterPage.master源代码如下：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<header class="header">
<asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/logo.gif" />
<ul class="nav nav-pills">
<li class="navDark">
<asp:LinkButton ID="lnkbtnDefault" runat="server" CausesValidation="False" ForeColor="White" PostBackUrl="~/Default.aspx">首页</asp:LinkButton></li>
<li class="navDark">
<asp:LinkButton ID="lnkbtnRegister" runat="server" CausesValidation="False" ForeColor="White" OnClick="LnkbtnRegister_Click" >注册</asp:LinkButton></li>
<li class="navDark">
<asp:LinkButton ID="lnkbtnLogin" runat="server" CausesValidation="False" ForeColor="White" OnClick="LnkbtnLogin_Click" >登录</asp:LinkButton></li>
<li class="navDark">
<asp:LinkButton ID="lnkbtnCart" runat="server" CausesValidation="False" ForeColor="White" >购物车</asp:LinkButton></li>
<li class="navDark">
<asp:LinkButton ID="lnkbtnSiteMap" runat="server" CausesValidation="False" ForeColor="White" PostBackUrl="~/SiteMapTest.aspx">网站地图</asp:LinkButton></li>
</ul>
<div class="status">
<asp:Label ID="lblWelcome" runat="server" Text="您还未登录！"></asp:Label>
<asp:LinkButton ID="lnkbtnPwd" runat="server" CausesValidation="False" ForeColor="White" Visible="False" PostBackUrl="~/ChangePwd.aspx">密码修改</asp:LinkButton>
<asp:LinkButton ID="lnkbtnManage" runat="server" ForeColor="White" Visible="False" PostBackUrl="~/Admin/Default.aspx">系统管理</asp:LinkButton>
<asp:LinkButton ID="lnkbtnOrder" runat="server" CausesValidation="False" ForeColor="White" Visible="False" PostBackUrl="~/OrderList.aspx">购物记录</asp:LinkButton>
<asp:LinkButton ID="lnkbtnLogout" runat="server" CausesValidation="False" ForeColor="White" Visible="False" OnClick="LnkbtnLogout_Click" >退出登录</asp:LinkButton>
</div>
</header>
<nav class="sitemap">
您的位置：
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</nav>
<section class="mainbody">
<div class="leftside">
<asp:ContentPlaceHolder ID="cphLeft" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="rightside">
<asp:ContentPlaceHolder ID="cphRight" runat="server">
</asp:ContentPlaceHolder>
</div>
<%-- 下面div元素左右两侧均不允许其他浮动元素，并显示分割线 --%>
<div class="clear"></div>
</section>
<footer class="footer">
Copyright 2018 MyPetShop
</footer>
</form>
</body>
</html>
其设计界面如下：
实验运行截图：
单击网站地图：
回到首页，单击任意商品，面包屑导航随之更改：
单击登录，面包屑导航随之更改：
五、实验总结
通过本次实验，我简要掌握了建立和使用用户控件的方法、简要掌握了母版页和内容页的建立方法、简要掌握了主题的建立和使用方法、简要理解了网站地图文件的结构并能合理建立网站地图、简要掌握了网站导航控件SiteMapPath、TreeView和Menu的用法、简要掌握了母版页中网站控件的用法。
2968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
