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,在浏览器里查看最终效果。