第12講服務(wù)器控件(三).ppt

NET程序設(shè)計 主講教師 李璟e mail 2008sjyx 手機(jī)第12講服務(wù)器控件 三 12 1用戶控件12 2導(dǎo)航控件12 3母版頁12 4服務(wù)器控件綜合實例 12 1用戶控件 如果在應(yīng)用程序反復(fù)多次使用某種類型的功能且ASP NET內(nèi)置的服務(wù)器控件又不能滿足應(yīng)用程序的要求 ASP NET提供了用戶控件的技術(shù)來處理此類問題 用戶控件是ASP NET提供的一種直觀的可重用的模型 用戶控件使開發(fā)人員能夠使用編寫Web窗體頁的相同編程技巧輕松地定義自定義控件 12 1用戶控件 12 1 1用戶控件概述12 1 2創(chuàng)建用戶控件12 1 3設(shè)計用戶控件屬性 12 1 1用戶控件概述 用戶控件是能夠在其中放置標(biāo)記和Web服務(wù)器控件的容器 可以將用戶控件作為一個單元對待 為其定義屬性 方法和事件 用戶控件可以獨立于Web窗體而單獨使用 使程序員能夠很容易地跨ASP NETWeb應(yīng)用程序劃分和重復(fù)使用公共UI功能 用戶控件和ASP NET窗體頁的相同點 1 都可以向其中添加所需的標(biāo)記和子控件 具有用戶界面頁 2 都包含對其內(nèi)容進(jìn)行操作的事件代碼 操作方法也相同 3 在第一次請求時被編譯并存儲在服務(wù)器內(nèi)存中 縮短以后請求的響應(yīng)時間 用戶控件和ASP NET窗體頁的不同點 用戶控件擴(kuò)展名為 ascx 代碼擴(kuò)展名為為 ascx cs 用戶控件沒有Page指令和html body或者form元素 不能直接顯示在瀏覽器上 只能通過在頁面中被使用才能顯示在瀏覽器上 12 1 2創(chuàng)建用戶控件 用戶控件的聲明語法和創(chuàng)建ASP NET頁面的語法非常的相似 其主要的差別在于 用戶控件使用 Control指令取代了 Page指令 用戶控件在內(nèi)容外部不包括html body和form元素 1 啟動VS2008打開或者新建一個網(wǎng)站 在 解決資源管理器 窗格中 右擊選擇網(wǎng)站URL 打開快捷菜單 選擇 添加新項 在 添加新項 對話框的對話框中單擊 Web用戶控件 名稱 框中輸入Web用戶控件的名稱 WebUserControl1 ascx后 單擊 添加 按鈕 2 VS2008將在網(wǎng)站所在的根目錄中創(chuàng)建WebUserControl1 ascx文件及后臺代碼WebUserControl1 ascx cs 用戶控件示例 3 自動生成的WebUserControl1 ascx文件中如下所示一行代碼 4 在該用戶控件的HTML 設(shè)計 視圖中 添加一個TextBox控件TextBox1 此時 用戶控件設(shè)計好了 12 1 3設(shè)計用戶控件屬性 為用戶控件添加屬性體現(xiàn)了他的靈活性和強(qiáng)大功能 用戶控件與普通的Web頁面不同 可以定義屬性 并且可以在包含它的頁面中設(shè)置和讀取這些屬性 12 1 3設(shè)計用戶控件屬性 接下來為上面創(chuàng)建的用戶控件添加一個屬性 為用控件添加屬性非常的簡單 只需在 ascx cs文件中添加一個屬性即可 下面在該用戶控件中為其添加一個屬性Content 可以實現(xiàn)對用戶控件中TextBox1的Text屬性的讀寫 代碼如下所示 publicstringContent get returnTextBox1 Text set TextBox1 Text value 用戶控件示例續(xù) 為用戶控件添加完屬性后 再新建一個Web頁面Default6 aspx以測試該屬性 步驟如下 1 把用戶控件WebUserControl1 ascx拖放到Default6 aspx窗體上 選擇菜單 生成 重新生成網(wǎng)站 則在該用戶控件的 屬性 窗口 可以看到為用戶控件定義好的屬性 Content 2 在Web窗體Default6 aspx上添加一個Button控件Button1 并設(shè)置按鈕Text屬性值為 確定 添加一個Label控件Label1 雙擊Button1控件 進(jìn)入后臺代碼編寫窗口 在該事件處理程序編寫如下代碼 if WebUserControl1 Content Label1 Text WebUserControl1 Content 你好 ElseLabel1 Text 請輸入你的姓名 3 在Default6 aspx的PageLoad 事件代碼中 編寫如下代碼 if WebUserControl1 Content Label1 Text 請輸入你的姓名 Default6 aspx運行效果 12 2導(dǎo)航控件 對于一個大型的企業(yè)級網(wǎng)站 可能擁有成百上千的網(wǎng)頁 導(dǎo)航就變得十分重要 好的導(dǎo)航系統(tǒng)能夠便利用戶在多個頁面間來回瀏覽 增加應(yīng)用程序的可交互性 ASP NET提供了內(nèi)置的站點導(dǎo)航技術(shù) 讓開發(fā)人員創(chuàng)建站點導(dǎo)航時變得輕松 12 2導(dǎo)航控件 12 2 1ASP NET中的站點導(dǎo)航技術(shù)12 2 2SiteMapPath控件12 2 3TreeView控件12 2 4Menu控件12 2 5導(dǎo)航控件綜合實例 12 2 1ASP NET中的站點導(dǎo)航技術(shù) 一些大中型的網(wǎng)站為了讓用戶便于找到合適的網(wǎng)頁 特別定制了一些站點目錄文件 用于定義站點結(jié)構(gòu) 稱之為站點地圖 在ASP NET中 微軟為了簡化創(chuàng)建站點地圖的工作 提供了一套用于導(dǎo)航的站點地圖技術(shù) ASP NET中的站點地圖導(dǎo)航技術(shù)由如下三個組件組成 一個用于定義站點結(jié)構(gòu)的XML文件 又稱為站點地圖文件 用來綁定到XML站點地圖文件的SiteMapDataSource數(shù)據(jù)源控件 用于顯示站點地圖的導(dǎo)航控件 如TreeView控件和Menu控件 12 2 2SiteMapPath控件 SiteMapPath控件是一個非常方便的控件 可以自動根據(jù)在站點地圖文件Web sitemap中定義的導(dǎo)航數(shù)據(jù)顯示一個導(dǎo)航路徑 此路徑為用戶顯示當(dāng)前頁在網(wǎng)站中的路徑及返回到首頁的導(dǎo)航鏈接 只有在站點地圖文件中列出的頁 才能在SiteMapPath控件中顯示導(dǎo)航數(shù)據(jù) SiteMapPath控件可以自定義導(dǎo)航路徑的外觀 1 首先需要添加一個站點地圖文件Web sitemap 在文件中添加如下代碼 SiteMapPath控件示例 SiteMapPath控件示例 2 創(chuàng)建一個名為Default3 aspx的頁面 從工具欄拖動一個SiteMapPath控件添加到該頁面上 自動添加下面的代碼 SiteMapPath控件示例 3 設(shè)置SiteMapPath的屬性如下 設(shè)NodeStyle ForeColor Green 設(shè)Font Size Small 設(shè)PathSeparatorStyle ForeColor Green 頁面運行效果 12 2 3TreeView控件 從 NET2 0開始 微軟在ASP NET中內(nèi)置了TreeView控件 使用它可以創(chuàng)建一個樹狀結(jié)構(gòu)圖 以便讓用戶能夠在節(jié)點的各層次中進(jìn)行導(dǎo)航 大大簡化了開發(fā)人員編寫導(dǎo)航功能的復(fù)雜性 TreeView控件用于在樹結(jié)構(gòu)中顯示分層數(shù)據(jù) 例如目錄或文件目錄 并且主要支持下列功能 數(shù)據(jù)綁定 允許控件的節(jié)點綁定到XML 表格或關(guān)系數(shù)據(jù) 站點導(dǎo)航 通過與SiteMapDataSource控件集成實現(xiàn) 節(jié)點文本既可以顯示為純文本也可以顯示為超鏈接 借助編程方式訪問TreeView對象模型以動態(tài)地創(chuàng)建樹 填充節(jié)點 設(shè)置屬性等 通過主題 用戶定義的圖像和樣式可實現(xiàn)自定義外觀 TreeView控件應(yīng)用示例 1 控件的組成元素 一個TreeView控件可以由任意多個TreeNode元素組成 每個TreeNode元素還可以包含多個子TreeNode元素 每個TreeNode元素可以關(guān)聯(lián)文本和圖像 還可以顯示為超鏈接并與某個URL地址關(guān)聯(lián) 2 控件的屬性 TreeView控件的屬性有許多 下面我們只介紹一些常用的屬性 TreeView控件部分屬性 1 TreeView控件部分屬性 2 3 使用TreeView控件 下面介紹一個簡單的樹狀結(jié)構(gòu)圖的過程 1 新建或者打開一個網(wǎng)站 從 工具箱 窗格的 導(dǎo)航 選項卡中添加TreeView控件到Web窗體中 2 左擊控件 在彈出的快捷菜單中選擇 自動套用格式 命令 然后在彈出的 自動套用格式 對話框中選擇使用 XP資源管理器 方案 從右側(cè)的 預(yù)覽 區(qū)中可以看到效果 3 單擊 確定 按鈕返回窗體 即看到使用格式后的效果 再次左擊 在彈出的快捷菜單中選擇 編輯節(jié)點 命令 打開 TreeView節(jié)點編輯器 對話框 單擊 添加根節(jié)點 按鈕 添加一個根節(jié)點 隨即右側(cè)的 屬性 列表變?yōu)榭捎?從中設(shè)置Text屬性為 清華大學(xué)出版社 4 使用同樣的方法 依次添加 人民教育出版社 人民郵電出版社 和 高等教育出版社 3個根節(jié)點 5 選擇根節(jié)點 清華大學(xué)出版社 單擊 添加子節(jié)點 按鈕 然后使用添加根節(jié)點的方法添加 獲獎圖書 優(yōu)秀教材 精品圖書 和 書友論壇 4個子節(jié)點 6 用同樣的方法為根節(jié)點 人民郵電出版社 添加 新書推薦 和 圖書熱賣 兩個子節(jié)點 單擊 確定 按鈕返回 設(shè)計 視圖即可看到未運行時的初始化效果 切換到 源 視圖 會發(fā)現(xiàn)有以下代碼 這些都是通過前面操作自動生成的 頁面運行效果 12 2 4Menu控件 ASP NET提供了另一個重量級的導(dǎo)航控件Menu 使用該控件 開發(fā)人員可以在網(wǎng)頁上模擬Windows的菜單導(dǎo)航效果 開發(fā)人員可以在Menu控件中直接配置其內(nèi)容 也可通過將該控件綁定到數(shù)據(jù)源的方式來指定其內(nèi)容 無需編寫任何代碼 便可控制ASP NETMenu控件的外觀和內(nèi)容 Menu控件作為一種導(dǎo)航控件 同樣的可以輕松的綁定到SiteMapDataSource控件來實現(xiàn)站點導(dǎo)航 下面將介紹如何通過Menu控件使用靜態(tài)項建立復(fù)雜的導(dǎo)航菜單 Menu控件的兩種顯示模式 靜態(tài)模式 Menu控件始終是完全展開的 整個結(jié)構(gòu)都是可視的 用戶可以單擊任何部位 動態(tài)模式 只有指定的部分是靜態(tài)的 而只有用戶將鼠標(biāo)指針放置在父節(jié)點上時才會顯示其子菜單項 靜態(tài)顯示行為 使用Menu控件的StaticDisplayLevels屬性可控制靜態(tài)顯示行為 StaticDisplayLevels屬性指示從根菜單算起 靜態(tài)顯示的菜單的層數(shù) 例如 如果將StaticDisplayLevels 設(shè)置為3 菜單將以靜態(tài)顯示的方式展開其前三層 StaticDisplayLevels的最小值為1 否則會引發(fā)異常 動態(tài)顯示行為 MaximumDynamicDisplayLevels屬性指定在靜態(tài)顯示層后應(yīng)顯示的動態(tài)顯示菜單節(jié)點層數(shù) 如果將MaximumDynamicDisplayLevels設(shè)置為0 則不會動態(tài)顯示任何菜單節(jié)點 如果將MaximumDynamicDisplayLevels設(shè)置為負(fù)數(shù) 則會引發(fā)異常 關(guān)于IE8不兼容Menu控件的解決辦法 在IE8下顯示AMenu控件異常 不會彈出動態(tài)的菜單 解決該問題的較簡單的辦法有以下兩種 1 打開ie8 工具 兼容性視圖設(shè)置 勾選 在兼容性視圖中顯示所有網(wǎng)站 2 強(qiáng)制IE解析為與IE7META兼容 這通過在menu控件所在的頁面的head標(biāo)記內(nèi)增加如下所示的meta標(biāo)簽代碼 下面以 直接配置內(nèi)容 的方式設(shè)置Menu控件 具體過程如下 1 創(chuàng)建一個新Web窗體Default2 aspx 從 工具箱 窗格的 導(dǎo)航 選項卡中選擇Menu控件 將其添加到Web窗體上 2 左擊Menu控件 打開Menu任務(wù)對話框 選擇 編輯菜單項 命令 彈出 菜單項編輯器 對話框 使用提供的按鈕進(jìn)行編輯 如下圖所示 完成后 單擊 確定 按鈕返回頁面窗體 編輯菜單項 注 NavigateUrl屬性指示該菜單項鏈接到的網(wǎng)頁地址 3 單擊選擇Menu控件 在 屬性 窗格完成以下設(shè)置 設(shè)StaticDisplayLevels 靜態(tài)顯示層數(shù) 為 1 設(shè)置 設(shè)Orientation為 Horizontal 設(shè)StaticEnableDefaultPopOutImage為 False 設(shè)DynamicEnableDefaultPopOutImage為 False 設(shè)LevelMenuItemStyle如下 層菜單項風(fēng)格 第0層 ItemSpacing 5px BackColor EAEAEA Font Size 14px ForeColor 284E98 第1層 BackColor FFFFCC Font Size 14px ForeColor 996633 第2級 BackColor E8E8E8 Font Size 14px ForeColor 009933 設(shè)置StaticHoverStyle 靜態(tài)菜單懸停風(fēng)格 如下 Font Underline true 設(shè)置DynamicHoverStyle 動態(tài)菜單懸停風(fēng)格 如下 Font Underline true 頁面運行效果 12 2 5導(dǎo)航控件綜合實例 12 2 5導(dǎo)航控件綜合實例 下面將給出一個導(dǎo)航控件的綜合小實例 在該小實例中 我們將通過綁定站點地圖SiteMapDataSource數(shù)據(jù)源控件 分別利用Menu控件 TreeView控件以及SiteMapPath控件 實現(xiàn)站點導(dǎo)航的自動顯示 下面將首先介紹一下SiteMapDataSource控件 然后給出創(chuàng)建該實例的操作步驟 SiteMapDataSource控件 SiteMapDataSource控件用于連接并處理存儲在站點地圖文件Web sitemap中的導(dǎo)航數(shù)據(jù) 該控件主要有如下幾個屬性用于控制站點地圖的顯示 StartFromCurrentNode 用于指定站點地圖節(jié)點是否從當(dāng)前頁的節(jié)點進(jìn)行檢索 StartingNodeUrl 指定SiteMapDatasource控件從指定的節(jié)點位置開始檢索節(jié)點 ShowStartingNode 指示是否檢索并顯示起始節(jié)點 1 創(chuàng)建站點地圖文件Web sitemap如下 2 創(chuàng)建一個名為 NavigationWebSite 的網(wǎng)站 3 分別創(chuàng)建以下頁面 并在頁面上放置一個SiteMapPath控件以顯示每個頁面的導(dǎo)航路徑 TsinghuaPress aspx 清華大學(xué)出版社 頁AwardBooks aspx 獲獎圖書 頁ExcellentTextBooks aspx 優(yōu)秀教材 頁FineBooks aspx 精品圖書 頁BookClubForum aspx 書友論壇 頁PTPress aspx 人民郵電出版社 頁Newbooks aspx 新書推薦 頁HotBooks aspx 熱賣圖書 頁PEP aspx 人民教育出版社 頁HEP aspx 高等教育出版社 頁 4 在Default aspx頁面上 拖放一個SiteMapDataSource控件 默認(rèn)名為 SiteMapDataSource1 設(shè)置其屬性如下 其他為默認(rèn)值 設(shè)ShowStartingNode False 設(shè)StartingNodeUrl Default aspx 5 在Default aspx頁面上 拖放一個Menu控件 Menu1 設(shè)置屬性值如下 DataSourceID SiteMapDataSource1 DynamicEnableDefaultPopOutImage False Orientation Horizontal StaticEnableDefaultPopOutImage False 6 繼續(xù)設(shè)置menu1的其他外觀如下 7 在Default aspx頁面中 拖放一個Treeview控件TreeView1 右擊該控件 選擇數(shù)據(jù)源DataSourceID為 SiteMapDataSource1 選擇 自動套用格式 中的 XP資源管理器方案 運行效果 12 3母版頁 一個專業(yè)的Web站點頁面都有一致的布局和樣式 那么怎樣才能使Web站點的多個頁面具有一致的布局和樣式 而且易于修改呢 母版頁提供了解決以上問題的一種快捷途徑 母版頁 比如 網(wǎng)站的主要頻道頁和列表頁的頭部和底部都是一樣的 如果將每個頁面放在單獨的頁面中 當(dāng)頭部和底部需要更改時維護(hù)量太大 于是可以把頭部和底部做成母版頁 頻道頁和列表頁的具體內(nèi)容放到內(nèi)容頁中 這樣當(dāng)頭部和底部需要改動時 只要修改一下母版頁就可以了 12 3母版頁 12 3 1母版頁組成12 3 2創(chuàng)建母版頁12 3 3創(chuàng)建內(nèi)容頁 12 3 1母版頁組成 使用ASP NET母版頁的步驟分為兩步 首先創(chuàng)建一個母版頁 master文件 定義所有頁統(tǒng)一的布局 樣式和行為以及公共元素 然后基于母版頁創(chuàng)建內(nèi)容頁 aspx文件 包含除母版頁之外的其他非公共內(nèi)容 當(dāng)用戶請求內(nèi)容頁時 內(nèi)容頁與母版頁合并在一起輸出 母版頁 母版頁是擴(kuò)展名為 master的ASP NET文件 可以包括任何HTML元素和ASP NET元素 母版頁由特殊的 Master指令識別 該指令替換了用于普通 aspx頁的 Page指令 母版頁除在所有頁上顯示的公共元素外 還包括一個或者多個占位符控件 ContentPlaceHolder 這些占位符控件定義可重寫內(nèi)容出現(xiàn)的區(qū)域 其內(nèi)容由只能將來的內(nèi)容頁里才能編輯 內(nèi)容頁中就是通過定義母版頁中的這些占位符控件的內(nèi)容而包含非公共元素的 母版頁與內(nèi)容頁的關(guān)系 沒有內(nèi)容頁支持 單獨的母版頁僅僅是一個頁面模板 不能被用戶所訪問 同樣 單獨的內(nèi)容頁沒有母版頁支持 也不能被用戶所訪問 由此可見 母版頁與內(nèi)容頁關(guān)系密切 是不可分割的兩個部分 只有同時正確創(chuàng)建和使用母版頁以及內(nèi)容頁 才能發(fā)揮他們的強(qiáng)大功能 12 3 2創(chuàng)建母版頁 在Web項目中建立母版頁的步驟如下 在VS2008新建或打開一個ASP NET網(wǎng)站 右單擊網(wǎng)站名稱 在打開的快捷菜單中選擇 添加新項 打開添加新項對話框 選擇 母版頁 后單擊 添加 按鈕 即可建立一個簡單的母版頁 默認(rèn)名為MasterPage master 默認(rèn)情況下 母版頁包括標(biāo)記對 以及兩個默認(rèn)內(nèi)容占位符 head和ContentPlaceHolder1 注 head 內(nèi)容占位符用于在內(nèi)容頁中在對應(yīng)的內(nèi)容控件中寫內(nèi)容頁的特定css和javascript代碼 下面 在ContentPlaceHolder1控件前添加以下代碼 使用母版頁可以建立布局統(tǒng)一的Web網(wǎng)站 母版頁的代碼如下 無標(biāo)題頁使用母版頁可以建立布局統(tǒng)一的Web網(wǎng)站 從代碼中看 一個母版頁和普通aspx網(wǎng)頁的不同只有以下兩點 母版頁由 Master指令識別 而普通 aspx頁由 Page指令識別 母版頁比普通頁增加一個或多個ContentPlaceHolder內(nèi)容占用符控件 12 3 3創(chuàng)建內(nèi)容頁 內(nèi)容頁是繼承母版頁的頁面 內(nèi)容頁可聲明一個或多個Content控件 該控件是用來重寫母版頁中的內(nèi)容占位符部分 內(nèi)容頁的標(biāo)記和控件只能包含在Content控件內(nèi) 12 3 3創(chuàng)建內(nèi)容頁 當(dāng)創(chuàng)建內(nèi)容頁時 默認(rèn)情況下設(shè)計器為母版頁中定義的每個ContentPlaceHo