道。道。道

　　導(dǎo)言

　　通常，用戶友好的個性化站點都有著一致的，站點統(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)全部或者部分站點地圖。我們將使用默認的站點導(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ù)邏輯層將會在以后課程的更多細節(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像素。

1＜%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="Site.master.cs"Inherits="Site"%＞ 2 3＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ 4 5＜htmlxmlns="http://www.w3.org/1999/xhtml"＞ 6＜headrunat="server"＞ 7＜title＞W(wǎng)orkingwithDataTutorials＜/title＞ 8＜linkhref="Styles.css"rel="stylesheet"type="text/css"/＞ 9＜/head＞ 10＜body＞ 11＜divid="wrapper"＞ 12 13＜formid="form1"runat="server"＞ 14 15＜divid="header"＞ 16＜spanclass="title"＞W(wǎng)orkingwithDataTutorials＜/span＞ 17＜spanclass="breadcrumb"＞ 18TODO:Breadcrumbwillgohere＜/span＞ 19＜/div＞ 20 21＜divid="content"＞ 22＜asp:contentplaceholderid="MainContent" 23runat="server"＞ 24＜!--Page-specificcontentwillgohere--＞ 25＜/asp:contentplaceholder＞ 26＜/div＞ 27 28＜divid="navigation"＞ 29TODO:Menuwillgohere 30＜/div＞ 31＜/form＞ 32＜/div＞ 33＜/body＞ 34＜/html＞

　　一個母板頁定義了固定的布局和可以被那些使用了母板頁的aspx頁面填充的可編輯區(qū)域，這個可編輯區(qū)域是通過ContentPlaceHolder控件顯示，位于＜div＞標(biāo)記中。我們的母板頁中只有一個ContentPlaceHolder(MainContent),但是母板頁中是可以包含多個ContentPlaceHolder控件的。

　　輸入上面的標(biāo)記，切換到設(shè)計視圖觀察母板頁的布局。所有的使用了這個母板頁的aspx頁面都會有這樣統(tǒng)一的布局，而MainContent區(qū)域是留給aspx頁面展現(xiàn)自己才華的地方。



圖4：在設(shè)計視圖中顯示的母板頁
　　步驟2：給站點添加一個主頁

　　定義母板頁后，我們準(zhǔn)備給站點添加一些aspx頁面。讓我們從添加我們的首頁Degault.aspx開始吧。在解決方案管理器中右鍵點擊項目名稱并且選擇添加新建項目。從模板列表中選擇Web Form選項并且命名為Default.aspx。并且，勾上“選擇母板頁”的復(fù)選框。



圖5：添加一個新Web Form并且勾上“選擇母板頁”的復(fù)選框

　　點擊確定按鈕后，將會詢問你新建的這個aspx頁面使用哪個母板頁。也許你有多個母板頁在你的項目中，但是我們只有一個。



圖6：選擇你要使用的母板頁

　　選擇母板頁后，新建的aspx會包含下面這些標(biāo)記：

　　Default.aspx

1＜%@PageLanguage="C#"MasterPageFile="~/Site.master"AutoEventWireup="true" CodeFile="Default.aspx.cs"Inherits="_Default"Title="UntitledPage"%＞ 2＜asp:ContentID="Content1"ContentPlaceHolderID="MainContent" 3Runat="Server"＞ 4＜/asp:Content＞

　　在@Page指令中有一個指向母板頁的引用(MasterPageFile=”~/Site.master”),并且aspx頁面的標(biāo)記中包含了一個Content控件對應(yīng)母板頁中定義的ContentPlaceHolder控件，這個Content控件的ContentPlaceHolderID屬性映射到指定的ContentPlaceHolder控件。你可以在Content控件中放置你想顯示在相應(yīng)ContentPlaceHolder控件位置的標(biāo)記。

　　設(shè)置@Page指令的Title屬性為Home并且添加一些歡迎詞到Content控件中：

　　Default.aspx

1＜%@PageLanguage="C#"MasterPageFile="~/Site.master"AutoEventWireup="true" CodeFile="Default.aspx.cs"Inherits="_Default"Title="Home"%＞ 2＜asp:ContentID="Content1"ContentPlaceHolderID="MainContent" 3Runat="Server"＞ 4＜h1＞W(wǎng)elcometotheWorkingwithDataTutorialSite＜/h1＞ 5 6＜p＞Thissiteisbeingbuiltaspartofasetoftutorialsthat 7illustratesomeofthenewdataaccessanddatabindingfeaturesin 8ASP.NET2.0andVisualWebDeveloper.＜/p＞ 9 10＜p＞Overtime,itwillincludeahostofsamplesthat 11demonstrate:＜/p＞ 12 13＜ul＞ 14＜li＞BuildingaDAL(dataaccesslayer),＜/li＞ 15＜li＞UsingstronglytypedTableAdaptersandDataTables＜/li＞ 16＜li＞Master-Detailreports＜/li＞ 17＜li＞Filtering＜/li＞ 18＜li＞Paging,＜/li＞ 19＜li＞Two-waydatabinding,＜/li＞ 20＜li＞Editing,＜/li＞ 21＜li＞Deleting,＜/li＞ 22＜li＞Inserting,＜/li＞ 23＜li＞Hierarchicaldatabrowsing,＜/li＞ 24＜li＞Hierarchicaldrill-down,＜/li＞ 25＜li＞Optimisticconcurrency,＜/li＞ 26＜li＞Andmore!＜/li＞ 27＜/ul＞ 28＜/asp:Content＞

　　@Page指令中的Title屬性允許我們可以在aspx頁面定義標(biāo)題，即使母板頁中已經(jīng)定義了＜title＞元素。我們還可以使用Page.Title的編程方式設(shè)置頁面的標(biāo)題。需要注意的是母板頁中引用的樣式表（如Style.css）會自動校正以應(yīng)用到每個aspx頁面中，這是與aspx頁面的目錄和母板頁目錄之間的關(guān)系無關(guān)。

　　切換到設(shè)計視圖我們會看到我們的頁面將在瀏覽器中的顯示效果。注意：在設(shè)計視圖里，aspx頁面的內(nèi)容只有可編輯區(qū)域可以被修改，在母板頁定義的非ContentPlaceHolder部分標(biāo)記被顯示成灰色。


圖7：在設(shè)計視圖中顯示的可編輯區(qū)域及非可編輯區(qū)域

　　當(dāng)Default.aspx頁面被瀏覽器訪問時，asp.net引擎會合并母板頁的內(nèi)容和aspx頁的內(nèi)容，并且將合并的內(nèi)容呈現(xiàn)為最終的HTML發(fā)送到瀏覽器。當(dāng)母板頁的內(nèi)容被更新，所有使用了這個母板頁的aspx頁面會在下次被請求時重新和新的母板頁內(nèi)容合并。簡單的說，母板頁模型允許定義一個統(tǒng)一的布局模板（母板頁），當(dāng)它改變時整個站點會反應(yīng)這種改變。

　　添加更多的頁面到站點中

　　讓我們花一點時間添加另外的頁面到站點中，以便支持最終的各種各樣的課程的示例。這里總共會有超過35個示例，所以我們先創(chuàng)建一部分。以后會有很多類別的示例，為了更好的管理這些示例我們給每個分類添加一個文件夾。現(xiàn)在我們添加三個文件夾：

　　BasicReporting
　　Filtering
　　CustomFormatting

　　最后，如圖8所示向解決方案管理器中添加新文件。每添加一個文件的時候記住要勾上“選擇母板頁”的復(fù)選框。

圖8：添加下列文件


　　第三步：添加站點地圖

　　管理一個由大量網(wǎng)頁組成的網(wǎng)站的其中一個挑戰(zhàn)是要為訪問者瀏覽網(wǎng)站提供一個捷徑。作為開始，站點的導(dǎo)航結(jié)構(gòu)必須被定義。下一步，這個結(jié)構(gòu)必須轉(zhuǎn)換成適于導(dǎo)航的用戶界面元素，比如菜單或者位置導(dǎo)航。當(dāng)有新頁面添加到站點和已有的頁面被移除的時候這個過程將要修改和校正。

　　在asp.net 2.0以前，開發(fā)者需要自己創(chuàng)建站點導(dǎo)航結(jié)構(gòu)，維護它并且將它轉(zhuǎn)化為適于導(dǎo)航的用戶界面元素。在asp.net 2.0里，開發(fā)者可以利用非常靈活的且內(nèi)置的站點導(dǎo)航系統(tǒng)。Asp.net 2.0站點導(dǎo)航系統(tǒng)允許開發(fā)者定義一個站點地圖并且提供了可以訪問這些信息的API。

　　默認的Asp.net站點地圖提供者期望站點地圖信息存儲在xml格式的文件中。但是，建立在提供者模型上的站點導(dǎo)航系統(tǒng)是可以被擴展的以支持多種方式儲存的站點地圖。Jeff Prosise的文章，The SQL Site Map Provider You’ve Been Waiting For展示了怎樣創(chuàng)建將站點地圖存儲在SQL Server數(shù)據(jù)庫里的提供者；另外一個選擇是基于文件系統(tǒng)的站點地圖提供者。

　　在這個指南中，我們?nèi)匀皇褂肁SP.NET2.0里默認的站點地圖提供者。要創(chuàng)建站點地圖，在解決方案管理器里右鍵點擊項目名稱，選擇添加新項，然后選擇站點地圖類型。命名為Web.sitemap然后單擊添加按鈕。


圖9：向你的項目中添加站點地圖

　　站點地圖文件是一個xml文件。注意：Visual Studio可以為站點地圖結(jié)構(gòu)提供智能感知。站點地圖文件必須含有＜siteMap＞作為根節(jié)點，它必須至少含有一個＜siteMapNode＞子節(jié)點。這個＜siteMapNode＞元素又可以包含任意數(shù)量的＜siteMapNode＞子元素。

　　站點地圖模擬了文件系統(tǒng)。為每個文件夾添加一個＜siteMapNode＞元素，并且為每個aspx頁面添加一個＜siteMapNode＞子元素，如此：

　　Web.sitemap:

1 2＜siteMapxmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"＞ 3 4＜siteMapNodeurl="~/Default.aspx"title="Home"description="Home"＞ 5＜siteMapNodetitle="BasicReporting" 6url="~/BasicReporting/Default.aspx" 7description="BasicReportingSamples"＞ 8＜siteMapNodeurl="~/BasicReporting/SimpleDisplay.aspx" 9title="SimpleDisplay" 10description="Displaysthecompletecontents 11ofadatabasetable."/＞ 12＜siteMapNodeurl="~/BasicReporting/DeclarativeParams.aspx" 13title="DeclarativeParameters" 14description="Displaysasubsetofthecontents 15ofadatabasetableusingparameters."/＞ 16＜siteMapNodeurl="~/BasicReporting/ProgrammaticParams.aspx" 17title="SettingParameterValues" 18description="Showshowtosetparametervalues 19programmatically."/＞ 20＜/siteMapNode＞ 21 22＜siteMapNodetitle="FilteringReports" 23url="~/Filtering/Default.aspx" 24description="SamplesofReportsthatSupportFiltering"＞ 25＜siteMapNodeurl="~/Filtering/FilterByDropDownList.aspx" 26title="FilterbyDrop-DownList" 27description="Filterresultsusingadrop-downlist."/＞ 28＜siteMapNodeurl="~/Filtering/MasterDetailsDetails.aspx" 29title="Master-Details-Details" 30description="Filterresultstwolevelsdown."/＞ 31＜siteMapNodeurl="~/Filtering/DetailsBySelecting.aspx" 32title="DetailsofSelectedRow" 33description="ShowdetailresultsforaselectediteminaGridView."/＞ 34＜/siteMapNode＞ 35 36＜siteMapNodetitle="CustomizedFormatting" 37url="~/CustomFormatting/Default.aspx" 38description="SamplesofReportsWhoseFormatsareCustomized"＞ 39＜siteMapNodeurl="~/CustomFormatting/CustomColors.aspx" 40title="FormatColors" 41description="Formatthegrid'scolorsbased 42ontheunderlyingdata."/＞ 43＜siteMapNode 44url="~/CustomFormatting/GridViewTemplateField.aspx" 45title="CustomContentinaGridView" 46description="ShowsusingtheTemplateFieldto 47customizethecontentsofafieldinaGridView."/＞ 48＜siteMapNode 49url="~/CustomFormatting/DetailsViewTemplateField.aspx" 50title="CustomContentinaDetailsView" 51description="ShowsusingtheTemplateFieldtocustomize 52thecontentsofafieldinaDetailsView."/＞ 53＜siteMapNodeurl="~/CustomFormatting/FormView.aspx" 54title="CustomContentinaFormView" 55description="IllustratesusingaFormViewfora 56highlycustomizedview."/＞ 57＜siteMapNodeurl="~/CustomFormatting/SummaryDataInFooter.aspx" 58title="SummaryDatainFooter" 59description="Displaysummarydatainthegridsfooter."/＞ 60＜/siteMapNode＞ 61 62＜/siteMapNode＞ 63 64＜/siteMap＞

　　站點地圖定義了這個站點的導(dǎo)航結(jié)構(gòu)，它是層次結(jié)構(gòu)的以便描述站點中各種各樣的區(qū)域。在Web.sitemap中的每個＜siteMapNode＞元素描述了一個站點結(jié)構(gòu)中的一個區(qū)域。


圖10：站點地圖描述了一個層次的導(dǎo)航結(jié)構(gòu)

　　Asp.net通過DotNET 框架中的SiteMap類顯示站點地圖的結(jié)構(gòu)。這個類有一個CurrentNode屬性，它返回當(dāng)前用戶正在訪問的節(jié)點的信息；RootNode屬性返回站點地圖的根節(jié)點信息（在我們的站點地圖中是Home）。CurrentNode呵RootNode屬性都返回SiteMapNode實例，SiteMapNode包含ParentNode,ChildNodes,NextSibling,PreviousSibling等屬性，這些屬性允許站點地圖的層次可以被遍歷。
　　步驟4：利用站點地圖顯示菜單

　　在asp.net 2.0中我們可以像asp.net 1.x一樣，有多種編程方式可以訪問數(shù)據(jù)，還可以通過新的數(shù)據(jù)源控件訪問。

　　這里有多個內(nèi)置的數(shù)據(jù)源控件，比如用來訪問關(guān)系數(shù)據(jù)庫數(shù)據(jù)的SqlDataSource控件，用來訪問類所提供的數(shù)據(jù)的ObjectDataSoruce控件等等。你還可以創(chuàng)建你自己的自定義數(shù)據(jù)源控件。

　　數(shù)據(jù)源控件作為你的aspx頁面和底層數(shù)據(jù)的代理。為了顯示數(shù)據(jù)源控件查詢到的數(shù)據(jù)，我們要添加其他Web控件到頁面上，并且將它和數(shù)據(jù)源控件綁定。要綁定一個Web控件到一個數(shù)據(jù)源控件，只需要簡單的設(shè)置這個Web控件的DataSourceID屬性值為數(shù)據(jù)源控件的ID屬性值。

　　為了獲取站點地圖中的數(shù)據(jù)，asp.net提供了SiteMapDataSource控件，它允許我們綁定一個Web控件來顯示我們的站點地圖。TreeView和Menu這兩個Web控件常常用來提供導(dǎo)航用戶界面。要綁定站點地圖中的數(shù)據(jù)到這兩個控件，添加一個SiteMapDataSource控件到頁面中，設(shè)置TreeView或者Menu控件的DataSourceID屬性值為SiteMapDataSource控件的ID屬性值就可以了。舉個例子，我們可以用下面這些標(biāo)記將Menu控件到母板頁中：

1＜divid="navigation"＞ 2＜asp:MenuID="Menu1"runat="server" 3DataSourceID="SiteMapDataSource1"＞ 4＜/asp:Menu＞ 5 6＜asp:SiteMapDataSourceID="SiteMapDataSource1"runat="server"/＞ 7＜/div＞

　　為了生成優(yōu)化的HTML，我們可以綁定SiteMapDataSource控件到Repeater控件，如下：

1＜divid="navigation"＞ 2＜ul＞ 3＜li＞＜asp:HyperLinkrunat="server"ID="lnkHome" 4NavigateUrl="~/Default.aspx"＞Home＜/asp:HyperLink＞＜/li＞ 5 6＜asp:Repeaterrunat="server"ID="menu" 7DataSourceID="SiteMapDataSource1"＞ 8＜ItemTemplate＞ 9＜li＞ 10＜asp:HyperLinkrunat="server" 11NavigateUrl="＜%#Eval("Url")%＞"＞ 12＜%#Eval("Title")%＞ 13＜/asp:HyperLink＞ 14＜/li＞ 15＜/ItemTemplate＞ 16＜/asp:Repeater＞ 17＜/ul＞ 18 19＜asp:SiteMapDataSourceID="SiteMapDataSource1" 20runat="server"ShowStartingNode="false"/＞ 21＜/div＞

　　SiteMapDataSource控件每次返回站點地圖層次中的一級，從站點地圖中的根節(jié)點開始(在我們的站點地圖中是Home),然后是下一個級(Basic Reporting,Filtering Reports和Customized Formatting)等等。

　　當(dāng)將SiteMapDataSource綁定到Repeater時，它遍歷第一級并且用ItemTemplate顯示第一級的每個SiteMapNode實例。我們可以使用Eval(屬性名稱)訪問SiteMapNode的細節(jié)，這樣我們就可以得到SiteMapNode的Url和Title屬性給HyperLink控件。

　　下面顯示的是上面使用Repeater控件例子生成的HTML標(biāo)記：

1＜li＞ 2＜ahref="/Code/BasicReporting/Default.aspx"＞BasicReporting＜/a＞ 3＜/li＞ 4 5＜li＞ 6＜ahref="/Code/Filtering/Default.aspx"＞FilteringReports＜/a＞ 7＜/li＞ 8 9＜li＞ 10＜ahref="/Code/CustomFormatting/Default.aspx"＞ 11CustomizedFormatting＜/a＞ 12＜/li＞

　　從上面可以看出，站點地圖的第二級節(jié)點(Basic Reporting,Filtering Reports和Customized Formatting)被顯示而不是第一個。

　　這是因為SiteMapDataSource控件的ShowStartingNode屬性被設(shè)為false，導(dǎo)致SiteMapDataSource跳過了站點地圖的根節(jié)點取而代之的是從站點地圖的層次的第二級開始返回信息。

　　為了顯示Basic Reporting,Filtering Reports和Customized Formatting的子SiteMapNode，我們可以向先前的Repeater的ItemTemplate里添加另外一個Repeater。第二個Repeater將綁定到SiteMapNode實例的子結(jié)點屬性，如下：

1＜asp:Repeaterrunat="server"ID="menu"DataSourceID="SiteMapDataSource1"＞ 2＜ItemTemplate＞ 3＜li＞ 4＜asp:HyperLinkrunat="server" 5NavigateUrl="＜%#Eval("Url")%＞"＞ 6＜%#Eval("Title")%＞＜/asp:HyperLink＞ 7 8＜asp:Repeaterrunat="server" 9DataSource="＜%#((SiteMapNode) 10Container.DataItem).ChildNodes%＞"＞ 11＜HeaderTemplate＞ 12＜ul＞ 13＜/HeaderTemplate＞ 14 15＜ItemTemplate＞ 16＜li＞ 17＜asp:HyperLinkrunat="server" 18NavigateUrl="＜%#Eval("Url")%＞"＞ 19＜% #Eval("Title")%＞＜/asp:HyperLink＞ 20＜/li＞ 21＜/ItemTemplate＞ 22 23＜FooterTemplate＞ 24＜/ul＞ 25＜/FooterTemplate＞ 26＜/asp:Repeater＞ 27＜/li＞ 28＜/ItemTemplate＞ 29＜/asp:Repeater＞

　　這兩個Repeater生成的HTML標(biāo)記（為了節(jié)省篇幅一些標(biāo)記被移除了）：

1＜li＞ 2＜ahref="/Code/BasicReporting/Default.aspx"＞BasicReporting＜/a＞ 3＜ul＞ 4＜li＞ 5＜ahref="/Code/BasicReporting/SimpleDisplay.aspx"＞ 6SimpleDisplay＜/a＞ 7＜/li＞ 8＜li＞ 9＜ahref="/Code/BasicReporting/DeclarativeParams.aspx"＞ 10DeclarativeParameters＜/a＞ 11＜/li＞ 12＜li＞ 13＜ahref="/Code/BasicReporting/ProgrammaticParams.aspx"＞ 14SettingParameterValues＜/a＞ 15＜/li＞ 16＜/ul＞ 17＜/li＞ 18 19＜li＞ 20＜ahref="/Code/Filtering/Default.aspx"＞FilteringReports＜/a＞ 21 22＜/li＞ 23 24＜li＞ 25＜ahref="/Code/CustomFormatting/Default.aspx"＞ 26CustomizedFormatting＜/a＞ 27 28＜/li＞

　　使用的CSS風(fēng)格選擇自Rachel Andrew的書：The CSS Anthology: 101 Essential Tips, Tricks, & Hacks，＜ul＞和＜li＞元素的風(fēng)格將顯示如下：


圖11：用兩個Repeater和一些CSS顯示的菜單

　　這個菜單在母板頁中定義的，綁定了在Web.sitemap中定義的站點地圖，這意味著所有站點地圖的修改會立即反應(yīng)到所有使用了Site.master母板頁的頁面。
　　關(guān)掉視圖狀態(tài)

　　所有的asp.net控件可以隨意的保持它們的狀態(tài)到View State（譯注：當(dāng)原文中采用的是開頭字母大寫的ViewState將不翻譯）中，最終生成HTML時它被系列化并保存在一個隱藏的表單域中。控件用ViewState來記憶它們在頁面返回時被程序改變的狀態(tài)，比如Web控件綁定的數(shù)據(jù)。如果視圖狀態(tài)允許信息可以在頁面返回時保持，它會增大發(fā)送到客戶端HTML代碼的尺寸，如果在沒有確切的監(jiān)控下會使頁面膨脹得很厲害。數(shù)據(jù)顯示控件－尤其是GridView控件－會顯著地增加大量的額外的標(biāo)記到頁面中。當(dāng)然，這些增長可能對寬帶用戶毫無影響，但是視圖狀態(tài)會給撥號上網(wǎng)的用戶增加幾秒鐘的延遲。

　　要觀察視圖狀態(tài)的影響，在瀏覽器里打開這個頁面然后查看頁面的源代碼(對于Internet Explorer,點擊”查看”菜單并且選擇源代碼選項)。你還可以打開頁面跟蹤選項以觀察這個頁面上每個控件的視圖狀態(tài)。視圖狀態(tài)的信息被系列化并放在位于跟隨在＜form＞標(biāo)簽后面的＜div＞元素里的名為_VIEWSTATE的隱藏表單域中。

　　視圖狀態(tài)只在頁面上使用了Form時才會被保持；如果你的aspx頁面沒有包含＜form runat=”server”＞的聲明，那么最后產(chǎn)生的HTML標(biāo)記中將不含有VIEWSTATE隱藏表單域。

　　母板頁產(chǎn)生的VIEWSTATE隱藏表單域大概有1800個字節(jié)。這些額外的數(shù)據(jù)主要是SiteMapDataSource控件為Repeater控件提供的數(shù)據(jù)內(nèi)容產(chǎn)生的。也許1800字節(jié)左右看起來還不算很多，但是使用了GridView并且使用了很多字段和記錄的視圖狀態(tài)很容易就膨脹10倍或更多。

　　可以將EnableViewState屬性設(shè)為false在頁面級或者控件級關(guān)閉視圖狀態(tài)，從而可以減少產(chǎn)生的標(biāo)記的大小。Web控件利用視圖狀態(tài)在頁面返回時保持要綁定到數(shù)據(jù)顯示控件的數(shù)據(jù)，當(dāng)關(guān)閉了數(shù)據(jù)顯示控件的視圖狀態(tài)后，在每次頁面返回時都必須重新綁定數(shù)據(jù)到控件。在asp.net 1.x的時候這個職責(zé)落到開發(fā)者身上；在asp.net 2.0里，頁面返回時，數(shù)據(jù)顯示控件會在必要的時候重新綁定數(shù)據(jù)。

　　設(shè)置Repeater控件的EnableViewState為false可以減少頁面的視圖狀態(tài)。可以通過屬性窗口設(shè)置或者在代碼視圖里手動修改。通過這些改變,Repeater標(biāo)記將會像這樣：

1＜asp:Repeaterrunat="server"ID="menu"DataSourceID="SiteMapDataSource1"EnableViewState="False"＞ 2＜ItemTemplate＞ 3＜i＞ItemTemplatecontentsomittedforbrevity＜/i＞ 4＜/ItemTemplate＞ 5＜/asp:Repeater＞

　　經(jīng)過這些變化，頁面產(chǎn)生的視圖狀態(tài)減少到52個字節(jié)，減少了97％的視圖狀態(tài)數(shù)據(jù)！在這個指南系列里我會關(guān)閉所有數(shù)據(jù)控件的視圖狀態(tài)以減少產(chǎn)生標(biāo)記的大小。在大多數(shù)例子里會在沒有提示的情況下將EnableViewState屬性設(shè)為false。

　　僅有當(dāng)數(shù)據(jù)Web控件必須打開它的視圖狀態(tài)才能提供期望的功能的情況下我們才討論。

　　步驟5：添加breadcrumb導(dǎo)航

　　為完成母板頁，讓我們給每個頁面添加一個breadcrumb導(dǎo)航UI元素。breadcrum導(dǎo)航會快速的顯示用戶當(dāng)前在站點中的位置。添加一個breadcrumb導(dǎo)航在asp.net 2.0中是簡單的－只要添加一個SiteMapPath控件到頁面上就可以了；不需要更多的代碼。

　　在我們的站點中，添加這個控件到頭部的＜div＞標(biāo)簽中：

1＜spanclass="breadcrumb"＞ 2＜asp:SiteMapPathID="SiteMapPath1"runat="server"＞ 3＜/asp:SiteMapPath＞ 4＜/span＞

　　breadcrum導(dǎo)航控件顯示了用戶當(dāng)前訪問的頁面以及它的父級節(jié)點，直至到根節(jié)點（在我們的站點地圖中是Home）。


圖12：利用位置導(dǎo)航控件顯示在站點地圖層次中的當(dāng)前頁面及其父頁面

　　步驟6：給每個部分添加默認頁面

　　在我們的站點中這個課程被分成不同的分類－Basic Reporting,Filtering,Custom Formatting等等－每個分類有一個文件夾并且有對應(yīng)課程的aspx頁面。并且，每個文件夾里包含一個Default.aspx頁面。在這個默認頁面中，將顯示這個部分的所有課程。比如，我們可以通過BasicReporting文件夾里的Default.aspx頁面連接到SimpleDisplay.aspx,DeclarativeParams.aspx和ProgrammaticParams.aspx。這里，我們可以再次使用SiteMap類和一個數(shù)據(jù)顯示控件顯示定義在Web.sitemap文件內(nèi)的站點地圖的信息。

　　讓我們再次使用Repeater顯示一個無序列表，不過這次我們會顯示指南的標(biāo)題和描述。我們需要在每個Default.aspx頁面重復(fù)這些標(biāo)記和代碼，我們可以將這個UI邏輯封裝成一個User Control。在站點中添加一個名為UserControls的文件夾并添加一個名為SectionLevelTutorialListing.ascx的Web用戶控件，它包含一下標(biāo)記：


圖13：向UserControls文件夾里添加新Web用戶控件

　　SectionLevelTutorialListing.ascx

 

1＜%@ControlLanguage="C#"AutoEventWireup="true"CodeFile="SectionLevelTutorialListing.ascx.cs" 　Inherits="UserControls_SectionLevelTutorialListing"%＞ 2＜asp:RepeaterID="TutorialList"runat="server"EnableViewState="False"＞ 3＜HeaderTemplate＞＜ul＞＜/HeaderTemplate＞ 4＜ItemTemplate＞ 5＜li＞＜asp:HyperLinkrunat="server" 6NavigateUrl="＜%#Eval("Url")%＞"Text="＜%#Eval("Title") 7%＞"＞＜/asp:HyperLink＞ 8-＜%#Eval("Description")%＞＜/li＞ 9＜/ItemTemplate＞ 10＜FooterTemplate＞＜/ul＞＜/FooterTemplate＞ 11＜/asp:Repeater＞ SectionLevelTutorialListing.ascx.cs 1usingSystem; 2usingSystem.Data; 3usingSystem.Configuration; 4usingSystem.Collections; 5usingSystem.Web; 6usingSystem.Web.Security; 7usingSystem.Web.UI; 8usingSystem.Web.UI.WebControls; 9usingSystem.Web.UI.WebControls.WebParts; 10usingSystem.Web.UI.HtmlControls; 11 12publicpartialclassUserControls_SectionLevelTutorialListing:System.Web.UI.UserControl 13{ 14protectedvoidPage_Load(objectsender,EventArgse) 15{ 16//IfSiteMap.CurrentNodeisnotnull, 17//bindCurrentNodeChildNodestotheGridView 18if(SiteMap.CurrentNode!=null) 19{ 20TutorialList.DataSource=SiteMap.CurrentNode.ChildNodes; 21TutorialList.DataBind(); 22} 23} 24}

　　在前面的Repeater例子中我將SiteMap的數(shù)據(jù)綁定到Repeater上；當(dāng)然，這個SectionLevelTutorialListing用戶控件也將使用這種方法。在Page_Load事件里，有一個檢測程序以確保這是否是第一次訪問該頁面（不是返回）并且這個頁面的URL要映射到站點地圖中的一個節(jié)點。如果頁面使用了這個用戶控件，那么就沒有對應(yīng)的
＜siteMapNode＞,SiteMap.CurrentNode會返回null并且將沒有數(shù)據(jù)綁定到Repeater控件。假設(shè)我們有一個CurrentNode,我可以將它的ChildNodes集合綁定到這個Repeater。每個部分的Default.aspx頁面是這個部分內(nèi)教程的父節(jié)點，這些代碼會展示每個部分內(nèi)教程的連接和描述，下面是屏幕截圖：

　　一旦這個Repeater創(chuàng)建好后，在設(shè)計視圖里打開每個文件夾的Default.aspx頁面，將這個用戶控件拖到你要顯示的地方。


圖14：用戶控件已經(jīng)添加到Default.aspx頁面上


圖15：Basic Reporting指南的列表

　　總結(jié)

　　完成站點地圖和母板頁后，現(xiàn)在我們的教程站點擁有統(tǒng)一的頁面布局和導(dǎo)航體系。盡管我們的站點有很多頁面，但是我們可以集中的更新站點頁面布局和站點導(dǎo)航信息。明確一點，頁面布局信息在母板頁Site.master中定義，站點地圖在Web.sitemap中定義。我們不需要寫任何代碼就完成了站點頁面布局和導(dǎo)航機制，Visual Studio提供了所見即所得的設(shè)計時支持。

　　完成了數(shù)據(jù)訪問層和業(yè)務(wù)邏輯層并且定義了一個統(tǒng)一的頁面布局和站點導(dǎo)航系統(tǒng)，下一步我們將探索通用報表模式。在接下來的三個指南里我們將會看到基本報表任務(wù)-用GridView,DetailsView和FormView控件顯示從業(yè)務(wù)邏輯層獲取的數(shù)據(jù)。