Utilisation de DynamicPopulate avec un contrôle utilisateur et JavaScript (C#)

par Christian Wenz

Télécharger le PDF

Le contrôle DynamicPopulate dans le ASP.NET AJAX Control Toolkit appelle un service web (ou méthode de page) et remplit la valeur résultante dans un contrôle cible sur la page, sans actualisation de page. Il est également possible de déclencher la population à l’aide du code JavaScript côté client personnalisé. Toutefois, un soin particulier doit être pris lorsque l’extendeur réside dans un contrôle utilisateur.

Aperçu

Le DynamicPopulate contrôle dans le ASP.NET AJAX Control Toolkit appelle un service web (ou méthode de page) et remplit la valeur résultante dans un contrôle cible sur la page, sans actualisation de page. Il est également possible de déclencher la population à l’aide du code JavaScript côté client personnalisé. Toutefois, un soin particulier doit être pris lorsque l’extendeur réside dans un contrôle utilisateur.

Étapes

Tout d’abord, vous avez besoin d’un service web ASP.NET qui implémente la méthode à appeler par le DynamicPopulateExtender contrôle. Le service web implémente la méthode getDate() qui attend un argument de type chaîne, appelé contextKey, puisque le contrôle DynamicPopulate envoie une information de contexte avec chaque appel de service web. Voici le code (fichier DynamicPopulate.cs.asmx) qui récupère la date actuelle dans l’un des trois formats suivants :

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

À l’étape suivante, créez un contrôle utilisateur (.ascx fichier), indiqué par la déclaration suivante dans sa première ligne :

<%@ Control Language="C#" ClassName="DynamicPopulate2" %>

Un <label> élément sera utilisé pour afficher les données provenant du serveur.

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

Dans le fichier de contrôle de l'utilisateur, nous utiliserons également trois boutons radio, chacun représentant l'un des trois formats de date possibles pris en charge par le service web. Lorsque l’utilisateur clique sur l’un des boutons radio, le navigateur exécute le code JavaScript qui ressemble à ceci :

$find("mcd1_dpe1").populate(this.value)

Ce code accède à l’ID DynamicPopulateExtender étrange (ne vous inquiétez pas encore de l’ID étrange, ce qui sera abordé plus tard) et déclenche la population dynamique avec des données. Dans le contexte du bouton radio actuel, this.value fait référence à sa valeur, qui est format1, format2 ou format3, exactement ce que la méthode web attend.

La seule chose manquante dans le contrôle utilisateur n'est pas encore présent est le contrôle DynamicPopulateExtender qui lie les boutons radio au service web.

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

Là encore, vous pouvez noter l’ID étrange utilisé dans le contrôle : mcd1$myDate au lieu de myDate. Auparavant, le code JavaScript utilisait mcd1_dpe1 pour accéder au DynamicPopulateExtender au lieu de dpe1. Cette stratégie de nommage est une exigence particulière lors de l’utilisation de DynamicPopulateExtender dans un contrôle utilisateur. En outre, vous devez incorporer le contrôle utilisateur d’une manière spécifique pour que tout fonctionne. Créez une page ASP.NET et inscrivez un préfixe d’étiquette pour le contrôle utilisateur que vous venez d’implémenter :

<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.cs.ascx"%>

Ensuite, incluez le contrôle ASP.NET AJAX ScriptManager sur la nouvelle page :

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

Enfin, ajoutez le contrôle utilisateur à la page. Vous devez uniquement définir son ID attribut (et runat="server", bien sûr), mais vous devez également le définir sur un nom spécifique : mcd1 car il s’agit du préfixe utilisé dans le contrôle utilisateur pour y accéder à l’aide de JavaScript.

<div>
 <uc1:myCustomDate ID="mcd1" runat="server" />
</div>

C’est tout ! La page se comporte comme prévu : un utilisateur clique sur l’un des boutons radio, le contrôle dans la Boîte à outils appelle le service web et affiche la date actuelle au format souhaité.

Les boutons radio résident dans un contrôle utilisateur (Cliquez pour afficher l’image en taille réelle)