1 概述
1.2 背景
2.2 指定 UpdatePanel 的觸發(fā)器
有上例中,雖然按鈕沒(méi)有聲明在面板中,但是由于在面板中指定了它為觸發(fā)器,所以當(dāng)按鈕事件觸發(fā)時(shí),會(huì)產(chǎn)生其被包含中面板中同樣的結(jié)果,即面板被更新。
觸發(fā)器控件的事件是可選的,如果沒(méi)有指定事件,觸發(fā)器將使用控件的默認(rèn)事件。例如,對(duì)于 Button 控件,默認(rèn)事件就是 Click 事件。
2.3 在母版頁(yè)中使用 UpdatePanel
ASP.NET UpdatePanel 控件能讓你創(chuàng)建豐富的、以客戶為中心的 Web 應(yīng)用程序。使用 UpdatePanel 控件,可以刷新選擇的頁(yè)面部分而不是使用回發(fā)來(lái)刷新整個(gè)頁(yè)面,這就像是執(zhí)行了一個(gè)局部頁(yè)面更新一樣。包含一個(gè) ScriptManager 和一個(gè)或多個(gè) UpdatePanel 的 Web 頁(yè)面會(huì)自動(dòng)加入局部頁(yè)面更新,而不需要定制客戶端代碼。
1.1 場(chǎng)景
UpdatePanel 是一個(gè)服務(wù)器控件,可以幫助你開發(fā)使用復(fù)雜客戶端行為的 Web 頁(yè)面,使 Web 頁(yè)面呈現(xiàn)更多的交互給用戶。服務(wù)器和客戶端之間協(xié)調(diào)以僅更新指定的頁(yè)面部分通常需要很深的 ECMAScript(Javascript)知識(shí)。然而,通過(guò)使用UpdatePanel 控件,可以不用編寫任何客戶端腳本就可以給頁(yè)面加入局部頁(yè)面更新。如果你愿意,可以添加定制的客戶端腳本以增強(qiáng)客戶端用戶體驗(yàn)。在使用 UpdatePanel 控件時(shí),頁(yè)面行為是獨(dú)立于瀏覽器的,并且潛在的減少了客戶端和服務(wù)器的數(shù)據(jù)傳輸量。
1.2 背景
UpdatePanel 的工作是指定無(wú)須刷新整個(gè)頁(yè)面就可以更新的區(qū)域,這個(gè)過(guò)程由 ScriptManager 服務(wù)器控件和客戶端 PageRequestManager 類進(jìn)行協(xié)調(diào)。當(dāng)局部更新可用時(shí),控件可以異步的發(fā)送到服務(wù)器。異步回發(fā)的行為和常規(guī)回發(fā)一樣,結(jié)果服務(wù)器頁(yè)面會(huì)執(zhí)行完整的頁(yè)面和控件生命周期。然而,使用異步回發(fā),頁(yè)面更新僅限于封閉在 UpdatePanel 控件中標(biāo)記為更新的頁(yè)面區(qū)域。服務(wù)器僅為受影響的元素發(fā)送 HTML 標(biāo)記到瀏覽器。在瀏覽器中,客戶端 PageRequestManager 類執(zhí)行文檔對(duì)象模型 ( DOM ) 操作用更新的標(biāo)記替換得已有的 HTML 。下面的圖例展示了頁(yè)面的第一次加載,和后來(lái)的刷新 UpdatePanel 控件的內(nèi)容的異步回發(fā)。
2 UpdatePanel 的使用

UpdatePanel 的基本使用方法非常簡(jiǎn)單,向頁(yè)面中添加一個(gè) SciprtManager 控件和一個(gè)或多個(gè) UpdatePanel 控件,再把要局部更新的頁(yè)面元素和觸發(fā)更新的控件放到 UpdatePanel 控件的 ContentTemplate 屬性中即可。如下列代碼所示,在其中添加了一個(gè) Button 控件:
?1
<
asp:UpdatePanelID
=
"
UpdatePanel1
"
?2
????????UpdateMode
=
"
Conditional
"
?3
????????runat
=
"
server
"
>
?4
????
<
ContentTemplate
>
?5
????????
<
asp:Button?ID
=
"
Button1
"
?6
????????????Text
=
"
RefreshPanel
"
?7
????????????runat
=
"
server
"
/>
?8
????
</
ContentTemplate
>
?9
</
asp:UpdatePanel
>
10

?2

?3

?4

?5

?6

?7

?8

?9

10

要使用 UpdatePanel 控件可用,必須設(shè)置 ScriptManager 的 EnablePartialRendering? 屬性為 true 。
UpdatePanel 控件可以輸出為 <div> 元素或 <span> 元素,以在頁(yè)面中形成一個(gè)塊或內(nèi)聯(lián)的區(qū)域,可以設(shè)置其 RenderMode 屬性為 Block ( 默認(rèn),<div>)或 Inline ( <span> ) 來(lái)指定。
2.1 指定 UpdatePanel 的內(nèi)容
UpdatePanel 控件可以輸出為 <div> 元素或 <span> 元素,以在頁(yè)面中形成一個(gè)塊或內(nèi)聯(lián)的區(qū)域,可以設(shè)置其 RenderMode 屬性為 Block ( 默認(rèn),<div>)或 Inline ( <span> ) 來(lái)指定。
可以使用 ContentTemplate 屬性以聲明的方式或者在設(shè)計(jì)器中添加內(nèi)容到 UpdatePanel 控件中。在標(biāo)記中,這個(gè)屬性顯示為 <ContentTemplate> 元素。如果要以編程的方式添加內(nèi)容,可以使用 ContentTemplateContainer 屬性。
包含一個(gè)或多個(gè) UpdatePanel 控件的頁(yè)面在第一次輸出時(shí),所有 UpdatePanel 控件中的內(nèi)容都會(huì)被輸出并被發(fā)送到瀏覽器。在后來(lái)的異步更新中,單個(gè) UpdatePanel 控件中的內(nèi)容可能會(huì)被更新。更新依賴于面板的設(shè)置、導(dǎo)致回發(fā)的元素以及指定給每個(gè)面板的代碼。
包含一個(gè)或多個(gè) UpdatePanel 控件的頁(yè)面在第一次輸出時(shí),所有 UpdatePanel 控件中的內(nèi)容都會(huì)被輸出并被發(fā)送到瀏覽器。在后來(lái)的異步更新中,單個(gè) UpdatePanel 控件中的內(nèi)容可能會(huì)被更新。更新依賴于面板的設(shè)置、導(dǎo)致回發(fā)的元素以及指定給每個(gè)面板的代碼。
2.2 指定 UpdatePanel 的觸發(fā)器
默認(rèn)情況下,UpdatePanel 控件中的任何控件回發(fā)都將導(dǎo)致異步回發(fā)并刷新面板的內(nèi)容。然而,也可以配置頁(yè)面中且不在面板中的其他控件來(lái)刷新 UpdatePanel 控件。可以為 UpdatePanel 控件定義一個(gè)觸發(fā)器來(lái)完成此目的。觸發(fā)器是指定哪個(gè)回發(fā)控件和事件來(lái)導(dǎo)致面板的更新的綁定。當(dāng)觸發(fā)器控件指定的事件觸發(fā)時(shí)(如一個(gè)按鈕的 Click 事件),更新面板將被刷新。
下列示例展示了如何添加一個(gè)觸發(fā)器到 UpdatePanel 面板中去。
<
asp:Button?ID
=
"
Button1
"
?????????Text
=
"
Refresh?Panel
"
??????????runat
=
"
server
"
?
/>
<
asp:ScriptManager?ID
=
"
ScriptManager1
"
??????????runat
=
"
server
"
?
/>
<
asp:UpdatePanel?ID
=
"
UpdatePanel1
"
???UpdateMode
=
"
Conditional
"
?runat
=
"
server
"
>
?????????
<
Triggers
>
????????????????
<
asp:AsyncPostBackTrigger?ControlID
=
"
Button1
"
?
/>
????????
</
Triggers
>
???????
<
ContentTemplate
>
??????????????
<
fieldset
>
??????????????????
<
legend
>
UpdatePanel?內(nèi)容
</
legend
>
??????????????????
<%=
DateTime.Now.ToString()?
%>
??????????????
</
fieldset
>
???????
</
ContentTemplate
>
</
asp:UpdatePanel
>
觸發(fā)器由在 UpdatePanel 控件的 <Triggers> 元素中的 <asp:AsyncPostBackTrigger> 元素定義。(如果是在 Visual Studio 中編輯頁(yè)面,就可以在 UpdatePanel 的屬性面板中單擊 Triggers 屬性后面的省略號(hào)按鈕打開一個(gè) UpdatePanelTrigger 集合編輯器對(duì)話框來(lái)創(chuàng)建觸發(fā)器。)觸發(fā)器必要的屬性是 ControlID ,用它來(lái)指定可以導(dǎo)致面板更新的控件的 ID 。
下列示例展示了如何添加一個(gè)觸發(fā)器到 UpdatePanel 面板中去。

















有上例中,雖然按鈕沒(méi)有聲明在面板中,但是由于在面板中指定了它為觸發(fā)器,所以當(dāng)按鈕事件觸發(fā)時(shí),會(huì)產(chǎn)生其被包含中面板中同樣的結(jié)果,即面板被更新。
觸發(fā)器控件的事件是可選的,如果沒(méi)有指定事件,觸發(fā)器將使用控件的默認(rèn)事件。例如,對(duì)于 Button 控件,默認(rèn)事件就是 Click 事件。
2.3 在母版頁(yè)中使用 UpdatePanel
要在母版頁(yè)中使用 UpdatePanel 控件,必須確定如何使用 ScriptManager 控件。如果在母版頁(yè)面中放置了一個(gè) ScriptManater 控件,則 ScriptManager 控件可以在所有的內(nèi)容面中起作用。(如果要在內(nèi)容頁(yè)中聲明腳本或服務(wù),可以在頁(yè)面中添加一個(gè) ScriptManagerProxy,它具有和 ScriptManager 差不多一樣的屬性和方法。)
如果在母版頁(yè)中沒(méi)有包含 ScriptManager 控件,就必須在包含 UpdatePanel 控件的每個(gè)內(nèi)容頁(yè)是都要放置一個(gè) ScriptManager 控件,設(shè)計(jì)的選擇依賴于在應(yīng)用程序中將如何管理客戶端腳本。
如果在母版頁(yè)中包含了 ScriptManager 控件,而在某個(gè)內(nèi)容頁(yè)中又不打算使用局部頁(yè)面輸出的功能時(shí),必須用程序設(shè)置內(nèi)容中的 ScriptManager 控件的 EnablePartialRendering 為 false? 。
2.4 使用嵌套的 UpdatePanel 控件
如果在母版頁(yè)中沒(méi)有包含 ScriptManager 控件,就必須在包含 UpdatePanel 控件的每個(gè)內(nèi)容頁(yè)是都要放置一個(gè) ScriptManager 控件,設(shè)計(jì)的選擇依賴于在應(yīng)用程序中將如何管理客戶端腳本。
如果在母版頁(yè)中包含了 ScriptManager 控件,而在某個(gè)內(nèi)容頁(yè)中又不打算使用局部頁(yè)面輸出的功能時(shí),必須用程序設(shè)置內(nèi)容中的 ScriptManager 控件的 EnablePartialRendering 為 false? 。
UpdatePanel 控件可以嵌套使用,如果父面板被刷新,則所有嵌套的面板也都會(huì)被刷新。
下列代碼展示了如何在一個(gè) UpdatePanel 控件中定義另一個(gè) UpdatePanel 控件。
2.5 用程序創(chuàng)建 UpdatePanel 控件
下列代碼展示了如何在一個(gè) UpdatePanel 控件中定義另一個(gè) UpdatePanel 控件。
?1
<%
@?Page?Language
=
"
C#
"
?
%>
?2
<!
DOCTYPE?html?PUBLIC?
"
-//W3C//DTD?XHTML?1.0?Transitional//EN
"
?3
?
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
?4
<
html?xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
?5
<
head?id
=
"
Head1
"
?runat
=
"
server
"
>
?6
????
<
title
>
UpdatePanelUpdateMode?示例
</
title
>
?7
????
<
style?type
=
"
text/css
"
>
?8
????div.NestedPanel
?9
????
{
10
??????position:?relative;
11
??????margin:?
2
%
?
5
%
?
2
%
?
5
%
;
12
????}
13
????
</
style
>
14
</
head
>
15
<
body
>
16
????
<
form?id
=
"
form1
"
?runat
=
"
server
"
>
17
????????
<
div
>
18
????????????
<
asp:ScriptManager?ID
=
"
ScriptManager
"
19
???????????????????????????????runat
=
"
server
"
?
/>
20
????????????
<
asp:UpdatePanel?ID
=
"
OuterPanel
"
21
?????????????????????????????UpdateMode
=
"
Conditional
"
22
?????????????????????????????runat
=
"
server
"
>
23
????????????????
<
ContentTemplate
>
24
????????????????????
<
div
>
25
????????????????????????
<
fieldset
>
26
????????????????????????????
<
legend
>
外層?Panel?
</
legend
>
27
????????????????????????????
<
br?
/>
28
????????????????????????????
<
asp:Button?ID
=
"
OPButton1
"
29
????????????????????????????????????????Text
=
"
外層面板按鈕
"
30
????????????????????????????????????????runat
=
"
server
"
?
/>
31
????????????????????????????
<
br?
/>
32
????????????????????????????最后更新在:
33
????????????????????????????
<%=
?DateTime.Now.ToString()?
%>
34
????????????????????????????
<
br?
/>
35
????????????????????????????
<
br?
/>
36
????????????????????????????
<
asp:UpdatePanel?ID
=
"
NestedPanel1
"
37
???????????????????????????????????????????????UpdateMode
=
"
Conditional
"
38
???????????????????????????????????????????????runat
=
"
server
"
>
39
????????????????????????????????
<
ContentTemplate
>
40
????????????????????????????????????
<
div?
class
=
"
NestedPanel
"
>
41
????????????????????????????????????????
<
fieldset
>
42
????????????????????????????????????????????
<
legend
>
嵌套面板
</
legend
>
43
????????????????????????????????????????????
<
br?
/>
44
????????????????????????????????????????????最后更新在:
45
????????????????????????????????????????????
<%=
?DateTime.Now.ToString()?
%>
46
????????????????????????????????????????????
<
br?
/>
47
????????????????????????????????????????????
<
asp:Button?ID
=
"
NPButton1
"
48
????????????????????????????????????????????????????????Text
=
"
嵌套面板按鈕
"
49
????????????????????????????????????????????????????????runat
=
"
server
"
?
/>
50
????????????????????????????????????????
</
fieldset
>
51
????????????????????????????????????
</
div
>
52
????????????????????????????????
</
ContentTemplate
>
53
????????????????????????????
</
asp:UpdatePanel
>
54
????????????????????????
</
fieldset
>
55
????????????????????
</
div
>
56
????????????????
</
ContentTemplate
>
57
????????????
</
asp:UpdatePanel
>
58
????????
</
div
>
59
????
</
form
>
60
</
body
>
61
</
html
>
62

?2

?3

?4

?5

?6

?7

?8

?9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

2.5 用程序創(chuàng)建 UpdatePanel 控件
要用程序添加一個(gè) UpdatePanel 控件到頁(yè)面中,可以先創(chuàng)建一個(gè)新的 UpdatePanel 實(shí)例,然后使用它的 ContentTemplateContainer 屬性的 Add( Control ) 方法來(lái)添加其他控件。不能直接使用 ContentTemplate? 屬性來(lái)添加控件。
如果 UpdatePanel 控件是程序添加的,只有來(lái)自同樣命名容器如 UpdatePanel 控件中控件的回發(fā)才可以被使用為面板的觸發(fā)器。
下列代碼演示了如何用程序添加 UpdatePanel 控件。
<%
@?Page?Language
=
"
C#
"
?
%>
<!
DOCTYPE?html?PUBLIC?
"
-//W3C//DTD?XHTML?1.0?Transitional//EN
"
?
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
script?runat
=
"
server
"
>
????
protected
?
void
?Page_Load(
object
?sender,?EventArgs?e)
????
{
????????UpdatePanel?up1?
=
?
new
?UpdatePanel();
????????up1.ID?
=
?
"
UpdatePanel1
"
;
????????up1.UpdateMode?
=
?UpdatePanelUpdateMode.Conditional;
????????Button?button1?
=
?
new
?Button();
????????button1.ID?
=
?
"
Button1
"
;
????????button1.Text?
=
?
"
Submit
"
;
????????button1.Click?
+=
?
new
?EventHandler(Button_Click);
????????Label?label1?
=
?
new
?Label();
????????label1.ID?
=
?
"
Label1
"
;
????????label1.Text?
=
?
"
A?full?page?postback?occurred.
"
;
????????up1.ContentTemplateContainer.Controls.Add(button1);
????????up1.ContentTemplateContainer.Controls.Add(label1);
????????Page.Form.Controls.Add(up1);
????}
????
protected
?
void
?Button_Click(
object
?sender,?EventArgs?e)
????
{
????????((Label)Page.FindControl(
"
Label1
"
)).Text?
=
?
"
Panel?refreshed?at?
"
?
+
????????????DateTime.Now.ToString();
????}
</
script
>
<
html?xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head?id
=
"
Head1
"
?runat
=
"
server
"
>
????
<
title
>
UpdatePanel?Added?Programmatically?Example
</
title
>
</
head
>
<
body
>
????
<
form?id
=
"
form1
"
?runat
=
"
server
"
>
????????
<
div
>
????????????
<
asp:ScriptManager?ID
=
"
TheScriptManager
"
???????????????????????????????runat
=
"
server
"
?
/>
????????
</
div
>
????
</
form
>
</
body
>
</
html
>
3 UpdatePanel 的關(guān)鍵屬性
如果 UpdatePanel 控件是程序添加的,只有來(lái)自同樣命名容器如 UpdatePanel 控件中控件的回發(fā)才可以被使用為面板的觸發(fā)器。
下列代碼演示了如何用程序添加 UpdatePanel 控件。










































3 UpdatePanel 的關(guān)鍵屬性
ChildrenAsTriggers:
指示來(lái)自 UpdatePanel 控件的直接子控件的回發(fā)是否更新面板的內(nèi)容。設(shè)置為 true 時(shí)更新,否則不更新,默認(rèn)為 true 。如果此屬性設(shè)置為 false ,UpdatePanel 控件的 UpdateMode 就必須設(shè)置為 Conditional ,否則會(huì)拋出 InvalidOperationException 異常。
UpdateMode:
指示什么時(shí)候需要更新面板。當(dāng)一個(gè) UpdatePanel 控件沒(méi)有包含在另一個(gè) UpatePanel 控件中時(shí),面板的更新是根據(jù) UpdateMode 、ChildrenAsTriggers 屬性的設(shè)置,以及觸發(fā)器的集合來(lái)進(jìn)行的。當(dāng)一個(gè) UpdatePanel 控件在另一個(gè) UpdatePanel 控件內(nèi)部時(shí),子面板會(huì)自動(dòng)在父面板更新時(shí)更新。
UpdatePanel 控件的內(nèi)容在下列情形下會(huì)更新:
UpdatePanel 控件的內(nèi)容在下列情形下會(huì)更新:
- 如果 UpdateMode 屬性設(shè)置為 Alwarys 時(shí),UpdatePanel 控件中的內(nèi)容會(huì)在源自頁(yè)面上任何地方的每個(gè)回發(fā)時(shí)更新。這包括由包含在其他 UpdatePanel 控件中的控件的回發(fā)和沒(méi)有在 UpdatePanel 控件中的回發(fā)。
- 如果 UpdatePanel 控件嵌套在另一個(gè) UpdatePanel 控件中時(shí),父面板更新時(shí)它也會(huì)被更新。
-
如果 UpdateMode 屬性被設(shè)置為 false 時(shí),且出現(xiàn)下列條件之一時(shí):
- 顯式調(diào)用 UpdatePanel 控件的 Update() 方法。
- 由 UpdatePanel 控件中的 Triggers 屬性定義的觸發(fā)器控件引起的回送。在這種情況下,控件會(huì)顯式的觸發(fā)面板內(nèi)容的更新。定義為觸發(fā)器的控件可以在 UpdatePanel 控件的內(nèi)部也可以在其外部。
-
ChildrenAsTriggers 屬性設(shè)置為 true ,并且是由 UpdatePanel 控件中的子控件導(dǎo)致的回發(fā)。在嵌套的 UpdatePanel 控件中的子控件不會(huì)引起外層 UpdatePanel 控件的更新,除非顯示的定義為觸發(fā)器。
4 總結(jié)
由以上內(nèi)容可以看出,使用 UpdatePanel 控件可以方便的幫助大家開發(fā)出具有 AJAX 特性的 ASP.NET 應(yīng)用程序來(lái)。當(dāng)然,它也不是萬(wàn)能的,過(guò)度的使用會(huì)引起一定的性能開銷,同時(shí)它還與現(xiàn)在的部分 ASP.NET 控件不兼容,如 TreeView、Menu,以及 WebParts 控件等。
?
TrackBack:http://www.cnblogs.com/cxy521/archive/2008/01/22/1048264.html
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
