.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属性如下：
<HoverNod