Rellenar un control dinámicamente (C#)

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.

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. En este tutorial se muestra cómo configurar esta acción.

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 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 al servicio web. El siguiente servicio web devuelve la fecha actual en un formato representado por el argumento contextKey:

<%@ WebService Language="C#" Class="DynamicPopulate" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[ScriptService]
public class DynamicPopulate : System.Web.Services.WebService
{
 [WebMethod]
 public string getDate(string contextKey)
 {
 string myDate = "";
 switch (contextKey)
 {
 case "format1":
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now);
 break;
 case "format2":
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now);
 break;
 case "format3":
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now);
 break;
 }
 return myDate;
 }
}

A continuación, el servicio web se guarda como DynamicPopulate.cs.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, creará un nuevo archivo ASP.NET. Como siempre, el primer paso es incluir el elemento ScriptManager en la página actual para cargar la biblioteca de ASP.NET AJAX y para que el Kit de herramientas de control 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 control web <asp:Label />), 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 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. Los atributos siguientes se establecerán (aparte 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 (omítalo 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 al 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 reunir todas las piezas 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.cs.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 a tamaño completo).

Siguiente