AJAX 代表 Asynchronous JavaScript and XML。這是一項跨平台的能加速反應時間的技術。 AJAX 伺服器控制項將腳本新增至頁面,它由瀏覽器執行並處理。
然而像其他ASP.NET 伺服器控制項一樣,這些AJAX 伺服器控制項也能擁有與它們連結的方法和事件句柄,它們都在伺服器端處理。
在Visual Studio IDE 裡的control 工具箱含有一組叫作'AJAX' 的控制元件。
ScriptManager 控制項是最重要的控制項且必須出現在頁面上以讓其他控制項運作。
它有基本語法:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
如果你建立一個'Ajax Enabled site' 或從'Add Item' 對話方塊新增一個'AJAX Web Form',網頁會自動形成,並包含script manager 控制項。 ScriptManager 控制項為所有的伺服器端的控制項照顧客戶機端的腳本。
UpdatePanel 控制項是一個容器控制項且源自Control 類別。它作為它裡面的子控制項的容器而運作並且不擁有它自己的介面。當它其中的一個控制觸發提交回來,UpdatePanel 幹預異步啟動並更新部分頁面。
例如,如果一個button 控制項在update panel 內,並且它被點擊了,只有update panel 內的控制項會被影響,頁面其他部分的控制項將不會被影響。這被叫做部分提交返回或非同步提交返回。
在你的應用程式中加入一個AJAX 網頁表單。它包含預設的script manager 控制項。插入一個update panel。將一個button 控制項和一個label 標籤放置在update panel 控制項內。將另一個button 和label 集放置在panel 外。
設計視圖如下圖所示:
資源文件如下所示:
<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>Outside the Update Panel</p> <p> <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="server"></asp:Label></form>
button 控制項對時間處理程序都有相同的程式碼:
string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "Showing time from panel" + time;lbltotal.Text = "Showing time from outside" + time;
觀察當頁面被執行時,如果總的提交返回按鈕被點擊了,它將更新標籤中都更新時間,但是如果部分提交返回按鈕被點擊,它僅僅更新在update panel 內的標籤。
屬性 | 描述 |
---|---|
ChildrenAsTriggers | 這個屬性表示傳回是否來自子控件,這將引起update panel 的刷新。 |
ContentTemplate | 它是內容模板並且定義了當它出現時什麼出現在update panel 內。 |
ContentTemplateContainer | 檢索動態建立的template container 物件並用來以程式設計方式新增子控制項。 |
IsInPartialRendering | 指出panel 是否被更新作為部分提交返回的一部分。 |
RenderMode | 展示render 模式。可用的模式是Block 和Inline。 |
UpdateMode | 透過確定一些條件來獲得或設定rendering 模式。 |
Triggers | 定義collection trigger 對象,每一個對應於一個引發panel 自動更新的事件。 |
以下表格展示了update panel 控制項的方法:
方法 | 描述 |
---|---|
CreateContentTemplateContainer | 建立了一個Control 物件來作為定義UpdatePanel 控制項內容的子控制項的容器。 |
CreateControlCollection | 傳回所有包含在UpdatePanel 控制項內的控制項集合 |
Initialize | 如果部分頁面繪製被執行的話,初始化UpdatePanel 控制項觸發器集合。 |
Update | 引起UpdatePanel 控制內容的更新。 |
update panel 的行為依賴UpdateMode 屬性和ChildrenAsTriggers 屬性的值。
方法 | 描述 | 影響 |
---|---|---|
Always | False | 不合法的參數。 |
Always | True | 如果整個頁面更新或一個它上面的一個子控制項返回,UpdatePanel 更新。 |
Conditional | False | 如果整個頁面更新或它外部的一個觸發的控制項開始一次更新,UpdatePanel 更新。 |
Conditional | True | 如果整個頁面更新或一個它上面的一個子控制項回傳或一個它外部的觸發控制項開始一次更新,UpdatePanel 更新。 |
當一個或更多的update panel 控制項被更新時,UpdateProgress 控制項提供了瀏覽器的一種回饋。例如,當一個使用者登入或執行一些面向資料庫的工作時等待伺服器回應。
它提供瞭如"Loading page..." 的視覺確認,表示工作在處理中。
UpdateProgress 控制項的語法是:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> Loading... </ProgressTemplate></asp:UpdateProgress>
以上的片段展示了一個簡單的帶有ProgressTemplate 標籤的資訊。但是,它可以是一張圖片或其他相關的控制項。 UpdateProgress 控制項顯示每個非同步的返回,除非它使用AssociatedUpdatePanelID 屬性,被指定為單獨的update panel。
以下的表格展示了update progress 控制項的屬性。
屬性 | 描述 |
---|---|
AssociatedUpdatePanelID | 取得並用這個控制項所聯絡的控制項設定update panel 的ID。 |
Attributes | 取得並設定UpdateProgress 控制項的cascading style sheet(CSS)屬性。 |
DisplayAfter | 在處理模板被展示後獲得並以毫秒設定時間。預設是500。 |
DynamicLayout | 指示進程模板是否被動態展示。 |
ProgressTemplate | 指示模板在一個比DisplayAfter 時間花了更多時間的非同步提交返回的過程中展示。 |
以下的表格展示了update progress 控制項的方法:
方法 | 描述 |
---|---|
GetScriptDescriptors | 傳回UpdateProgress 控制項的客戶端功能所需要的元件,行為和客戶端控制項的清單。 |
GetScriptReferences | 傳回一個客戶端腳本依賴UpdateProgress 控制項的清單。 |
timer 控制項被用來自動初始化提交回傳。這可以用兩種方式完成:
(1)設定UpdatePanel 控制項的Triggers 屬性。
<Triggers> <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" /></Triggers>
(2)直接在UpdatePanel 內部放置一個timer 控制項來作為一個子控制項的觸發器。一個單獨的timer 能作為許多UpdatePanel 的觸發器。
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>