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

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