ScriptManager局部刷新

ScriptManager和UpdatePanel控件聯合使用能夠實現頁面異步局部更新的效果。其中的UpdatePanel就是設置頁面中異步局部更新區域,它必須依賴於ScriptManager存在,由於ScriptManger控件提供了客戶端腳本生成與管理UpdatePanel的功能。
幾個重要的屬性:
    ScriptManager控件的EnablePartialRendering屬性:true-實現頁面的異步局部更新;false-實現全頁面的刷新。
    UpdatePanel控件的RenderMode屬性:InLine-UpdatePanel控件被解析成HTML的<span>標記;Block-UpdatePanel控件被解析成HTML控件的<DIV>。
    UpdatePanel控件的UpdateMode屬性:Always-UpdatePanel頁面上任何一處發生的回發操做都會產生頁局部更新;Conditional-只在特定的狀況下才產頁面的回發,如執行UpdatePanel控件的update()方法或在指定的觸發器的操做下。
    UpdatePanel控件的ChildAsTrigger屬性:指示UpdatePanel內部控件引發的回發是否產生當前UpdatePanel控件的局部更新。若是UpdateMode設爲Always的話,那ChildAsTrigger局性必須設爲True,不然運行出錯。

1、UpdatePanel內部的控件引發的回發,來更新當前UpdatePanel內部的控件內容:
    1.向頁面中加入ScriptManager、UpdatePanel控件和一個Label控件(Label2)。
    2.在UpdatePanel中加入一個Button、一個Label(Label1)。
    3.雙擊Button在事件處理程序中寫入下列代碼:Label1.Text = DateTime.Now.ToString();
    4.在Page_Load事件中寫入下列代碼:Label2.Text = DateTime.Now.ToString();
    5.運行頁面,發現每次點擊按鈕都會產生異步局步刷新,只有Label1的內容發生更改,頁面上的Label2時間沒有發生更改。
    
    代碼以下:
        <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();
        } 

       注意:此時的ScriptManager的EnablePartialRendering屬性應設爲true。UpdatePanel的UpdateMode屬性應設爲Always。ChildAsTrigger屬性應設爲true。

2、UpdatePanel控件外部的控件引發的回發,來異步更新UpdatePanel內部的內容:
    雖然上面的方式可以很簡單地實現異步局部更新的功能,但就性能方面考慮,咱們應當只將數據確實會發生變化的控件擺放在UpdatePanel中,這就可能會出現引發回發的控件不在UpdatePanel內的狀況。
    有兩種方式實現這種效果:
    a.在Page_Load方法中用ScriptManager1.RegisterAsyncPostBackControl()來註冊一下要實現異步更新的控件。
    b.用觸發器來實現。
    
    一、ScriptManager1.RegisterAsyncPostBackControl()註冊的控件能夠實現對全部的UpdatePanel控件的異步更新。
        如:ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實現對Button2的註冊,那此時Button2的回發就變成一個異步回發(頁面不會刷新),它會致使頁面上全部的UpdatePanel的內容的更新。
        注意:此時的ScriptManager的EnablePartialRendering屬性應設爲true。UpdatePanel的UpdateMode屬性應設爲Always。
    二、ScriptManager1.RegisterAsyncPostBackControl()註冊的控件能夠實現針對特定UpdatePanel控件的異步更新。
       a.把頁面上全部的UpdatePanel控件的UpdateMode設爲Conditional。
       b.ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實現對Button2的註冊。
       c.在Button2控件的Click事件中後面加入後面的代碼:UpdatePanel1.Update(); 
       這樣Button2按鈕只對UpdatePanel1控件實現的異步的局部刷新。
       注意:這裏的UpdatePanel的屬性要設爲Conditional,若是仍是Always的話,會出現全部的UpdatePanel都刷新的效果。
    三、觸發器
        若是頁面上有多個UpdatePanel控件,若是要實現外部的控件的回發引起指定UpdatePanel的更新的話,那應當爲要實現刷新的UpdatePanel控件創建一個觸發器。
       a.選中要進行局部更新的UpdatePanel控件。 
       b.在其屬性頁中點擊Triggers集合屬性右邊的小按鈕。
       c.在彈出的對話框中,的成員列表中添加一個AsyncPostBackTriggers成員。
       d.指定AsyncPostBackTriggers成員的ControlID和EventName,即引起異步回送的控件的ID和該控件的事件。
       完成以上步驟後,切換到HTML頁面就會出現下列代碼:
            <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 ControlID="Button2" EventName="Click" />
                </Triggers>

            </asp:UpdatePanel>
            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="ButtonOut" />
        這裏須要你們注意的是:
           把全部的UpdatePanel控件的UpdateMode設爲"Conditional",這樣纔可以針對建有相關觸發器的UpdatePanel更新。
           一個UpdatePanel上能夠建有多個觸發器,實如今不一樣的狀況下對該UpdatePanel控件內容的更新。

           
3、兩個UpdatePanel控件,其中一個UpdatePanel內的控件引起兩個UpdatePanel控件的同時刷新。
    a.在頁面上放入兩個UpdatePanel和一個ScriptManager控件。
    b.在UpdatePanel1中加入一個標籤Label一、一個按鈕Button1 ,在UpdatePanel2中加入一個標籤Label2。
    c.將UpdatePanel1和UpdatePanel2兩個控件的的UpdateMode屬性設爲"Always"
    c.在Button1的Click事件中加入下面的代碼:
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
            Label2.Text = DateTime.Now.ToString();
        }
    
4、兩個UpdatePanel控件,其中一個UpdatePanel內的控件引起當前的UpdatePanel控件的刷新,而另外一個不刷新。
    a.步驟和上面的(三)同樣
    b.要把UpdatePanel1和UpdatePanel2兩個控件的UpdateMode屬性設爲Conditional    
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    <br />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="更新兩個UpdatePanel" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
5、兩個UpdatePanel控件,其中一個UpdatePanel內的控件引起另外一個UpdatePanel控件的刷新,而自己不刷新。
    a.步驟和上面的(四)同樣
    b.把UpdatePanel1和UpdatePanel2的ChildrenAsTriggers屬性設爲false
    c.在UpdatePanel2控件中加入一個觸發器,觸發源設到UpdatePanel1控件內的Button1的Click事件上。
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    <br />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="更新兩個UpdatePanel" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                </Triggers>

            </asp:UpdatePanel> 異步

在開發過程當中不免會用到UpdatePanel控件的一些複雜的使用。如:UpdatePanel控件的嵌套、在母版頁中使用UpdatePanel、在用戶控件中使用UpdatePanel以及在GridView中使用UpdatePanel等。
其實這些操做也免不了對UpdatePanel控件的UpdateMode屬性、ChildrenAsTrigger屬性以及觸發器的使用,下面是系統地說明。


1、兩個嵌套的UpdatePanel控件,外部的UpdatePanel內的控件回發引起兩者同時更新
    在頁面上放一個ScriptManager和UpdatePanel控件(UpdatePanel1),在UpdatePanel1中放入一個標籤控件(lblOut)、一個按鈕(Button1)和另外一個UpdatePanel控件(UpdatePanel2),在UpdatePanel2控件中放一個標籤控件lblIn。
      性能


            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lblOut" runat="server"></asp:Label>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" />
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:Label ID="lblIn" runat="server"></asp:Label>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </ContentTemplate>
            </asp:UpdatePanel>

    在Button1控件中的Click事件中加入下面的代碼:
    protected void Button1_Click2(object sender, EventArgs e)
    {
        lblIn.Text = DateTime.Now.ToString();
        lblOut.Text = DateTime.Now.ToString();
    }

    要實現外部UpdatePanel內控件的回發引發內部和外部兩個UpdatePanel控件的同時刷新的話,須要把兩個UpdatePanel控件的UpdateMode都設爲Conditional,這樣外部UpdatePanel內的控件回發會自動引發內部UpdatePanel控件的刷新。
    注意:
        外部UpdatePanel控件的ChildrenAsTrigger屬性要設爲True,兩個UpdatePanel控件的UpdateMode要都設爲Conditional,若是UpdateMode設爲Always的話也會出現兩個UpdatePanel同時刷新的效果,但樣這會致使頁面上其它的UpdatePanel控件也發生刷新。
               
2、兩個嵌套的UpdatePanel控件,內部的UpdatePanel內的控件回發引起兩者同時更新
    在頁面上放一個ScriptManager和UpdatePanel控件(UpdatePanel1),在UpdatePanel1中放入一個標籤控件(lblOut)和另外一個UpdatePanel控件(UpdatePanel2),在UpdatePanel2控件中放一個標籤控件lblIn和一個按鈕(Button1)。
   this


            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lblOut" runat="server" Width="158px"></asp:Label>
                    <br />
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:Label ID="lblIn" runat="server" Width="148px"></asp:Label>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                </Triggers>

            </asp:UpdatePanel>

    在按鈕的Click事件中和(一)中的同樣。
    注意:
       把兩個UpdatePanel控件的UpdateMode屬性設爲Conditional,要把內部控件ChildrenAsTrigger設爲True。但這樣內部UpdatePanel內的控件只引起自身的刷新,不會引起外部的UpdatePanel控件的刷新,不會刷新外部的UpdatePanel控件,所以咱們還須要爲外部UpdatePanel控件加入一個觸發器,觸發源指定爲Button1控件的Click事件上。

        
3、兩個嵌套的UpdatePanel控件,外部的UpdatePanel內的控件回發只引起內部控件的更新
    在頁面上放一個ScriptManager和UpdatePanel控件(UpdatePanel1),在UpdatePanel1中放入一個標籤控件(lblOut)、一個按鈕(Button1)和另外一個UpdatePanel控件(UpdatePanel2),在UpdatePanel2控件中放一個標籤控件lblIn。
   spa


            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"ChildrenAsTriggers="False">
                <ContentTemplate>
                    <asp:Label ID="lblOut" runat="server" Width="158px"></asp:Label>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" /><br />
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:Label ID="lblIn" runat="server" Width="148px"></asp:Label>&nbsp;
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                        </Triggers>

                    </asp:UpdatePanel>
                </ContentTemplate>
            </asp:UpdatePanel>

           在按鈕的Click事件中和(一)中的同樣。
    注意:
        要把兩個UpdatePanel控件的UpdateMode設爲Conditional,把外部UpdatePanel控件的ChildrenAsTrigger設爲false。這樣兩個UpdatePanel控件都不會刷新,因此還要爲內部的UpdatePanel控件創建觸發器,觸發源指向外部UpdatePanel中的的Button1的Click事件上。

        
4、母版頁中使用UpdatePanel控件
    若是將ScriptManager控件添加在母版頁上的話,那麼各內容頁面就不必再添加ScriptManager控件了,只需添加UpdatePanel控件就能夠了,由於母版頁和內容頁面未來生成的是一個頁面的實例,而在一個頁面上是不容許同時存在兩個ScriptManager控件的。
    若是ScriptManager控件沒有添加在母版頁上的話,那隻能把ScriptManager控件添加在其中一個內容頁面裏。不要向每個內容頁面中添加ScriptManager控件。
    一、內容頁面中的UpdatePanel內的控件引發回發,只更新當前內容頁面的內容。
   server


        此時按鈕分別在各自的UpdatePanel控件內。
        將兩個內容頁面內的兩個UpdatePanel控件的UpdateMode設爲Conditional,ChildrenAsTrigger設爲True。
        在按鈕的Click事件中和(一)中的同樣。
        這樣就出現各內容頁的UpdatePanel內的按鈕只對當前內容頁起做用。
    二、在母版頁中的按鈕引發回發,更新指定內容頁的信息。
       blog


       此時有兩個按鈕:ButtonOuter在母版頁中,ButtonInner在內容頁面1中。
       當點擊ButtonOuter時,異步更新兩個內容頁面的信息。當點擊ButtonInner時,異步更新母版面中的UpdatePanel1中的信息。
       母版頁HTML代碼以下:
       <div>
     母版頁3<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

     <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
         <ContentTemplate>
             <asp:Label ID="lbl" runat="server" Text="Label"></asp:Label>
         </ContentTemplate>
     </asp:UpdatePanel>

     &nbsp;<br />
     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ButtonOuter" /><br />
     #####################################################################
     <table width=90%>
            <tr>
                <td bgcolor=blue>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
                </td>
                <td bgcolor=maroon>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
        </table>
        <br />
        </div>

       內容頁面的HTML代碼以下:
       <%@ Page Language="C#" MasterPageFile="~/MasterPage3.master" AutoEventWireup="true" CodeFile="Child3.aspx.cs" Inherits="Child3" Title="Untitled Page" %>
        <%@ MasterType VirtualPath="~/MasterPage3.master" %>
        <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ButtonInner" />
                </ContentTemplate>
            </asp:UpdatePanel>

        </asp:Content>
        <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder2">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>

        </asp:Content> 

       母版頁的CS代碼以下:
        protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager1.RegisterAsyncPostBackControl(this.Button1);
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label lbl1 = (Label)this.ContentPlaceHolder1.FindControl("Label1");
            lbl1.Text = DateTime.Now.ToString();
            Label lbl2 = (Label)this.ContentPlaceHolder2.FindControl("Label2");
            lbl2.Text = DateTime.Now.ToString();
        }
        public string TitleInfo
        {
            get
            {
                return lbl.Text;
            }
            set
            {
                lbl.Text = value;
            }
        } 

       內容頁面的CS代碼以下:
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = Master.TitleInfo;
            Master.TitleInfo = "ContentPage1's Action";
            ((UpdatePanel)Master.FindControl("UpdatePanel1")).Update(); ;

        } 

5、用戶控件中使用UpdatePanel控件
    若是父頁面中存在ScriptManager控件,那用戶控件的頁面中不該再放入ScriptManager控件了,只在用戶控件中加入UpdatePanel。
    
    其控件的回發與更新規律與使用方式與母版頁同樣。事件

相關文章
相關標籤/搜索