Dynamically Populating a Control (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.
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. This tutorial shows how to set this up.
Steps
First of all, you need an ASP.NET Web Service which implements the method to be called by DynamicPopulate. The web service class requires the ScriptService attribute which is defined within Microsoft.Web.Script.Services; otherwise ASP.NET AJAX cannot create the client-side JavaScript proxy for the web service which in turn is required by DynamicPopulate.
The web method must expect one argument of type string, called contextKey, since the DynamicPopulate control sends one piece of context information with each web service call. The following web service returns the current date in a format represented by the contextKey argument:
[!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
The web service is then saved as DynamicPopulate.vb.asmx. Alternatively, you could implement the getDate() method as a page method within the actual ASP.NET page with the DynamicPopulate control.
In the next step, create a new ASP.NET file. As always, the first step is to include the ScriptManager in the current page to load the ASP.NET AJAX library and to make the Control Toolkit work:
[!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" />
An HTML button (as an HTML control, since we do not require a postback to the server) will then be used to trigger the dynamic population:
[!code-aspxMain]
1: <input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />
Finally, we need the DynamicPopulateExtender control to wire things up. The following attributes will be set (apart from the obvious ones, ID and runat="server"):
TargetControlIDwhere to put the result from the web service callServicePathpath to the web service (omit if you want to use a page method)ServiceMethodname of the web method or page methodContextKeycontext information to be sent to the web servicePopulateTriggerControlIDelement which triggers the web service callClearContentsDuringUpdatewhether to empty the target element during the web service call
As you can see, the control requires some information but putting everything into place is quite straight-forward. Here is the markup for the DynamicPopulateExtender control in the current scenario:
[!code-aspxMain]
1: <ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
2: ClearContentsDuringUpdate="true"
3: TargetControlID="myDate" ServicePath="DynamicPopulate.vb.asmx"
4: ServiceMethod="getDate"
5: ContextKey="format1" PopulateTriggerControlID="Button1" />
Run the ASP.NET page in the browser and click on the button; you will receive the current date in month-day-year format.
A click on the button retrieves the date from the server (Click to view full-size image)
)
|
|