您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)在ASP.NET 2.0中如何創(chuàng)建母版頁(yè)和站點(diǎn)導(dǎo)航,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
導(dǎo)言
通常,用戶友好的個(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è)允許開發(fā)者創(chuàng)建統(tǒng)一的站點(diǎn)模板和指定的可編輯區(qū)域。這樣,aspx頁(yè)面只需要給模板頁(yè)中指定的可編輯區(qū)域提供填充內(nèi)容就可以了,所有在母板頁(yè)中定義的其他標(biāo)記將出現(xiàn)在所有使用了該母板頁(yè)的aspx頁(yè)面中。這種模式允許開發(fā)者可以統(tǒng)一的管理和定義站點(diǎn)的頁(yè)面布局,因此可以容易的得到擁有統(tǒng)一的視覺和感覺的頁(yè)面并且還易于更新。
站點(diǎn)導(dǎo)航系統(tǒng)允許開發(fā)者定義站點(diǎn)地圖并提供了API以便通過程序查詢站點(diǎn)地圖信息。新的導(dǎo)航控件包括Menu,TreeView和SiteMapPath,這樣可以很容易的在一個(gè)一般的導(dǎo)航用戶界面元素里呈現(xiàn)全部或者部分站點(diǎn)地圖。我們將使用默認(rèn)的站點(diǎn)導(dǎo)航提供者,這意味著我們的站點(diǎn)地圖將定義在一個(gè)xml格式的文件中。
為說明這些觀念并且使我們的教程的示例站點(diǎn)可用性更佳,讓我們通過本次課程定義一個(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è)類型化的DataSet(Northwind.xsd,位于App_Code文件夾),業(yè)務(wù)邏輯層類庫(kù)(ProductsBLL.cs,CategoriesBLL.cs等等,這些都在App_Code文件夾里),數(shù)據(jù)庫(kù)(NORTHWIND.MDF,位于App_Data文件夾),配置文件(web.config),和一個(gè)CSS文件(Style.css)。
我整理這些頁(yè)面和文件以說明前面兩次課程中介紹的數(shù)據(jù)訪問層和業(yè)務(wù)邏輯層將會(huì)在以后課程的更多細(xì)節(jié)中重用這些示例。
圖2:我們項(xiàng)目中的文件
要?jiǎng)?chuàng)建一個(gè)母板頁(yè),用右鍵點(diǎn)擊解決方案管理器中的項(xiàng)目名稱并選擇添加新項(xiàng)。然后從模板列表窗口中選擇母板類型并且命名為Site.master
圖3:添加一個(gè)母板頁(yè)到站點(diǎn)中
在母板頁(yè)中定義站點(diǎn)統(tǒng)一的頁(yè)面布局。你可以用設(shè)計(jì)視圖定義你需要的布局或者控件,你還可以手動(dòng)的在代碼視圖中添加標(biāo)記。在我們的母板頁(yè)中使用了定義在外部文件Style.css中的層疊樣式表來定義位置和風(fēng)格。也許你不知道下面這些標(biāo)記怎樣顯示,樣式表規(guī)則定義了導(dǎo)航用的<div>標(biāo)簽中的內(nèi)容絕對(duì)定位在頁(yè)面的左邊并且寬度固定為200像素。
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"> <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ū)域是通過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è)
步驟2:給站點(diǎn)添加一個(gè)主頁(yè)
定義母板頁(yè)后,我們準(zhǔn)備給站點(diǎn)添加一些aspx頁(yè)面。讓我們從添加我們的首頁(yè)Degault.aspx開始吧。在解決方案管理器中右鍵點(diǎn)擊項(xiàng)目名稱并且選擇添加新建項(xiàng)目。從模板列表中選擇Web Form選項(xiàng)并且命名為Default.aspx。并且,勾上“選擇母板頁(yè)”的復(fù)選框。
圖5:添加一個(gè)新Web Form并且勾上“選擇母板頁(yè)”的復(fù)選框
點(diǎn)擊確定按鈕后,將會(huì)詢問你新建的這個(gè)aspx頁(yè)面使用哪個(gè)母板頁(yè)。也許你有多個(gè)母板頁(yè)在你的項(xiàng)目中,但是我們只有一個(gè)。
圖6:選擇你要使用的母板頁(yè)
選擇母板頁(yè)后,新建的aspx會(huì)包含下面這些標(biāo)記:
Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server"> </asp:Content>
在@Page指令中有一個(gè)指向母板頁(yè)的引用(MasterPageFile=”~/Site.master”),并且aspx頁(yè)面的標(biāo)記中包含了一個(gè)Content控件對(duì)應(yīng)母板頁(yè)中定義的ContentPlaceHolder控件,這個(gè)Content控件的ContentPlaceHolderID屬性映射到指定的ContentPlaceHolder控件。你可以在Content控件中放置你想顯示在相應(yīng)ContentPlaceHolder控件位置的標(biāo)記。
設(shè)置@Page指令的Title屬性為Home并且添加一些歡迎詞到Content控件中:
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"> <h2>Welcome to the Working with Data Tutorial Site</h2> <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> <li>And more!</li> </ul> </asp:Content>
@Page指令中的Title屬性允許我們可以在aspx頁(yè)面定義標(biāo)題,即使母板頁(yè)中已經(jīng)定義了<title>元素。我們還可以使用Page.Title的編程方式設(shè)置頁(yè)面的標(biāo)題。需要注意的是母板頁(yè)中引用的樣式表(如Style.css)會(huì)自動(dòng)校正以應(yīng)用到每個(gè)aspx頁(yè)面中,這是與aspx頁(yè)面的目錄和母板頁(yè)目錄之間的關(guān)系無關(guān)。
切換到設(shè)計(jì)視圖我們會(huì)看到我們的頁(yè)面將在瀏覽器中的顯示效果。注意:在設(shè)計(jì)視圖里,aspx頁(yè)面的內(nèi)容只有可編輯區(qū)域可以被修改,在母板頁(yè)定義的非ContentPlaceHolder部分標(biāo)記被顯示成灰色。
圖7:在設(shè)計(jì)視圖中顯示的可編輯區(qū)域及非可編輯區(qū)域
當(dāng)Default.aspx頁(yè)面被瀏覽器訪問時(shí),asp.net引擎會(huì)合并母板頁(yè)的內(nèi)容和aspx頁(yè)的內(nèi)容,并且將合并的內(nèi)容呈現(xiàn)為最終的HTML發(fā)送到瀏覽器。當(dāng)母板頁(yè)的內(nèi)容被更新,所有使用了這個(gè)母板頁(yè)的aspx頁(yè)面會(huì)在下次被請(qǐng)求時(shí)重新和新的母板頁(yè)內(nèi)容合并。簡(jiǎn)單的說,母板頁(yè)模型允許定義一個(gè)統(tǒng)一的布局模板(母板頁(yè)),當(dāng)它改變時(shí)整個(gè)站點(diǎn)會(huì)反應(yīng)這種改變。
添加更多的頁(yè)面到站點(diǎn)中
讓我們花一點(diǎn)時(shí)間添加另外的頁(yè)面到站點(diǎn)中,以便支持最終的各種各樣的課程的示例。這里總共會(huì)有超過35個(gè)示例,所以我們先創(chuàng)建一部分。以后會(huì)有很多類別的示例,為了更好的管理這些示例我們給每個(gè)分類添加一個(gè)文件夾?,F(xiàn)在我們添加三個(gè)文件夾:
· BasicReporting
· Filtering
· CustomFormatting
最后,如圖8所示向解決方案管理器中添加新文件。每添加一個(gè)文件的時(shí)候記住要勾上“選擇母板頁(yè)”的復(fù)選框。
圖8:添加下列文件
第三步:添加站點(diǎn)地圖
管理一個(gè)由大量網(wǎng)頁(yè)組成的網(wǎng)站的其中一個(gè)挑戰(zhàn)是要為訪問者瀏覽網(wǎng)站提供一個(gè)捷徑。作為開始,站點(diǎn)的導(dǎo)航結(jié)構(gòu)必須被定義。下一步,這個(gè)結(jié)構(gòu)必須轉(zhuǎn)換成適于導(dǎo)航的用戶界面元素,比如菜單或者位置導(dǎo)航。當(dāng)有新頁(yè)面添加到站點(diǎn)和已有的頁(yè)面被移除的時(shí)候這個(gè)過程將要修改和校正。
在asp.net 2.0以前,開發(fā)者需要自己創(chuàng)建站點(diǎn)導(dǎo)航結(jié)構(gòu),維護(hù)它并且將它轉(zhuǎn)化為適于導(dǎo)航的用戶界面元素。在asp.net 2.0里,開發(fā)者可以利用非常靈活的且內(nèi)置的站點(diǎn)導(dǎo)航系統(tǒng)。Asp.net 2.0站點(diǎn)導(dǎo)航系統(tǒng)允許開發(fā)者定義一個(gè)站點(diǎn)地圖并且提供了可以訪問這些信息的API。
默認(rèn)的Asp.net站點(diǎn)地圖提供者期望站點(diǎn)地圖信息存儲(chǔ)在xml格式的文件中。但是,建立在提供者模型上的站點(diǎn)導(dǎo)航系統(tǒng)是可以被擴(kuò)展的以支持多種方式儲(chǔ)存的站點(diǎn)地圖。Jeff Prosise的文章,The SQL Site Map Provider You've Been Waiting For展示了怎樣創(chuàng)建將站點(diǎn)地圖存儲(chǔ)在SQL Server數(shù)據(jù)庫(kù)里的提供者;另外一個(gè)選擇是基于文件系統(tǒng)的站點(diǎn)地圖提供者。
在這個(gè)指南中,我們?nèi)匀皇褂肁SP.NET2.0里默認(rèn)的站點(diǎn)地圖提供者。要?jiǎng)?chuàng)建站點(diǎn)地圖,在解決方案管理器里右鍵點(diǎn)擊項(xiàng)目名稱,選擇添加新項(xiàng),然后選擇站點(diǎn)地圖類型。命名為Web.sitemap然后單擊添加按鈕。
圖9:向你的項(xiàng)目中添加站點(diǎn)地圖
站點(diǎn)地圖文件是一個(gè)xml文件。注意:Visual Studio可以為站點(diǎn)地圖結(jié)構(gòu)提供智能感知。站點(diǎn)地圖文件必須含有<siteMap>作為根節(jié)點(diǎn),它必須至少含有一個(gè)<siteMapNode>子節(jié)點(diǎn)。這個(gè)<siteMapNode>元素又可以包含任意數(shù)量的<siteMapNode>子元素。
站點(diǎn)地圖模擬了文件系統(tǒng)。為每個(gè)文件夾添加一個(gè)<siteMapNode>元素,并且為每個(gè)aspx頁(yè)面添加一個(gè)<siteMapNode>子元素,如此:
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 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>
站點(diǎn)地圖定義了這個(gè)站點(diǎn)的導(dǎo)航結(jié)構(gòu),它是層次結(jié)構(gòu)的以便描述站點(diǎn)中各種各樣的區(qū)域。在Web.sitemap中的每個(gè)<siteMapNode>元素描述了一個(gè)站點(diǎn)結(jié)構(gòu)中的一個(gè)區(qū)域。
圖10:站點(diǎn)地圖描述了一個(gè)層次的導(dǎo)航結(jié)構(gòu)
Asp.net通過DotNET 框架中的SiteMap類顯示站點(diǎn)地圖的結(jié)構(gòu)。這個(gè)類有一個(gè)CurrentNode屬性,它返回當(dāng)前用戶正在訪問的節(jié)點(diǎn)的信息;RootNode屬性返回站點(diǎn)地圖的根節(jié)點(diǎn)信息(在我們的站點(diǎn)地圖中是Home)。CurrentNode呵RootNode屬性都返回SiteMapNode實(shí)例,SiteMapNode包含ParentNode,ChildNodes,NextSibling,PreviousSibling等屬性,這些屬性允許站點(diǎn)地圖的層次可以被遍歷。
步驟4:利用站點(diǎn)地圖顯示菜單
在asp.net 2.0中我們可以像asp.net 1.x一樣,有多種編程方式可以訪問數(shù)據(jù),還可以通過新的數(shù)據(jù)源控件訪問。
這里有多個(gè)內(nèi)置的數(shù)據(jù)源控件,比如用來訪問關(guān)系數(shù)據(jù)庫(kù)數(shù)據(jù)的SqlDataSource控件,用來訪問類所提供的數(shù)據(jù)的ObjectDataSoruce控件等等。你還可以創(chuàng)建你自己的自定義數(shù)據(jù)源控件。
數(shù)據(jù)源控件作為你的aspx頁(yè)面和底層數(shù)據(jù)的代理。為了顯示數(shù)據(jù)源控件查詢到的數(shù)據(jù),我們要添加其他Web控件到頁(yè)面上,并且將它和數(shù)據(jù)源控件綁定。要綁定一個(gè)Web控件到一個(gè)數(shù)據(jù)源控件,只需要簡(jiǎn)單的設(shè)置這個(gè)Web控件的DataSourceID屬性值為數(shù)據(jù)源控件的ID屬性值。
為了獲取站點(diǎn)地圖中的數(shù)據(jù),asp.net提供了SiteMapDataSource控件,它允許我們綁定一個(gè)Web控件來顯示我們的站點(diǎn)地圖。TreeView和Menu這兩個(gè)Web控件常常用來提供導(dǎo)航用戶界面。要綁定站點(diǎn)地圖中的數(shù)據(jù)到這兩個(gè)控件,添加一個(gè)SiteMapDataSource控件到頁(yè)面中,設(shè)置TreeView或者M(jìn)enu控件的DataSourceID屬性值為SiteMapDataSource控件的ID屬性值就可以了。舉個(gè)例子,我們可以用下面這些標(biāo)記將Menu控件到母板頁(yè)中:
<div id="navigation"> <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"> </asp:Menu> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> </div>
為了生成優(yōu)化的HTML,我們可以綁定SiteMapDataSource控件到Repeater控件,如下:
<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 runat="server" NavigateUrl='<%# Eval("Url") %>'> <%# Eval("Title") %></asp:HyperLink> </li> </ItemTemplate> </asp:Repeater> </ul> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" /> </div>
SiteMapDataSource控件每次返回站點(diǎn)地圖層次中的一級(jí),從站點(diǎn)地圖中的根節(jié)點(diǎn)開始(在我們的站點(diǎn)地圖中是Home),然后是下一個(gè)級(jí)(Basic Reporting,Filtering Reports和Customized Formatting)等等。
當(dāng)將SiteMapDataSource綁定到Repeater時(shí),它遍歷第一級(jí)并且用ItemTemplate顯示第一級(jí)的每個(gè)SiteMapNode實(shí)例。我們可以使用Eval(屬性名稱)訪問SiteMapNode的細(xì)節(jié),這樣我們就可以得到SiteMapNode的Url和Title屬性給HyperLink控件。
下面顯示的是上面使用Repeater控件例子生成的HTML標(biāo)記:
<li> <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a> </li> <li> <a href="/Code/Filtering/Default.aspx">Filtering Reports</a> </li> <li> <a href="/Code/CustomFormatting/Default.aspx"> Customized Formatting</a> </li>
從上面可以看出,站點(diǎn)地圖的第二級(jí)節(jié)點(diǎn)(Basic Reporting,Filtering Reports和Customized Formatting)被顯示而不是第一個(gè)。
這是因?yàn)镾iteMapDataSource控件的ShowStartingNode屬性被設(shè)為false,導(dǎo)致SiteMapDataSource跳過了站點(diǎn)地圖的根節(jié)點(diǎn)取而代之的是從站點(diǎn)地圖的層次的第二級(jí)開始返回信息。
為了顯示Basic Reporting,Filtering Reports和Customized Formatting的子SiteMapNode,我們可以向先前的Repeater的ItemTemplate里添加另外一個(gè)Repeater。第二個(gè)Repeater將綁定到SiteMapNode實(shí)例的子結(jié)點(diǎn)屬性,如下:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"> <ItemTemplate> <li> <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'> <%# Eval("Title") %></asp:HyperLink> <asp:Repeater runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'> <HeaderTemplate> <ul> </HeaderTemplate> <ItemTemplate> <li> <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'> <%# Eval("Title") %></asp:HyperLink> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </li> </ItemTemplate> </asp:Repeater>
這兩個(gè)Repeater生成的HTML標(biāo)記(為了節(jié)省篇幅一些標(biāo)記被移除了):
<li> <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a> <ul> <li> <a href="/Code/BasicReporting/SimpleDisplay.aspx"> Simple Display</a> </li> <li> <a href="/Code/BasicReporting/DeclarativeParams.aspx"> Declarative Parameters</a> </li> <li> <a href="/Code/BasicReporting/ProgrammaticParams.aspx"> Setting Parameter Values</a> </li> </ul> </li> <li> <a href="/Code/Filtering/Default.aspx">Filtering Reports</a> ... </li> <li> <a href="/Code/CustomFormatting/Default.aspx"> Customized Formatting</a> ... </li>
使用的CSS風(fēng)格選擇自Rachel Andrew的書:The CSS Anthology: 101 Essential Tips, Tricks, & Hacks,<ul>和<li>元素的風(fēng)格將顯示如下:
圖11:用兩個(gè)Repeater和一些CSS顯示的菜單
這個(gè)菜單在母板頁(yè)中定義的,綁定了在Web.sitemap中定義的站點(diǎn)地圖,這意味著所有站點(diǎn)地圖的修改會(huì)立即反應(yīng)到所有使用了Site.master母板頁(yè)的頁(yè)面。
關(guān)掉視圖狀態(tài)
所有的asp.net控件可以隨意的保持它們的狀態(tài)到View State(譯注:當(dāng)原文中采用的是開頭字母大寫的ViewState將不翻譯)中,最終生成HTML時(shí)它被系列化并保存在一個(gè)隱藏的表單域中。控件用ViewState來記憶它們?cè)陧?yè)面返回時(shí)被程序改變的狀態(tài),比如Web控件綁定的數(shù)據(jù)。如果視圖狀態(tài)允許信息可以在頁(yè)面返回時(shí)保持,它會(huì)增大發(fā)送到客戶端HTML代碼的尺寸,如果在沒有確切的監(jiān)控下會(huì)使頁(yè)面膨脹得很厲害。數(shù)據(jù)顯示控件-尤其是GridView控件-會(huì)顯著地增加大量的額外的標(biāo)記到頁(yè)面中。當(dāng)然,這些增長(zhǎng)可能對(duì)寬帶用戶毫無影響,但是視圖狀態(tài)會(huì)給撥號(hào)上網(wǎng)的用戶增加幾秒鐘的延遲。
要觀察視圖狀態(tài)的影響,在瀏覽器里打開這個(gè)頁(yè)面然后查看頁(yè)面的源代碼(對(duì)于Internet Explorer,點(diǎn)擊”查看”菜單并且選擇源代碼選項(xiàng))。你還可以打開頁(yè)面跟蹤選項(xiàng)以觀察這個(gè)頁(yè)面上每個(gè)控件的視圖狀態(tài)。視圖狀態(tài)的信息被系列化并放在位于跟隨在<form>標(biāo)簽后面的<div>元素里的名為_VIEWSTATE的隱藏表單域中。
視圖狀態(tài)只在頁(yè)面上使用了Form時(shí)才會(huì)被保持;如果你的aspx頁(yè)面沒有包含
<form runat=”server”>的聲明,那么最后產(chǎn)生的HTML標(biāo)記中將不含有VIEWSTATE隱藏表單域。
母板頁(yè)產(chǎn)生的VIEWSTATE隱藏表單域大概有1800個(gè)字節(jié)。這些額外的數(shù)據(jù)主要是SiteMapDataSource控件為Repeater控件提供的數(shù)據(jù)內(nèi)容產(chǎn)生的。也許1800字節(jié)左右看起來還不算很多,但是使用了GridView并且使用了很多字段和記錄的視圖狀態(tài)很容易就膨脹10倍或更多。
可以將EnableViewState屬性設(shè)為false在頁(yè)面級(jí)或者控件級(jí)關(guān)閉視圖狀態(tài),從而可以減少產(chǎn)生的標(biāo)記的大小。Web控件利用視圖狀態(tài)在頁(yè)面返回時(shí)保持要綁定到數(shù)據(jù)顯示控件的數(shù)據(jù),當(dāng)關(guān)閉了數(shù)據(jù)顯示控件的視圖狀態(tài)后,在每次頁(yè)面返回時(shí)都必須重新綁定數(shù)據(jù)到控件。在asp.net 1.x的時(shí)候這個(gè)職責(zé)落到開發(fā)者身上;在asp.net 2.0里,頁(yè)面返回時(shí),數(shù)據(jù)顯示控件會(huì)在必要的時(shí)候重新綁定數(shù)據(jù)。
設(shè)置Repeater控件的EnableViewState為false可以減少頁(yè)面的視圖狀態(tài)。可以通過屬性窗口設(shè)置或者在代碼視圖里手動(dòng)修改。通過這些改變,Repeater標(biāo)記將會(huì)像這樣:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1" EnableViewState="False"> <ItemTemplate> ... <i>ItemTemplate contents omitted for brevity</i> ... </ItemTemplate> </asp:Repeater>
經(jīng)過這些變化,頁(yè)面產(chǎn)生的視圖狀態(tài)減少到52個(gè)字節(jié),減少了97%的視圖狀態(tài)數(shù)據(jù)!在這個(gè)指南系列里我會(huì)關(guān)閉所有數(shù)據(jù)控件的視圖狀態(tài)以減少產(chǎn)生標(biāo)記的大小。在大多數(shù)例子里會(huì)在沒有提示的情況下將EnableViewState屬性設(shè)為false。
僅有當(dāng)數(shù)據(jù)Web控件必須打開它的視圖狀態(tài)才能提供期望的功能的情況下我們才討論。
步驟5:添加breadcrumb導(dǎo)航
為完成母板頁(yè),讓我們給每個(gè)頁(yè)面添加一個(gè)breadcrumb導(dǎo)航UI元素。breadcrum導(dǎo)航會(huì)快速的顯示用戶當(dāng)前在站點(diǎn)中的位置。添加一個(gè)breadcrumb導(dǎo)航在asp.net 2.0中是簡(jiǎn)單的-只要添加一個(gè)SiteMapPath控件到頁(yè)面上就可以了;不需要更多的代碼。
在我們的站點(diǎn)中,添加這個(gè)控件到頭部的<div>標(biāo)簽中:
<span class="breadcrumb"> <asp:SiteMapPath ID="SiteMapPath2" runat="server"> </asp:SiteMapPath> </span>
breadcrum導(dǎo)航控件顯示了用戶當(dāng)前訪問的頁(yè)面以及它的父級(jí)節(jié)點(diǎn),直至到根節(jié)點(diǎn)(在我們的站點(diǎn)地圖中是Home)。
圖12:利用位置導(dǎo)航控件顯示在站點(diǎn)地圖層次中的當(dāng)前頁(yè)面及其父頁(yè)面
步驟6:給每個(gè)部分添加默認(rèn)頁(yè)面
在我們的站點(diǎn)中這個(gè)課程被分成不同的分類-Basic Reporting,Filtering,Custom Formatting等等-每個(gè)分類有一個(gè)文件夾并且有對(duì)應(yīng)課程的aspx頁(yè)面。并且,每個(gè)文件夾里包含一個(gè)Default.aspx頁(yè)面。在這個(gè)默認(rèn)頁(yè)面中,將顯示這個(gè)部分的所有課程。比如,我們可以通過BasicReporting文件夾里的Default.aspx頁(yè)面連接到SimpleDisplay.aspx,DeclarativeParams.aspx和ProgrammaticParams.aspx。這里,我們可以再次使用SiteMap類和一個(gè)數(shù)據(jù)顯示控件顯示定義在Web.sitemap文件內(nèi)的站點(diǎn)地圖的信息。
讓我們?cè)俅问褂肦epeater顯示一個(gè)無序列表,不過這次我們會(huì)顯示指南的標(biāo)題和描述。我們需要在每個(gè)Default.aspx頁(yè)面重復(fù)這些標(biāo)記和代碼,我們可以將這個(gè)UI邏輯封裝成一個(gè)User Control。在站點(diǎn)中添加一個(gè)名為UserControls的文件夾并添加一個(gè)名為SectionLevelTutorialListing.ascx的Web用戶控件,它包含一下標(biāo)記:
圖13:向UserControls文件夾里添加新Web用戶控件
SectionLevelTutorialListing.ascx
<%@ Control Language="CS" AutoEventWireup="true" CodeFile="SectionLevelTutorialListing.ascx.cs" Inherits="UserControls_SectionLevelTutorialListing" %> <asp:Repeater ID="TutorialList" runat="server" EnableViewState="False"> <HeaderTemplate><ul></HeaderTemplate> <ItemTemplate> <li><asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>'></asp:HyperLink> - <%# Eval("Description") %></li> </ItemTemplate> <FooterTemplate></ul></FooterTemplate> </asp:Repeater>
SectionLevelTutorialListing.ascx.cs
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class UserControls_SectionLevelTutorialListing : UserControl { protected void Page_Load(object sender, EventArgs e) { // If SiteMap.CurrentNode is not null, // bind CurrentNode ChildNodes to the GridView if (SiteMap.CurrentNode != null) { TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes; TutorialList.DataBind(); } } }
在前面的Repeater例子中我將SiteMap的數(shù)據(jù)綁定到Repeater上;當(dāng)然,這個(gè)SectionLevelTutorialListing用戶控件也將使用這種方法。在Page_Load事件里,有一個(gè)檢測(cè)程序以確保這是否是第一次訪問該頁(yè)面(不是返回)并且這個(gè)頁(yè)面的URL要映射到站點(diǎn)地圖中的一個(gè)節(jié)點(diǎn)。如果頁(yè)面使用了這個(gè)用戶控件,那么就沒有對(duì)應(yīng)的
<siteMapNode>,SiteMap.CurrentNode會(huì)返回null并且將沒有數(shù)據(jù)綁定到Repeater控件。假設(shè)我們有一個(gè)CurrentNode,我可以將它的ChildNodes集合綁定到這個(gè)Repeater。每個(gè)部分的Default.aspx頁(yè)面是這個(gè)部分內(nèi)教程的父節(jié)點(diǎn),這些代碼會(huì)展示每個(gè)部分內(nèi)教程的連接和描述,下面是屏幕截圖:
一旦這個(gè)Repeater創(chuàng)建好后,在設(shè)計(jì)視圖里打開每個(gè)文件夾的Default.aspx頁(yè)面,將這個(gè)用戶控件拖到你要顯示的地方。
圖14:用戶控件已經(jīng)添加到Default.aspx頁(yè)面上
圖15:Basic Reporting指南的列表
關(guān)于“在ASP.NET 2.0中如何創(chuàng)建母版頁(yè)和站點(diǎn)導(dǎo)航”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。