母版頁和站點地圖使用

1、首先使用VS2005創建一個母版頁:site.master
源文件:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="site.master.cs" Inherits="site" %>

<!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">
    <link type="text/css" href="CSS/mainCSS.css" rel="Stylesheet" />
    <title>無標題頁</title>
</head>
<body>
    <div id="wrapper">
    <form id="form1" runat="server">
    <div id="header">
        <span class="title">Working with Data Tutorials</span>
        <span class="breadcrumb">TODO: Breadcrumb will go here</span>
    </div>
    <div id="content">
        <asp:contentplaceholder id="MainContent" runat="server"></asp:contentplaceholder>
       
    </div>
    <div id="navigation">
        <ul>
            <li>
                <asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
            </li>
                <asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
                    <Itemtemplate>
                        <li>
                            <asp:HyperLink ID="HyperLink1" runat="server" ><%#Eval("title") %></asp:HyperLink>
                            <asp:Repeater ID="Repeater1" runat="server"
            DataSource="<%# ((SiteMapNode) Container.DataItem).ChildNodes %>">
           
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

               <ItemTemplate>
                    <li>
                        <asp:HyperLink ID="HyperLink2" runat="server" ><%# Eval("Title") %></asp:HyperLink>  
                    </li>
               </ItemTemplate>

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
        </ul>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    </div>
    </form>
    </div>
</body>
</html>
2、創建一個頁面Default.aspx,創建時選擇“選擇母板頁”選項,這樣,這個文件就被包含進母板頁裏面。
在Default.aspx裏面內容的變化會傳遞到母板頁裏面
假如此頁面有以下內容:
<%@ Page Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">

    <h1>Welcome to the Working with Data Tutorial Site</h1>
        <p>This site is being built as part of a set of tutorials that
            illustrate some of the new data access and databinding features in
            ASP.NET 2.0 and Visual Web Developer.
        </p>
        <p>Over time, it will include a host of samples that demonstrate:
        </p>
    <ul>
        <li>Building a DAL (data access layer),</li>
        <li>Using strongly typed TableAdapters and DataTables</li>
        <li>Master-Detail reports</li>
        <li>Filtering</li>
        <li>Paging,</li>
        <li>Two-way databinding,</li>
        <li>Editing,</li>
        <li>Deleting,</li>
        <li>Inserting,</li>
        <li>Hierarchical data browsing,</li>
        <li>Hierarchical drill-down,</li>
        <li>Optimistic concurrency,</li>
   </ul>
</asp:Content>
注:MasterPageFile="~/site.master"說明了該頁面被引用到的母板頁
ContentPlaceHolderID="MainContent"爲母板頁裏面的contentplaceholder的ID
3、創建一個站點地圖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="Home" description="Home">
   <siteMapNode title="Basic Reporting"
       url="~/BasicReporting/Default.aspx"
       description="Basic Reporting Samples">
      <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
         title="Simple Display"
         description="Displays the complete contents
         of a database table." />
       <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
         title="Declarative Parameters"
        description="Displays a subset of the contents
          of a database table using parameters." />
      <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
         title="Setting Parameter Values"
         description="Shows how to set parameter values
         programmatically." />

    </siteMapNode>
 
     <siteMapNode title="Filtering Reports"
       url="~/Filtering/Default.aspx"
      description="Samples of Reports that Support Filtering">
     <siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
         title="Filter by Drop-Down List"
description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
         title="Master-Details-Details"
         description="Filter results two levels down." />
          <siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
         title="Details of Selected Row"
description="Show detail results for a selected item in a GridView." />

    </siteMapNode>
     <siteMapNode title="Customized Formatting"
         url="~/CustomFormatting/Default.aspx"
        description="Samples of Reports Whose Formats are Customized">
            <siteMapNode url="~/CustomFormatting/CustomColors.aspx"
        title="Format Colors"
         description="Format the grid&apos;s colors based
          on the underlying data." />
         <siteMapNode
          url="~/CustomFormatting/GridViewTemplateField.aspx"
         title="Custom Content in a GridView"
         description="Shows using the TemplateField to
          customize the contents of a field in a GridView." />
           <siteMapNode
          url="~/CustomFormatting/DetailsViewTemplateField.aspx"
          title="Custom Content in a DetailsView"
          description="Shows using the TemplateField to customize
           the contents of a field in a DetailsView." />
           <siteMapNode url="~/CustomFormatting/FormView.aspx"
          title="Custom Content in a FormView"
         description="Illustrates using a FormView for a
          highly customized view." />
          <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx" title="Summary Data in Footer" description="Display summary data in the grids footer." />
    </siteMapNode>
  </siteMapNode>
</siteMap>
4、所需的CSS文件
#wrapper
{
    position:absolute;
    width:100%;
    height:100%;
}
.title
{
    position:relative;
    text-align:left;
    font-size:x-large;
    border: solid 1px Silver;
    margin-left:auto;
    margin-left:5px;
    margin-top:20px;
}
.breadcrumb
{
    position:absolute;
    border:solid 1px Silver;
    margin-top:40px;
    font-size:larger;
    margin-left:40px;
}
#header
{
    position:relative;
    margin-left:0px;
    margin-top:0px;
    border: solid 1px Silver;
    border-top-color:Red;
    border-top-width:3px;
    border-bottom-color:Red;
    border-bottom-width:2px;
    border-bottom-style:dotted;
    width:100%;
    height:60px;
}
#navigation
{
    position:relative;
    border: solid 1px Silver;
    top: -463px;
    left:1px;
    width: 230px;
    height: 354px;
}
#content
{
    left: 76px;
    width: 560px;
    top: -29px;
    height: 89px;
    position:relative;
    margin-left:200px;
    margin-top:50px;
    height:60px;
    border: solid 1px Silver;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章