《ASP NET程序設(shè)計及實踐》課件09-第9章 頁面設(shè)計_第1頁
《ASP NET程序設(shè)計及實踐》課件09-第9章 頁面設(shè)計_第2頁
《ASP NET程序設(shè)計及實踐》課件09-第9章 頁面設(shè)計_第3頁
《ASP NET程序設(shè)計及實踐》課件09-第9章 頁面設(shè)計_第4頁
《ASP NET程序設(shè)計及實踐》課件09-第9章 頁面設(shè)計_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

-1-掌握母版頁的創(chuàng)建和使用熟悉SiteMapPath控件的使用掌握TreeView控件的使用熟悉Menu控件的使用 目標(biāo)-2-母版頁

在Web應(yīng)用開發(fā)過程中，經(jīng)常會遇到Web應(yīng)用程序中的很多頁面的布局都相同的這種情況。在ASP.NET中，可以使用CSS和主題減少多頁面的布局問題，但是CSS和主題在很多情況下還無法勝任多頁面的開發(fā)，這時就需要使用母版頁和內(nèi)容頁。

母版頁可以為Web應(yīng)用程序創(chuàng)建統(tǒng)一的頁面布局和外觀，也可以為應(yīng)用程序中的所有頁面或某一模塊的所有頁面定義其共通的外觀和操作。開發(fā)人員只需創(chuàng)建各自所需的內(nèi)容頁面，當(dāng)程序運(yùn)行時，這些內(nèi)容頁面會和母版頁合并，并結(jié)合母版頁中設(shè)置的布局在客戶端一起輸出。-3-母版頁和內(nèi)容頁母版頁是擴(kuò)展名為.master的ASP.NET文件。使用“@Master”指令來標(biāo)識，其使用語法如下所示。母板頁與內(nèi)容頁的區(qū)別：所有的Web窗體由Page指令開始，而母版頁由Master指令開始，Master指令中的屬性與Page指令相同；ContentPlaceHolder控件只能在母版頁中使用，而不能出現(xiàn)在普通.Web窗體中。<%@MasterLanguage="C#"AutoEventWireup="true" CodeFile="MasterPageName.master.cs"Inherits="MasterPageName"%>-4-母版頁的優(yōu)點在ASP.NET中使用母版頁具有如下幾個優(yōu)點：集中處理頁面的共通功能，便于維護(hù)和更新；可以方便的創(chuàng)建一組控件和代碼，并將其作用于一組頁面，如在母版頁中創(chuàng)建樹形菜單；通過允許控制占位符的呈現(xiàn)方式，母版頁可以讓開發(fā)人員在細(xì)節(jié)上控制最終頁面的布局。-5-創(chuàng)建母版頁-1在解決方案“ch09”中的網(wǎng)站上點擊右鍵，選擇“添加新項”，選擇“母版頁”，指定一個名稱（例如SiteTemplate.master），然后單擊“添加”按鈕。-6-創(chuàng)建母版頁-2創(chuàng)建的母板頁默認(rèn)包含兩個ContentPlaceHolder控件，一個用于定義<head>區(qū)域，允許內(nèi)容頁面能夠增加頁面元數(shù)據(jù)，比如當(dāng)前頁面編碼、樣式表鏈接或JavaScript鏈接等。另一個用于定義<body>區(qū)域，代表頁面顯示的內(nèi)容。可以根據(jù)具體情況在兩個定義的區(qū)域中編寫特定的內(nèi)容。<title>貨品管理系統(tǒng)</title><tablewidth="100%"border="0"cellspacing="0"cellpadding="0"><tr><td><asp:ContentPlaceHolderID="cphContent"runat="server">

內(nèi)容頁部分

</asp:ContentPlaceHolder></td></tr>……-7-內(nèi)容頁每個內(nèi)容頁引用一個母版頁并獲得其布局和內(nèi)容。此外，內(nèi)容頁可以在任意的占位符里加入頁面特定的內(nèi)容，即通過創(chuàng)建各個內(nèi)容頁來填充母版頁中占位符控件的內(nèi)容。內(nèi)容頁通過在“@Page”指令中設(shè)置“MasterPageFile”屬性來指定其使用的母版頁。例如：<%@PageLanguage="C#"MasterPageFile="~/MasterPageName.master"%>內(nèi)容頁的核心控件是“<asp:Content>”，設(shè)置該控件的“ContentPlaceHolderID”屬性可以將內(nèi)容頁映射到母版頁的“ContentPlaceHolder”控件中，其語法格式如下所示。<asp:ContentID="Content1"ContentPlaceHolderID="cphContent"Runat="Server"> ……</asp:Content>-8-創(chuàng)建內(nèi)容頁-1在解決方案“ch09”中的網(wǎng)站上點擊右鍵，選擇“添加新項”，選擇“Web內(nèi)容窗體”，指定一個名稱（例如ContentForm.aspx），并選擇“選擇母版頁”，然后單擊“添加”按鈕，如下圖所示。-9-創(chuàng)建內(nèi)容頁-2創(chuàng)建完成后，彈出如下圖所示窗口，選擇特定的母版頁，點擊“確定”。VisualStudio會自動為母版頁里的每個ContentPlaceHolder創(chuàng)建一個Content控件。-10-創(chuàng)建內(nèi)容頁-3在已經(jīng)創(chuàng)建的母版頁的基礎(chǔ)上，創(chuàng)建內(nèi)容頁。代碼如下所示。<%@PageLanguage="C#"MasterPageFile="~/SiteTemplate.master" AutoEventWireup="true"CodeFile="ContentForm.aspx.cs" Inherits="ContentForm"Title="超市后臺"%><asp:ContentID="Content1"ContentPlaceHolderID="cphContent"runat="Server">

內(nèi)容頁：貨品詳細(xì)信息</asp:Content>…-11-母版頁和內(nèi)容頁內(nèi)容頁的運(yùn)行及編譯原理如下：用戶首先在瀏覽器中輸入網(wǎng)頁的URL地址，發(fā)出對該頁面的請求；獲取該頁面后，Web服務(wù)器引擎讀取頁面的@Page指令。如果該指令包含了對某個母版頁的引用，則在讀取請求頁的同時，也讀取該母版頁。如果該頁面是第一次被訪問，則系統(tǒng)對于這兩個頁都進(jìn)行編譯；后臺引擎將母版頁的內(nèi)容合并到內(nèi)容頁的相應(yīng)占位符控件中；各個Content控件的內(nèi)容合并到母版頁中相應(yīng)的ContentPlaceHolder控件中；瀏覽器將最終合并完整的頁面展現(xiàn)給用戶。-12-站點導(dǎo)航

好的導(dǎo)航系統(tǒng)能夠使用戶在多個頁面間方便的來回瀏覽，從而增加了網(wǎng)站的可操作性。 ASP.NET提供了內(nèi)置的站點導(dǎo)航技術(shù)，使得開發(fā)人員創(chuàng)建站點導(dǎo)航時更加方便和快捷。站點導(dǎo)航由如下三個部分組成：導(dǎo)航控件：使用站點導(dǎo)航控件可以輕松的建立導(dǎo)航信息，站點導(dǎo)航控件包括三種控件，分別是Menu、TreeView、SiteMapPath；站點地圖：是描述站點邏輯結(jié)構(gòu)的文件，該文件實際上是一個XML結(jié)構(gòu)的文件，在網(wǎng)站中添加和刪除頁面的時候，開發(fā)人員只需要更改站點地圖文件就可以管理頁的導(dǎo)航，而不需要修改各個頁面本身的導(dǎo)航鏈接；站點地圖提供程序：用于讀取站點地圖XML文件，默認(rèn)情況下，站點地圖提供程序讀取的是Web.sitemap文件，并直接通過這個文件創(chuàng)建SiteMap對象，再將導(dǎo)航信息顯示到頁面上。-13-站點導(dǎo)航控件導(dǎo)航控件Menu和TreeView控件都用于維護(hù)顯示“名稱/URL”映射的集合，這些集合可以手動進(jìn)行編輯。這些控件能夠基于站點地圖數(shù)據(jù)源信息構(gòu)建用于顯示“名稱/URL”映射的層級集合。SiteMapPath控件單獨(dú)地通過站點地圖數(shù)據(jù)源構(gòu)建用于顯示“名稱/URL”映射的集合。導(dǎo)航控件描述Menu解析站點地圖XML文件中的導(dǎo)航信息并以菜單格式顯示出來。上層的XML節(jié)點會成為上層的菜單項，子XML節(jié)點會成為子菜單項TreeView解析站點地圖XML文件中的導(dǎo)航信息并以樹型格式顯示出來。在文件中的上層站點地圖XML節(jié)點會成為該樹中更高層的節(jié)點，文件中的子節(jié)點會以子樹節(jié)點的形式顯示出來SiteMapPath解析站點地圖XML文件中的導(dǎo)航信息并以“breadcrumb”格式顯示出來。這種情形下，僅僅只有當(dāng)前XML節(jié)點的路徑顯示出來（從根節(jié)點到當(dāng)前子節(jié)點）-14-TreeView控件TreeView控件用于在樹結(jié)構(gòu)中顯示分層數(shù)據(jù)。TreeView控件由節(jié)點組成，樹中的每個項都稱為一個節(jié)點，它由一個TreeNode對象表示。TreeView中的各節(jié)點可以包含其他子節(jié)點，用戶可以按展開或折疊的方式顯示父節(jié)點及其包含的子節(jié)點。數(shù)據(jù)綁定，它允許控件的節(jié)點綁定到XML、表格或關(guān)系數(shù)據(jù)。站點導(dǎo)航，通過與SiteMapDataSource控件集成實現(xiàn)。節(jié)點文本既可以顯示為純文本也可以顯示為超鏈接。借助編程方式訪問TreeView對象模型以動態(tài)地創(chuàng)建樹、填充節(jié)點、設(shè)置屬性等。通過主題、用戶定義的圖像和樣式可實現(xiàn)自定義外觀。-15-TreeView控件屬性屬性描述Nodes返回對TreeView控件的Node對象的集合的引用DataSourceID數(shù)據(jù)源控件的ID值，TreeView控件自動綁定到指定的數(shù)據(jù)源控件PopulateOnDemand是否支持動態(tài)填充節(jié)點HoverNodeStyle節(jié)點在鼠標(biāo)指針置于其上時的樣式設(shè)置LeafNodeStyle葉節(jié)點的樣式設(shè)置NodeStyle節(jié)點的默認(rèn)樣式設(shè)置ParentNodeStyle父節(jié)點的樣式設(shè)置RootNodeStyle根節(jié)點的樣式設(shè)置SelectedNodeStyle所選節(jié)點的樣式設(shè)置LevelStyles控制樹中特定深度的節(jié)點樣式CollapseImageUrl可折疊節(jié)點的指示符所顯示圖像的URL，此圖像通常為一個減號(-)ExpandImageUrl可展開節(jié)點的指示符所顯示圖像的URL，此圖像通常為一個加號(+)LineImagesFolder包含用于連接父節(jié)點和子節(jié)點的線條圖像的文件夾的URL。ShowLines

屬性必須設(shè)置為true，該屬性才能有效NoExpandImageUrl不可展開節(jié)點的指示符所顯示圖像的URLShowCheckBoxes設(shè)置是否在節(jié)點旁顯示一個復(fù)選框ShowLines設(shè)置是否顯示連接樹節(jié)點的線-16-TreeView控件事件事件描述TreeNodeCheckChanged

當(dāng)TreeView控件的復(fù)選框的狀態(tài)有所更改時發(fā)生SelectedNodeChanged

當(dāng)選擇TreeView控件中的節(jié)點時發(fā)生TreeNodeExpanded

當(dāng)展開TreeView控件中的節(jié)點時發(fā)生TreeNodeCollapsed當(dāng)折疊TreeView控件中的節(jié)點時發(fā)生TreeNodePopulate當(dāng)其PopulateOnDemand屬性設(shè)置為true的節(jié)點在展開時發(fā)生TreeNodeDataBound當(dāng)數(shù)據(jù)項綁定到TreeView控件中的節(jié)點時發(fā)生-17-使用TreeView控件使用TreeView控件實現(xiàn)網(wǎng)頁的貨品分類的樹形結(jié)構(gòu)圖在SiteTemplate.master文件中的“左邊菜單欄”區(qū)域的DIV標(biāo)簽中添加下述代碼<asp:TreeViewID="TreeView1"runat="server"></asp:TreeView>為TreeView控件增加導(dǎo)航節(jié)點publicpartialclassSiteTemplate:System.Web.UI.MasterPage{ protectedvoidPage_Load(objectsender,EventArgse) { if(!IsPostBack){ this.TreeView1.ShowLines=true;//在控件中顯示網(wǎng)格線

TreeNoderootNode=newTreeNode();//定義根節(jié)點

rootNode.Text="分類產(chǎn)品"; TreeNodetr1=newTreeNode();//定義子節(jié)點

tr1.Text="電器類"; tr1.NavigateUrl="~/electric.aspx"; rootNode.ChildNodes.Add(tr1);//把子節(jié)點添加到根節(jié)點

… } }}-18-SiteMapPath控件SiteMapPath控件可以將當(dāng)前頁面在網(wǎng)站中的位置以單行導(dǎo)航的形式顯示給用戶，還可以為每一個非末級頁面提供鏈接，以便用戶能快速定位到當(dāng)前頁面的任意上級頁面。屬性描述PathSeparator每個節(jié)點之間的分隔符，默認(rèn)使用大于號（>）分隔鏈接元素PathDirection呈現(xiàn)的路徑方向，可以設(shè)為“RootToCurrent”和“CurrentToRoot”ParentLevelsDisplayed設(shè)置顯示的父節(jié)點層次數(shù)ShowToolTips設(shè)置是否顯示工具提示CurrentNodeStyle當(dāng)前節(jié)點的樣式NodeStyle所有導(dǎo)航節(jié)點的樣式PathSeparatorStyle路徑分隔符的樣式RootNodeStyle根節(jié)點的樣式-19-使用SiteMapPath控件-1站點導(dǎo)航項目文件web.sitemap<?xmlversion="1.0"encoding="utf-8"?><siteMapxmlns="/AspNet/SiteMap-File-1.0"> <siteMapNodeurl="~\ContentForm.aspx"title="分類產(chǎn)品"description=""> <siteMapNodetitle="電器類"url="~\electric.aspx"description=""> <siteMapNodetitle="電視" url="~\television.aspx"description=""></siteMapNode> </siteMapNode> <siteMapNodetitle="水果類"url="~\fruit.aspx"description=""> <siteMapNodetitle="蘋果" url="~\apple.aspx"description=""></siteMapNode> </siteMapNode> <siteMapNodetitle="日用品類"url="~\commodity.aspx"description=""> </siteMapNode> </siteMapNode></siteMap>-20-使用SiteMapPath控件-2<asp:SiteMapPathID="SiteMapPath1"runat="server"Font-Names="Verdana" Font-Size="0.9em"PathSeparator=":"> <PathSeparatorStyleFont-Bold="True"ForeColor="#1C5E55"/> <CurrentNodeStyleForeColor="#333333"/> <NodeStyleFont-Bold="True"ForeColor="#666666"/> <RootNodeStyleFont-Bold="True"ForeColor="#1C5E55"/></asp:SiteMapPath>添加SiteMapPath控件頁面中使用SiteMapPath控件-21-Menu控件Menu控件用于頁面中創(chuàng)建菜單，常與用于導(dǎo)航網(wǎng)站的SiteMapDataSource控件結(jié)合使用。Menu控件支持以下功能：數(shù)據(jù)綁定，經(jīng)Menu控件的菜單項綁定到分層數(shù)據(jù)源。站點導(dǎo)航，與SiteMapDataSource控件結(jié)合使用。在代碼中可以動態(tài)創(chuàng)建菜單，填充菜單項并設(shè)置其屬性。可自定義外觀，通過主題、樣式或模板實現(xiàn)。屬性描述Text菜單項的顯示文本ToolTip菜單項的提示文字Value菜單項的值NavigateUrl菜單項被選中時定位到的URLImageUrl菜單項的圖像的URL-22-使用Menu控件在母版頁中使用Menu控件完成菜單欄。在SiteTemplate.master的“網(wǎng)站頭部”部分的Table標(biāo)簽中插入一行。<asp:MenuID="Menu1"runat="server"BackColor="#E3EAEB"

DynamicHorizontalOffset="2"Font-Names="Verdana"Font-Size="0.9em" ForeColor="blue"StaticSubMenuIndent="10px" Orientation="Horizontal"> <StaticSelectedStyleBackColor="#1C5E55"/> <StaticMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/> <DynamicHoverStyleBackColor="#666666"ForeColor="White"/> <DynamicMenuStyleBackColor="#E3EAEB"/> <DynamicSelectedStyleBackColor="#1C5E55"/> <DynamicMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論