独上高楼网站
  •    你所在位置：首页 〉VS.net〉ASP.net〉开发〉母板页和站点导航（页面表示层）ASP.NET 2.0数据教程之三
  • 母板页和站点导航（页面表示层）ASP.NET 2.0数据教程之三
  • 作者：佚名  文章来源：网上下载  发布日期：2007-05-26  浏览次数：1192
  • 打印这篇文章
  • 导言
    通常，用户友好的个性化站点都有着一致的，站点统一的页面布局和导航体系。Asp.net 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具，它们是母板页和站点导航。母板页允许开发者创建统一的站点模板和指定的可编辑区域。这样，aspx页面只需要给模板页中指定的可编辑区域提供填充内容就可以了，所有在母板页中定义的其他标记将出现在所有使用了该母板页的aspx页面中。这种模式允许开发者可以统一的管理和定义站点的页面布局，因此可以容易的得到拥有统一的视觉和感觉的页面并且还易于更新。

    站点导航系统允许开发者定义站点地图并提供了API以便通过程序查询站点地图信息。新的导航控件包括Menu,TreeView和SiteMapPath,这样可以很容易的在一个一般的导航用户界面元素里呈现全部或者部分站点地图。我们将使用默认的站点导航提供者，这意味着我们的站点地图将定义在一个xml格式的文件中。

    为说明这些观念并且使我们的教程的示例站点可用性更佳，让我们通过本次课程定义一个站点统一的页面布局，实现一个站点地图，并且添加导航UI。在这个课程结束时我们的课程示例站点就拥有一个优美的设计效果了。



    图1：本课程的最终成果

    步骤1：创建母板页

    第一步是为我们的站点创建母板页。到目前为止我们的站点只有一个类型化的DataSet（Northwind.xsd,位于App_Code文件夹），业务逻辑层类库（ProductsBLL.cs,CategoriesBLL.cs等等，这些都在App_Code文件夹里），数据库（NORTHWIND.MDF,位于App_Data文件夹），配置文件（web.config）,和一个CSS文件（Style.css）。
    我整理这些页面和文件以说明前面两次课程中介绍的数据访问层和业务逻辑层将会在以后课程的更多细节中重用这些示例。



    图2：我们项目中的文件

    要创建一个母板页，用右键点击解决方案管理器中的项目名称并选择添加新项。然后从模板列表窗口中选择母板类型并且命名为Site.master



    图3：添加一个母板页到站点中

    在母板页中定义站点统一的页面布局。你可以用设计视图定义你需要的布局或者控件，你还可以手动的在代码视图中添加标记。在我们的母板页中使用了定义在外部文件Style.css中的层叠样式表来定义位置和风格。也许你不知道下面这些标记怎样显示，样式表规则定义了导航用的
    标签中的内容绝对定位在页面的左边并且宽度固定为200像素。

     1
     2
     3DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     4
     5<html xmlns="http://www.w3.org/1999/xhtml" >
     6<head runat="server">
     7    <title>Working with Data Tutorialstitle>
     8    <link href="Styles.css" rel="stylesheet" type="text/css" />
     9head>
    10<body>
    11    <div id="wrapper">
    12
    13        <form id="form1" runat="server">
    14
    15            <div id="header">
    16                <span class="title">Working with Data Tutorialsspan>
    17                <span class="breadcrumb">
    18                 TODO: Breadcrumb will go herespan>
    19            div>
    20
    21            <div id="content">
    22                <asp:contentplaceholder id="MainContent"
    23                 runat="server">
    24                  
    25                asp:contentplaceholder>
    26            div>
    27
    28            <div id="navigation">
    29                TODO: Menu will go here
    30            div>
    31        form>
    32    div>
    33body>
    34html>

    一个母板页定义了固定的布局和可以被那些使用了母板页的aspx页面填充的可编辑区域
    这个可编辑区域是通过ContentPlaceHolder控件显示，位于
    标记中。我们的母板页中只有一个ContentPlaceHolder(MainContent),但是母板页中是可以包含多个ContentPlaceHolder控件的。

    输入上面的标记，切换到设计视图观察母板页的布局。所有的使用了这个母板页的aspx页面都会有这样统一的布局，而MainContent区域是留给aspx页面展现自己才华的地方。



    图4：在设计视图中显示的母板页

    步骤2：给站点添加一个主页

    定义母板页后，我们准备给站点添加一些aspx页面。让我们从添加我们的首页Degault.aspx开始吧。在解决方案管理器中右键点击项目名称并且选择添加新建项目。从模板列表中选择Web Form选项并且命名为Default.aspx。并且，勾上“选择母板页”的复选框。



    图5：添加一个新Web Form并且勾上“选择母板页”的复选框

    点击确定按钮后，将会询问你新建的这个aspx页面使用哪个母板页。也许你有多个母板页在你的项目中，但是我们只有一个。



    图6：选择你要使用的母板页

    选择母板页后，新建的aspx会包含下面这些标记：
    Default.aspx
    1
    2<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
    3  Runat="Server">
    4asp:Content>
    在@Page指令中有一个指向母板页的引用(MasterPageFile=”~/Site.master”),并且aspx页面的标记中包含了一个Content控件对应母板页中定义的ContentPlaceHolder控件，这个Content控件的ContentPlaceHolderID属性映射到指定的ContentPlaceHolder控件。你可以在Content控件中放置你想显示在相应ContentPlaceHolder控件位置的标记。

    设置@Page指令的Title属性为Home并且添加一些欢迎词到Content控件中：
    Default.aspx
     1
     2<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
     3  Runat="Server">
     4    <h1>Welcome to the Working with Data Tutorial Siteh1>
     5
     6    <p>This site is being built as part of a set of tutorials that
     7illustrate some of the new data access and databinding features in
     8ASP.NET 2.0 and Visual Web Developer.p>
     9
    10    <p>Over time, it will include a host of samples that
    11demonstrate:p>
    12
    13    <ul>
    14        <li>Building a DAL (data access layer),li>
    15        <li>Using strongly typed TableAdapters and DataTablesli>
    16        <li>Master-Detail reportsli>
    17        <li>Filteringli>
    18        <li>Paging,li>
    19        <li>Two-way databinding,li>
    20        <li>Editing,li>
    21        <li>Deleting,li>
    22        <li>Inserting,li>
    23        <li>Hierarchical data browsing,li>
    24        <li>Hierarchical drill-down,li>
    25        <li>Optimistic concurrency,li>
    26        <li>And more!li>
    27    ul>
    28asp:Content>
    @Page指令中的Title属性允许我们可以在aspx页面定义标题，即使母板页中已经定义了
  • 打印这篇文章
  • 与本文主题相关的文章
  • 返回首页