ASP.NET AJAX Control Toolkit - Basic Sample For DynamicPopulate Control

How to dynamically populate the content of a control based on Web Service call triggered by another control? DynamicPopulate extender to the rescue:

DynamicPopulate is a simple 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 the children of the target element.

This post to summarize basic steps of using AJAX Control Toolkit's DynamicPopulate extender. Plus customer's case study of how it was implemented with ASP.NET Masterpage for performance and UX improvement.

Summary of steps

  • Step 1 - Create ASP.NET Web Application
  • Step 2 - Add server side code
  • Step 3 - Add DynamicPopulate extender
  • Step 4 - Add client side script to use the extender behavior
  • Step 5 - Add client side event to invoke the client script
  • Step 6 - Test the solution

Following section describes each step in details.

"Then another ask came through - content page must update the sidebar that is part of the Master page...."

Step 1 - Create ASP.NET Web Application. Open Visual Studio 2008. Create new "ASP.NET Web Application" project, found under Web node in "New Project" dialog. Name it DynamicPopulateSample. Add site's Master Page by right clicking on the project in project explorer window, then "Add" ->  "New Item...", then choose "Master Page" template from the "New Item" dialog. Leave its default name. Drag Label control on the Master page from the Tool Box. The Label will be dynamically updated. Add new ASPX page by right clicking on the project in project explorer window, then "Add" -> "New Item....", then choose "Web Content Form". Specify it's Master Page by choosing Site1.Master. Name it default.aspx. Add two pure Html radio buttons to default.aspx. These will serve as a trigger to update the Label on the Master Page. Add AjaxControlToolkit.dll to the project's  bin folder and add reference to it.

Step 2 - Add server side code. Open default.aspx.cs code behind for default.aspx. Add the following function:

 [System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string GetHtml(string contextKey)
{
    // A little pause to mimic a latent call
    // This is the place to perform server side
    // code like DB access
    System.Threading.Thread.Sleep(350);

    return String.Format("Persona: {0}", contextKey);
}

Step 3 - Add DynamicPopulate extender. Register AjaxControlToolkit assembly inside the page. Add the following declaration right after <@Page...> directive 

<%@ Register

    Assembly="AjaxControlToolkit"

    Namespace="AjaxControlToolkit"

    TagPrefix="ajaxToolkit"%>

Add AJAX Script Manager to the page: 
<asp:ScriptManager ID="ScriptManager1"runat="server"/>

Add DynamicPopulateExtender control to the page:

  <ajaxToolkit:DynamicPopulateExtender

          ID="dp"BehaviorID="dp1"runat="server"

          TargetControlID="form1$Label1"

          ClearContentsDuringUpdate="true"

          ServiceMethod="GetHtml" />

Notice TargetControlID is set to "form1$Label1". This is the Label control to be updated with the Html string returned by the server side code I described in Step 2. $ notation means nesting - read "Label1 control inside form1 control". It can be any nesting depth. Save your work and then view in browser to make sure that no exceptions generated.

Step 4 - Add client side script to use the extender behavior.   So far, there is Label1 to be updated and it is sitting in the Mater page. There is DynamicPopulateExtender that defines the behavior. There is server side code to handle the request. Now add client script that makes the request to the server:

<script type="text/javascript">

function updateDateKey(value) {

            var behavior = $find('dp1');

            if(behavior) {

                behavior.populate(value);

            }

        }

        Sys.Application.add_load(function(){updateDateKey('Alik Levin');});

    </script>

Notice initialization function call - the last row. It invokes the client side function to call into server side for the first time when the page is rendered into the browser for the first time.

Step 5 - Add client side event to invoke the client script. The last part is adding the event that triggers the client side code to be invoked and thus making call to the server. Locate Html radio buttons that were created during Step 1, add onclick events to call the client side function:

 <input type="radio" 
       name="rbFormat" 
       id="r0" 
       value='alik'
       onclick="updateDateKey(this.value);" 
       checked="checked" />click to set 'alik'<br/>
<input type="radio" 
       name="rbFormat" 
       id="Radio1" 
       onclick="updateDateKey(this.value);"
       value='levin' />click to set 'levin'

Step 6 - Test the solution. Save your work and view in browser. Click on the radio buttons and you should see how the Label in master page gets updated with respective values. It all happens with small delays simulated on the server by Sleep function. I think it is cool.

  • Case Study

I was asked by a customer to offer a solution for very responsive UX [User Experience] while avoiding annoying refresh of the web page. Natural answer was AJAX. The customer also asked to provide the solution for common look and feel. Master pages was my answer. Then another ask came through - content page must update the sidebar that is part of the Master page.... hmm A-ha! Use DynamicPopulateExtender.

My Related posts

-

[AJAX Security - Client Side Validation Is For Usability Only, Not For Security](../alikl/ajax-security-client-side-validation-is-for-usability-only-not-for-security)

  

Sample VS2008 project that demonstrates DynamicPopulateExtender can be found on my SkyDrive:

 

Watch UX [User Experience] in the video below:

Video: DynamicPopulateExtender Demo

Enjoy.