asp.net Ajax能夠快速地創建具有豐富的用戶體驗的頁面,而且這些頁面由可靠和熟悉的用戶接口元素組成,包括一個能快速響應的用戶體驗和熟悉的用戶元素。
使用ASP.NET AJAX,可以改善Web程序的用戶體驗和提高應用程序執行效率。
使用ASP.NET AJAX的優勢:
1.提高瀏覽器中Web頁面的執行效率。
2.通過調用Web服務整和不同的數據源數據。
3.部分頁面刷新,只刷新已被更新的頁面。
4.簡化了服務器控件的定制以包括客戶端功能。
5.熟悉的UI元素。
6.實現客戶端與ASP.NET應用服務的集成以進行表單認證和用戶配置。
7.支持最流行的和通用的瀏覽器,包括微軟IE、Firefox和Safari。
8.具有可視化的開發界面。
ASP.NET AJAX服務器框架
ASP.NET AJAX服務器框架包括ASP.NET控件和組件,ASP.NET Web服務。
ASP.NET AJAX服務器控件包括服務器和客戶編碼。常用的ASP.NET AJAX服務器控件如下:
1.ScriptManager:管理客戶端組件的腳本資源、局部頁面的繪制、本地化和全局文件,并且可以定制用戶腳本。ScriptManager控件是實現ASP.NET AJAX程序的基礎,要實現ASP.NET AJAX程序必須在頁面中包含此控件。
2.UpdatePanel:通過異步調用來刷新部分頁面而不是刷新整個頁面。
3.UpdatePRogress:提供UpdatePanel控件中部分頁面更新的狀態信息。
4.Timer:定義執行回調的時間區間??梢允褂?/span>Timer控件來發送整個頁面,也可以在一個時間區間內把它和UpdatePanel控件一起使用,以執行局部頁面刷新。
ASP.NET AJAX客戶端框架
ASP.NET AJAX客戶端腳本庫包括以下各層內容:
1.一個瀏覽器兼容層。這個層為ASP.NET AJAX腳本提供了跨常用瀏覽器的兼容性,這些瀏覽器包括微軟的IE、Mozilla的Firefox和蘋果的Safari等。
2.ASP.NET AJAX核心服務,這個核心服務擴展了javaScript,例如把類、命名空間、事件句柄、繼承、數據類型、對象序列化擴展到Javascript中。
3.一個ASP.NET AJAX的基礎類庫,這個類庫包括組件,例如字符串創建器和擴展錯誤處理。
4.一個網絡層,該層用來處理基于Web的服務和應用程序的通信,以及管理異步遠程方法調用。
創建ASP.NET AJAX程序
新建項目,添加頁面WebForm1.aspx,向頁面中添加ASP.NET AJAX服務器控件ScriptManager控件和UpdatePanel控件,修改后的代碼如下:
1 <div> 2 <asp:ScriptManager ID="ScriptManager1" runat="server"> 3 </asp:ScriptManager> 4 <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 5 <ContentTemplate> 6 <fieldset> 7 <legend>當前時間:</legend> 8 <%=DateTime.Now.ToString () %> 9 <br />10 <asp:Button ID="Button1" Text="刷新" runat="server" />11 </fieldset>12 </ContentTemplate>13 </asp:UpdatePanel>14 </div>
ScriptManager控件
腳本控制器(ScriptManager),用來處理頁面上所有組件以及頁面局部更新,生成相關客戶端代理腳本以能夠使用客戶端腳本來調用Web服務。
在支持ASP.NET AJAX的ASP.NET頁面中,有且只能有一個ScriptManager控件來管理ASP.NET AJAX相關的控件和腳本??梢栽谠摽丶兄付ㄐ枰哪_本庫,也可以通過注冊JavaScript腳本來調用Web服務等。
ScriptManager子標簽的含義:
1.AuthenticationService:用來表示提供驗證服務的路徑。
2.ProfileService:表示提供個性化服務的路徑,指定profile服務。
3.Scripts:對腳本的調用,可以嵌套多個ScriptReference模版以實現對多個腳本文件的調用。
4.Services:對Web服務的調用,可以嵌套多個ScriptReference模版以實現對多個腳本文件的調用。
當頁面中包含一個或多個UpdatePanel控件時,ScriptManager控件管理瀏覽器中的部分頁面刷新,在頁面生命周期內,更新位于UpdatePanel控件里面的頁面。
ScriptManager控件的屬性EnablePartialRendering決定頁面是否執行部分頁面刷新,默認值為true。屬性EnablePartialRendering的設置只能在頁面初始化之前,否則會出錯。
在部分頁面刷新過程中,可按照以下方法處理出現的錯誤:
1.設置屬性AllowCustomErrorsRedirect,該屬性決定當部分頁面刷新過程中出現異常時如何定制Web.config文件中的錯誤節。
2.設置屬性AsyncPostBackErrorMessage,該屬性包含發送到瀏覽器的錯誤信息。
3.處理ScriptManager控件的AsyncPostBackError事件,該事件在部分頁面刷新過程中出現異常時被觸發。
UpdatePanel控件
UpdatePanel控件能夠刷新指定的頁面區域,而不是刷新整個頁面。UpdatePanel可以用來創建豐富的局部更新Web應用程序,其強大之處在于不用編寫任何客戶端腳本就可以自動實現局部更新。
當使用UpdatePanel控件時,頁面上的行為具有瀏覽器獨立性,并且能夠潛在地減少客戶端和服務器之間數據量的傳輸。
使用UpdatePanel控件實現局部頁面更新,需要在頁面中添加一個ScriptManager控件。頁面更新依賴于ScriptManager的EnablePartialRendering屬性,如果把屬性值設置為false,局部更新將失去作用。
UpdatePanel的常用子標簽
1. ContentTemplate子標簽:在UpdatePanel控件的ContentTemplate標簽中,開發人員能夠放置任何ASP.NET控件,這些控件在ContentTemplate標簽中,就能夠實現頁面無刷新的更新操作。使用ContentTemplateContainer屬性,可以以編程方式添加內容。
2. Triggers子標簽:局部更新的觸發器,包括兩種觸發器:
(1)AsyncPostBackTrigger異步回傳觸發器,可以實現異步更新。
?。?span style="font-family: Times New Roman;">2
)PostBackTrigger不使用異步回傳,仍然是傳統的整頁全部更新。UpdatePanel控件的主要屬性:
1.ChildrenAsTrigers:當屬性UpdateMOde為Condition時,UpdatePanel中的子控件的異步傳送是否引發UpdatePanel控件的更新。
2.RenderMode:表示UpdatePanel控件最終呈現的HTML元素。其中,Block表示<div>,Inline表示<span.
3.UpdateMode:表示UpdatePanel控件的更新模式。其中,Always表示無論有沒有Trigger,其他控件都將更新該UpdatePanel控件;Conditional表示只有當前 UpdatePanel控件的Trigger或ChildrenTriggers屬性為true時,才會引發異步回送或整頁回送,或是服務器端調用Update()方法才引發更新該UpdatePanel控件。
UpdatePanel控件的主要方法:
1.Update():對UpdatePanel控件的內容進行更新。
2.OpenFile(String):讀取一個文件到文件流。
3.DataBind():綁定一個數據源。
UpdatePanel控件刷新的條件
如果UpdateMode屬性設置為Always,UpdatePanel控件的內容在頁面上的每次回送發生時都被更新,包括在其他UpdatePanel控件里的控件和不在UpdatePanel控件里的的控件的異步回送。
如果UpdateMode屬性設置為Conditional,UpdatePanel控件的內容在下面任何一個為true時都會被更新:
1.回送是由UpdatePanel控件的觸發器引用的。
2.明確的調用UpdatePanel控件的Update()方法。
3.UpdatePanel控件被放在另一個UpdatePanel控件內且父控件進行更新時。
4.ChildrenAsTriggers屬性被設置為true,而且UpdatePanel控件的任何子控件引起一個回送。UpdatePanel控件的子控件不能引發外面的UpdatePanel控件的更新,除非它們被明確地定義為父面板的觸發器。
ChildrenAsTiggers屬性只能在UpdateMode屬性為Conditional時才可以使用。
指定UpdatePanel觸發器
添加頁面WebForm1.aspx,在頁面中添加如下代碼:
1 <div> 2 <asp:Button ID="Button1" runat="server" Text="刷新" /> 3 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 4 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 5 <Triggers> 6 <asp:AsyncPostBackTrigger ControlID="Button1" /> 7 </Triggers> 8 <ContentTemplate> 9 <fieldset>10 <legend>系統時間:</legend>11 <%=DateTime.Now.ToString () %>12 </fieldset>13 </ContentTemplate>14 </asp:UpdatePanel>15 </div>
嵌套使用UpdatePanel控件
添加頁面WebForm2.aspx,在頁面中添加如下代碼:
1 <div> 2 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 3 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 4 <ContentTemplate> 5 <fieldset> 6 <legend>當前時間:</legend> 7 <%=DateTime.Now.ToString () %> 8 <asp:Button ID="Button1" runat="server" Text="刷新" /> 9 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">10 <ContentTemplate>11 <fieldset>12 <legend>當前時間:</legend>13 <%=DateTime.Now.ToString () %>14 <asp:Button ID="Button2" runat="server" Text="刷新" />15 </fieldset>16 </ContentTemplate>17 </asp:UpdatePanel>18 </fieldset>19 </ContentTemplate>20 </asp:UpdatePanel>21 </div>
以編程方式刷新UpdatePanel控件
添加頁面WebForm3.aspx,在頁面中添加如下代碼:
1 <div>2 <asp:ScriptManager ID="ScriptManager1" runat="server" />3 </div>
WebForm3.aspx.cs中的代碼如下:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 namespace Webapplication2 9 {10 public partial class WebForm3 : System.Web.UI.Page11 {12 protected void Page_Load(object sender, EventArgs e)13 {14 UpdatePanel updatePanel = new UpdatePanel();15 updatePanel.ID = "UpdatePanel1";16 updatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;17 Button button = new Button();18 button.ID = "Button1";19 button.Text = "刷新";20 button.Click += button_Click;21 Label label = new Label();22 label.ID = "Label1";23 label.Text = DateTime.Now.ToString();24 updatePanel.ContentTemplateContainer.Controls.Add(label);25 updatePanel.ContentTemplateContainer.Controls.Add(button);26 Page.Form.Controls.Add(updatePanel);27 }28 29 void button_Click(object sender, EventArgs e)30 {31 ((Label)Page.FindControl("Label1")).Text = "當前系統時間:" + DateTime.Now.ToString();32 }33 }34 }
UpdateProgress控件
UpdateProgress控件能夠設計一個更直觀的用戶界面,該界面用來顯示一個頁面中的一個或多個UpdatePanel控件實現部分頁面刷新的過程信息,可以利用UpdateProgress控件提供更新過程的可視化的狀態信息。
UpdateProgress控件的常用屬性如下:
1.AssociatedUpdatePanelID:獲取或設置UpdateProgress控件顯示其狀態的UpdatePanel控件的ID。
2.DisplayAfter:獲取或設置顯示UpdateProgress控件之前所經過的時間值,以ms為單位。
3.DynamicLayout:獲取或設置一個值,該值可確定是否動態呈現進度模版。
4.ProgressTemplate:獲取或設置定義UpdateProgress控件內容的模版。
5.Visible:獲取或設置一個值,該值指示服務器控件是否作為UI呈現在頁上。
其中,屬性AssociatedUpdatePanelID默認值為空字符串,即UpdateProgress控件不與特定的UpdatePanel控件關聯,對于源于任何UpdatePanel控件的異步回送或來自充當面板觸發器的控件的回送,都會導致UpdateProgress控件顯示其ProgressTemplate內容。也可以將AssociatedUpdatePanelID屬性設置為同一命名容器、父命名容器或頁中的控件。
屬性DynamicLayout為布爾值,默認值為True。屬性值為true時,在首次呈現頁時不會為進度模版內容分配空間,在顯示內容時,可進行更改,呈現標記中包含進度模版的div元素的style的屬性值為none。如果屬性值為false,在首次呈現頁時為進度模版內容分配分配空間,UpdateProgress控件是頁面布局的組成部分,包含進度模版的div元素的style的屬性值為block,其可視性初始值為hidden。
UpdateProgress控件的常用方法:
1.GetScriptDescriptors:返回UpdateProgress控件的客戶端功能所需要的組件、行為及客戶端組件的列表。
2.GetScriptReferences:返回UpdateProgress控件的客戶端腳本庫依賴項的列表。
3.Render:通過使用提供的HtmlTextWriter對象,將UpdateProgress控件的呈現內容寫入瀏覽器。
4.OnPreRender:引發PreRender事件。
UpdateProgress控件的顯示規則:
1.若不設置UpdateProgress控件的AssociatedUpdatePanelID屬性,任何一個異步回送都會使UpdateProgress顯示出來。
2.若設置UpdateProgress控件的AssociatedUpdatePanelID屬性值為某個UpdatePanel控件的ID,只有改空間內的控件引發的異步回送才會使相關聯的UpdateProgress控件顯示出來。
3.全頁面回送不會對UpdatePanel產生效果。
4.如UpdatePanel控件以嵌套的方式存在,內部的UpdatePanel控件引發的回送會使外部的UpdatePanel控件相關聯的UpdateProgress控件顯示出來。
5.若UpdatePanel控件的ChildrenAsTriggers屬性值為false,該控件內的控件引發的異步回送會使相關聯的UpdateProgress控件顯示出來。
6.位于UpdatePanel外的控件引發了異步回送,只能使用PageRequestManager對象的客戶端代碼讓UpdateProgress控件與之相關聯顯示。
使用UpdatePanel控件
新建項目,添加頁面Default.aspx,在頁面中添加如下代碼:
1 <div> 2 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 3 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 4 <ContentTemplate> 5 <%= DateTime.Now.ToString() %> 6 <asp:Button ID="Button1" runat="server" Text="刷新面板" OnClick="Button_Click" /> 7 <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> 8 <ProgressTemplate> 9 更新中。。。10 </ProgressTemplate>11 </asp:UpdateProgress>12 </ContentTemplate>13 </asp:UpdatePanel>14 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">15 <ContentTemplate>16 <%= DateTime.Now.ToString () %>17 <asp:Button ID="Button2" runat="server" Text="刷新面板" OnClick="Button_Click" />18 <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">19 <ProgressTemplate>20 更新中。。。21 </ProgressTemplate>22 </asp:UpdateProgress>23 </ContentTemplate>24 </asp:UpdatePanel>25 </div>
Timer控件
定時器控件Timer屬于無人管理自動完成任務的一種特殊控件。Timer控件能夠定時引發整個頁面回送,當它與UpdatePanel控件搭配使用時,就可以定時引發異步回送并局部刷新UpdatePanel控件的內容。
Timer控件可以用在下列場合:
1.定期更新一個或多個UpdatePanel控件的內容,而且不需要刷新整個頁面。
2.每當Timer控件引發回送時就運行服務器的代碼。
3.定時同步地把整個頁面發送到服務器。
Timer控件的常用屬性:
1.Enabled:獲取或設置一個值來指明Timer控件是否定時引發一個會送到服務器上,true表示定時引發一個回送,false表示不引發回送。
2.Interval:獲取或設置定時引發一個回送的時間間隔,單位ms。
3.Visible:獲取或設置一個值,該值指示服務器控件是否作為UI呈現在頁面上。
Timer控件的常用方法:
1.GetDesignModeState():獲取傳送給瀏覽器中計時器組件的Timer對象的屬性。
2.GetScriptReference():獲取Timer控件的客戶端腳本。
3.OnTick(EventArges):觸發Timer控件的Tick事件。
4.RaisePostBackEvent(String):當一個頁面被傳送到服務器時使Timer控件觸發Tick事件。
Timer 控件是一個將JavaScript組件綁定在Web頁面中的服務器控件??梢栽诜掌魃线\行的代碼中設置Timer控件的屬性,這些屬性都會被傳送給JavaScript組件。
當Timer控件啟動一個回送時,Timer控件在服務器端觸發Tick事件,可以為Tick事件創建一個處理程序來執行頁面發送回服務器的請求。
如果不同的UpdatePanel必須以不同的時間間隔更新,那么就可以在同一頁面中包含多個Timer控件?;蛘咴O置單個Timer控件實例為同一頁面中多個UpdatePanel控件的觸發器。
Timer控件可以放在UpdatePanel控件內部,也可以放在UpdatePanel控件外部。
當Timer控件位于UpdatePanel控件內部時,則JavaScript計時器組件只有在每一次回送完成時才會重新建立,也就是說,直到頁面回送之前,定時器間隔時間不會從頭計算。
當Timer控件位于UpdatePanel控件之外時,當回送正在處理時,JavaScript計時器組件仍然會持續計時。
在UpdatePanel控件內部使用Timer控件
新建項目,添加頁面WebForm1.aspx,在頁面中添加如下代碼:
1 <div>2 <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>3 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">4 <ContentTemplate>5 <%=DateTime.Now.ToString() %>6 <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick" />7 </ContentTemplate>8 </asp:UpdatePanel>9 </div>
在UpdatePanel控件外部使用Timer控件
添加頁面WebForm2.aspx,在頁面中添加如下代碼:
1 <div> 2 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 3 <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick" /> 4 <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 5 <Triggers> 6 <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> 7 </Triggers> 8 <ContentTemplate> 9 <asp:Label ID="Label1" runat="server" />10 </ContentTemplate>11 </asp:UpdatePanel>12 </div>
WebForm2.aspx.cs中的代碼如下:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 namespace WebApplication4 9 {10 public partial class WebForm1 : System.Web.UI.Page11 {12 protected void Page_Load(object sender, EventArgs e)13 {14 if (!Page.IsPostBack)15 this.Label1.Text = DateTime.Now.ToString();16 }17 18 protected void Button_Click(object sender, EventArgs e)19 {20 System.Threading.Thread.Sleep(3000);21 }22 23 protected void Timer1_Tick(object sender, EventArgs e)24 {25 this.Label1.Text = System.DateTime.Now.ToString();26 }27 28 }29 }
新聞熱點
疑難解答