AJAX ControlToolkit學習日誌-DynamicPopulate(11)

      DynamicPopulate控制項用於動態替換一個控制項中的內容，它的內容來自一個函數調用或Web調用。

下面來看一個樣本：

1)在VS中建立一個ASP.NET AJAX-Enabled Web Project項目工程，命名為DynamicPopulateExtender1。

2)在Default.aspx中添加一個Label，用於動態操作的觸發器。然後再添加4個Radio，用於顯示不同的調用內容。

代碼如下：

 1        <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Time at the server"></asp:Label><br />
 2        <br />
 3        <label for="Radio1"><input id="Radio1" name="time" type="radio" value="G" onclick="UpdateDataKey(this.value)"  />Normal</label><br />
 4        <br />
 5        <label for="Radio2"><input id="Radio2" name="time" type="radio" value="d" onclick="UpdateDataKey(this.value)" />Short Date</label><br />
 6        <br />
 7        <label for="Radio3"><input id="Radio3" name="time" type="radio" value="D" onclick="UpdateDataKey(this.value)" />Long Date</label><br />
 8        <br />
 9        <label for="Radio4"><input id="Radio4" name="time" type="radio" value="U" onclick="UpdateDataKey(this.value)" />UTC Time</label><br />
10        <br />

3)然後在頁面上添加Panel控制項，用於顯示不同的回調產生的內容；同時添加一個DynamicPopulateExtender控制項，指定它的一些屬性。

代碼如下：

1        <asp:Panel ID="TimePanel" runat="server" CssClass="dynamicPopulate_Normal" Height="50px" Width="125px">
2        </asp:Panel>
3        &nbsp;</div>
4        <br />
5        <cc1:dynamicpopulateextender id="DynamicPopulateExtender1" BehaviorID="dp1" UpdatingCssClass="dynamicPopulate_Updating" ServiceMethod="GetHtml" TargetControlID="TimePanel" PopulateTriggerControlID="Label1" runat="server"></cc1:dynamicpopulateextender>

屬性說明：
      BehaviorID：該擴充控制項用戶端行為標識。
      UpdatingCssClass：該控制項對Panel進行更新時採用的Css樣式。
      ServiceMethod：調用的函數方法。
      TargetControlID：將要動態顯示不同內容的控制項。
      PopulateTriggerControlID：進行動態顯示內容時指定的觸發器。
      
4)在頁面上添加函數GetHtml。代碼入下：
1    [System.Web.Services.WebMethod()]
2    [System.Web.Script.Services.ScriptMethod()]
3    public static string GetHtml(string contextKey)
4    {
5        System.Threading.Thread.Sleep(250);
6        string value = (contextKey == "U") ? DateTime.UtcNow.ToString() : String.Format("{0:" + contextKey + "}", DateTime.Now);
7        return value; 
8    }

5)在頁面上添加一個用戶端指令碼，用於當要採用不同的輸入值時，對該DynamicPopulateExtender進行賦值。

代碼如下：1    <script type="text/javascript">
2        function UpdateDataKey(value)
3        {
4            var behavior=$find('dp1');
5            if(behavior)
6                behavior.populate(value);
7        }
8        sys.Application.add_load(function(){UpdateDataKey('G')});
9    </script>

6)按下CTRL+F5,在瀏覽器裡查看最終效果。