Home / AJAX

HOW TO Use the DynamicPopulate Control

RSS
Modified on 2010/01/17 18:26 by Mike Pope Categorized as Uncategorized

DynamicPopulate Demonstration

loading...



DynamicPopulate Description

DynamicPopulate is an extender that replaces the contents of a control with the result of a Web service or page method call. The method call returns a string of HTML that is inserted as a child of the target element.

Video - How Do I: Use the ASP.NET AJAX DynamicPopulate Control?

DynamicPopulate Client Code Sample

<script runat="server">
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string GetHTML() {
        System.Threading.Thread.Sleep(3000);
        return "<span>LOADED</span>";
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .dynamic { background-color: Gray; } .updating { background-color: Yellow } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <asp:AjaxScriptManager ID="sm1" runat="server" EnablePageMethods="true" /> <script type="text/javascript"> Sys.debug = true; var popup; Sys.require(Sys.components.dynamicPopulate, function() { popup = $("#dynamic").dynamicPopulate({ PopulateTriggerID: "cmdLoad", ServiceMethod: "GetHTML", UpdatingCssClass: "updating", ClearContentsDuringUpdate: false }); }); </script> <div> <div id="dynamic" class="dynamic"> loading... </div> <br /> <input id="cmdLoad" type="button" value="Load It"/> </div> </form> </body> </html>

DynamicPopulate Client Reference

Sys.Extended.UI.DynamicPopulateBehavior Class

  • Summary - Replaces the contents of an element with the result of a Web service or page method call. The method call returns a string of HTML that is inserted as a child of the target element.
  • Parameters - Sys.UI.DomElement element

Events

  • populating(handler) - Adds or removes an event handler for the populating event.
    • Parameters - A function that represents the event handler.
  • populated(handler) - Adds or removes an event handler for the populated event.
    • Parameters - A function that represents the event handler.

Methods

  • initialize() - Initializes the DynamicPopulate behavior.
  • dipose() - Disposes the DynamicPopulate behavior.
  • populate(contextKey) - Uses the dymanic content to populate the target element.
    • Parameters - A string to pass to the Web service method or page method.
    • Remarks - Example: If the element to populate is in a data-bound repeating control, the contextKey parameter can be the ID of the current row.
  • setStyle(updating) - Sets the style of the display.
    • Parameter - A Boolean value that specifies whether the display is being updated.
  • raisePopulating(eventArgs) - Raises the populating event.
    • Parameters - A Sys.EventArgs eventArgs that represents event arguments for the populating event
  • raisePopulated(eventArgs) - Raises the populated event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the populated event.

Properties

  • ClearContentsDuringUpdate - Gets or sets a Boolean value that specifies whether the contents of the target should be cleared when an update begins.
  • contextKey - Gets or sets a string to pass to the Web method.
    • Remarks - For example, if the element to populate is in a data-bound repeating control, this can be the ID of the current row.
  • PopulateTriggerID - Gets or sets the name of an element that can be clicked to trigger the action of populating of the target element.
  • ServicePath - Gets or sets the URL of the Web service to call.
    • Remarks - This property is optional. If the ServicePath property is not set, a page method is invoked instead of a Web service.
  • ServiceMethod - Gets or sets the name of the method to call on the Web service or page.
  • cacheDynamicResults - Gets or sets a Boolean value that specifies whether the results of populating the target element should be cached and not fetched again after the first load.
  • UpdatingCssClass - Gets or sets the name of the CSS class to apply to the target during asynchronous calls.
  • CustomScript - Gets or sets the script to invoke instead of calling a Web service method or a page method.



DynamicPopulate Server Code Sample

<script runat="server">
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string GetHtml(string contextKey)
    {
        // A little pause to mimic a latent call
        System.Threading.Thread.Sleep(250);

string value = (contextKey == "U") ? DateTime.UtcNow.ToString() : String.Format("{0:" + contextKey + "}", DateTime.Now); return String.Format("<span style='font-family:courier new;font-weight:bold;'>{0}</span>", value); } </script> <script type="text/javascript"> function updateDateKey(value) { var behavior = $find('dp1'); if (behavior) { behavior.populate(value); } } Sys.Application.add_load(function(){updateDateKey('G');}); </script> <p> <asp:Label ID="Label1" runat="server" Text="Label" CssClass="subheading">Time at the server:</asp:Label> </p> <p>Choose a date/time format:</p> <p> <label for="r0"><input type="radio" name="rbFormat" id="r0" value='G' onclick="updateDateKey(this.value);" checked="checked" />Normal</label><br /> <label for="r1"><input type="radio" name="rbFormat" id="r1" value='d' onclick="updateDateKey(this.value);" />Short Date</label><br /> <label for="r2"><input type="radio" name="rbFormat" id="r2" value='D' onclick="updateDateKey(this.value);" />Long Date</label><br /> <label for="r3"><input type="radio" name="rbFormat" id="r3" value='U' onclick="updateDateKey(this.value);" />UTC Date/Time</label><br /> </p> <br /> <p> This time is dynamically formatted and returned as HTML from the server:</p> <asp:Panel ID="Panel1" runat="server" CssClass="dynamicPopulate_Normal" /> <br /> <ajaxToolkit:DynamicPopulateExtender ID="dp" BehaviorID="dp1" runat="server" TargetControlID="Panel1" ClearContentsDuringUpdate="true" PopulateTriggerControlID="Label1" ServiceMethod="GetHtml" UpdatingCssClass="dynamicPopulate_Updating" />

DynamicPopulate Server Reference

The properties in italics are optional.

The control in the preceding example is initialized using the following code. The properties in italic are optional. You must set either the '''CustomScript''' or the '''ServiceMethod''' property. 

<ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server" TargetControlID="Panel1" ClearContentsDuringUpdate="true" PopulateTriggerControlID="Label1" ServiceMethod="GetHtml" UpdatingCssClass="dynamicPopulate_Updating" />
  • TargetControlID - The ID of the control to extend.
  • ClearContentsDuringUpdate - true to clear the HTML contents of the target element when an update begins; otherwise, false. The default is true.
  • ServicePath - The URL of the Web service to call. To call a page method, do not set this property and set the ServiceMethod property. The Web service must be marked with the System.Web.Script.Services.ScriptService attribute.
  • ServiceMethod - The name of the Web service method or page method to call. The signature of the method must match the following:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
string DynamicPopulateMethod(string contextKey) { ... }

You can give the method any name, but the return type and parameter name and type must match exactly, including case.
  • PopulateTriggerControlID - The name of an element that can be clicked to trigger the action of populating of the target element.
  • UpdatingCssClass - The CSS class to apply to the target during asynchronous calls.
  • CustomScript - The script to invoke instead of calling a Web service method or page method. This script must evaluate to a string value.
  • ContextKey - A string to pass to the Web method. For example, if the element to populate is in a data-bound repeating control, this can be the ID of the current row.
  • CacheDynamicResults - true to specify that the results of the dynamic population should be cached and not fetched again after the first load; otherwise, false. The default is false.



DynamicPopulate Additional Code Samples