Rellenar dinámicamente un control (VB)

de Christian Wenz

Descargar PDF

El control DynamicPopulate del 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 en la página, sin una actualización de página.

Visión general

El DynamicPopulate control del 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 refrescar la página. En este tutorial se muestra cómo configurar esto.

Pasos

En primer lugar, necesita un servicio web de ASP.NET que implemente el método al que llamará DynamicPopulate. La clase de servicio web requiere el ScriptService atributo que se define en Microsoft.Web.Script.Services; de lo contrario, ASP.NET AJAX no puede crear el proxy 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 DynamicPopulate control 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 contextKey argumento :

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

A continuación, el servicio web se guarda como DynamicPopulate.vb.asmx. Como alternativa, podría 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 es incluir el ScriptManager en la página actual para cargar la biblioteca AJAX de ASP.NET y hacer que el Kit de herramientas de controles funcione:

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

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

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

Se usará un botón HTML (como control HTML, ya que no se requiere un postback al servidor) para desencadenar la población dinámica:

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

Por último, necesitamos el control DynamicPopulateExtender para configurar todo. Los atributos siguientes se establecerán (aparte de los obvios ID y runat="server"):

• TargetControlID dónde colocar el resultado de la llamada de servicio web
• ServicePath ruta de acceso al servicio web (omita si desea usar un método de página)
• ServiceMethod nombre del método web o del método de página
• ContextKey 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 su lugar es bastante sencillo. Aquí está el código de marcado para el DynamicPopulateExtender control 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 mes-día-año.

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