ASP.NET 2.0數(shù)據(jù)教程：創(chuàng)建母版頁
通常，用戶友好的個性化站點都有著一致的，站點統(tǒng)一的頁面布局和導(dǎo)航體系。asp.net 2.0引入的兩個新特性給我們在統(tǒng)一站點的頁面布局和站點導(dǎo)航上提供了簡單而有效的工具，它們是母版頁和站點導(dǎo)航。母版頁允許開發(fā)者創(chuàng)建統(tǒng)一的站點模板和指定的可編輯區(qū)域。這樣，aspx頁面只需要給模板頁中指定的可編輯區(qū)域提供填充內(nèi)容就可以了，所有在母版頁中定義的其他標(biāo)記將出現(xiàn)在所有使用了該母版頁的aspx頁面中。這種模式允許開發(fā)者可以統(tǒng)一的管理和定義站點的頁面布局，因此可以容易的得到擁有統(tǒng)一的視覺和感覺的頁面并且還易于更新。
站點導(dǎo)航系統(tǒng)允許開發(fā)者定義站點地圖并提供了API以便通過程序查詢站點地圖信息。新的導(dǎo)航控件包括Menu,TreeView和SiteMapPath,這樣可以很容易的在一個一般的導(dǎo)航用戶界面元素里呈現(xiàn)全部或者部分站點地圖。我們將使用默認(rèn)的站點導(dǎo)航提供者，這意味著我們的站點地圖將定義在一個xml格式的文件中。
為說明這些觀念并且使我們的教程的示例站點可用性更佳，讓我們通過本次課程定義一個站點統(tǒng)一的頁面布局，實現(xiàn)一個站點地圖，并且添加導(dǎo)航UI。在這個課程結(jié)束時我們的課程示例站點就擁有一個優(yōu)美的設(shè)計效果了。
圖1：本課程的最終成果
步驟1：創(chuàng)建母版頁
第一步是為我們的站點創(chuàng)建母版頁。到目前為止我們的站點只有一個類型化的DataSet（Northwind.xsd,位于App_Code文件夾），業(yè)務(wù)邏輯層類庫（ProductsBLL.cs,CategoriesBLL.cs等等，這些都在App_Code文件夾里），數(shù)據(jù)庫（NORTHWIND.MDF,位于App_Data文件夾），配置文件（web.config）,和一個CSS文件（Style.css）。
我整理這些頁面和文件以說明前面兩次課程中介紹的數(shù)據(jù)訪問層和業(yè)務(wù)邏輯層將會在以后課程的更多細(xì)節(jié)中重用這些示例。
圖2：我們項目中的文件
要創(chuàng)建母版頁，用右鍵點擊解決方案管理器中的項目名稱并選擇添加新項。然后從模板列表窗口中選擇母版類型并且命名為Site.master
圖3：添加一個母版頁到站點中
在母版頁中定義站點統(tǒng)一的頁面布局。你可以用設(shè)計視圖定義你需要的布局或者控件，你還可以手動的在代碼視圖中添加標(biāo)記。在我們的母版頁中使用了定義在外部文件Style.css中的層疊樣式表來定義位置和風(fēng)格。也許你不知道下面這些標(biāo)記怎樣顯示，樣式表規(guī)則定義了導(dǎo)航用的< div>標(biāo)簽中的內(nèi)容絕對定位在頁面的左邊并且寬度固定為200像素。
- < %@ 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">
- < title>Working with Data Tutorials< /title>
- < link href="Styles.css" rel="stylesheet" type="text/css" />
- < /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">
- < !-- Page-specific content will go here -->
- < /asp:contentplaceholder>
- < /div>
- < div id="navigation">
- TODO: Menu will go here
- < /div>
- < /form>
- < /div>
- < /body>
- < /html>
一個母版頁定義了固定的布局和可以被那些使用了母版頁的aspx頁面填充的可編輯區(qū)域
這個可編輯區(qū)域是通過ContentPlaceHolder控件顯示，位于< div>標(biāo)記中。我們的母版頁中只有一個ContentPlaceHolder(MainContent),但是母版頁中是可以包含多個ContentPlaceHolder控件的。
輸入上面的標(biāo)記，切換到設(shè)計視圖觀察母版頁的布局。所有的使用了這個母版頁的aspx頁面都會有這樣統(tǒng)一的布局，而MainContent區(qū)域是留給aspx頁面展現(xiàn)自己才華的地方。
圖4：在設(shè)計視圖中顯示的母版頁
【編輯推薦】
- ASP.NET MVC路徑選擇系統(tǒng)構(gòu)建
- ASP.NET MVC框架中的URL路徑選擇場景
- ASP.NET MVC 框架URL路徑選擇規(guī)則
- ASP.NET MVC框架：使用強(qiáng)類型類來傳遞ViewData
- 使用ASP.NET MVC框架創(chuàng)建電子商務(wù)網(wǎng)站
