【ASP.NET】第五课——搭建风格统一的Web站点、母版页和内容页的使用、站点地图、用户控件的使用

知识点：理解母版页的作用、掌握创建母版页和内容页的方法、掌握常用的导航控件用法、掌握用户控件的用法

 

        本课将讲解 ASP.NET 中的母版页、导航控件（TreeView 和 SiteMapPath）和用户控件。这些 知识点的共性是提升代码和用户界面的重用性，保证用户操作和界面具有统一的风格。母版页是 页面的模板，提供了网站的统一布局。利用 TreeView 和 SiteMapPath 控件简化了站点导航的开 发。用户控件将多个 Web 服务器控件、标签和相关代码组合成一个整体，形成新的控件，允许用 户自定义属性。在页面中注册后，可以使用它，大大提高了用户界面和代码的重用性。

 

1、母版页和内容页

1.1  为什么要使用母版页 

        在一个站点中，多个页面的风格应该保持一致，否则会给人造成不好的印象，同时给用户的操作也带来了一定的难度。各个页面存在一些相同的部分，比较常见的有页面头部、底部、导航 菜单等。此时，在每个页面中都编写重复的设计代码和逻辑代码是非常繁琐的。ASP.NET 提供了母版页技术来提取各个页面中相同的内容，各个页面只需要编写各自的内容，页面和母版页合成形成了最后的页面，如图所示。

母版页具有以下 4 个优点：

（1）有利于站点修改和维护，提高开发人员的开发效率：由于公共内容被集中于母版页中，因此，只要修改母版页，就可以快速修改完成整个站点的 页面，这在很大程度上提高了工作效率。

（2）母版页的页面元素丰富：在母版页中允许添加文字、控件等 Web 元素，同时，也可以为这些 Web 元素添加相应的事件 处理程序等。例如，只需要在母版页中添加一个服务器控件事件处理程序，那么站点内所有引用 该母版页的网页都将获得同样的应用效果。

（3）有利于实现页面布局：引用母版页的页面对应于母版页中预留的某处位置，这在很大程度上有利于页面的布局工 作。

（4）提供一种便于利用的对象模型：由母版页和引用该母版页的网页组成的对象模型，能够为应用程序提供一种高效、易用的实 现方式，并且这种对象模型的执行效率较以往的处理方式有了很大的提高。

 

1.2  什么是母版页

        母版页中包含的是页面公共部分，即网页模板。因此，在创建母版页之前，必须判断哪些内容是页面公共部份。

区别	普通页面	母版页
扩展名	aspx	master
可访问性	可直接在浏览器中访问	不可以直接在浏览器中访问
页面指令	Page	Master
ContentPlaceHolder 控件	不可使用	可使用

示例练习1：理解母版页和内容页

第一步，新建项目：在VS中新建asp.net web项目，这里命名为【WebApplication5】，右键单击项目名称【WebApplication5】， 依次点击【添加】→【新建项】，弹出【添加新项】的窗口，选中【Web窗体母版页】并输入名称，这里使用默认的命名Site1.Master，然后单击【添加】

第二步，理解母版页源代码：系统完成创建后，会自动打开Site1.Master文件，默认创建的母版页是一个空白页，不包括任何可显示的内容。

默认源文件分析：

（1）@ Master 指令：该指令应用于母版文件（.master 文件）。

（2）ContentPlaceHolder 控件：该控件专用于母版页中的内容占位， ContentPlaceHolder 控件指示模板中将被各个页面替换的部分。一个母版页可以写任意多个ContentPlaceHolder 控件，系统一般默认给两个。

第三步，设计母版页：我们写一个头部和尾部

注意：母版页不可在浏览器中直接访问，如果运行，会报错。

第四步，添加内容页：在解决方案资源管理器窗口中，右键单击网站项目【WebApplication5】， 依次点击【添加】→【新建项】，弹出【添加新项】的窗口，选中【包含母版页的Web窗体】，这里采用默认命名“WebForm1.aspx”，然后单击【确定】。

在弹出的【选择母版页】窗体中，单击选中要作为目标的页面文件【Site1.Master】，然后单击【确定】，系统自动完成创建。

第五步，理解内容页源代码：系统完成创建后，会自动打开WebForm1.aspx文件，默认创建的内容页是一个空白页，不包括任何可显示的内容。

 

页面代码中只包括 Page 指令和对应母版页中两个 ContentPlaceHolder 控件的 Content 控件。

• Page 指令通过 MasterPageFile 属性指定母版页，并通过 Title 属性指定页面在浏览器中显示的标题，即页面
  欢迎进入车型管理系统

  导航

  页脚

   

   

  1.4  创建内容页

          母版页可以说是页面的框架，还需要有内容页支撑页面内容。创建内容页有两种方式：重新添加创建内容页、将已有页面改为内容页。

  示例练习3：重新添加内容页

  第一步，新建内容页：在解决方案资源管理器窗口中，右键单击网站项目【CarSYSWeb】， 依次点击【添加】→【包含母版页的Web窗体】，弹出的【指定项名称】窗口，，这里采用默认命名“WebForm1”，然后单击【确定】。

  

  

  在弹出的【选择母版页】窗体中，单击选中要作为目标的页面文件【CarMaster.Master】，然后单击【确定】，系统自动完成创建。

  

  第二步，设计内容页：根据要求制作内容页。修改 Page 指令的 Title 属性，在第一个 Content 控件中添加CSS样式，在第二个 Content 控件中添加内容“车型列表”。

  

  <%@ Page Title="车型列表-新添加的内容页" Language="C#" MasterPageFile="~/CarMaster.Master" AutoEventWireup="true" 
      CodeBehind="WebForm1.aspx.cs" Inherits="CarSYSWeb.WebForm1" %>
  
      
  
  
      
  车型列表
  

  第三步，运行测试：在解决方案资源管理器中，右键单击内容页名称WebForm1.aspx，然后点击【在浏览器中查看】

  

  注意：如果设置了内容页的 Title 属性，但是不能正常显示页面标题。这时需要检查母版页是否在修改的过程中将原有的 head 标签的 runat=”server”属性给去掉了。只有当 head 标 签包含该属性时，内容页标题才能按照 Title 设置的内容显示。

   

  示例练习4：将现有页面修改为内容页

  如果是要将现有页面改成内容页，需要做如下处理：

  • 在@Page 指令中设置 MasterPageFile 属性和 Title 属性
  • 去除多余的 html 标签
  • 去除 form 标签
  • 创建标签，指定对应的 ContentPlaceHolderID，并将内容放进去

  修改源代码：

  

  完整代码：

  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddCar.aspx.cs" Inherits="CarSYSWeb.AddCar"
      MasterPageFile="~/CarMaster.master" Title="增加车型-修改已有页面为内容页"%>
  
  
      
  
  
  
      
  
          
  
              
  车型名称：
              
  
                   
          
            
  
              
  品牌：
              
  
                  
          
             
  
              
  实物图文件名：
              
  
                  
              
          
             
  
              
  官方价：
              
  
                    
          
          
  
              
  
                  
                  
              
          
      
  

  运行测试：

  

   

   

  2、 导航控件

           母版页用于控制站点上页面的整体布局，可以控制多个页面的显示格式，导航常常也在多个 页面中的相同位置出现，所以导航控件常常和母版页结合使用。我们使用母版页和导航控件来搭 建“车型管理系统”的页面布局。

  2.1  站点地图

           在构建大型网站时，管理网站的栏目及所有内容的链接是一项十分复杂的工作，需要对可能 出现的情况进行规划。特别是当部分网页的位置发生更改时，需要更改页面内的所有链接。 ASP.NET 提供了专门的站点导航功能，将网站中所有页面链接以 XML 文件的方式集中存储在某个位置，以便于集中管理。其中，集中存储所有页面链接的文件称为站点地图文件，命名为 “Web.sitemap”。
   

  示例练习5：添加站点地图

  第一步，新建站点地图：在解决方案资源管理器窗口中，右键单击网站项目【CarSYSWeb】， 依次点击【添加】→【新建项】，弹出【添加新项】的窗口，选中【站点地图】，这里采用默认命名“Web.sitemap”，然后单击【确定】。

  

  第二步，理解站点地图页源代码：系统完成创建后，会自动打开Web.sitemap文件，默认创建的内容页是一个空白页，不包括任何可显示的内容。

  

           站点地图文件是一个拥有固定格式要求的 XML 文件，可以使用普通文本编辑器编写。默认的 站点地图文件中，包含位于元素下方的元素。此外，元 素的 url 属性可以为空，但有效的站点地图文件不可以包含重复的 url 值。

  第三步，编辑站点地图页：根据要求进行编辑：车型后台管理员系统大致分为 4 个模块，分别是“用户管理”、“品牌管理”、“车型管理”和 “销售记录管理”。每个模块中又包括查询、删除、修改和增加操作。

  

   

  2.2   TreeView控件 

             TreeView 控件通过树状方式显示站点地图中的节点，实现站点导航功能。使用 TreeView 控 件时，先在站点中添加“Web.sitemap”文件，然后从工具箱的数据栏中拖入“SiteMapDataSource” 控件，最后从工具箱的导航栏中拖入“TreeView”控件，并设置它的数据源即“DataSourceID” 属性为拖入的“SiteMapDataSource”控件的 ID。

  示例练习6：使用TreeView控件显示地图导航

  第一步，修改源文件：在解决方案资源管理器中，双击CarMaster.Master，打开母版页文件，在原有的代码上修改源文件，将

   导航
  ，文字“导航”删除

  

  第二步，添加SiteMapDataSource控件：将CarMaster.Master文件切换到【设计】模式，从工具箱里找到SiteMapPath控件将它拖放到指定位置，该控件的默认ID属性为：SiteMapDataSource1，这里不做修改。源代码为：

  

  第三步，添加TreeView控件：【源】视图模式下，从工具箱里找到TreeView控件将它拖放到指定位置。

  ①设置TreeView控件的ID属性为：tvMenu ，ImageSet属性设置为：WindowsHelp。

  

  ②切换到【设计】模式，点击TreeView控件右上角的按钮，在弹出的TreeView任务窗口中，点击【选择数据源：】对应的下拉符号，点击选项【新建数据源】

  

  ③在弹出的【数据源配制向导】窗体中，点击选中【站点地图】，会有一个默认ID，然后点击【确定】即可。

  

  小技巧：ImageSet属性属性可以设置TreeView控件的格式，如果想预览格式效果，可以点击TreeView控件右上角的按钮，在弹出的TreeView任务窗口中，点击【自动套用格式】，在打开的窗口中，可以点击格式名称，查看效果。

  

  第二步和第三步的完整代码：

  第四步，添加内容页Default.aspx：在解决方案资源管理器中，右键单击项目名称【CarSYSWeb】，在弹出的右键菜单选项中依次单击【添加】→【新建项】，在弹出的添加新项窗体中，选中【包含母版页的Web窗体】，命名为Default.aspx，然后点击【添加】。在弹出的选择母版页窗体中，选中本项目中的母版页文件CarMaster.Master，然后单击【确定】即可完成。

  

  第五步，设计Default.aspx页面：系统完成创建后，会自动打开Default.aspx页面，根据要求编写代码。

  

  <%@ Page Title="车型管理系统" Language="C#" MasterPageFile="~/CarMaster.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CarSYSWeb.Default" %>
  
  
  
      
  欢迎管理员进入车型管理系统
  

  第六步，运行测试：在解决方案资源管理器中，右键单击Default.aspx，点击【在浏览器中查看】，预览页面效果，可以看到站点地图导航，我们点击导航的“增加车型”，跳转到对应的页面。

  

   

  2.3  SiteMapPath控件 

            SiteMapPath 控件也是常用的导航控件，一般又称为面包导航，它将在页面上显示一个导航 路径，为用户显示当前页的位置以及返回主页的路径链接。

            使用 SiteMapPath 控件时，只要在站点中添加站点地图文件，然后在页面中拖入 SiteMapPath 控件即可，不需要使用 SiteMapDataSource 控件。SiteMapPath 控件要求页面必须为站点地图中 列出的页，即使用 SiteMapPath 控件的页面必须位于站点地图某个节点的 url 属性中，否则不会 有任何显示。

  示例练习7：给母版页添加面包屑导航

  第一步，修改源文件：在解决方案资源管理器中，双击CarMaster.Master，打开母版页文件，在原有的代码上修改源文件，在指定位置增加一行代码用作提示文字：

  当前位置：

  

  第二步，添加SiteMapPath控件：从工具箱里找到SiteMapPath控件将它拖放到指定位置。

  

  第三步，预览测试：在解决方案资源管理器中，右键单击AddCar.aspx，点击【在浏览器中查看】，预览页面效果，可以看到面包屑导航，我们点击面包屑导航的“车型管理系统”，跳转到对应的页面。

  

   

   

  3、 用户控件

  3.1  为什么使用用户控件

             在 Web 应用程序开发中，除了页面布局会出现大量的相同编码之外，在各个不同的页面中也 常常出现类似的编码，而这些编码甚至会出现在页面的不同位置。例如，由一个文本框和一个按 钮组成的搜索框要在多个页面中出现，使用母版页可以解决在页面中同一位置出现相同内容的问 题。如果该搜索框要在页面中的不同位置出现呢？ASP.NET 中允许编写用户控件（User control）， 将多个 ASP.NET 控件和相关代码组合成为一个整体，形成一个新的控件，这样就可以重复利用。

             与 ASP.NET 页面相似，用户控件中不仅可以定义显示界面，还可以编写事件处理代码。当多 个网页中包括有部分相同的用户界面时，可以将这些内容相同的部分提取出来，做成用户控件。

   

  3.2  用户控件概述

  用户控件的作用：页面代码的重用

  用户控件的特点：

  • 是一种自定义的组合控件
  • 封装独立的功能（显示列表等）
  • 像页面一样方便的编辑，像控件一样使用拖拽方式使用
  • 后缀名为.ascx

  用户控件与母版页的区别：

  • 母版页提供整个页面级的风格控制和代码重用
  • 用户控件提供小范围的风格控制和更灵活的代码重用

  用户控件与 aspx 页面的区别，如下所述：

  • 用户控件的扩展名为.ascx，页面的扩展名是.aspx
  • 用户控件不能直接在浏览器中访问，必须添加到 aspx 页面中
  • 用户控件的指令是 Control，aspx 的指令是 Page
  • 用户控件中不包含、、
    标签

   

  3.3   创建用户控件            

  示例练习8：理解用户控件的创建和使用

  案例说明：本示例在示例1的基础上完成，主要用来简单演示使用方法。

  第一步，新建用户控件：右键单击项目名称【WebApplication5】， 依次点击【添加】→【新建项】，弹出【添加新项】的窗口，选中【Web窗体用户控件】并输入名称，这里使用默认的命名WebUserControl1.ascx，然后单击【添加】

  

  第二步，编写用户控件的内容：系统创建完成用户控件后，会默认打开该文件，我们看到WebUserControl1.ascx文件里默认只有一行代码，这个控件的内容是什么，需要我们自己编写。（注意，用户控件不能直接在浏览器中运行，需要将它注册到页面上，然后运行页面，才能看到用户控件的效果。）

  <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication5.WebUserControl1" %>
  

  

  第三步，使用控件：在解决方案资源管理器中，双击文件WebForm1.aspx，打开页面源代码，使用第二步编写好的控件。

  使用方法：

  ①添加用户控件的注册指令：<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="ucl" TagName="say" %>

  • @Register指令：@Register指令用来创建标记前缀和自定义控件之间的关联，这为开发人员提供了一种在ASP.NET应用程序文件（包括网页、用户控件和母板页）中引用自定义控件的简单方法。（把用户控件导入ASP.NET页面）
  • Src 属性：指定了用户控件的源文件
  • TagPrefix 属性：定义用户控件所使用的前缀，就是说它将前缀与用户控件相关联。此前缀将包括在用户控件元素的开始标记中。
  • TagName 属性：定义用户控件的名称，此名称将包括在用户控件元素的开始标记中。

  ②在页面正文中插入用户控件：

  

  第四步，使用用户控件：参照第三步的方法，在WebForm2.aspx页面使用第二步创建的用户控件

  

  第五步，运行测试：分别预览WebForm1.aspx页面和WebForm2.aspx页面。

  

   

   

  示例练习9：使用用户控件完善车型管理系统

  案例说明：本示例在示例7 的基础上完成，主要用来完善车型管理系统。

  第一步，创建存储过程：在数据库“CarSYS”中创建存储过程“usp_SelectCarById”，封装根据编号，查询车型信息的功能。

  

  CREATE proc [dbo].[usp_SelectCarById]
  @carId int--输入参数,车型编号
  as
  begin
  select CarId,CarName,Brand.BrandId Bid,BrandName,OfficialPrice,Picture,Click
  from Brand,Scar
  where Brand.BrandId=Scar.BrandId and Scar.CarId=@carId
  end

  第二步，声明GetCarById方法：在数据访问层“DAL”的“CarService.cs”类中，增加“GetCarById”方法，封装根据编号获取车型信息的功能

  

          public Car GetCarById(int id)
          {
              string constr = "data source=LAPTOP-IN3E6IJP\\SQLEXPRESS; initial catalog=CarSYS; integrated security=true";
              SqlConnection con = new SqlConnection(constr);
              Car c = null;
              try
              {
                  con.Open();
                  SqlCommand cmd = new SqlCommand();
                  cmd.Connection = con;
                  cmd.CommandType = CommandType.StoredProcedure;//命令类型是存储过程
                  cmd.CommandText = "usp_SelectCarById";//usp_SelectCarById是数据库中已经编译成功的存储过程
                  SqlParameter[] para = new SqlParameter[]{//SqlParameter对象数组，保存存储过程中的参数
                       new SqlParameter("@carId",id)
                   };
                  foreach (SqlParameter eachPa in para)
                  {
                      cmd.Parameters.Add(eachPa);
                  }
                  SqlDataAdapter sda = new SqlDataAdapter(cmd);
                  DataSet ds = new DataSet();//需要引用命名空间System.Data;
                  sda.Fill(ds);
                  c = new Car(); //示例化Car对象
                  DataRow dr = ds.Tables[0].Rows[0];
                  c.CarName = dr["CarName"].ToString();
                  c.CarBrand = new Brand();
                  c.CarBrand.BrandId = Convert.ToInt32(dr["Bid"]);
                  c.CarBrand.BrandName = dr["BrandName"].ToString();
                  c.Click = Convert.ToInt32(dr["Click"]);
                  c.Picture = dr["Picture"].ToString();
                  c.OfficialPrice = Convert.ToDecimal(dr["OfficialPrice"]);
                  c.CarId = id;
              }
              catch (Exception ex)
              {
                  throw ex;
              }
              finally
              {
                  con.Close();
              }
              return c;
          }

  第三步，声明GetCarById方法：在业务逻辑层“BLL”的“CarManager.cs”类中，增加“GetCarById”方法，封装根据编号获取车型信息的功能

  

          public Car GetCarById(int id)//声明一个方法
          {
              Car c;
              try
              {
                  c = cs.GetCarById(id);
              }
              catch (Exception ex)
              {
                  throw ex;
              }
              return c;
          }

  第四步，新建文件夹：一个网站中，可能会有许多用户控件，为了方便统一管理，首先在网站中创建“UserControls” 文件夹。方法：右键单击项目名称【CarSYSWeb】， 依次点击【添加】→【新建文件夹】，然后将文件夹名称改为UserControls即可。

  

  第五步，新建用户控件：右击“UserControls”文件夹，在菜单中选择“添加” “添加新项”，在“添加新项”

  

  第六步，编写用户控件：用户控件Car.ascx用来显示编号是 7 的车型的名称、品牌、实物图、官方价格和点击量。

  

  <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Car.ascx.cs" Inherits="UserControls_Car" %>
  
  
  
      
  
          
  车型名称：
          
  
      
  
          
  品牌名称：
         
  
          
  
          
  实物图：
         
  
             
        
  
          
  官方价格：
         
  
        
  
          
  点击量：
         
  
  

  第七步，给用户控件添加Load事件：右键点击【查看代码】，进入Car.ascx的后置代码文件Car.ascx.cs

  

  using BLL;
  using Models;
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  
  
      public partial class UserControls_Car : System.Web.UI.UserControl
      {
          CarManager cm = new CarManager();
          protected void Page_Load(object sender, EventArgs e)
          {
              if (!IsPostBack)
              {
              try
              {
                  Car c = cm.GetCarById(7);//传递编号
                  lblBrandName.Text = c.CarBrand.BrandName;
                  lblCarName.Text = c.CarName;
                  lblPrice.Text = c.OfficialPrice.ToString();
                  imgCar.ImageUrl = "~/images/" + c.Picture;
                  lblClick.Text = c.Click.ToString();
              }
              catch(Exception ex)
              {
                  lblCarName.Text = ex.Message;
              }
              }
           }
      }

  第八步，添加内容页CarList：在解决方案资源管理器中，右键单击项目名称【CarSYSWeb】，依次点击【添加】→【包含母版页的Web窗体】，在弹出的窗口中输入窗体名称CarList，然后单击确定，系统完成创建。然后编辑页面内容。

  ①将用户控件注册到页面：<%@ Register Src="~/UserControls/Car.ascx" TagPrefix="uc1" TagName="Car" %>

  ②在页面中引用用户控件：将html代码写在指定的Content控件里，然后使用标签将用户控件引入到指定位置

  ③写CSS样式：根据页面设计需要，在指定的Content控件里，写入CSS样式

  

  第九步，运行测试：在解决方案资源管理器中，右键单击页面名称【CarList.aspx】，然后点击【在浏览器中查看】

  

   

   

  3.4   为用户控件添加属性

  示例练习10：给用户控件添加属性

  案例说明：本示例在示例1的基础上完成，主要用来简单演示使用方法。

  第一步，新建用户控件：右键单击项目名称【WebApplication5】， 依次点击【添加】→【Web窗体用户控件】，在弹出的【指定项名称】窗口中输入名称，这里命名为Login，然后单击【确定】，系统自动完成创建。

  

  第二步，编写用户控件的内容：系统创建完成用户控件后，会默认打开该文件，我们在这里设计一个登陆的用户控件

  

  第三步，引用用户控件：在解决方案资源管理器中，双击文件WebForm2.aspx，打开页面源代码，使用第二步编写好的控件。调用方法：在解决方案资源管理器中找到控件Login.ascx，单击选中以后，将控件拖放到WebForm2.aspx的指定位置即可。拖放控件以后，会自动生成两行代码，完成对用户控件的引用。

  

  注意：我们在这里引用控件，控件是作为一个整体被引用的，控件内部的内容，我们是无法获得的。将WebForm2.aspx文件切换到【设计】模式，右键单击用户控件Login，点击【属性】，我们可以在属性面板看到该控件的属性。

  

  第四步，给用户控件添加属性：这个添加的属性必须是Public的，才能在控件外访问到。添加方法：切换到Login.ascx文件，单击鼠标右键，点击【查看代码】，即可打开Login.ascx.cs文件。根据需要声明属性即可。

  

  此时，我们再切换到WebForm2.aspx文件的【设计】模式，查看用户控件的属性，会发现增加了一个UserName属性。

  

  第五步，给用户控件的属性赋值：给用户控件的UserName属性，设置为：admin

  

         

   

  本课总结

  • 使用母版页，可以为 ASP.NET 应用程序页面创建一个通用的外观。
  • 与普通页面不同，母版页的扩展名为“.master”，不可以在浏览器中直接访问。
  • 母版页可以说是页面的框架，还需要有内容页支撑页面内容。创建内容页时，需要勾选“选 择母版页”的复选框。
  • ASP.NET 站点导航功能将链接到网站上所有的页面以 XML 文件的方式集中存储在站点地图文 件中，通过SiteMapDataSource 控件向页面提供导航数据来源。
  • TreeView 控件以树状方式提供导航，SiteMapPath 提供面包屑导航。
  • 用户控件中不仅可以定义显示界面，还可以编写事件处理代码。当多个网页中包括有部分相 同的用户界面时，可以将这些内容相同的部分提取出来，做成用户控件。

   

   

   

   

  =============这里是结束分割线=================