AJAX代表非同步的JavaScript和XML。這是一個跨平臺的技術,可以加快回應速度。 AJAX伺服器控件將腳本添加到由流覽器執行和處理的頁面。
但是,像其他ASP.NET伺服器控件一樣,這些AJAX伺服器控件也可以擁有與它們關聯的方法和事件處理程式,這些處理程式在伺服器端處理。
Visual Studio IDE中的控件工具箱包含一組稱為“AJAX擴展” 的控件,
ScriptManager控件
ScriptManager
控件是最重要的控件,並且必須存在於其他控件才能在頁面上工作。
它的基本語法,如下:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
如果從“添加專案” 對話框創建“啟用Ajax的站點” 或添加“AJAX Web窗體” ,則Web窗體將自動包含腳本管理器控件。 ScriptManager
控件負責所有伺服器端控件的客戶端腳本。
UpdatePanel控件
UpdatePanel
控件是一個容器控件,並從Control
類派生。 它充當其中的子控件的容器,沒有自己的介面。 當它內部的一個控件觸發了一個提交(post
)後,UpdatePanel
會介入以非同步啟動提交並更新頁面的那一部分。
例如,如果按鈕控件位於更新面板內部並且被點擊,則只有更新面板中的控件將受到影響,頁面其他部分的控件將不受影響。這被稱為部分回傳或非同步回傳。
示例
在應用程式中添加一個AJAX Web表單。 它包含默認的腳本管理器(ScriptManager
)控件,插入更新面板。 在更新面板控件內放置一個按鈕控件和一個標籤控件。 在面板外面放置另一組按鈕和標籤。
首先打開Visual Studio,創建一個名稱為:AjaxControl 的空ASP.NET網站專案,如下所示 -
在這個專案名稱上點擊右鍵,在彈出的選項中選擇:添加 -> 添加新項,選擇Web窗體,創建一個檔:Default.aspx, 如下所示 -
設計視圖如下所示:
請注意,執行該頁面時,如果點擊全部回傳按鈕,則會更新兩個標籤中的時間,但如果單擊局部回傳按鈕,則只會更新更新面板中的標籤。
運行上面專案,得到以下結果 -
點擊控件後,可以看到以下效果 -
一個頁面可以包含多個更新面板,每個面板包含其他控件(如網格)並顯示不同部分的數據。
當全部回傳 發生時,更新面板內容默認內容。可以通過更改控件的UpdateMode
屬性來更改此默認模式。看看更新面板的其他屬性。
UpdatePanel控件的屬性
下表顯示了UpdatePanel
控件的屬性:
編號 | 屬性 | 描述 |
---|---|---|
1 | ChildrenAsTriggers |
此屬性指示回發是否來自子控件,這會導致更新面板刷新。 |
2 | ContentTemplate |
它是內容範本,並定義在更新面板中顯示的內容。 |
3 | ContentTemplateContainer |
檢索動態創建的範本容器對象,並用於以編程方式添加子控件。 |
4 | IsInPartialRendering |
指示面板是否作為部分回貼的一部分進行更新。 |
5 | RenderMode |
顯示渲染模式。可用的模式是Block 和Inline 。 |
6 | UpdateMode |
通過確定一些條件來獲取或設置渲染模式。 |
7 | Triggers |
定義每個對應於導致面板自動刷新的事件的收集觸發器對象。 |
UpdatePanel控件的方法
下表顯示了UpdatePanel
控件的方法:
編號 | 方法 | 描述 |
---|---|---|
1 | CreateContentTemplateContainer |
創建一個Control 對象,作為定義UpdatePanel 控件內容的子控件的容器。 |
2 | CreateControlCollection |
返回UpdatePanel 控件中包含的所有控件的集合。 |
3 | Initialize |
如果啟用了部分頁面呈現,則初始化UpdatePanel 控件觸發器集合。 |
4 | Update |
導致更新UpdatePanel 控件的內容。 |
UpdatePanel
控件的行為取決於UpdateMode
屬性和ChildrenAsTriggers
屬性的值。
UpdateMode | ChildrenAsTriggers | 影響 |
---|---|---|
Always |
False |
非法參數 |
Always |
True |
如果整個頁面刷新或其上的子控件回發,UpdatePanel 會刷新。 |
Conditional |
False |
如果整個頁面刷新或者觸發外部控件啟動刷新,UpdatePanel 將刷新。 |
Conditional |
True |
UpdatePanel 刷新整個頁面刷新,或者其上的子控件回發或觸發控件在外部啟動刷新。 |
UpdateProgress控件
當一個或多個更新面板控件正在更新時,UpdateProgress
控件在流覽器上提供了一種回饋。 例如,在執行某些面向資料庫的作業時,用戶登錄或等待伺服器回應。
它提供了一個可視的確認,如“正在載入頁面…”,表示正在進行工作。
UpdateProgress
控件的語法是:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
上面的代碼片段顯示了ProgressTemplate
標籤中的簡單消息。但是,這可能是一個圖像或其他相關的控制。 UpdateProgress
控件將顯示每個非同步回發,除非使用AssociatedUpdatePanelID
屬性將其分配給單個更新面板。
UpdateProgress控件的屬性
下表顯示了UpdateProgress
控件的屬性:
編號 | 屬性 | 描述 |
---|---|---|
1 | AssociatedUpdatePanelID |
獲取並設置與此控件關聯的更新面板的ID。 |
2 | Attributes |
獲取或設置UpdateProgress 控件的級聯樣式表(CSS)屬性。 |
3 | DisplayAfter |
獲取並設置顯示進度範本的時間(以毫秒為單位)。 默認值是500 。 |
4 | DynamicLayout |
指示是否動態呈現進度範本。 |
5 | ProgressTemplate |
指示在非同步回發期間顯示的範本,其比DisplayAfter 時間花費更多的時間。 |
UpdateProgress控件的方法
下表顯示了UpdateProgress
控件的方法:
編號 | 方法 | 描述 |
---|---|---|
1 | GetScriptDescriptors |
返回UpdateProgress 控件的客戶端功能所需的組件,行為和客戶端控件的列表。 |
2 | GetScriptReferences |
返回UpdateProgress 控件的客戶端腳本庫依賴項列表。 |
Timer控制
定時器(Timer
)控件用於自動啟動回發。 這可以通過兩種方式來完成:
(1)設置UpdatePanel控件的Triggers屬性:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" />
</Triggers>
(2)直接在UpdatePanel
中放置一個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" style="width:304px" >
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>