.NET程序设计实验名称实验六 ASP.NET服务器控件

计算机学院实验报告课程名称 .NET程序设计实验名称实验六 ASP.NET服务器控件

1．熟悉用户控件的使用。
2．熟悉导航控件的使用。
3．掌握母版页的使用。
二．实验内容：
本实验将通过创建一个模拟的“淘宝商城”网站，使同学们熟悉、练习和掌握用户控件、导航控件及母版页的创建和使用。该网站各页的效果图6-1、6-2、6-3、6-4所示。在设计页面之前，首先根据效果图分析得到框架结构代码，并利用PhotoShop工具，剪切下需要的图片，并保存。

图6-1 首页效果图

图6-2 潮流服饰页面效果图

图6-3 品牌女装页面效果图

图6-4 时尚男装页面效果图
1.用户控件的创建与使用
在开发实际的Web项目时，通常在多个页面上提供相同功能，ASP.NET提供了用户控件的技术来处理此类问题。通过用户控件的使用可以创建一次而在多个页面使用并更新。下面给出在“淘宝商城”网站中创建和使用用户控件的过程。
下面通过一个实例来说明如何创建一个用户控件以及该用户控件的使用方法。
（1）启动Visual Studio 2008，新建一个名为TaoBaoSite的ASP.NET网站。并新建一个名为img的文件夹，在img文件夹下新建一个名为coat的文件夹，通过添加现有项的方法将图片添加到到网站中。（注：所有图片已放在本实验的附件中）
（2）在【解决资源管理器】窗格中右击选择【添加新项】命令或者选择【项目】|【添加新项】命令，打开【添加新项】对话框。
（3）在对话框的【模板】选区中单击【Web用户控件】选项，在【名称】文本框中Web用户控件的默认名为WebUserControl.ascx，这里修改文件名为WebUserControlTop.ascx。
（4）单击【添加】按钮，Visual Studio.NET将在项目所在的根目录中创建WebUserControlTop.ascx文件。创建完成后会自动打开用户控件的HTML【源】视图，并显示代码如下：

<%@ Control Language=“C#” AutoEventWireup=“true”
CodeFile=“WebUserControlTop.ascx.cs” Inherits=“WebUserControl” %>

（5）切换到用户控件的【设计】视图，设计如图6-5所示的界面。

图6-5 用户控件设计效果
具体代码如下：

<style type="text/css">*{ margin:0px; padding:0px; }#head    {      height:100px;      background-color:#990d1a;     }#head #logo    {      margin-left:450px;           }   .style1    {        width: 328px;    }.style2    {        width: 79px;    }
</style>
<div id="head"><div id="logo"><img src="img/taobaologo.jpg" alt="logo" /></div><div id="headsearch">             <table style="width:502px; margin-left:250px; height:30px" border="0"><tr><td class="style1"><asp:TextBox ID="TextBox1" runat="server" Width="326px" Height="25px"></asp:TextBox></td><td class="style2"><asp:ImageButton ID="ImageButton1" ImageUrl="~/img/search1.jpg"  runat="server" /></td><td class="style2"><asp:ImageButton ID="ImageButton2" ImageUrl="~/img/search2.jpg" runat="server" /></td></tr></table>                       </div></div>

（6）添加一个新的Web窗体UserControlTest1.aspx，并切换到设计视图，将已经创建的用户控件WebUserControlTop.asc拖放到窗体中，效果如图6-6所示。

图6-6 页面UserControlTest1.aspx设计效果
(7) UserControlTest1.aspx窗体布局完毕后，调试执行ASP.NET Web应用程序，执行结果如6-7所示。

图6-7 页面UserControlTest1.aspx显示效果
2.TreeView控件的创建与使用
TreeView控件可以创建一个树状结构图，以便让用户能够在节点的各层次中进行导航。下面将通过制作站点导航菜单来熟悉和掌握TreeView控件的功能及用法。具体步骤如下：
（1）打开前面步骤创建的TaoBaoSite网站。新建一个用户控件WebUserControlNav.ascx，并写出淘宝网左侧导航菜单控件的结构代码，如下所示：

<div id="nav"><div id="navhead">所有商品分类</div><div id="navcontent">
</div>
</div>

（2）从【工具箱】窗格的【导航】选项卡添加到TreeView控件到用户控件WebUserControlNav.ascx中的名为“navcontent”的div中，此时会弹出TreeView的设置面板，并显示默认树状外观。
（3）右击控件，在弹出的快捷菜单中选择【编辑节点】命令，打开【TreeView节点编辑器】对话框。在这个对话框可以完成管理树状节点的任务，第一次打开的【节点】列表框为空，而且仅有【添加根节点】按钮可用。单击【添加根节点】按钮，添加一个根节点，随即右侧的【属性】列表变为可用，从中设置Text和Value属性均为“潮流服饰”，并设置ImageUrl属性为"~/img/Shirt.jpg", NavigateUrl属性为"~/Dress.aspx"，使用同样的方法，依次添加“精品鞋包”、“ 美容护肤”、“ 珠宝饰品”3个根节点。
(3)选择根节点“潮流服饰”，单击【添加子节点】按钮，然后使用添加根节点的方法添加“品牌女装”、“ 时尚男装”、“ 精致内衣”、“ 时尚配件”4个子节点。使用同样的方法添加其他3个根节点的子节点，完成后，如图6-8所示：

                    图6-8 TreeView节点编辑器对话框

（4）单击【确定】按钮返回【设计】视图即可看到未运行时的初始化效果。在属性窗口设置其ExpandDepth为1，切换到【源】视图，会发现有以下代码，这些都是通过前面操作自动生成的。

<asp:TreeView ID="TreeView1" runat="server"  ExpandDepth="1" Width="116px" ><Nodes><asp:TreeNode Text="潮流服饰" Value="潮流服饰"  ImageUrl="~/img/Shirt.jpg"  NavigateUrl="~/Dress.aspx" ><asp:TreeNode Text="品牌女装" Value="品牌女装"  NavigateUrl="~/FemaleDress.aspx" ></asp:TreeNode><asp:TreeNode Text="时尚男装" Value="时尚男装" NavigateUrl="~/MaleDress.aspx" ></asp:TreeNode><asp:TreeNode Text="精致内衣" Value="精致内衣" NavigateUrl="#" ></asp:TreeNode><asp:TreeNode Text="时尚配件" Value="时尚配件" NavigateUrl="#"></asp:TreeNode></asp:TreeNode><asp:TreeNode Text="精品鞋包" Value="精品鞋包" ImageUrl="~/img/bag.jpg"><asp:TreeNode Text="潮流女鞋" Value="潮流女鞋" NavigateUrl="#" ></asp:TreeNode><asp:TreeNode Text="品质男鞋" Value="品质男鞋" NavigateUrl="#"></asp:TreeNode><asp:TreeNode Text="潮流女包" Value="潮流女包" NavigateUrl="#"></asp:TreeNode><asp:TreeNode Text="精致男包" Value="精致男包" NavigateUrl="#"></asp:TreeNode></asp:TreeNode><asp:TreeNode Text="美容护肤" Value="美容护肤" ImageUrl="~/img/3.jpg">                <asp:TreeNode Text="换季护肤" Value="换季护肤" NavigateUrl="#"></asp:TreeNode><asp:TreeNode Text="魅力香水" Value="魅力香水" NavigateUrl="#"></asp:TreeNode><asp:TreeNode Text="身体护理" Value="身体护理" NavigateUrl="#"></asp:TreeNode><asp:TreeNode Text="男士护肤" Value="男士护肤" NavigateUrl="#"></asp:TreeNode>                                           </asp:TreeNode><asp:TreeNode Text="珠宝饰品" Value="珠宝饰品" ImageUrl="~/img/4.jpg" >                          <asp:TreeNode Text="黄金首饰" Value="黄金首饰" NavigateUrl="#"></asp:TreeNode><asp:TreeNode Text="钻石首饰" Value="钻石首饰" NavigateUrl="#"></asp:TreeNode><asp:TreeNode Text="流行饰品" Value="流行饰品" NavigateUrl="#"></asp:TreeNode><asp:TreeNode Text="珍珠首饰" Value="珍珠首饰" NavigateUrl="#"></asp:TreeNode>                       </asp:TreeNode></Nodes>                  </asp:TreeView>

（5）为了美观，为TreeView1做以下设置：
设置NodeStyle属性如下：

<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="2px" NodeSpacing="0px" VerticalPadding="2px" />
设置HoverNodeStyle属性如下：
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />设置SelectedNodeStyle属性如下：
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False"                        HorizontalPadding="0px" VerticalPadding="0px" />

（6）打开前面步骤创建的Web窗体UserControlTest1.aspx,并切换到设计视图，将已经创建的用户控件WebUserControlTop.ascx拖放到窗体中，效果如图6-9所示。

图 6-9 UserControlTest1.aspx设计效果图
（7）保存UserControlTest1.aspx的修改，执行ASP.NET应用程序浏览该页，执行结果如6-10所示。

图 6-10 UserControlTest1.aspx页面显示效果图
3.SiteMapPath控件的创建和使用
下面将通过制作站点地图导航实例来熟悉和掌握SiteMapPath导航控件的功能及用法。具体步骤如下。
（1）在TaoBaoSite网站中，打开UserControlTest1.aspx页面，切换到【源】视图中，可见其HTML代码如下：

<body><form id="form1" runat="server"><div>    <uc1:WebUserControlTop ID="WebUserControlTop1" runat="server" /><uc2:WebUserControlNav ID="WebUserControlNav1" runat="server" /></div>    </form>
</body>

（2）在以上代码中添加名为“contentpage”的div,并在该div中添加一个名为“contentpagepath”的div，然后将SiteMapPath导航控件添加到“contentpagepath”中，并设置必要的属性，其HTML代码如下：

 <body><form id="form1" runat="server"><div>    <uc1:WebUserControlTop ID="WebUserControlTop1" runat="server" /><uc2:WebUserControlNav ID="WebUserControlNav1" runat="server" /><div id="contentpage">  <div id="contentpagepath"><asp:SiteMapPath ID="SiteMapPath1" Font-Size="12px" NodeStyle-ForeColor="#2953a6" PathSeparatorStyle-ForeColor="#aaaaaa" runat="server"></asp:SiteMapPath></div>             </div>     </div>    </form>
</body>

（3）添加一个名为Web.sitemap的文档作为SiteMapPath的数据源，双击Web.sitemap文件，在打开的XML文件中加入所有导航信息的代码，具体代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ><siteMapNode url="UserControlTest1.aspx" title="首页"  description="home"><siteMapNode url="Dress.aspx" title="潮流服饰"  description=""><siteMapNode url="FemaleDress.aspx" title="品牌女装"  description="" /><siteMapNode url="MaleDress.aspx" title="时尚男装"  description="" /></siteMapNode></siteMapNode>
</siteMap>

注：Dress.aspx、FemaleDress.aspx和MaleDress.aspx将在后面创建。
4.母版页的创建与使用
“淘宝商城”网站中的页面的LOGO头部、导航菜单以及站点导航路径都是相同的。下面将建立一个母版页，并使用该母版页创建其他的内容页。具体步骤如下：
（1）在“TaoBaoSite”ASP.NET网站中，添加一个母版页，默认名为Site.Master，这里修改文件名为“TaoBaoSiteMasterPage.master”，单击【添加】按钮，VS.NET将在项目所在的根目录中创建该文件，创建完成后会自动打开母版页的HTML【源】视图。
（2）根据以上步骤中制作的UserControlTest1.aspx页面的内容，修改并制作母版页，完成后的完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>淘宝商城</title>    <style type="text/css">        #container{ width:1000px;      margin:0px auto;background-color:#eaeaea;}#content{  height:850px;           }        #content #contentpage   {  margin-left:10px;margin-top:10px;background-color:White;height:800px;width:800px;          }#content #contentpage  #maincontent{height:750px;margin-left:10px;float:left;  }</style><asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body><form id="form1" runat="server">   <div id="container">    <uc1:WebUserControlTop ID="WebUserControlTop1" runat="server" /><div id="content"> <uc2:WebUserControlNav ID="WebUserControlNav1" runat="server" /><div id="contentpage">  <div id="contentpagepath">&nbsp;&nbsp;<asp:SiteMapPath ID="SiteMapPath1" Font-Size="12px" NodeStyle-ForeColor="#2953a6" PathSeparatorStyle-ForeColor="#aaaaaa" runat="server"></asp:SiteMapPath></div><div id="maincontent"><asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">        </asp:ContentPlaceHolder></div></div>    </div>    </div></form>
</body>
</html>

（5）新建一个名为“Dress.aspx”的Web内容窗体，并选中【选择母版页】复选框，系统会弹出一个选择母版对话框，这时选择母版页为TaoBaoSiteMasterPage.master，创建完毕后，初始化具体代码如下：

<%@ Page Language="C#" MasterPageFile="~/TaoBaoSiteMasterPage.master" AutoEventWireup="true" CodeFile="Dress.aspx.cs" Inherits="Dress" Title="无标题页" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

（6）在以上母版页的Content2内容占位符中，添加以下代码：

（7）Dress.aspx页面的设计窗体如图6-11所示。运行后效果如图6-12所示。

图 6-11 Dress.aspx设计效果图

图 6-12 Dress.aspx显示效果图
（8）创建一个名为WebUserControlImageItem.ascx的用户控件，用于显示商城中的商品，其设计视图如6-13所示。

图 6-13 用户控件WebUserControlImageItem.ascx设计图
该控件的HTML代码如下：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControlImageItem.ascx.cs" Inherits="WebUserControl2" %>
<style type="text/css">*{margin:0px;padding:0px;}    #ImageItem{margin-top:10px; width:190px;height:270px; font-size:12px;    line-height:20px; float:left;}#image{height:190px;        }#description{height:113px;margin-left:10px;}
</style>
<div id="ImageItem"><div id="image">  <asp:Image ID="Image1" runat="server" ImageUrl="~/img/coat/coat1.jpg" /></div><div id="description">    <asp:Label ID="LabelPrice" runat="server" Text="￥98.00" Font-Bold="True" Font-Size="18px" ForeColor="Red" Font-Italic="False"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="LabelFee" runat="server" Text="运费：￥8.00" ForeColor="Silver"></asp:Label>
&nbsp;<br /><asp:Label ID="LabelDescription1" runat="server" ForeColor="#666666" Text=" 丽影柔情 OSA欧莎2010秋"></asp:Label><br /><asp:Label ID="LabelDescription2" runat="server" Text="韩版新品 长袖 打底衫 T恤 " ForeColor="#666666"></asp:Label><br /><asp:Label ID="Label4" runat="server" Text="最近成交：" ForeColor="#999999"></asp:Label><asp:Label ID="LabelQuantity" runat="server" Font-Bold="True" ForeColor="#FF9900" Text="2810"></asp:Label>&nbsp;<asp:Label ID="LabelComment" runat="server" Text=" (2403人评论)" ForeColor="#3399FF"></asp:Label>    </div>
</div>

在"WebUserControlImageItem.ascx.cs文件中为该用户控件添加6个属性以便引用该用户控件的页面可以通过重设其属性值而达到重用的目的，其代码如下：

public string Price{set { LabelPrice.Text = value; }}public string Fee{set { LabelFee.Text = value; }}public string Quantity{set { LabelQuantity.Text = value; }}public string Comment{set { LabelComment.Text = value; }}public string Description1{set { LabelDescription1.Text = value; }}public string Description2{set { LabelDescription2.Text = value; }}public string ImageUrl{set { Image1.ImageUrl = value; }}

（9）新建一个名为“MaleDress.aspx”的Web内容窗体，并选中【选择母版页】复选框，系统会弹出一个选择母版对话框，这时选择母版页为TaoBaoSiteMasterPage.master。修改其代码，具体如下：

<%@ Page Language="C#" MasterPageFile="~/TaoBaoSiteMasterPage.master" AutoEventWireup="true" CodeFile="FemaleDress.aspx.cs" Inherits="FemaleDress" Title="无标题页" %>
<%@ Register src="WebUserControlImageItem.ascx" tagname="WebUserControl2" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><uc1:WebUserControl2 ID="WebUserControl21" runat="server" Description1="丽影柔情 OSA欧莎2010秋" Description2="新 韩版新品 长袖 打底衫 T恤" Fee="运费：￥8.00" ImageUrl="~/img/coat/coat1.jpg" Price="￥98.00"  Comment="(2810人评论)" Quantity="2403" /><uc1:WebUserControl2 ID="WebUserControl22" runat="server" Description1="青青子衿 O.SA欧莎2010秋" Description2="新哈伦休闲长裤 裤子 女裤 " Fee="运费：￥8.00" ImageUrl="~/img/coat/coat2.jpg" Price="￥138.00" Comment="(6691人评论)" Quantity="2338" /><uc1:WebUserControl2 ID="WebUserControl23" runat="server" Description1="高雅静放 O.SA欧莎正品2010秋" Description2="新 修身直筒长裤 裤子 " Fee="运费：￥8.00" ImageUrl="~/img/coat/coat3.jpg" Price="￥138.00" Comment="(2999人评论)" Quantity="1640" /><uc1:WebUserControl2 ID="WebUserControl24" runat="server" Description1="大气优雅 OSA欧莎2010秋冬" Description2=" 新款 韩版双排扣长款 风衣 " Fee="运费：￥8.00" ImageUrl="~/img/coat/coat4.jpg" Price="￥138.00" Comment="(7337人评论)" Quantity="2490" /><uc1:WebUserControl2 ID="WebUserControl25" runat="server" Description1="万件销量 【橡菲】传世经典系列" Description2=" 秋冬正品 韩版显瘦软皮" Fee="运费：￥5.00" ImageUrl="~/img/coat/coat5.jpg" Price="￥138.00" Comment="(6691人评论)" Quantity="2338" /><uc1:WebUserControl2 ID="WebUserControl26" runat="server" Description1="销量过千【橡菲】至酷机车系列" Description2=" 秋冬黑色暗纹修身软皮衣" Fee="运费：￥5.00" ImageUrl="~/img/coat/coat6.jpg" Price="￥138.00" Comment="(1763人评论)" Quantity="4212" /><uc1:WebUserControl2 ID="WebUserControl27" runat="server" Description1=" 青春偶像【橡菲】菁菁校园系列" Description2=" 黑色复式包扣修身软皮衣 " Fee="运费：￥5.00" ImageUrl="~/img/coat/coat7.jpg" Price="￥138.00" Comment="(1412人评论)" Quantity="1403" /><uc1:WebUserControl2 ID="WebUserControl28" runat="server" Description1=" 焦点热卖【橡菲】朋克叛逆系列" Description2=" 黑色韩版修身哑光软皮衣" Fee="运费：￥5.00" ImageUrl="~/img/coat/coat8.jpg" Price="￥168.00" Comment="(2995人评论)" Quantity="1171" />
</asp:Content>

页面的显示效果如6-14所示。

图 6-14 FeMaleDress显示效果图

（10）按照与以上步骤同样的方法，再设计内容页MaleDress.aspx，页面的显示效果如6-15所示。

图 6-15 MaleDress显示效果图
（11）修改Web.sitemap文件为如下代码：

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ><siteMapNode url="FirstPage.aspx" title="首页"  description="home"><siteMapNode url="Dress.aspx" title="潮流服饰"  description=""><siteMapNode url="FemaleDress.aspx" title="品牌女装"  description="" /><siteMapNode url="MaleDress.aspx" title="时尚男装"  description="" /></siteMapNode></siteMapNode>
</siteMap>

（12）按照与以上步骤同样的方法，再创建首页FirstPage.aspx，显示效果如图6-16所示。

图 6-16 FirstPage.aspx显示效果图
三、实验代码

四、实验结果

五、实验总结

通过本实验：熟悉用户控件的使用，熟悉导航控件的使用，掌握母版页的使用。对图片一些大小处理不太得当，导致排版有些混乱，但整体的代码和逻辑是没有问题的。

代码资源下载链接：https://download.csdn.net/download/XIARIANNUAN/13137646