Rellenar dinámicamente un control mediante el código de JavaScript (VB)

por Christian Wenz

Descargar PDF

El control DynamicPopulate del Kit de herramientas de control de AJAX ASP.NET llama a un servicio web (o método de página) y rellena el valor resultante en un control de destino en la página sin tener que actualizarla. También es posible desencadenar el rellenado mediante código JavaScript personalizado del lado cliente.

Información general

El control DynamicPopulate del Kit de herramientas de control de AJAX ASP.NET llama a un servicio web (o método de página) y rellena el valor resultante en un control de destino en la página sin tener que actualizarla. También es posible desencadenar el rellenado mediante código JavaScript personalizado del lado cliente.

Pasos

En primer lugar, necesita un servicio web ASP.NET que implemente el método al que llamará el control DynamicPopulateExtender. El servicio web implementa el método getDate() que espera 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. Este es el código (archivo DynamicPopulate.vb.asmx) que recupera la fecha actual en uno de tres formatos:

<%@ 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

En el paso siguiente, creará un nuevo sitio de ASP.NET y comenzará a usar el control ScriptManager de ASP.NET AJAX:

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

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

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

Luego, incluirá un control DynamicPopulateExtender y proporcionará información del servicio web, el control de destino, pero no el nombre del control que desencadena el rellenado; esto se hará más adelante, con JavaScript personalizado.

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

Ahora, para la parte de JavaScript. La función $find(), definida por la biblioteca de ASP.NET AJAX, devuelve una referencia a objetos del lado servidor del Kit de herramientas de control de ASP.NET AJAX, como DynamicPopulateExtender. En el archivo actual, $find("dpe") devuelve una referencia al control DynamicPopulateExtender de la página. Expone un método denominado populate() que desencadena el proceso de rellenado dinámico. El método populate() requiere un argumento: la clave de contexto que servirá como argumento para el método web getDate(). Por ejemplo, $find("dpe").populate("format1") rellenaría la etiqueta con la fecha actual en formato mes-día-año.

Para que el ejemplo sea un poco más flexible, el usuario ahora puede elegir entre varios formatos de fecha. Para cada uno de ellos, se muestra un botón de radio. Una vez que el usuario hace clic en un botón de radio, el código JavaScript rellena dinámicamente la etiqueta con el formato de fecha seleccionado. Aquí están esos botones de radio:

<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>

Tenga en cuenta que, dentro del contexto de un botón de radio, la expresión this.value de JavaScript hace referencia al valor del botón actual, que resulta ser exactamente la misma información con la que puede trabajar el método getDate().

Un clic en el botón recupera la fecha del servidor, en el formato especificado (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente