靜態(tài)網(wǎng)頁設(shè)計教程.ppt

1、靜態(tài)網(wǎng)頁設(shè)計教程,教學(xué)內(nèi)容,學(xué)習(xí)情境一：搭建開發(fā)環(huán)境 學(xué)習(xí)情境二：系統(tǒng)對象與狀態(tài)管理 學(xué)習(xí)情境三：站點(diǎn)導(dǎo)航控件與母版頁 學(xué)習(xí)情境四：搭建系統(tǒng)框架 學(xué)習(xí)情境五：數(shù)據(jù)綁定與顯示 學(xué)習(xí)情境六：數(shù)據(jù)錄入與驗(yàn)證 學(xué)習(xí)情境七：數(shù)據(jù)更新于編輯 學(xué)習(xí)情境八：常用第三方工具與控件 學(xué)習(xí)情境九：用戶控件與HTTPHANDLER 學(xué)習(xí)情境十：網(wǎng)站部署與定制,學(xué)習(xí)情境一,搭建開發(fā)環(huán)境,課程地位,就業(yè)技能結(jié)構(gòu)圖,本門課程目標(biāo),學(xué)完本門課程后，你能夠： 熟練使用Visual Studio開發(fā)環(huán)境開發(fā)ASP.NET應(yīng)用程序 完成常見的數(shù)據(jù)操作任務(wù) 運(yùn)用ASP.NET開發(fā)商業(yè)站點(diǎn),課程項(xiàng)目展示,網(wǎng)上書店演示,圖書列表,數(shù)字水

2、印,課程項(xiàng)目展示,RSS發(fā)布新書列表,預(yù)習(xí)檢查,創(chuàng)建 ASP.NET頁面時，自動生成了哪幾個文件？ 使用ASP.NET做開發(fā)，是否一定要安裝IIS？,本章任務(wù),初識ASP.NET 制作第一個ASP.NET頁面 顯示學(xué)員信息列表,本章目標(biāo),掌握簡單 ASP.NET 程序的開發(fā)步驟 掌握 ASP.NET控件+事件的開發(fā)方式 會使用Label、TextBox、Button等簡單的控件,B/S概念回顧,B/S 與 C/S 相比各有何優(yōu)缺點(diǎn)？ B/S 的典型應(yīng)用場景有哪些？,ASP.NET的特色與優(yōu)勢4-1,與瀏覽器無關(guān) 方便設(shè)置斷點(diǎn)，易于調(diào)試 編譯后執(zhí)行，運(yùn)行效率高 豐富的控件庫 代碼后置，邏輯分明,

3、ASP.NET的特色與優(yōu)勢4-2,編譯后執(zhí)行，運(yùn)行效率高,_ _ _ _,代碼,編譯,Microsoft 中間語言 （MSIL 或 IL）,JIT 編譯器,機(jī)器語言,分別編譯 IL 的每一部分,ASP.NET的特色與優(yōu)勢4-3,豐富的控件庫 內(nèi)置80多種控件 統(tǒng)計表明，采用新控件方式的編碼，至少比早期減少70%的代碼量,使用純 JavaScript 腳本方式編寫樹形目錄需要大量編碼 而使用TreeView導(dǎo)航控件，無需編寫一行代碼即可完成,ASP.NET的特色與優(yōu)勢4-4,代碼后置，將業(yè)務(wù)邏輯代碼與顯示邏輯分開,ASPX 頁面,頁面顯示 .aspx頁面,業(yè)務(wù)邏輯 .cs文件,程序員,頁面設(shè)計人

4、員,成功案例5-1,因?yàn)?ASP.NET 具有諸多優(yōu)勢，越來越多的企業(yè)開始采用ASP.NET技術(shù)構(gòu)建它們的網(wǎng)絡(luò)應(yīng)用系統(tǒng)。 戴爾電腦 當(dāng)當(dāng)書店 中華英才網(wǎng) 微軟官方網(wǎng)站 . .,ASP.NET成功案例5-2,戴爾公司官方網(wǎng)站 網(wǎng)站是戴爾電腦直銷的最主要渠道之一 每天有上千訂單通過戴爾網(wǎng)站提交和處理,ASP.NET成功案例5-3,當(dāng)當(dāng)網(wǎng) 全球最大的中文網(wǎng)上書店 提供近百萬種商品的在線銷售,ASP.NET成功案例5-4,中華英才網(wǎng) 網(wǎng)站日均瀏覽量超過1900萬 擁有超過1360萬個人注冊用戶 擁有超過1250萬份有效簡歷 累計超過140萬家企業(yè)注冊會員 每天提供超過160萬個有效職位,ASP.NET

5、成功案例5-5,微軟公司官方網(wǎng)站,小結(jié),列舉2-3條ASP.NET的特色和優(yōu)勢。 為什么說ASP.NET應(yīng)用程序運(yùn)行效率高？,搭建開發(fā)環(huán)境,安裝IIS并配置虛擬目錄 IIS 是基于 Windows系統(tǒng)的Web 服務(wù)器的 ASP.NET應(yīng)用程序的發(fā)布是基于IIS服務(wù)器的 IIS類似JSP中使用的Tomcat，提供了更為強(qiáng)大的功能,視頻：IIS安裝和配置視頻,注意事項(xiàng),單擊“添加/刪除Windows組件”,確?！皯?yīng)用程序服務(wù)器”處于選中狀態(tài),開發(fā)服務(wù)器,在VS中，內(nèi)置了輕量級的Web服務(wù)器 Cassini 無須配置IIS、設(shè)置相應(yīng)權(quán)限,Cassini運(yùn)行時在狀態(tài)欄的顯示,可以查看開發(fā)服務(wù)器的狀態(tài)信

6、息,第一個ASP.NET應(yīng)用程序,時間提示頁面 在Visual Studio中新建一個網(wǎng)站 設(shè)置站點(diǎn)位置 拖入相關(guān)控件 編寫事件處理方法 查看運(yùn)行效果,演示示例：第一個ASP.NET應(yīng)用程序,項(xiàng)目位置設(shè)置,新建網(wǎng)站時，可選擇項(xiàng)目的位置，有多種選擇,點(diǎn)擊瀏覽可以更改項(xiàng)目位置,可視化的設(shè)計,雙擊Botton控件，到代碼頁，可以編寫代碼，與WinForms編程類似,點(diǎn)擊“源”可看到HTML視圖,與WinForms一樣簡單的控件+事件方式,基于控件+事件的編程,protected void btnOK_Click(object sender, EventArgs e) string greeting;

7、 switch(DateTime.Now.Hour) . . case 12: greeting = 嘿，0同學(xué)，吃中午飯了！; break; . . string message = string.Format(greeting, txtName.Text.Trim( ); lblMessage.Text = message; ,Botton單擊事件方法,通過Text屬性直接獲取控件值，無須像jsp中使用Get、Post等方式,查看解決方案組成,這是我們剛才頁面的解決方案組成,存放數(shù)據(jù)的文件夾,自動創(chuàng)建的窗體文件,代碼后置文件,站點(diǎn)配置文件,ASP.NET中，HTML代碼和C#代碼分別存儲于

8、不同的文件中，稱作代碼后置,編碼方式,ASP.NET有兩種編碼方式：代碼內(nèi)嵌和代碼后置 代碼內(nèi)嵌，HTML代碼和C#代碼交叉使用。,演示示例：代碼內(nèi)嵌展示,內(nèi)嵌方式只有.aspx文件,體會ASP.NET的開發(fā)過程,顯示學(xué)員信息 創(chuàng)建ShowStudents.aspx頁面。 將學(xué)員信息表拖入頁面 設(shè)置顯示字段和標(biāo)頭 設(shè)置自動套用格式 添加分頁功能，設(shè)置每頁顯示10條信息,演示示例2：學(xué)員信息列表,關(guān)鍵步驟：將表拖入頁面,拖入表時，自動出現(xiàn)相關(guān)信息,使用服務(wù)器資源管理器，打開學(xué)員信息數(shù)據(jù)庫,將Student表拖入頁面的設(shè)計窗口內(nèi),關(guān)鍵步驟：設(shè)置字段和標(biāo)題,設(shè)置Columns，可編輯顯示字段,Hea

9、derText設(shè)置列標(biāo)題顯示的內(nèi)容,關(guān)鍵步驟：套用風(fēng)格,選擇自動套用格式,多種格式可選,關(guān)鍵步驟：設(shè)置分頁,AllowPaging置為True打開分頁功能,PageSize屬性設(shè)置每頁的顯示數(shù)目,小結(jié),在后置代碼中獲取用戶在TextBox中輸入的內(nèi)容，使用的是哪個屬性？ 什么是代碼后置？ 設(shè)置每頁顯示的條數(shù)，使用了哪個屬性？,總結(jié),ASP.NET的優(yōu)勢有哪些？ 畫圖描述ASP.NET工作原理。 建立一個ASP.NET工程有哪些步驟？ ASP.NET代碼開發(fā)有哪兩種模式？,學(xué)習(xí)情境二,系統(tǒng)對象與狀態(tài)管理,回顧,什么是代碼后置？ JSP中狀態(tài)保持有哪幾種方式？ JSP中Session的寫法,預(yù)習(xí)檢

10、查,Session有什么用處？ .aspx頁面繼承自哪個類？,本章任務(wù),實(shí)現(xiàn)用戶登錄功能 實(shí)現(xiàn)對用戶瀏覽器的判斷 實(shí)現(xiàn)頁面數(shù)據(jù)的傳遞,本章目標(biāo),掌握頁面間的數(shù)據(jù)傳遞技術(shù) 能用Session對象記錄用戶登錄狀態(tài)等信息 能使用Server對象查看客戶端瀏覽器類型 會使用Response 對象和Request對象控制頁面的輸入輸出,運(yùn)行機(jī)制,回顧JSP的運(yùn)行機(jī)制 客戶端請求 后臺處理（類Servlet） 返回客戶端（HTML） ASP.NET的運(yùn)行機(jī)制是什么呢？,ASP.NET運(yùn)行機(jī)制,.aspx 文件,解析,后臺編碼類,生成,第二個請求 實(shí)例化,ASP.NET 引擎,頁面類,實(shí)例化，處理和顯示,現(xiàn)

11、象：第一次獲取網(wǎng)頁較慢，第二次獲取較快,系統(tǒng)對象,JSP和ASP.NET中的常見系統(tǒng)對象對比。,注意：JSP和ASP.NET中對象的大小寫不同,Page對象,每個.aspx文件對應(yīng)一個Page對象 .aspx與后臺代碼類（局部類）合并生成頁面類 Page對象是頁面類的實(shí)例 所有的.aspx文件（Web窗體頁）都繼承自System.Web.UI.Page類,演示：新建頁面,查看源視圖,Page指令,指明頁面代碼和后置代碼所使用的腳本語言,設(shè)置是否自動調(diào)用網(wǎng)頁事件 ，默認(rèn)為true,指定代碼后置文件，該文件包含此頁面的局部類,代碼后置的類，局部類, Page指令定義了 ASP.NET 頁用于編譯和

12、解析的屬性。 每個aspx頁面只能有一個Page指令,頁面輸入輸出控制,Request對象 獲得頁面輸入 URL傳參 Form表單提交 Response 對象 在頁面輸出要顯示的內(nèi)容 重定向,Request對象,結(jié)合JSP，列舉頁面間傳遞數(shù)據(jù)的幾種方式？ 如何獲取傳遞過來的數(shù)據(jù)呢？,Request對象,ServerVariables 屬性,Form 屬性,Params 屬性,QueryString屬性,獲取通過URL路徑傳來的數(shù)據(jù),獲取通過表單提交傳輸?shù)臄?shù)據(jù),獲取Web服務(wù)器變量的集合,以上三種方式傳輸?shù)膬?nèi)容都可以使用該屬性獲取,Response 對象,Response 對象允許開發(fā)人員對當(dāng)前

13、頁面的輸出流進(jìn)行操作,Response.對象,Redirect方法,Write方法,Response.Write(Hello，ACCP);,直接在頁面上輸出內(nèi)容,重定向到另外一個頁面,Response.Redirect();,綜合示例,獲取并打印瀏覽器的信息 輸出瀏覽器類型（IE/FireFox） 輸出相關(guān)版本信息 輸出客戶端語言信息,Request.ServerVariablesHTTP_USER_AGENT; /獲取瀏覽器及版本 Request.ServerVariablesHTTP_ACCEPT_LANGUAGE; /獲取瀏覽器語言,演示示例5：獲取并打印瀏覽器信息,數(shù)據(jù)傳遞,JSP頁面

14、中，如何獲取用戶輸入的信息？ 分兩個頁面進(jìn)行處理，用戶輸入頁面是一頁，處理用戶輸入的又是另一個頁面。 提交給同一頁面，通過特殊參數(shù)判斷是回傳的數(shù)據(jù) 通過Get、Post方式或者URL傳遞需要發(fā)送服務(wù)器的數(shù)據(jù),頁內(nèi)數(shù)據(jù)傳遞,回發(fā),ASP.NET Web頁面,控件1,控件1,用戶頁面 操作,Page.IsPostBack屬性,回傳,首次加載,true,false,如何判斷回發(fā)和首次加載？,演示示例1：查詢演示,關(guān)鍵代碼：驗(yàn)證回傳,IsPostBack常放置于Page_Load方法中 用于首次加載頁面時的初始化,protected void Page_Load(object sender, Even

15、tArgs e) if (Page.IsPostBack) . . ,跨頁數(shù)據(jù)傳遞,ASP.NET Web頁面1,ASP.NET Web頁面2,控件1,控件2 ,跨 頁 傳 遞,如何知道跨頁發(fā)送 并獲取傳過來的數(shù)據(jù)？,跨頁數(shù)據(jù)傳遞,IsCrossPagePostBack，指示跨頁回發(fā)是否包含該頁 PreviousPage，獲取向當(dāng)前頁面?zhèn)鬏敂?shù)據(jù)的頁面,PreviousPage 屬性,頁面2,FindControl 方法,找到頁面1的對象,根據(jù)控件名，獲得控件對象,演示示例2：跨頁數(shù)據(jù)傳遞,關(guān)鍵代碼,發(fā)出提交的頁面 獲取內(nèi)容的頁面,if (Page.PreviousPage!=null) if(

16、PreviousPage.IsCrossPagePostBack = true) this.lblShowURL.Text = 您的查詢條件為： + (TextBox)this.PreviousPage.FindControl(txtKeyWord).Text; ,通過PostBackUrl指定獲取頁,獲取控件值,判斷該頁面的是否為其他頁回傳,小結(jié),繪圖描述ASP.NET中頁面的編譯過程。 .aspx文件都繼承自哪個類？ ASP.NET2.0中，.aspx的類與對應(yīng)的代碼后置的類是什么關(guān)系？ ASP.NET中，頁內(nèi)數(shù)據(jù)傳遞使用哪個屬性判斷回傳或者首次加載？,狀態(tài)管理,JSP中狀態(tài)保持有哪幾種方

17、式？ session、cookie等 ASP.NET中狀態(tài)保持,ASP.NET 狀態(tài)保持,Session,Cookie,Application,存儲于服務(wù)器,存儲于客戶端,應(yīng)用程序級別的狀態(tài)保持,Session,Session用于什么場合？ 結(jié)合JSP中學(xué)過的知識，我們知道 Session保持當(dāng)前用戶狀態(tài)信息 常用于用戶登錄、購物車等,Session示例,第三波網(wǎng)上書店用戶登錄。 用戶輸入用戶名和密碼 檢測用戶名和密碼是否輸入合法 登錄成功時，在Session中保存用戶對象。,演示示例3：第三波網(wǎng)上書店的登錄,關(guān)鍵代碼,登錄代碼 索引器 使用索引器 ，可以像數(shù)組一樣處理Session對象,Us

18、er user = new User(); user.Id = 0; user.UserName = txtloginId.Text; user.PassWord = txtLoginPwd.Text; SessionUser = user;,Session的名稱,要存儲的對象,JSP中session.setAttribute(username,username),Cookie演示,Cookie方式記錄用戶最后登錄時間 當(dāng)用戶登錄時，記錄用戶的登錄時間 用戶下次登錄時，顯示用戶上次登錄時間,演示示例4：增加Cookie的書店登錄,關(guān)鍵代碼,寫入Cookie代碼 讀取Cookie代碼,HttpC

19、ookie hcCookie = new HttpCookie(UserName, “張三); Response.Cookies.Add(hcCookie);,string UserName=Request.CookiesUserName.Value;,添加新的Cookie,Application對象,Application對象可以存儲應(yīng)用程序級的數(shù)據(jù)。 “Application”：應(yīng)用程序 第一個用戶訪問站點(diǎn)時，應(yīng)用程序啟動，并創(chuàng)建一個Application對象。 創(chuàng)建成功后，整個應(yīng)用程序中都可以使用該對象。 除非應(yīng)用程序關(guān)閉，否則對象一直存儲在內(nèi)存中。,Application對象對應(yīng)Htt

20、pApplication類，它定義 ASP.NET 應(yīng)用程序中的所有應(yīng)用程序?qū)ο笸ㄓ玫姆椒?、屬性和事件?小結(jié),請分別書寫Session方式和Cookie方式保存用戶登錄狀態(tài)的代碼。 保存當(dāng)前用戶登錄時間 保存登錄用戶名 編寫讀取Cookie中內(nèi)容的代碼,Server 對象,Server對象是HttpServerUtility的一個實(shí)例，它提供對服務(wù)器上的方法和屬性的訪問。,Server對象,HtmlEncode方法和 HtmlDecode方法,Execute 方法和 Transfer 方法,UrlEncode方法和 UrlDecode方法,MapPath方法,取得文件的物理路徑,執(zhí)行另一個頁

21、面的腳本,將文本編碼成可以在瀏覽器中可正確瀏覽的格式,URL編碼和解碼，類似與JSP中的URLEncoder.encode,綜合示例,修改歡迎頁 當(dāng)用戶未登錄時轉(zhuǎn)到登錄頁面 登錄成功后轉(zhuǎn)回歡迎頁 在歡迎頁面顯示用戶的信息 根據(jù)用戶瀏覽器的語言，給予不同語言的歡迎辭（如：中文用“您好， ！”，其他用“HELLO, .！”。）,演示示例6：新的歡迎頁面,總結(jié),如果要顯示在線人數(shù)，想想怎么做？ 提示：在每次用戶請求時記錄人數(shù)，保存在什么位置比較合適？ 簡述ASP.NET中狀態(tài)保持的三種方式，并說明適用范圍？,學(xué)習(xí)情境四,搭建系統(tǒng)框架,回顧2-1,三層結(jié)構(gòu)都有哪三層？ 上一章里我們學(xué)習(xí)了哪三種導(dǎo)航控件

22、？,回顧2-2,string sql = SELECT SubjectName FROM Subject; SqlCommand command = new SqlCommand(sql, DBHelper.connection); DBHelper.connection.Open(); SqlDataReader dataReader = command.ExecuteReader(); while (dataReader.Read( ) cboSubject.Items.Add(dataReaderSubjectName.ToString(); ,未關(guān)閉 Reader dataReader

23、.Close();,未關(guān)閉連接 DBHelper.connection.Close(); DBHelper.connection.Dispose();,預(yù)習(xí)檢查,模型層有哪些內(nèi)容？ 數(shù)據(jù)訪問層一般寫哪些方法？,本章任務(wù),搭建網(wǎng)上書店的架構(gòu) 實(shí)現(xiàn)書店的用戶登錄,本章目標(biāo),會在 ASP.NET 中使用三層結(jié)構(gòu)。 能夠?qū)崿F(xiàn)三層結(jié)構(gòu)下的用戶注冊和登錄。,系統(tǒng)架構(gòu),三層結(jié)構(gòu) 表示層 業(yè)務(wù)邏輯層 數(shù)據(jù)訪問層,分層的理念：將相似的內(nèi)容放到一起去處理，開發(fā)人員可以只關(guān)注整個結(jié)構(gòu)中的其中某一層，可以很容易的用新的實(shí)現(xiàn)來替換原有層次的實(shí)現(xiàn),三層結(jié)構(gòu)的經(jīng)典案例：PetShop,PetShop4.0,寵物商店 微軟展

24、示.NET企業(yè)開發(fā)的范例。 與Sun的PetStore的商業(yè)競爭。 一個小型的電子商務(wù)案例。 體現(xiàn)了微軟推廣的開發(fā)思想和設(shè)計理念。 分22個項(xiàng)目，經(jīng)典的系統(tǒng)，從設(shè)計的思想到最好的編碼，學(xué)習(xí)參考價值很高。,演示：PetShop4.0,PetShop4.0架構(gòu)簡介,ASP.NET Web,BLL,DALFactory,OracleDAL,SQLServerDAL,IDAL,Model,表示層,業(yè)務(wù)層,數(shù)據(jù)層,典型的三層結(jié)構(gòu),搭建第三波網(wǎng)絡(luò)書店的模型層,模型層 表示層需要訪問實(shí)體對象的屬性值。 業(yè)務(wù)層需要通過實(shí)體對象處理業(yè)務(wù)邏輯。 數(shù)據(jù)層也需要通過實(shí)體對象讀寫數(shù)據(jù)庫。 模型是數(shù)據(jù)載體。 命名 項(xiàng)目名

25、：MyBookShopModels 命名空間：MyBookShop.Models 類名：圖書表Books圖書類Book 實(shí)體類通常冠以Serializable特性，以保證實(shí)體傳輸?shù)目煽啃?外鍵的處理,數(shù)據(jù)庫中有主外鍵關(guān)系，模型層怎么表示？ 比如用戶表和狀態(tài)表。 狀態(tài)字段是用戶表的外鍵。 兩種方式： 為實(shí)體類添加狀態(tài)id屬性，存儲狀態(tài)id。 為實(shí)體類添加狀態(tài)屬性，存儲狀態(tài)對象。,示例,用戶類的模型 用戶需要有登錄名、密碼、狀態(tài)等屬性 狀態(tài)表存儲狀態(tài)名稱 用戶的狀態(tài)屬性使用狀態(tài)對象,public UserState UserState get return this.userState; set

26、this.userState = value; ,處理外鍵的代碼,Serializable() public class User /字段 public User() /構(gòu)造函數(shù) /常見屬性 public UserState UserState/用戶狀態(tài)-外鍵 get return this.userState; set this.userState = value; ,小結(jié),編寫實(shí)體類UserRole并更新User類相關(guān)屬性 類關(guān)系圖如下,答案：UserRole類,數(shù)據(jù)訪問層,數(shù)據(jù)訪問層 所有與數(shù)據(jù)庫交互的操作 數(shù)據(jù)表的增、刪、查、改操作 數(shù)據(jù)訪問層不做邏輯判斷 命名 項(xiàng)目名：MyBookS

27、hopDAL 命名空間：MyBookShop.DAL 類名：圖書表Books圖書數(shù)據(jù)訪問類BookService,代碼比較,比較兩段代碼 代碼1 代碼2 在每一個對象的數(shù)據(jù)庫訪問類中： 數(shù)據(jù)庫連接反復(fù)出現(xiàn) 數(shù)據(jù)庫連接打開和關(guān)閉反復(fù)出現(xiàn) 執(zhí)行Sql語句的方法相似 返回記錄集的方法相似,根據(jù)面向?qū)ο笏枷?，是否可以減少這些重復(fù)勞動？,DBHelper類,我們將常用方法提取出來，作為DBHelper類 該類包含了：,建立數(shù)據(jù)庫連接,執(zhí)行Sql的方法 （存儲過程sql語句）,返回記錄集,返回Reader,返回結(jié)果,創(chuàng)建數(shù)據(jù)訪問層的類,創(chuàng)建UserService類 Create方法 Retrieve方法

28、Update方法 Delete方法,bool AddUser(User user),IList GetAllUsers( ) User GetUserById(int id) IList GetUsersBySql(string sql),bool DeleteUserById(int id),bool UpdateUser(User user),增加一個用戶的方法,public static bool AddUser(User user) string sql = INSERT USERS (loginid, loginpwd, name, address, phone, mail, use

29、rroleId,UserStateId) + VALUES (LoginId,LoginPwd,Name,Address,Phone,Mail, RoleId,UserStateId); SqlParameter para = new SqlParameter new SqlParameter(LoginId,user.LoginId), ; DBHelper.ExecuteCommand(sql, para); return true; ,組合SQL語句,參數(shù)賦值,調(diào)用DBHelper類中的方法進(jìn)行處理,小結(jié),模型層為什么要標(biāo)記為可序列化？ 模型層的作用？ 數(shù)據(jù)訪問層的功能？ 編寫User的

30、數(shù)據(jù)訪問類的查、改、刪方法。,示例：User的數(shù)據(jù)庫訪問類,業(yè)務(wù)邏輯層,業(yè)務(wù)邏輯層 是表示層與數(shù)據(jù)訪問層的橋梁， 負(fù)責(zé)邏輯的判斷，業(yè)務(wù)處理、數(shù)據(jù)傳遞。 不在表示層訪問數(shù)據(jù)庫，數(shù)據(jù)更加安全。 命名 項(xiàng)目名：MyBookShopBLL 命名空間：MyBookShop.BLL 類名：圖書表Books圖書業(yè)務(wù)邏輯層類BookManager,用戶登錄的業(yè)務(wù)邏輯方法,public static bool Login(string loginId, string loginPwd, out User validUser) User user = UserService.GetUserByLoginId(lo

31、ginId); if (user = null) validUser = null; return false; if (user.LoginPwd = loginPwd) validUser = user; return true; else validUser = null; /密碼錯誤 return false; ,表示層,表示層的設(shè)計給客戶最直接的體驗(yàn)。 頁面風(fēng)格和布局，美觀大方。 頁面操作符合邏輯，講究用戶體驗(yàn) 。 注意風(fēng)格統(tǒng)一。,表示層負(fù)責(zé)內(nèi)容的展現(xiàn)和與用戶的交互。 可以進(jìn)行變量范圍的驗(yàn)證。 不做業(yè)務(wù)邏輯判斷。 不做與數(shù)據(jù)庫交互的處理。,用戶管理模塊,首先根據(jù)數(shù)據(jù)庫創(chuàng)建模型層。 包

32、括用戶的實(shí)體類以及相關(guān)聯(lián)的類。 創(chuàng)建數(shù)據(jù)訪問層用戶管理類。 包括增刪查改方法。 設(shè)計相關(guān)頁面，并編寫事件代碼。 新用戶注冊。 用戶登錄。 用戶信息修改。 創(chuàng)建業(yè)務(wù)邏輯層處理類。 根據(jù)需要，添加相關(guān)方法。,示例1,用戶登錄 創(chuàng)建頁面。 編寫事件處理代碼，包括驗(yàn)證輸入。 創(chuàng)建業(yè)務(wù)邏輯層方法，調(diào)用數(shù)據(jù)訪問層相關(guān)方法處理。,演示示例：用戶登錄,用戶注冊的確認(rèn)事件代碼, User user = new User(); user.LoginId = this.txtLoginId.Text; user.UserState = new UserState(); user.UserState.Id = 1;

33、if (UserManager.AddUser(user) this.ltMain.Text = alert(注冊成功！請繼續(xù)購物 ); window.location=./default.aspx; else this.ltMain.Text = alert(用戶名已使用！請重新選擇！); ,實(shí)例化User類,對類相關(guān)屬性進(jìn)行賦值,默認(rèn)值，硬編碼,業(yè)務(wù)層進(jìn)行相關(guān)判斷和處理,彈出腳本提示 小技巧：在控件上輸出腳本,小結(jié),編寫圖書模塊相關(guān)實(shí)體類和數(shù)據(jù)層、業(yè)務(wù)層的類。 圖書有id、作者、標(biāo)題、分類、出版社、描述、ISBN（簡化）。 出版社有id、名稱。 分類有id、名稱。 編寫圖書、出版社、分類的

34、實(shí)體類。 編寫圖書的數(shù)據(jù)層增刪查改方法。 編寫圖書業(yè)務(wù)層的查詢所有的方法。,演示示例：圖書模塊相關(guān)類,總結(jié),數(shù)據(jù)訪問層常見的方法有哪幾種？ 頁面要顯示一個表的內(nèi)容，可否直接使用ADO.NET連接數(shù)據(jù)庫，為什么？ 業(yè)務(wù)邏輯層的方法來自哪部分的需求？,學(xué)習(xí)情境五,數(shù)據(jù)綁定與顯示,回顧2-1,TreeView控件綁定數(shù)據(jù)的方式是什么？ 指定DataSourceID 數(shù)據(jù)訪問層有哪四類常見方法？ C、R、U、D 在ASP.NET中調(diào)用客戶端腳本，有哪幾種方法？ 注冊客戶端腳本 頁面輸出腳本 控件的Text中輸出腳本,下面是注冊用戶的部分代碼，檢查有什么問題。,回顧2-2,User user = new

35、 User( ); user.LoginId = this.txtLoginId.Text; user.LoginPwd = this.txtLoginPwd.Text; if (UserManager.LoginIdExists(user.LoginId) this.Page.ClientScript.RegisterStartupScript(this.GetType( ), , alert(用戶名或者密碼錯誤！);); UserManager.AddUser(user);,此處應(yīng)該使用單引號,預(yù)習(xí)檢查,GridView控件有哪兩種數(shù)據(jù)綁定方式？ 有哪幾種數(shù)據(jù)源控件？,本章任務(wù),完成書籍分

36、類維護(hù)模塊 圖書列表分頁 可多選，實(shí)現(xiàn)多個圖書分類的調(diào)整 高亮顯示鼠標(biāo)所在行（光棒效果） 圖書詳細(xì)顯示頁面,本章目標(biāo),能熟練使用GridView進(jìn)行數(shù)據(jù)的查詢與展示 熟練使用ObjectDataSource控件綁定業(yè)務(wù)邏輯層返回的對象,數(shù)據(jù)展示,數(shù)據(jù)展示的兩種實(shí)現(xiàn)方法,使用數(shù)據(jù)源控件，可以實(shí)現(xiàn)快速開發(fā),手寫 代碼實(shí)現(xiàn),簡單 設(shè)置實(shí)現(xiàn),數(shù)據(jù) 源控件,Web服務(wù)器,數(shù)據(jù)庫,展示數(shù)據(jù),什么是數(shù)據(jù)源控件？,數(shù)據(jù)源控件,快速實(shí)現(xiàn)多種常用的數(shù)據(jù)源進(jìn)行展示和交互 快速完成對數(shù)據(jù)表增刪改查操作 是ASP.NET2.0引入的一個新的數(shù)據(jù)抽象層,學(xué)習(xí)過的 數(shù)據(jù)源控件,“面包屑”導(dǎo)航控件使用的 SiteMapDat

37、aSource,TreeView導(dǎo)航控件使用的 XmlDataSource,數(shù)據(jù)源控件,VS2005內(nèi)置的五種數(shù)據(jù)源控件 SqlDataSource AccessDataSource ObjectDataSource XmlDataSource SiteMapDataSource,SqlDataSource允許訪問支持 ADO.NET數(shù)據(jù)提供程序的所有 數(shù)據(jù)源?？稍L問ODBC、 SQL Server等,ObjectDataSource可以 對業(yè)務(wù)對象或其他返回數(shù)據(jù) 的類執(zhí)行特定的數(shù)據(jù)訪問,XmlDataSource可以對 XML文檔執(zhí)行特定訪問， 包括物理訪問和內(nèi)存訪問。,SiteMapDat

38、aSource可以對站點(diǎn)地圖 提供程序所存儲的Web站點(diǎn)執(zhí)行 特定的站點(diǎn)地圖數(shù)據(jù)訪問,數(shù)據(jù)源控件,數(shù)據(jù)源控件類的層次結(jié)構(gòu)圖：,Control類,普通數(shù)據(jù)源控件,層次化數(shù)據(jù)源控件,ObjectDataSource,SqlDataSource,SiteMapDataSource,XMLDataSource,AccessDataSource,所有數(shù)據(jù)源控件都派生于 Control類,ObjectDataSource重要屬性,手寫代碼方式,this.gvMain.DataSource = UserManager.GetAllUsers( ); this.gvMain.DataBind( );,獲取數(shù)據(jù)

39、的方法,展示數(shù)據(jù)的控件,指定數(shù)據(jù)集合,數(shù)據(jù)綁定方法,注意： 數(shù)據(jù)源控件方式只要指定數(shù)據(jù)源id即可； DataSource方式在指定完數(shù)據(jù)源后必須使用綁定方法。,數(shù)據(jù)綁定控件,數(shù)據(jù)綁定控件可以用來展示和綁定數(shù)據(jù) 數(shù)據(jù)源控件不提供展示，數(shù)據(jù)綁定控件提供展示 數(shù)據(jù)綁定控件可以通過數(shù)據(jù)源控件綁定數(shù)據(jù) 數(shù)據(jù)綁定控件的層次結(jié)構(gòu),小結(jié),三層結(jié)構(gòu)下，采用哪個數(shù)據(jù)源控件比較合適？ 說明五種數(shù)據(jù)源控件各自的作用。,圖書分類管理,第三波網(wǎng)絡(luò)書店的圖書分類管理,圖書列表顯示，顯示標(biāo)題和分類,分頁,詳情,多選效果,光棒效果,分類修改功能,數(shù)據(jù)展示,JSP中如何顯示列表信息？ 讀取數(shù)據(jù) 循環(huán)記錄集，組合HTML代碼（使用

40、標(biāo)簽庫或者硬編碼） .NET中的數(shù)據(jù)綁定控件 能夠?qū)⒖丶壎ǖ揭粋€數(shù)據(jù)結(jié)果集 能夠使用模板自定義控件的布局和樣式 提供用于處理和取消事件的方便模型,GridView控件,使用GridView顯示圖書信息列表 1、將GridView控件拖入頁面。 2、添加并指定ObjectDataSource數(shù)據(jù)源。 3、編輯列，選擇需要顯示的字段，并可設(shè)置表頭等。 4、設(shè)置分頁。 5、運(yùn)行，查看效果。,演示示例： 圖書列表,綁定列,BoundField字段 表示數(shù)據(jù)綁定控件中作為文本顯示的字段。 可設(shè)置表頭、樣式等信息。 DataFormatString，可設(shè)置顯示字段的格式。,注： 當(dāng)HtmlCode屬性設(shè)

41、置為false， DataFormatString才有效,0:C,0代表對應(yīng)后面的第一個參數(shù)，這里就是綁定的字段所對應(yīng)的值； C是格式化標(biāo)記，它可以將數(shù)字型的字段格式化為貨幣類型。,綁定列,TemplateField字段 綁定中顯示自定義內(nèi)容的字段 有五種模板（標(biāo)頭、腳注、普通項(xiàng)、交替項(xiàng)、編輯模式）, ,綁定字段的方法，還可以使用Eval,注意單引號的使用,Eval和Bind,Eval方法是只讀方法 該方法采用數(shù)據(jù)字段的值作為參數(shù)并將其作為字符串返回。 當(dāng)對表達(dá)式操作時候，必須用Eval 如 格式化 Bind方法支持讀/寫功能 可以檢索數(shù)據(jù)綁定控件的值并將任何更改提交回數(shù)據(jù)庫。,d：日期；m：

42、月份；y：年份?？赡芨袷交癁椤?7/05/2008”。,綁定列,ButtonField字段 顯示為數(shù)據(jù)綁定控件中的按鈕 CommandName設(shè)置自定義命令（RowCommand）,protected void gvBooks_RowCommand() if (e.CommandName = Select) int index = Convert.ToInt32(e.CommandArgument); GridViewRow selectedRow = gvUser.Rowsindex; TableCell contactName = selectedRow.Cells1; ,綁定列,Comm

43、andField 一個特殊字段，顯示了用于在數(shù)據(jù)綁定控件中執(zhí)行選擇、編輯、插入或刪除操作的命令按鈕 自動生成命令，無須手寫 對應(yīng)數(shù)據(jù)源的增改查刪方法 HyperLinkField 顯示為超鏈接的字段 比如鏈接到詳細(xì)頁面,設(shè)置鏈接的路徑格式,設(shè)定綁定的參數(shù)集合,綁定列,ImageField字段 為圖像的字段 綁定到包含圖像 URL 的數(shù)據(jù)源中的字段 指定DataImageUrlField CheckBoxField字段 以復(fù)選框顯示的布爾型字段 僅當(dāng)數(shù)據(jù)源字段中有布爾型字段時使用此字段,光棒效果,protected void gvDemo_RowDataBound(object sender,

44、GridViewRowEventArgs e) if (e.Row.RowType = DataControlRowType.DataRow) e.Row.Attributes.Add(onmouseover, currentcolor=this.style.backgroundColor;this.style.bac kgroundColor=#6699ff); e.Row.Attributes.Add(onmouseout, this.style.backgroundColor=currentcolor); ,GridView數(shù)據(jù) 行綁定事件,判斷數(shù)據(jù)行類型,當(dāng)鼠標(biāo)離開時 數(shù)據(jù)行背景色還原

45、,添加屬性（客戶端）： 當(dāng)鼠標(biāo)移過的時，數(shù)據(jù)行背景色變成藍(lán)色,多選效果,function GetAllCheckBox(CheckAll) var items = document.getElementsByTagName(input); for(i=0; iitems.length;i+) if(itemsi.type=checkbox) itemsi.checked = CheckAll.checked; ,獲得頁面上標(biāo)簽 為Input的控件元素,判斷控件元素類 型是否為復(fù)選框,圖書分類管理,完成圖書分類管理模塊的功能 在頁面相應(yīng)位置放置下拉單（ DropDownList ） 設(shè)置下拉單的

46、數(shù)據(jù)源，并配置相關(guān)屬性 綁定數(shù)據(jù)源，使用ObjectDataSource控件 設(shè)置需要顯示的字段（DataTextField屬性） 設(shè)置值字段（DataValueField屬性） 放置“修改”按鈕，并編寫單擊事件的代碼,參考答案： 圖書分類管理,關(guān)鍵代碼,string sb =String.Empty; for (int i = 0; i this.gvBooks.Rows.Count; i+) CheckBox cb = (gvBooks.Rowsi.FindControl(chbSelect) as CheckBox; if (cb.Checked = true) sb += (gvBoo

47、ks.Rowsi.FindControl(lblId) as Label).Text+,; string catagory = this.ddlCatagory.SelectedItem.Value; ChangeCatagory(sb, catagory);/實(shí)現(xiàn)更新圖書分類的方法,遍歷行，找到選中的項(xiàng),獲得下拉單選中行的值,詳細(xì)頁面,配合圖書列表中的鏈接項(xiàng)，完成圖書的詳細(xì)頁面,顯示幾個常用的字段,DetailsView控件,使用DetailsView控件完成圖書詳細(xì)信息的顯示 配置數(shù)據(jù)源 定義數(shù)據(jù)方法- GetBookById(Int32 id) 設(shè)置參數(shù)獲取方法，通過參數(shù)獲取 指定Det

48、ailsView的數(shù)據(jù)源為該數(shù)據(jù)源,演示示例：圖書的詳細(xì)頁面,小結(jié),默寫實(shí)現(xiàn)全選效果的javascript腳本 思路： 獲得參數(shù)（多選框?qū)ο螅?得到頁面上所有的INPUT標(biāo)簽的集合 遍歷該集合并將符合條件的對象選中狀態(tài)改為參數(shù)的選中狀態(tài),總結(jié),數(shù)據(jù)源控件有哪幾個？ 可否使用ObjectDataSource綁定數(shù)據(jù)訪問層返回的DataSet？為什么？ 為綁定的行添加腳本事件的方法是什么？ DropDownList控件的哪個屬性可獲取當(dāng)前選擇的項(xiàng)？,學(xué)習(xí)情境六,數(shù)據(jù)錄入與驗(yàn)證,回顧2-1,數(shù)據(jù)展示有哪兩種方式？ 手寫綁定 綁定數(shù)據(jù)源控件 Eval和Bind的區(qū)別？ Eval方法是靜態(tài)（只讀）方法，

49、格式化顯示，計算列等。 Bind方法支持讀/寫功能，可修改回傳服務(wù)器。,下面是改變圖書分類的部分代碼，有什么問題？,回顧2-2,string sb =String.Empty; for (int i = 0; i this.gvBooks.Rows.Count; i+) CheckBox cb = (gvBooks.Rows(i).FindControl(chbSelect“) as CheckBox; if (cb.Checked = true) sb += (gvBooks.Rowsi.FindControl(lblId) as Label).Text+,; string catagory

50、 = this.ddlCatagory.SelectedItem; ChangeCatagory(sb, catagory);,Rowsi,SelectedValue或 SelectedItem.Value,預(yù)習(xí)檢查,可使用哪個控件完成文件上傳？ 有哪幾種數(shù)據(jù)驗(yàn)證控件？,本章任務(wù),完善用戶注冊 完善圖書管理模塊中的圖書信息修改,驗(yàn)證控件,可上傳圖片,可選擇日期,本章目標(biāo),能熟練使用驗(yàn)證控件 熟練使用ObjectDataSource更新數(shù)據(jù) 會手工編寫更新事件的方法,有效性驗(yàn)證,用戶注冊時，輸入了不合標(biāo)準(zhǔn)的信息，怎么辦？ 后臺手寫驗(yàn)證代碼 使用javascript腳本進(jìn)行驗(yàn)證 ASP.NET提供

51、了驗(yàn)證控件 輕松實(shí)現(xiàn)用戶輸入的驗(yàn)證，且與用戶瀏覽器無關(guān) 由在客戶端或服務(wù)器中運(yùn)行的驗(yàn)證代碼執(zhí)行 多種驗(yàn)證控件，驗(yàn)證數(shù)據(jù)更加簡單方便,頁面回傳，用戶體驗(yàn)不好,不安全，與瀏覽器相關(guān),驗(yàn)證控件的層次結(jié)構(gòu),BaseValidator 基礎(chǔ)驗(yàn)證類,RequiredFieldValidator,CompareValidator,RegularExpressionValidator,RangeValidator,CustomValidator,BaseCompareValidator,Label,WebControl,抽象類,具體類,ValidationSummary,RequiredFieldValida

52、tor,非空驗(yàn)證 用于驗(yàn)證用戶輸入是否為空 常與其他控件一起使用 常用屬性,RequiredFieldValidator演示,演示輸入驗(yàn)證 如上頁拖入并設(shè)置控件屬性 按鈕事件：在頁面顯示 信息已提交！“ 在Page_Load及按鈕事件中設(shè)置斷點(diǎn) 以調(diào)試模式運(yùn)行，體會頁面驗(yàn)證順序 將IE設(shè)置為禁用腳本，繼續(xù)驗(yàn)證,this.lblMessage.Text = 信息已提交！;,頁面并未提交到服務(wù)器執(zhí)行，驗(yàn)證在客戶端進(jìn)行,演示示例： 驗(yàn)證控件的執(zhí)行,當(dāng)IE設(shè)置為禁用腳本時，頁面發(fā)生回傳，驗(yàn)證沒有發(fā)生,Page.IsValid,修改按鈕事件： Page.IsValid指示頁面驗(yàn)證是否成功 用于客戶端驗(yàn)證

53、失敗情況下 更加安全,if (Page.IsValid) this.lblMessage.Text = 信息已提交！; ,判斷頁面是否經(jīng)過驗(yàn)證,CompareValidator,CompareValidator用于比較控件的值 注冊時，密碼需要輸入兩次，并且一致 付款時，金額需大于0 常用屬性,RangeValidator,RangeValidator用于范圍的驗(yàn)證 驗(yàn)證生日（小于當(dāng)前日期） 預(yù)定卡拉OK（一周內(nèi)） 常用屬性,電子郵件的驗(yàn)證,電子郵件怎么驗(yàn)證？ 沒有大小可比 沒有范圍之分 電子郵件的規(guī)則是： 必須包含一個并且只有一個符號“” 第一個字符不得是“”或者“.” 不允許出現(xiàn)“.”或者

54、. 結(jié)尾不得是字符“”或者“.”,可使用正則表達(dá)式,正則表達(dá)式,用某種模式去匹配一類字符串的一個公式 一類字符串：電話號碼、電子郵件地址 . 模式：規(guī)則 公式：表示規(guī)則的一段文字 匹配：根據(jù)表達(dá)式去對比驗(yàn)證規(guī)則,例子： “”可匹配字符串開始。那么表達(dá)式： “正則” 可匹配的下列字符串中的那一種？,正則表達(dá)式,名不正則言不順,RegularExpressionValidator,應(yīng)用正則表達(dá)式作為進(jìn)行驗(yàn)證的控件。 電子郵件 身份證號 . . 常用屬性 ValidationExpression屬性:設(shè)置要匹配的正則表達(dá)式,CustomValidator,自定義驗(yàn)證 可以手寫js腳本進(jìn)行客戶端驗(yàn)證腳

55、本 也可以編寫服務(wù)器端的驗(yàn)證事件 或者聯(lián)合兩種方式驗(yàn)證，更安全 常用屬性,ValidationSummary,驗(yàn)證報告控件 該控件并不對窗體的輸入進(jìn)行驗(yàn)證 它可以將驗(yàn)證錯誤匯總在一處統(tǒng)一顯示 顯示的內(nèi)容是其他控件的ErrorMessage 常用屬性 ShowMessageBox，指示是否顯示彈出的提示消息 ShowSummary，指示是否顯示該報告內(nèi)容，用于顯示提示消息的時候 為避免多處提示驗(yàn)證錯誤信息，可將驗(yàn)證控件的Text屬性設(shè)置為“ * ”號,現(xiàn)場編程,完善用戶注冊功能 使用驗(yàn)證控件的驗(yàn)證方式 所有輸入都不可為空 兩次輸入密碼一致 Email需要格式正確 使用彈出窗口的提示方式,演示示例

56、： 采用驗(yàn)證控件的用戶注冊,Calendar,日歷控件 在Web頁面上放置的一個可選日期的日歷控件 方便了用戶對于日期的輸入 日歷控件的使用 將控件拖入頁面 設(shè)置控件相關(guān)屬性 設(shè)置事件，并添加代碼 運(yùn)行檢查效果,演示示例： 日歷控件的使用,Calendar,日歷控件的常用屬性和事件,Calendar (JS版),能否在用戶選擇日期時，不刷新頁面？ JS版的日歷控件 美觀 頁面無刷新 網(wǎng)上可免費(fèi)下載 一般都提供使用教程,My97DatePicker日歷控件,My97DatePicker,比較不錯的js版日歷控件 同時支持IE和Firefox 界面美觀 功能強(qiáng)大，設(shè)置方便 目錄結(jié)構(gòu),存放語言的文件

57、夾,存放皮膚相關(guān)文件,日期庫主文件,主配置文件，修改默認(rèn)風(fēng)格等,導(dǎo)入文件,在調(diào)用的頁面需要引入該文件,使用方式,使用方式： 將整個文件夾放置于網(wǎng)站跟目錄 頁面中添加WdatePicker.js的引用 在設(shè)置日期的控件上添加樣式和事件,class=Wdate onFocus=new WdatePicker(this,%Y-%M-%D %h:%m,true,default),指定js文件路徑,演示示例： My97DatePicker的使用,FileUpload,文件上傳控件 可將圖片等文件上傳到服務(wù)器 演示使用方法 如圖設(shè)置控件 添加事件方法 運(yùn)行,演示示例： 文件上傳控件的使用,部分代碼,ful

58、File.SaveAs(C: + fulFile.FileName); lblFile.Text = 上傳的文件名為： + fulFile.FileName + + 文件大?。?+ fulFile.PostedFile.ContentLength + kb + 文件類型： + fulFile.PostedFile.ContentType;,保存文件到指定位置,獲取上傳的文件名,獲取上傳的文件類型,獲取上傳的文件大小,注意：讀寫硬盤需要設(shè)置足夠的訪問權(quán)限， 需要將文件夾的權(quán)限分配給ASP.NET的運(yùn)行帳戶,上傳內(nèi)容控制,在web.config中設(shè)置上傳大小 控制上傳的文件格式（JS腳本方式）,var mime=FileUpload.value; mime=mime.toLowerCase( ).substr(mime.lastIndexOf(.); if(mime!=“.jpg) FileUpload.value=; alert(僅支持JPG格式); ,maxRequestLength 為可上傳的大?。╧b）,其實(shí)就是判斷上傳文件的后綴名,圖書基本信息的修改,修改圖書基本信息 在圖書詳細(xì)頁增加添加和修改 將項(xiàng)轉(zhuǎn)換為模板項(xiàng) 添加相關(guān)驗(yàn)證 日期輸入使用JS版的日歷控件 封面圖片可上傳更新,演示示例： 修改圖書信息,編程控制參數(shù),更新事件觸發(fā)前，添加更新的參數(shù),protecte