Rellenar un control dinámicamente (VB)

por Christian Wenz

Descargar código o Descargar PDF

El control DynamicPopulate en el kit de herramientas de control de AJAX de ASP.NET llama a un servicio Web (o método de página) y rellena el valor resultante en un control de destino de la página, sin necesidad de actualizar la página.

Información general

El control DynamicPopulate en el kit de herramientas de control de AJAX de ASP.NET llama a un servicio Web (o método de página) y rellena el valor resultante en un control de destino de la página, sin necesidad de actualizar la página. En este tutorial se muestra cómo configurarlo.

Pasos

En primer lugar, necesita un servicio Web ASP.NET que implemente el método al que va a llamar DynamicPopulate. La clase de servicio Web requiere el atributo ScriptService que se define en Microsoft.Web.Script.Services; de lo contrario, ASP.NET AJAX no puede crear el proxy de JavaScript del lado cliente para el servicio Web que, a su vez, es necesario para DynamicPopulate.

El método Web debe esperar un argumento de tipo cadena, denominado contextKey, ya que el control DynamicPopulate envía un fragmento de información de contexto con cada llamada de servicio Web. El siguiente servicio Web devuelve la fecha actual en un formato representado por el argumento contextKey:

<%@ WebService Language="VB" Class="DynamicPopulate" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
<ScriptService()> _
Public Class DynamicPopulate
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Public Function getDate(ByVal contextKey As String) As String
 Dim myDate As String = ""
 Select Case contextKey
 Case "format1"
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now)
 Case "format2"
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now)
 Case "format3"
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now)
 End Select
 Return myDate
 End Function
End Class

El servicio Web se guarda entonces como DynamicPopulate.vb.asmx. Como alternativa, puede implementar el método getDate() como un método de página dentro de la página ASP.NET real con el control DynamicPopulate.

En el paso siguiente, cree un nuevo archivo ASP.NET. Como siempre, el primer paso consiste en incluir el ScriptManager en la página actual para cargar la biblioteca de AJAX de ASP.NET y para que el kit de herramientas de control funcione:

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

A continuación, agregue un control etiqueta (por ejemplo, con el control HTML del mismo nombre, o la <asp:Label /> control Web) que posteriormente mostrará el resultado de la llamada al servicio Web.

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

Un botón HTML (como control HTML, ya que no se requiere un postback en el servidor) se usará para desencadenar el rellenado dinámico:

<input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />

Por último, necesitamos el control DynamicPopulateExtender para conectar las cosas. Se establecerán los siguientes atributos (además de los obvios, ID y runat="server"):

  • TargetControlID dónde colocar el resultado de la llamada al servicio Web
  • ServicePath ruta de acceso al servicio Web (omita si desea utilizar un método de página)
  • ServiceMethod nombre del método de la página o método Web
  • ContextKey la información de contexto que se va a enviar al servicio Web
  • PopulateTriggerControlID elemento que desencadena la llamada de servicio Web
  • ClearContentsDuringUpdate si se va a vaciar el elemento de destino durante la llamada al servicio Web

Como puede ver, el control requiere cierta información pero poner todo en marcha es bastante sencillo. Este es el marcado del control DynamicPopulateExtender en el escenario actual:

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
 ClearContentsDuringUpdate="true"
 TargetControlID="myDate" ServicePath="DynamicPopulate.vb.asmx"
 ServiceMethod="getDate"
 ContextKey="format1" PopulateTriggerControlID="Button1" />

Ejecute la página ASP.NET en el explorador y haga clic en el botón. recibirá la fecha actual en formato de mes-día-año.

un clic en el botón recupera la fecha del servidor

Un clic en el botón recupera la fecha del servidor (haga clic para ver la imagen de tamaño completo)