構建Web應用程序PPT課件

1 第15講構建Web應用程序設計 2 教學目標 本章主要介紹了如何用ASP NET編寫Web應用程序 如何使用Web控件以及如何通過Web窗體讀寫數(shù)據(jù)庫 Web應用程序 是一種以網(wǎng)頁形式為界面的應用程序 Web應用程序可以利用網(wǎng)絡的強大功能為用戶提供服務 ASP NET為這種類型應用程序的開發(fā)提供了一個強大的平臺 3 教學重點 ASP NET概述使用ASP NET創(chuàng)建Web應用程序Web窗體校驗控件使用使用Web窗體訪問數(shù)據(jù) 4 15 1ASP NET概述 ASP NET技術可用于動態(tài)創(chuàng)建帶有服務器端代碼的Web頁面 它是ASP ActiveServerPage 的后續(xù)版本 一個ASP NET頁面文件可以被拆分成兩個獨立的部分 一個是 aspx文件 它實際上是一個HTML文件 含HTML代碼和控件信息 定義了一個頁面的布局和外觀 另一個是 aspx cs文件 每個 aspx文件通常都有一個對應的 aspx cs文件 包含實現(xiàn)程序功能的代碼 如事件處理程序和輔助方法等 在ASP NETWeb應用程序項目中 aspx 和 cs 文件的內容 前者與普通的 htm文件格式非常相似 而后者則與C 應用程序的格式相似 5 ASP NET工作原理 使用ASP NET在客戶系統(tǒng)上創(chuàng)建Web應用程序 只需一個簡單的Web瀏覽器在服務器系統(tǒng)上 需要ASP NET運行庫 6 15 2使用ASP NET創(chuàng)建Web應用 使用ASP NET創(chuàng)建Web應用非常方便 因為ASP NET中已定義了很多內置對象 它們都是全局對象 不必事先聲明就可以直接使用 7 15 2 1ASP NET的內建對象 盡管ASP NET的面向對象的設計和基礎代碼在本質上不同于ASP 但ASP中許多常用的關鍵字和運算符在ASP NET中仍保留了下來 ASP NET內置的對象主要有6個 Page對象用來與擴展名為 aspx的文件相關聯(lián) 這些文件在運行時創(chuàng)建為Page對象 并緩存在服務器內存中 Page對象充當頁中所有服務器控件的命名容器 Request對象是HttpRequest類的實例 當用戶請求頁面時 ASP NET也將自動創(chuàng)建Request對象 功能主要是從客戶端得到數(shù)據(jù) Response對象是HttpResponse類的實例 當用戶請求頁面時 ASP NET將自動創(chuàng)建該對象功能用于向客戶端瀏覽器發(fā)送數(shù)據(jù) 8 15 2 1ASP NET的內建對象 Server對象是最基本的ASP NET對象 派生自HttpServerUtility類 提供了服務器端的基本屬性與方法 可以通過Page對象的Server屬性來獲取對應的Server對象 即 Page Server Application對象是HttpApplicationState類的實例 它提供對所有會話的應用程序范圍的方法和事件的訪問 Session對象是HttpSessionState類的實例 它提供了對會話狀態(tài)值以及會話級別設置和生存期管理方法的訪問 9 Web窗體頁指令 Web窗體頁指令用來指定當請求ASP NET頁和用戶控件時使用的設置 10 15 2 2構建ASP NET應用程序 使用ASP NET創(chuàng)建的一個Web應用程序通常有一個或多個ASP NET頁或者Web窗體 代碼文件以及配置文件組成 一個新的Web應用程序被創(chuàng)建后 系統(tǒng)自動創(chuàng)建的文件中包含以下幾個文件 11 15 2 2構建ASP NET應用程序 WebForm1 aspx文件 這是一個空白的ASP NETWeb窗體頁面 通常可將第一個 aspx文件改名為 default aspx 或 index aspx 作為Web站點的缺省主頁 每個 aspx文件開頭的預編譯指令指明了對應的代碼文件的名稱和位置 AssemblyInfo cs文件 這是一個普通的源代碼文件 其中包含了所有的程序集特性 Global asax cs文件 這是應用程序自動啟動時被加載的第一個文件 它包含了Application Start Session Start Application End Session End等幾個過程 Web config文件 這是ASP NET應用程序的配置文件 這個文件采用的是XML格式 其中包含了與安全性 緩存管理 頁編譯等有關的信息 12 15 2 2構建ASP NET應用程序 例 構建一個ASP NETWeb應用程序項目步驟 1 啟動VS2005 2 選擇 文件 新建 網(wǎng)站 命令 打開 新建網(wǎng)站 對話框 3 選擇 ASP NET網(wǎng)站 模板 從 位置 下拉列表中選擇 文件系統(tǒng) 然后在對應的文本框中輸入 F shh 路徑 設置語言 確定 系統(tǒng)將創(chuàng)建一個Web應用程序 它包括一個名稱為App Data的文件夾 以及一個名稱為Defalt aspx的Web窗體 4 窗體底部的 設計 可添加控件 并自動生成HTML代碼 13 網(wǎng)站的發(fā)布與測試 在 生成 菜單上單擊 發(fā)布網(wǎng)站 在 目標位置 輸入要發(fā)送到的路徑 如 c Inetpub wwwroot Good 如果要使用HTTP或FTP發(fā)布到遠程網(wǎng)站 則需要指定遠程服務器的URL 使用 管理工具 IIS 創(chuàng)建虛擬目錄 或右擊上述路徑文件夾的名稱 共享和安全 Web共享 單擊共享此文件夾 權限 可默認打開瀏覽器 鍵入URL 如 http localhost test SamplePage aspx 14 15 2 3WebServer控件 Web窗體控件與HTML控件或HTML表單相比較 有一個重要的區(qū)別 Web窗體控件是服務器端控件 是在服務器端生成 所以 添加到窗體上的Web窗體控件也統(tǒng)稱為Server控件 Server控件與普通網(wǎng)頁上使用的標準HTML控件相似 只是它們編程更加靈活 大多數(shù)Server控件都揭示了事件處理程序 方法和屬性 服務器上的代碼可以動態(tài)地執(zhí)行和修改它們 Server控件是基于更加抽象的 具有更強的面向對象特征的設計模型 它提供了比HTML服務器種類更多 功能更強大的控件集合 它屬于System Web UI WebControl名稱空間 所有的ASP NET服務器控件類都是從該名稱空間的基類WebControl派生的 15 15 2 3WebServer控件 Server控件的主要特點 可自動檢測客戶端瀏覽器的類型和功能 生成相應地HTML代碼 從而最大程度地發(fā)揮瀏覽器的功能 具有數(shù)據(jù)綁定特性 所有屬性都可以進行數(shù)據(jù)綁定 使用WebServer控件時 必須在類名前添加 asp 作為前綴 用來映射這些Web服務器控件所處的System Web UI WebContrd命名控件 并且?guī)в?runat server 屬性 16 15 2 3WebServer控件 提示 1 調整控件的布局 使控件可拖放步驟 設計窗口 布局 位置 自動定位選項 HTML設計器 CSS定位 絕對定位 2 與程序員編程緊密相連的兩個重要屬性是ID屬性和Text屬性 17 登錄控件 ASP NET2 0提供了一些新的安全控件 使用預定義的登錄控件不需手動定制表單 即可完成登錄及注冊等功能 18 15 3Web窗體校驗控件使用 和Windows應用程序一樣 校驗用戶輸入的內容是否符合一些要求是系統(tǒng)的一個重要內容 對Web應用程序來說 還應該考慮是在服務器端還是在客戶端 瀏覽器 進行校驗 進行數(shù)據(jù)校驗有兩種方式 分別是服務端校驗和客戶端校驗 這是兩種完全不同的方式 在ASP NET中 提供了驗證控件來檢查用戶輸入的有效性 而不需要程序員編寫大量的驗證函數(shù)驗證控件創(chuàng)建了客戶端JavaScript代碼 在客戶端上驗證輸入 還創(chuàng)建了服務器端代碼 在服務器上驗證輸入 把驗證屬性EnableClientScript設置為false 可以關閉JavaScript 設置Page類的ClientTarget屬性 也可以關閉JavaScript 而不需要對每個驗證控件執(zhí)行改變屬性值的操作 19 15 3Web窗體校驗控件使用 ASP NET中提供了一組功能強大的數(shù)據(jù)驗證組件 這些控件減輕了類似于ASP時代開發(fā)人員編程的復雜步驟 控件共有如下六種 RequiredFieldValidator 必需字段驗證 用于保證該字段不為空 CompareValidator 比較驗證控件 用于比較兩個控件中的輸入是否相等 RangeValidator 范圍驗證 用于限定用戶輸入數(shù)據(jù)的有效范圍 RegularExpressionValidator 正則表達式驗證控件 提供了一種較為靈活的驗證方式 實現(xiàn)對復雜字符串的驗證 CustomValidator 自定義驗證 用于以上驗證控件都不適合的場合 可由開發(fā)人員自行編寫驗證功能 ValidationSummary 驗證總結 屬于一個顯示控件 負責收集當前頁面的驗證錯誤信息 并以集合的形式顯示 20 15 3Web窗體校驗控件使用 例 校驗控件的使用 21 15 3Web窗體校驗控件使用 步驟 1 新建一個ASP NET網(wǎng)站項目 2 在主窗體頁面添加6個Label控件 5個TextBox控件 1個Button控件 5個RequiredFieldValidator控件 1個RangeValidator控件 1個RegularExpressionValidator控件 1個CompareValidator控件和1個ValidationSummary控件 22 15 3Web窗體校驗控件使用 步驟 3 修改控件的屬性 設置TextBox4和TextBox5的TextMode屬性為 password 設置RequiredFieldValidator控件的ControlToValidate屬性 Text屬性 ErrorMessage屬性 設置RangeValidator控件的ControlToValidate屬性 Type屬性 ErrorMessage屬性 Text屬性 設置RegularExpressionValidator控件的ControlToValidate屬性 Text屬性 ErrorMessage屬性 ValidationExpression屬性 設置CompareValidator控件的ControlToValidate屬性 ControlToCompare屬性 Text屬性 ErrorMessage屬性 ValidationExpression屬性 23 15 3Web窗體校驗控件使用 步驟 4 編寫B(tài)utton控件的Click事件處理程序 protectedvoidButton1 Click1 objectsender EventArgse Label6 Text 全部驗證正確 5 完整的頁面代碼可見程序 24 15 4使用Web窗體訪問數(shù)據(jù) 在ASP NET中通過使用ADO NET實現(xiàn)數(shù)據(jù)庫訪問的操作與Windows應用程序對數(shù)據(jù)庫的訪問基本一致 可以實現(xiàn)對數(shù)據(jù)庫數(shù)據(jù)的讀取 更改 添加與刪除 25 15 4 1Web窗體的GridView控件使用 Web窗體的也有一個類似Windows窗體的DataGridView控件的控件 稱為GridView控件 Web窗體GridView控件支持分頁技術 Web窗體GridView控件也能在數(shù)據(jù)庫斷開連接時使用 可以創(chuàng)建一個SqlDataSource對象連接到一個數(shù)據(jù)庫 填充一個DataSet 然后斷開與數(shù)據(jù)庫的連接 可以將SqlDataSource控件中的DataSet對象綁定到一個GridView控件 26 15 4 2查詢數(shù)據(jù) 在ASP NET中訪問數(shù)據(jù)庫與在Windows中訪問數(shù)據(jù)庫的操作步驟基本相同 創(chuàng)建DataSet 數(shù)據(jù)集合 對象 以存放從數(shù)據(jù)庫中讀取的記錄 創(chuàng)建與數(shù)據(jù)庫的連接 即創(chuàng)建SqlDbConnection或OleDbConnection Ole數(shù)據(jù)庫連接 對象 建立程序與數(shù)據(jù)庫的數(shù)據(jù)傳輸通道 創(chuàng)建SqlDbDataAdapter或OleDbDataAdapter Ole數(shù)據(jù)庫數(shù)據(jù)適配器 對象 以完成從數(shù)據(jù)庫讀取記錄或將程序使用的記錄寫入數(shù)據(jù)庫 將數(shù)據(jù)庫中讀取的數(shù)據(jù)寫入DataSet 數(shù)據(jù)集合 中 即數(shù)據(jù)填充 將DataSet 數(shù)據(jù)集合 中的數(shù)據(jù)與控件 如數(shù)據(jù)表格 綁定 以顯示數(shù)據(jù) 27 15 4 2查詢數(shù)據(jù) 例 用GridView控件顯示數(shù)據(jù)庫中表中數(shù)據(jù) 28 15 4 2查詢數(shù)據(jù) 步驟 1 新建一個ASP NET網(wǎng)站項目 2 添加SqlDataSource控件 并配置數(shù)據(jù)源 注 在 配置Select語句 頁面中 高級選項選中復選框 3 向Web窗體添加一個GridView控件 智能標記 自動套用格式 選擇一種模式 智能標記 選擇數(shù)據(jù)源 選擇SqlDataSource1 4 分頁顯示數(shù)據(jù)AllowPaging屬性為True PageSize屬性設置為8 PageSettings屬性 Mode為NextPreviousFirstLast值 更改FirstPageText LastPageText NextPageText PreviousPage