第3章 高级控件

3.1 母版页与内容页 

3.1.1 母版页简介 

母版页是以“.master”为后缀名的文件，它可以实现页面统一布局，并将页面上的公用元素（如网站 Logo、广告条和导航条等）整合到一起。内容页（Default.aspx）对应的是母版页（Site.master），母版页和内容页的关系如图。 

3.1.2 母版页的特点 

使用母版页可以为 ASP.NET 页面创建通用的外观，母版页主要有以下 4 个优点

• 有利于站点修改和维护，降低开发人员的工作强度，提高了工作效率 
• 具备高效的内容整合能力 
• 有利于实现页面布局。内容页对应母版页中的特定位置，有利于页面的布局
• 提供便于使用的对象模型。由内容页和母版页组成的对象模型，能够为应用程序提供高效实用的实现方式

3.1.3 母版页的使用 

创建新母版页的方法是在 Visual Studio 2017 的“资源管理器”中点击鼠标右键，选择“添加” “添加新项”“Web 窗体母版页” 

新创建的母版页上包含两个 ContentPlaceHolder 控件。ID 为“head”的控件是预留给加载页面样式和 JavaScript 文件的，ID 为ContentPlaceHolder1”的控件是预留给内容页显示的

在新创建的母版页中添加页头、页脚和代码 

html代码：
<form id="form1" runat="server">
  <div>
    页头
  </div>
  <div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
  </div>
 页脚
  </div>
 </form>

提醒：

 母版页和普通页面有以下区别 

 声明  

普通页的声明是：
<%@ Page Title="Home Page" Language="C#" MasterPageFile="…" AutoEventWireup="true" CodeFile="…" Inherits="…" %>
母版页的声明是：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="…" Inherits="…" %>

扩展名

• 普通页的后缀名是 .aspx，母版页的后缀名是 .master

ContentPlaceHolder 控件

• 母版页可以使用一个或多个 ContentPlaceHolder 控件，普通页不使用该控件

3.1.4 内容页 

母版页是页面的框架，需要通过内容页来填充页面内容。每一个内容页对应母版页中的一个位置（ContentPlaceHolder控件所占的位置） 

在 Visual Studio 2017 中，新建页面时，可以选择已创建的母版页。在 Visual Studio 2017 的“资源管理器”中，点击鼠标右键，选择“添加” “添加新项” “包含母版页的 Web 窗体”  

选择“MasterPage.master”母版页，点击“确定”按钮，创建 Index.aspx 内容页 

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

重要的参数说明 

• MasterPageFile 用于指定所使用的母版页的文件路径
• Title 用于设置内容页的标题
• ContentPlaceHolderID 对应母版页中 ContentPlaceHolder 控件的 ID，如果指定的 ID 在母版页中不存在，则无法呈现正确的结果 

切换到“设计”视图，可知内容页继承了母版页中的 HTML 代码 

3.2 FileUpload文件上传控件 

3.2.1 FileUpload控件的使用 

 FileUpload 控件的主要功能是向指定的目录上传文件，该控件包括一个文本框和一个浏览按钮。用户可以在文本框中输入完整的文件路径，或通过按钮浏览并选择需要上传的文件 

FileUpload 控件不会自动上传文件，而必须设置相关的事件处理程序，然后在程序中实现文件上传 

FileUpload 控件的主要属性和方法见表

• HasFile ：控件是否含有将要上传的文件 
• FileName ：上传文件的文件名 
• SaveAs ：将上传文件保存到服务器指定的路径 

示例：使用 FileUpload 控件上传图片文件到服务器端，并且将上传的图片显示在页面上 

创建 UploadPic.aspx 页面，在页面上拖放 FileUpload 控件、Button 控件、Label 控件和 Image 控件。在站点根目录下创建文件夹“UploadPic”，图片将上传并保存在此处 

<form id="form1" runat="server">
  <div>
    <asp:Image ID="imagePic" runat="server" /><br />
    <asp:FileUpload ID="fileUpload" runat="server" />
    <asp:Button ID="btnUpload" runat="server" Text=" 上传 " OnClick="btnUpload_Click" /><br />
    <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
  </div>
</form>

双击 btnUpload 按钮，在 UploadPic.aspx.cs 文件中编写文件上传代码 

if (fileUpload.HasFile)
  {
    // 获取上传的文件名
    string fileName = fileUpload.FileName;
    // 获取上传文件的文件后缀名
    String fileFix=fileName.Substring(fileName.LastIndexOf('.')+1).ToLower();
    if (fileFix!="png" && fileFix!="jpg" && fileFix!="jpeg" &&fileFix!="pic")
         {
      this.lblMessage.Text = " 上传的文件不是图片类型文件 !";
    }
    else
    {
      fileUpload.SaveAs(Server.MapPath("~/UploadPic/")+fileName );
      this.imagePic.ImageUrl="~/UploadPic/"+fileName;
      this.lblMessage.Text = " 图片上传成功！ ";
    }
  }
}

3.3 文件下载 

3.3.1 文件下载的方法 

与文件上传相对应的是文件下载，各种软件下载网站及视频站点会频繁使用文件下载功能。文件下载有两种办法

一种是使用 HTML 超链接，在点击链接后下载文件

另一种是使用 ASP.NET 中的 Response 对象以及文件流来处理下载 

示例：使用超链接实现文件下载 

<form id="form1" runat="server">
  <div>
    <a href="logo.zip"> 请点击此处下载文件！ </a>
  </div>
</form>

注意： 

如果是下载图片等能够直接通过浏览器打开的文件，需预先将图片压缩成 zip 或 rar 文件，然后再使用超链接指向压缩文件路径，提供下载 

示例：使用TransmitFile() 方法提供文件下载 

protected void btnDown1_Click(object sender, EventArgs e)
{
  Response.ContentType = "application/x-zip-compressed";
  Response.AddHeader("Content-Disposition", "attachment;filename=logo.zip");
  string filename = Server.MapPath("logo.zip");
  Response.TransmitFile(filename);
}

3.4 TreeView控件 

3.4.1 站点地图 

1. 各种站点都有导航系统，最基本的实现方式是在页面上放置多个超链接以达到页面导航的功能 
2. 此方式的缺点是超链接分散在多个页面，在站点结构发生变化的情况下，“分散”导航会导致超链接地址的维护变得非常繁琐 
3. 为解决此问题，ASP.NET 提供了站点地图这种集中导航方式 
4. 在 ASP.NET 中，站点地图是以 web.sitemap 命名的文件，且需要存储于站点的根目录下 
5. web.sitemap 文件内容是以 XML 所描述的树状结构文件，其中包括了站点的结构信息 
6. ASP.NET 的导航控件的网站导航信息和超链接的数据均由 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="login.aspx" title=" 登录 "  description="" />
    <siteMapNode url="regist.aspx" title=" 注册 "  description="" />
  </siteMapNode>
</siteMap>

注意： 

• 站点地图根节点为 <siteMap> 元素，每个文件有且仅有一个根节点 
• <siteMap> 下一级有且仅有一个 <siteMapNode> 节点 
• 在站点地图中，同一个 url 仅能出现一次 
• 站点地图文件指定的页面关系是逻辑关系，而不是存储位置间的关系 

3.4.2 TreeView控件的使用 

TreeView 控件由一个或多个节点构成，TreeView 控件中的每个项被称为一个节点，由 TreeNode 对象表示 

TreeView 控件最上层的节点称为根节点，再下一层节点称为父节点，父节点下面的节点称为子节点，如果子节点下面没有任何节点，则称为叶节点 

TreeView 控件主要支持以下功能 

• 采用站点地图作为 TreeView 控件的数据源
•  使用 XML 文件作为 TreeView 控件 的数据源 
• TreeView 控件加载站点地图中的信息 
• 在 Default.aspx 页面拖入 TreeView 控件，并设置数据源

示例：

TreeView 控件不常用于显示导航，而是呈现网站后台管理页面的主菜单。可以将 XML 文件作为数据源，编写网站后台管理页面的菜单 

示例：

实现步骤 ：

• 编写 XML 文件 menu.xml，并保存到站点根目录
• 设置数据源并完成数据源配置信息
• 编辑数据绑定信息
• 设置格式 

<?xml version="1.0" encoding="utf-8" ?>
<siteMapNode url="" title=" 后台管理 " >
  <siteMapNode url="" title=" 用户管理 ">
    <siteMapNode url="" title=" 查看用户 "/>
    <siteMapNode url="" title=" 添加用户 "/>
  </siteMapNode>
  <siteMapNode url="" title=" 商品管理 ">
    <siteMapNode url="" title=" 查看商品 "/>
    <siteMapNode url="" title=" 添加商品 "/>
  </siteMapNode>
  <siteMapNode url="" title=" 订单管理 ">
    <siteMapNode url="" title=" 查看订单 "/>
    <siteMapNode url="" title=" 修改订单 "/>
  </siteMapNode>
</siteMapNode>

总结 

1.  在ASP.NET 中，母版页，可以实现页面统一布局，有利于站点修改和维护，降低开发人员的工作强度，提供便于使用的对象模型 
2. 母版页上包含两个 ContentPlaceHolder 控件。ID 为“head”的控件是预留给加载页面样式和 JavaScript 文件的，ID 为“ContentPlaceHolder1”的控件是预留给内容页显示的 
3. 文件下载有两种办法：第一种是使用 HTML 超链接，在点击链接后下载文件；另一种是使用 ASP.NET 中的 Response对象以及文件流来处理下载 
4. TreeView 控件有的数据加载方式，加载站点地图的数据，加载XML文件中的数据