Dynamically Populating a Control Using JavaScript Code (VB)
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.vb.asmx) which retrieves the current date in one of three formats:
[!code-aspxMain]
1: <%@ WebService Language="VB" Class="DynamicPopulate" %>
2: Imports System.Web
3: Imports System.Web.Services
4: Imports System.Web.Services.Protocols
5: Imports System.Web.Script.Services
6: <ScriptService()> _
7: Public Class DynamicPopulate
8: Inherits System.Web.Services.WebService
9: <WebMethod()> _
10: Public Function getDate(ByVal contextKey As String) As String
11: Dim myDate As String = ""
12: Select Case contextKey
13: Case "format1"
14: myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now)
15: Case "format2"
16: myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now)
17: Case "format3"
18: myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now)
19: End Select
20: Return myDate
21: End Function
22: End Class
In the next step, create a new ASP.NET site and start with the ASP.NET AJAX ScriptManager control:
[!code-aspxMain]
1: <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.
[!code-aspxMain]
1: <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!
[!code-aspxMain]
1: <ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
2: ClearContentsDuringUpdate="true"
3: TargetControlID="myDate" ServicePath="DynamicPopulate.vb.asmx"
4: 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:
[!code-aspxMain]
1: <asp:Panel ID="panel1" runat="server">
2: <input type="radio" id="rb1" name="format" value="format1" runat="server"
3: onclick="$find('dpe1').populate(this.value);" />m-d-y
4: <input type="radio" id="rb2" name="format" value="format2" runat="server"
5: onclick="$find('dpe1').populate(this.value);" />d.m.y
6: <input type="radio" id="rb3" name="format" value="format3" runat="server"
7: onclick="$find('dpe1').populate(this.value);" />y/m/d
8: </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)
)
|
|