asp.net ajax1.0基礎回顧（三）：UpdatePanel的基本用法

在asp.net ajax中，UpdatePanel控件可以讓大部分伺服器端控件擁有AJAX能力，隻需要把服務端拽到UpdatePanel中或在UpdatePanel上注冊一下即可，下面通過示例來說明。

1．建立Web應用程式名為AspNetAjaxDemo的工程，如下圖所示：

<a target="_blank" href="http://blog.51cto.com/attachment/201106/181128791.jpg"></a>

2．頁面UpdatePanelDemo.aspx的前端代碼如下： 

&lt;body&gt;

    &lt;form id="form1" runat="server"&gt;

    &lt;h3&gt;UpdatePanel控件基本用法&lt;/h3&gt;

    &lt;asp:ScriptManager ID="ScriptManagerDemo" runat="server"&gt;

    &lt;/asp:ScriptManager&gt;

    &lt;div style="width:500px; padding:10px;"&gt;

        &lt;asp:UpdatePanel ID="UpdatePanelDemo" runat="server" RenderMode="Inline" 

            UpdateMode="Conditional"&gt;

            &lt;ContentTemplate&gt;

                &lt;asp:TextBox ID="txtInner" runat="server"&gt;&lt;/asp:TextBox&gt;

                &amp;nbsp;&lt;asp:Button ID="btnInnerAsych" runat="server" Text="内部異步" 

                    /&gt;&amp;nbsp;&amp;nbsp;&lt;asp:Button ID="btnInnerSync" 

                    runat="server" Text="内部同步" /&gt;

                &lt;asp:Label ID="lblMessage" runat="server"&gt;&lt;/asp:Label&gt;

            &lt;/ContentTemplate&gt;

            &lt;Triggers&gt;

                &lt;asp:AsyncPostBackTrigger ControlID="btnOuterAsyn" EventName="Click" /&gt;

                &lt;asp:PostBackTrigger ControlID="btnInnerSync" /&gt;

            &lt;/Triggers&gt;

        &lt;/asp:UpdatePanel&gt;

    &lt;/div&gt;

    &lt;asp:Button ID="btnOuterAsyn" runat="server" Text="外部異步" 

        /&gt;

    &lt;/form&gt;

&lt;/body&gt;

3．頁面UpdatePanelDemo.aspx的後端代碼：<b></b>

 namespace AspNetAjaxDemo

{

    public partial class _Default : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        protected void btnInnerAsych_Click(object sender, EventArgs e)

            this.lblMessage.Text = String.Format("來自内部異步 - Hello {0}", this.txtInner.Text);

        protected void btnOuterAsyn_Click(object sender, EventArgs e)

            this.lblMessage.Text = String.Format("來自外部異步 - Hello {0}", this.txtInner.Text);

        protected void btnInnerSync_Click(object sender, EventArgs e)

            this.lblMessage.Text = String.Format("來自内部同步 - Hello {0}", this.txtInner.Text);

    }

}

4.開始測試。

<a target="_blank" href="http://blog.51cto.com/attachment/201106/181817315.jpg"></a>

說明：

1）UpdatePanel可以其内部的伺服器端控件自動擷取AJAX能力，還可以将UpdatePanel外部的伺服器控件擷取AJAX能力，隻需要将伺服器端控件在UpdatePanel上注冊一下即可完成，具體操作有兩種：一種是手動添加以上頁面中的btnOuterAsyn按鈕的相關代碼，或通過如下圖檔操作和設定來完成： 

<a target="_blank" href="http://blog.51cto.com/attachment/201106/181841296.jpg"></a>

2）UpdatePanel還可以将内部的伺服器端控件失去AJAX能力，完成正常的POSTBACK操作，同樣隻需要将外部的伺服器控件在UpdatePanel上注冊一下即可，如下圖檔所示。

<a target="_blank" href="http://blog.51cto.com/attachment/201106/181903331.jpg"></a>

本文轉自 彭金華  51CTO部落格，原文連結:http://blog.51cto.com/pengjh/591511