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 une 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 d’un code JavaScript côté client personnalisé. Toutefois, une attention particulière doit être prise lorsque l’extension réside dans un contrôle utilisateur.

Vue d’ensemble

Le DynamicPopulate contrôle dans le ASP.NET AJAX Control Toolkit appelle un service web (ou une méthode de page) et remplit la valeur obtenue dans un contrôle cible sur la page, sans actualisation de page. Il est également possible de déclencher la population à l’aide d’un code JavaScript côté client personnalisé. Toutefois, une attention particulière doit être prise lorsque l’extension 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 string, appelé contextKey, car le DynamicPopulate contrôle envoie un élément d’informations de contexte à 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" />

Également dans le fichier de contrôle utilisateur, nous utiliserons trois cases d’option, chacune représentant l’un des trois formats de date possibles pris en charge par le service web. Lorsque l’utilisateur clique sur l’une des cases d’option, le navigateur exécute le code JavaScript qui ressemble à ceci :

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

Ce code accède à ( DynamicPopulateExtender ne vous inquiétez pas encore de l’ID étrange, cela sera abordé plus tard) et déclenche la population dynamique avec des données. Dans le contexte de la case d’option actuelle, 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 qui manque encore dans le contrôle utilisateur est le DynamicPopulateExtender contrôle qui lie les cases d’option 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 utilisé mcd1_dpe1 pour accéder DynamicPopulateExtender au au lieu de dpe1. Cette stratégie de nommage est une exigence particulière lors de l’utilisation 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 de balise 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 AJAX ScriptManager ASP.NET dans 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’une des cases d’option, le contrôle dans le Kit d’outils appelle le service web et affiche la date actuelle dans le format souhaité.

Les cases d’option résident dans un contrôle utilisateur (cliquer pour afficher l’image en taille réelle)

PrécédentSuivant