基于ASPNET的Web應(yīng)用開發(fā)單元8任務(wù)2：利用AJAX實(shí)現(xiàn)局部刷新課件

1、單元8：創(chuàng)建無刷新網(wǎng)頁WEB 應(yīng) 用 開 發(fā)WEB 應(yīng) 用 開 發(fā)任務(wù)2：利用AJAX實(shí)現(xiàn)局部刷新WEB 應(yīng) 用 開 發(fā)WEB 應(yīng) 用 開 發(fā)主要內(nèi)容ScriptManager控件1UpdatePanel控件2Timer控件3UpdateProgress控件4學(xué)習(xí)目標(biāo)知識目標(biāo)了解ASP.NET AJAX有哪些服務(wù)器控件掌握ScriptManager控件的使用掌握UpdatePanel控件的使用掌握Timer控件的使用掌握UpdateProgress控件的使用能力目標(biāo)掌握AJAX服務(wù)器控件的使用技術(shù)應(yīng)用背景在Web應(yīng)用程序開發(fā)中，使用一定的AJAX技術(shù)能夠提高應(yīng)用程序的健壯性和用戶體驗(yàn)的友好度。

2、使用AJAX技術(shù)能夠?qū)崿F(xiàn)頁面無刷新和異步數(shù)據(jù)處理，讓頁面中其他的元素不會(huì)隨著“客戶端服務(wù)器”的通信再次刷新，這樣不僅能夠減少客戶端服務(wù)器之間的帶寬，也能夠提高Web應(yīng)用的速度。雖然AJAX包括諸多功能和特性，但是AJAX也增加了服務(wù)器負(fù)擔(dān)，如果在服務(wù)器中大量使用AJAX控件的話，有可能造成服務(wù)器假死，因此掌握AJAX服務(wù)器控件的使用，熟練和高效的編寫AJAX應(yīng)用對 Web應(yīng)用程序開發(fā)是非常有好處的。一、子任務(wù)1：局部刷新改變字體大小任務(wù)描述：建立一個(gè)ScriptManger控件和一個(gè)UpdatePanel控件用于AJAX應(yīng)用開發(fā)。在UpdatePanel控件中，包含一個(gè)Label標(biāo)簽控件和一個(gè)

3、TextBox文本框控件，當(dāng)文本框控件的內(nèi)容被更改時(shí)，則會(huì)觸發(fā)TextBox1_TextChanged事件更改標(biāo)簽字體大小。運(yùn)行效果圖如下： 輸入字符大小調(diào)整字符大小二、基本知識與技能ASP.NET AJAX服務(wù)器控件在ASP.NET 2.0中，AJAX需要下載和安裝，開發(fā)人員還需要將相應(yīng)的DLL文件分類存放并配置Web.config文件才能夠?qū)崿F(xiàn)AJAX功能。而自ASP.NET 3.5起，AJAX已經(jīng)成為.NET框架的原生功能。創(chuàng)建ASP.NET Web應(yīng)用程序就能夠直接使用AJAX功能 。ASP.NET AJAX提供了一些服務(wù)端的控件，通過這些控件，即使不懂任何的客戶端AJAX Libra

4、ry也能在ASP.NET中創(chuàng)建簡單的AJAX應(yīng)用。這些核心的控件有：ScriptManager、UpdatePanel、UpdateProgress和Timer控件。二、基本知識與技能ASP.NET AJAX服務(wù)器控件實(shí)現(xiàn)定時(shí)調(diào)用，常用于定時(shí)到服務(wù)器上去提取相關(guān)的信息最重要的AJAX控件，用于定義頁面更新區(qū)域和更新方式當(dāng)頁面異步更新正在進(jìn)行時(shí)提示用戶所有的使用AJAX的頁面都必須放置一個(gè)ScriptManager控件當(dāng)母版頁上已有一個(gè)ScriptManager控件時(shí)，在子頁面中使用二、基本知識與技能ScriptManager控件腳本控制器ScriptManager是AJAX程序運(yùn)行的基礎(chǔ)。它用

5、來處理頁面上所有組件以及頁面局部更新，生成相關(guān)客戶端代理腳本以便能夠在JavaScript中訪問Web Service等。在支持ASP.NET AJAX的ASP.NET頁面中，有且只能有一個(gè)ScriptManager控件來管理ASP.NET AJAX相關(guān)的控件和腳本。在AJAX應(yīng)用中，ScriptManger控件基本不需要配置就能夠使用。因?yàn)镾criptManger控件通常需要同其他AJAX控件搭配使用，在AJAX應(yīng)用程序中，ScriptManger控件就相當(dāng)于一個(gè)總指揮官，這個(gè)總指揮官只是進(jìn)行指揮，而不進(jìn)行實(shí)際的操作。三、子任務(wù)1的實(shí)施第一步：新建項(xiàng)目Task8-2，添加頁面ScriptMa

6、nager.aspx第二步：設(shè)置頁面布局第三步：編寫后臺代碼第四步：運(yùn)行程序，在瀏覽器查看頁面運(yùn)行效果三、子任務(wù)1的實(shí)施 字符的大小 (px) ScriptManager.aspx代碼三、子任務(wù)1的實(shí)施namespace Task8-2 public partial class ScriptManager : System.Web.UI.Page protected void TextBox1_TextChanged(object sender, EventArgs e) try Label1.Font.Size = FontUnit.Point(int.Parse(TextBox1.Text

7、); catch (Exception err) Response.Write(錯(cuò)誤); ScriptManager.aspx.cs代碼四、子任務(wù)2：UpdatePanel局部更新方式任務(wù)說明：本例通過設(shè)置UpdatePanel的UpdateMode值的不同來說明UpdatePanel的局部更新方式。五、子任務(wù)3：UpdatePanel外部觸發(fā)器六、基本知識與技能UpdatePanel控件局部更新是ASP.NET AJAX中最基本、最重要的技術(shù)。UpdatePanel可以用來創(chuàng)建豐富的局部更新Web應(yīng)用程序，其強(qiáng)大之處在于不用編寫任何客戶端腳本就可以自動(dòng)實(shí)現(xiàn)局部更新。UpdatePanel控件

8、是一個(gè)容器控件，該控件自身不會(huì)在頁面上顯示任何內(nèi)容，主要作用是放置在其中的控件將具有局部刷新的功能。通過使用UpdatePanel控件，減少了整頁回發(fā)時(shí)的屏幕閃爍并提高了網(wǎng)頁交互性，改善了用戶體驗(yàn)，同時(shí)也減少了在客戶端和服務(wù)器之間傳輸?shù)臄?shù)據(jù)量。六、基本知識與技能UpdatePanel工作原理 UpdatePanel的工作依賴于ScriptManager服務(wù)端控件和客戶端PageRequestManager類，當(dāng)ScriptManager中允許頁面局部更新時(shí)，它會(huì)以異步的方式回傳給服務(wù)器，與傳統(tǒng)的整頁回傳方式不同的是只有包含在UpdatePanel中的頁面部分會(huì)被更新，在從服務(wù)端返回HTML之后

9、，PageRequestManager會(huì)通過操作DOM對象來替換需要更新的代碼片段。六、基本知識與技能UpdatePanel常用子標(biāo)簽ContentTemplate子標(biāo)簽：在UpdatePanel控件的ContentTemplate標(biāo)簽中，開發(fā)人員能夠放置任何ASP.NET控件，這些控件在ContentTemplate標(biāo)簽中，就能夠?qū)崿F(xiàn)頁面無刷新的更新操作。Triggers子標(biāo)簽：局部更新的觸發(fā)器，包括兩種觸發(fā)器：（1）AsyncPostBackTrigger異步回傳觸發(fā)器，可以實(shí)現(xiàn)異步更新。（2）PostBackTrigger不使用異步回傳，仍然是傳統(tǒng)的整頁全部更新。六、基本知識與技能Upd

10、atePanel屬性屬性說明ChildrenAsTriggers當(dāng)UpdateMode屬性為Conditional時(shí)，UpdatePanel中的子控件的異步回送是否會(huì)引發(fā)UpdatePanle的更新。RenderMode表示UpdatePanel最終呈現(xiàn)的HTML元素。Block（默認(rèn)）表示，Inline表示UpdateMode表示UpdatePanel的更新模式，有兩個(gè)選項(xiàng)：Always和Conditional。當(dāng)UpdateMode=Always時(shí)，只要頁面上引發(fā)了異步回發(fā)（包括別的UpdatePanel內(nèi)的控件），就會(huì)更新。當(dāng)UpdateMode=Conditional時(shí)，是否更新取決于

11、UpdatePanel的設(shè)置。默認(rèn)情況下，僅自己內(nèi)部的控件引發(fā)的回發(fā)才會(huì)更新。七、子任務(wù)2的實(shí)施第一步：在項(xiàng)目Task8-2，添加頁面UpdateModel.aspx第二步：設(shè)置頁面布局,頁面有兩個(gè)UpdatePanel，每個(gè)UpdatePanel的UpdateModel屬性不同，一個(gè)為Always,一個(gè)為Conditional， UpdatePanel里面加入相應(yīng)控件。第三步：運(yùn)行程序，在瀏覽器查看頁面運(yùn)行效果，比較不同UpdateModel模式下局部刷新的變化。七、子任務(wù)2的實(shí)施 局部更新方式 當(dāng)UpdateMode=Always時(shí)，只要頁面上引發(fā)了異步回發(fā)，就會(huì)更新。 當(dāng)UpdateMo

12、de=Conditional時(shí)，是否更新取決于UpdatePanel的設(shè)置。 整頁更新時(shí)間： UpdateModel.aspx代碼七、子任務(wù)2的實(shí)施 UpdateMode:Always 局部可更新區(qū)域一的更新時(shí)間： UpdateMode:Conditional 局部可更新區(qū)域二的更新時(shí)間： UpdateModel.aspx代碼八、子任務(wù)3的實(shí)施第一步：在項(xiàng)目Task8-2，添加頁面UpdatePanelTrigger.aspx第二步：設(shè)置頁面布局,并為UpdatePanel加上Trigger觸發(fā)器標(biāo)簽。第三步：運(yùn)行程序，在瀏覽器查看頁面運(yùn)行效果，比較加上Trigger后對局部刷新的影響。八、子

13、任務(wù)3的實(shí)施 外部觸發(fā)器的定義與使用 當(dāng)UpdateMode=Always時(shí)，只要頁面上引發(fā)了異步回發(fā)，就會(huì)更新。 當(dāng)UpdateMode=Conditional時(shí)，是否更新取決于UpdatePanel的設(shè)置。 整頁更新時(shí)間： UpdateMode:Always 局部可更新區(qū)域一的更新時(shí)間： 由于UpdateMode是Always，所以任意一個(gè)異步回發(fā)都會(huì)導(dǎo)致自己被更新。 UpdatePanelTrigger.aspx代碼八、子任務(wù)3的實(shí)施 UpdateMode=Conditional同時(shí)ChildrenAsTriggers=false 設(shè)置其外部觸發(fā)器為UpdatePanel1里面的Butt

14、on 由于ChildrenAsTriggers=false，所以下面這個(gè)按鈕會(huì)引發(fā)異步回發(fā)，但不會(huì)更新自己。 局部可更新區(qū)域二的更新時(shí)間： 由于其外部觸發(fā)器為UpdatePanel1里面的Button 因此點(diǎn)擊第一個(gè)UpdatePanel1里面的Button會(huì)更新此面板。 UpdatePanelTrigger.aspx代碼九、子任務(wù)3的拓展網(wǎng)頁上放置兩個(gè)UpdatePanel，每個(gè)都放置有一個(gè)按鈕，點(diǎn)擊按鈕時(shí)，更新對方的面板的時(shí)間顯示而不更新自己所在的面板。十、子任務(wù)4：使用Timer控件十一、基本知識與技能Timer控件定時(shí)器控件Timer屬于無人管理自動(dòng)完成任務(wù)的一種特殊控件。Timer控

15、件的功能與大多數(shù)編程工具中提供的Timer一樣都是按照特定的時(shí)間間隔執(zhí)行指定的代碼 。在ASP.NET AJAX中，AJAX提供了一個(gè)Timer控件，用于執(zhí)行局部更新，使用Timer控件能夠控制應(yīng)用程序在一段時(shí)間內(nèi)進(jìn)行事件刷新。Timer控件初始代碼如下所示。 開發(fā)人員能夠配置Timer控件的屬性進(jìn)行相應(yīng)事件的觸發(fā)，Timer的屬性如下所示。Enabled：是否啟用Tick時(shí)間引發(fā)。Interval：設(shè)置Tick事件之間的連續(xù)時(shí)間，單位為毫秒。十一、基本知識與技能Timer控件Timer控件能夠定時(shí)引發(fā)整個(gè)頁面回送，當(dāng)它與UpdatePanel控件搭配使用時(shí)，就可以定時(shí)引發(fā)異步回送并局部刷新U

16、pdatePanel控件的內(nèi)容。Timer控件可以用在下列場合：定期更新一個(gè)或多個(gè)UpdatePanel控件的內(nèi)容，而且不需要刷新整個(gè)頁面。每當(dāng)Timer控件引發(fā)回送時(shí)就運(yùn)行服務(wù)器的代碼。定時(shí)同步地把整個(gè)頁面發(fā)送到服務(wù)器。Timer控件可以放在UpdatePanel控件內(nèi)部，也可以放在UpdatePanel控件外部。Timer位于UpdatePanel之外時(shí)，要將Timer控件設(shè)定為UpdatePanel的異步更新觸發(fā)器。十二、子任務(wù)4的實(shí)施第一步：在項(xiàng)目Task8-2，添加頁面Timer.aspx第二步：設(shè)置頁面布局,在頁面加入Timer控件和其他相應(yīng)控件，設(shè)置Timer控件的事件連續(xù)時(shí)間。

17、第三步：運(yùn)行程序，在瀏覽器查看頁面運(yùn)行效果。小提示：Timer控件能夠通過簡單的方法讓開發(fā)人員無需通過復(fù)雜的JavaScript實(shí)現(xiàn)Timer控制。但是從另一方面來講，Timer控件會(huì)占用大量的服務(wù)器資源，如果不停的進(jìn)行客戶端服務(wù)器的信息通信操作，很容易造成服務(wù)器當(dāng)機(jī)。十二、子任務(wù)4的實(shí)施 使用Timer控件定時(shí)取出服務(wù)器時(shí)間 服務(wù)器當(dāng)前時(shí)間： Timer.aspx代碼十三、子任務(wù)5：使用UpdateProgress控件 正在操作中操作完成后十四、基本知識與技能UpdateProgress控件使用ASP.NET AJAX常常會(huì)給用戶造成疑惑。例如當(dāng)用戶進(jìn)行評論或留言時(shí)，頁面并沒有刷新，而是進(jìn)行

18、了局部刷新，這個(gè)時(shí)候用戶很可能不清楚到底發(fā)生了什么，以至于用戶很有可能會(huì)產(chǎn)生重復(fù)操作，甚至?xí)a(chǎn)生非法操作。更新進(jìn)度控件（UpdateProgress）就用于解決這個(gè)問題，當(dāng)服務(wù)器端與客戶端進(jìn)行異步通信時(shí)，需要使用UpdateProgress控件告訴用戶現(xiàn)在正在執(zhí)行中。例如當(dāng)用戶進(jìn)行評論時(shí)，當(dāng)用戶單擊按鈕提交表單，系統(tǒng)應(yīng)該提示“正在提交中，請稍后”，這樣就提供了便利從而讓用戶知道應(yīng)用程序正在運(yùn)行中。這種方法不僅能夠讓用戶操作更少的出現(xiàn)錯(cuò)誤，也能夠提升用戶體驗(yàn)的友好度。UpdateProgress控件的HTML代碼如下所示： 正在操作中，請稍后 . 十四、基本知識與技能UpdateProgress

19、控件UpdateProgress控件的常用屬性如下表所示：十四、基本知識與技能UpdateProgress控件UpdateProgress的顯示有幾種注意情況：如果UpdateProgress 在 UpdatePanel的 中，則會(huì)顯示UpdateProgress中的提示信息。如果UpdateProgress在 UpdatePanel的 外，則需要指定AssociatedUpdatePanelID屬性，但還有一個(gè)前提就是觸發(fā)事件的Button控件必須在UpdatePanel的 中，否則就得用第三步驟解決。如果觸發(fā)事件的Button控件和UpdateProgress都在UpdatePanel的 外的話，除了要指定AssociatedUpdatePanelID屬性的UpdatePanel的ID外還要將如下代碼加入頁面中，例如：十五、子任務(wù)5的實(shí)施第一步：在項(xiàng)目Task8-2，添加頁面UpdateProgress.aspx第二步：設(shè)置頁面布局,在頁面加入U(xiǎn)pdateProgress控件和其他相應(yīng)控件。第三步：編寫后臺相應(yīng)代碼。第四步：運(yùn)行程序