服務(wù)熱線
153 8323 9821
ScriptManager和UpdatePanel控件聯(lián)合使用可以實(shí)現(xiàn)頁(yè)面異步局部更新的效果。其中的UpdatePanel就是設(shè)置頁(yè)面中異 步局部更新區(qū)域,它必須依賴于ScriptManager存在,因?yàn)镾criptManger控件提供了客戶端腳本生成與管理UpdatePanel的功 能。
幾個(gè)重要的屬性:
ScriptManager控件的EnablePartialRendering屬性:true-實(shí)現(xiàn)頁(yè)面的異步局部更新;false-實(shí)現(xiàn)全頁(yè)面的刷新。
UpdatePanel控件的RenderMode屬性:InLine-UpdatePanel控件被解析成HTML的<span>標(biāo)記;Block-UpdatePanel控件被解析成HTML控件的<DIV>。
UpdatePanel控件的UpdateMode屬性:Always-UpdatePanel頁(yè)面上任何一處發(fā)生的回發(fā)操作都會(huì)產(chǎn)生頁(yè)局部更新;Conditional-只在特定的情況下才產(chǎn)頁(yè)面的回發(fā),如執(zhí)行UpdatePanel控件的update()方法或在指定的觸發(fā)器的操作下。
UpdatePanel控件的ChildAsTrigger屬性:指示UpdatePanel內(nèi)部控件引起的回發(fā)是否產(chǎn)生當(dāng)前UpdatePanel控件的局部更新。如果UpdateMode設(shè)為Always的話,那ChildAsTrigger局性必須設(shè)為True,否則運(yùn)行出錯(cuò)。
一、UpdatePanel內(nèi)部的控件引起的回發(fā),來(lái)更新當(dāng)前UpdatePanel內(nèi)部的控件內(nèi)容:
1.向頁(yè)面中加入ScriptManager、UpdatePanel控件和一個(gè)Label控件(Label2)。
2.在UpdatePanel中加入一個(gè)Button、一個(gè)Label(Label1)。
3.雙擊Button在事件處理程序中寫(xiě)入下列代碼:Label1.Text = DateTime.Now.ToString();
4.在Page_Load事件中寫(xiě)入下列代碼:Label2.Text = DateTime.Now.ToString();
5.運(yùn)行頁(yè)面,發(fā)現(xiàn)每次點(diǎn)擊按鈕都會(huì)產(chǎn)生異步局步刷新,只有Label1的內(nèi)容發(fā)生更改,頁(yè)面上的Label2時(shí)間沒(méi)有發(fā)生更改。
代碼如下:
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString(); ;
}
protected void Page_Load(object sender, EventArgs e)
{
Label2.Text = DateTime.Now.ToString();
}
注意:此時(shí)的ScriptManager的EnablePartialRendering屬性應(yīng)設(shè)為true。UpdatePanel的UpdateMode屬性應(yīng)設(shè)為Always。ChildAsTrigger屬性應(yīng)設(shè)為true。
二、UpdatePanel控件外部的控件引起的回發(fā),來(lái)異步更新UpdatePanel內(nèi)部的內(nèi)容:
雖然上面的方式能夠很簡(jiǎn)單地實(shí)現(xiàn)異步局部更新的功能,但就性能方面考慮,我們應(yīng)當(dāng)只將數(shù)據(jù)確實(shí)會(huì)發(fā)生變化的控件擺放在UpdatePanel中,這就可能會(huì)出現(xiàn)引起回發(fā)的控件不在UpdatePanel內(nèi)的情況。
有兩種方式實(shí)現(xiàn)這種效果:
a.在Page_Load方法中用ScriptManager1.RegisterAsyncPostBackControl()來(lái)注冊(cè)一下要實(shí)現(xiàn)異步更新的控件。
b.用觸發(fā)器來(lái)實(shí)現(xiàn)。
1、ScriptManager1.RegisterAsyncPostBackControl()注冊(cè)的控件可以實(shí)現(xiàn)對(duì)所有的UpdatePanel控件的異步更新。
如:ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實(shí)現(xiàn)對(duì)Button2的注 冊(cè),那此時(shí)Button2的回發(fā)就變成一個(gè)異步回發(fā)(頁(yè)面不會(huì)刷新),它會(huì)導(dǎo)致頁(yè)面上所有的UpdatePanel的內(nèi)容的更新。
注意:此時(shí)的ScriptManager的EnablePartialRendering屬性應(yīng)設(shè)為true。UpdatePanel的UpdateMode屬性應(yīng)設(shè)為Always。
2、ScriptManager1.RegisterAsyncPostBackControl()注冊(cè)的控件可以實(shí)現(xiàn)針對(duì)特定UpdatePanel控件的異步更新。
a.把頁(yè)面上所有的UpdatePanel控件的UpdateMode設(shè)為Conditional。
b.ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實(shí)現(xiàn)對(duì)Button2的注冊(cè)。
c.在Button2控件的Click事件中后面加入后面的代碼:UpdatePanel1.Update();
這樣Button2按鈕只對(duì)UpdatePanel1控件實(shí)現(xiàn)的異步的局部刷新。
注意:這里的UpdatePanel的屬性要設(shè)為Conditional,如果還是Always的話,會(huì)出現(xiàn)所有的UpdatePanel都刷新的效果。
3、觸發(fā)器
如果頁(yè)面上有多個(gè)UpdatePanel控件,如果要實(shí)現(xiàn)外部的控件的回發(fā)引發(fā)指定UpdatePanel的更新的話,那應(yīng)當(dāng)為要實(shí)現(xiàn)刷新的UpdatePanel控件建立一個(gè)觸發(fā)器。
a.選中要進(jìn)行局部更新的UpdatePanel控件。
b.在其屬性頁(yè)中點(diǎn)擊Triggers集合屬性右邊的小按鈕。
c.在彈出的對(duì)話框中,的成員列表中添加一個(gè)AsyncPostBackTriggers成員。
d.指定AsyncPostBackTriggers成員的ControlID和EventName,即引發(fā)異步回送的控件的ID和該控件的事件。
完成以上步驟后,切換到HTML頁(yè)面就會(huì)出現(xiàn)下列代碼:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger