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