Rellenar dinámicamente un control mediante código JavaScript (C#)

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. También es posible desencadenar la población utilizando código JavaScript personalizado del lado cliente.

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. También es posible desencadenar la población utilizando código JavaScript personalizado del lado cliente.

Pasos

En primer lugar, necesita un servicio web de 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 DynamicPopulate control envía un fragmento de información de contexto con cada llamada de servicio web. Este es el código (archivo DynamicPopulate.cs.asmx) que recupera la fecha actual en uno de los tres formatos:

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

En el paso siguiente, cree un nuevo sitio de ASP.NET e inicie con el control scriptManager de AJAX ASP.NET:

<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 posteriormente mostrará el resultado de la llamada al servicio web.

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

** A continuación, incluya un control DynamicPopulateExtender y proporcione información sobre el servicio web y el control de destino, pero no incluya el nombre del control que activa la población; esto se hará más adelante con JavaScript personalizado.

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

Ahora en la parte de JavaScript. La $find() función, definida por la biblioteca de AJAX de ASP.NET, devuelve una referencia a los objetos del lado servidor del ASP.NET Kit de herramientas de control de AJAX, como DynamicPopulateExtender. En el archivo actual, $find("dpe") devuelve una referencia al único control DynamicPopulateExtender de la página. Expone un método denominado populate() que desencadena el proceso de población dinámica. El populate() método requiere un argumento: la clave de contexto que servirá como argumento para el getDate() método web. 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. Estos son 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, lo que sucede que es exactamente la misma información con la que puede trabajar el getDate() método.

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

AnteriorSiguiente