Language

Dynamically Populating a Control Using JavaScript Code (C#)

By Christian Wenz|

Download Code or Download PDF

The DynamicPopulate control in the ASP.NET AJAX Control Toolkit calls a web service (or page method) and fills the resulting value into a target control on the page, without a page refresh. It is also possible to trigger the population using custom client-side JavaScript code.

Overview

The DynamicPopulate control in the ASP.NET AJAX Control Toolkit calls a web service (or page method) and fills the resulting value into a target control on the page, without a page refresh. It is also possible to trigger the population using custom client-side JavaScript code.

Steps

First of all, you need an ASP.NET Web Service which implements the method to be called by the DynamicPopulateExtender control. The web service implements the method getDate() that expects one argument of type string, called contextKey, since the DynamicPopulate control sends one piece of context information with each web service call. Here is the code (file DynamicPopulate.cs.asmx) which retrieves the current date in one of three formats:

<%@ WebService Language="C#" Class="DynamicPopulate" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Web.Script.Services; [ScriptService] public class DynamicPopulate : System.Web.Services.WebService { [WebMethod] public string getDate(string contextKey) { string myDate = ""; switch (contextKey) { case "format1": myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now); break; case "format2": myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now); break; case "format3": myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now); break; } return myDate; } }

In the next step, create a new ASP.NET site and start with the ASP.NET AJAX ScriptManager control:

<asp:ScriptManager ID="asm" runat="server" />

Then, add a label control (for instance using the HTML control of the same name, or the <asp:Label /> web control) which will later show the result of the web service call.

<label id="myDate" runat="server" />

Next, include a DynamicPopulateExtender control and provide web service information, target control, but not the name of the control which triggers the population this will be done later on, using custom JavaScript!

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server" ClearContentsDuringUpdate="true" TargetControlID="myDate" ServicePath="DynamicPopulate.cs.asmx" ServiceMethod="getDate" />

Now to the JavaScript part. The $find() function, defined by the ASP.NET AJAX library, returns a reference to server-side objects of the ASP.NET AJAX Control Toolkit such as DynamicPopulateExtender. In the current file, $find("dpe") returns a reference to the one DynamicPopulateExtender control in the page. It exposes a method called populate() which triggers the dynamic population process. The populate() method requires one argument: the context key which will serve as argument to the getDate() web method. So for instance, $find("dpe").populate("format1") would populate the label with the current date in month-day-year format.

In order to make the sample a bit more flexible, the user may now choose between several date formats. For each one of them, a radio button is displayed. Once the user clicks on a radio button, JavaScript code dynamically populates the label with the selected date format. Here are those radio buttons:

<asp:Panel ID="panel1" runat="server"> <input type="radio" id="rb1" name="format" value="format1" runat="server" onclick="$find('dpe1').populate(this.value);" />m-d-y <input type="radio" id="rb2" name="format" value="format2" runat="server" onclick="$find('dpe1').populate(this.value);" />d.m.y <input type="radio" id="rb3" name="format" value="format3" runat="server" onclick="$find('dpe1').populate(this.value);" />y/m/d </asp:Panel>

Note that within the context of a radio button, the JavaScript expression this.value refers to the value of the current button, which happens to be exactly the same information the getDate() method can work with.

A click on the button retrieves the date from the server, in the format specified (Click to view full-size image)

Author Information

Christian Wenz

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.