Remplissage dynamique d’un contrôle à l’aide du code JavaScript (VB)

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é.

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é.

É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.vb.asmx) qui récupère la date actuelle dans l’un des trois formats suivants :

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

À l’étape suivante, créez un site ASP.NET et commencez par le contrôle ASP.NET AJAX ScriptManager :

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

Ensuite, ajoutez un contrôle d’étiquette (par exemple à l’aide du contrôle HTML du même nom ou du <asp:Label /> contrôle web) qui affichera ultérieurement le résultat de l’appel de service web.

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

Ensuite, incluez un contrôle DynamicPopulateExtender et fournissez des informations sur le service web et le contrôle cible, sans inclure le nom du contrôle qui déclenche la population, car cela sera effectué plus tard à l'aide de JavaScript personnalisé.

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

À présent, dans la partie JavaScript. La fonction $find(), définie par la bibliothèque AJAX ASP.NET, retourne une référence aux objets côté serveur du ASP.NET AJAX Control Toolkit, tels que DynamicPopulateExtender. Dans le fichier actuel, $find("dpe") retourne une référence au contrôle DynamicPopulateExtender unique sur la page. Il expose une méthode appelée populate() qui déclenche le processus de population dynamique. La populate() méthode nécessite un argument : la clé de contexte qui servira d’argument à la getDate() méthode web. Par exemple, $find("dpe").populate("format1") remplit l’étiquette avec la date actuelle au format mois-jour-année.

Pour rendre l’exemple un peu plus flexible, l’utilisateur peut désormais choisir entre plusieurs formats de date. Pour chacun d’entre eux, une case d’option s’affiche. Une fois que l’utilisateur clique sur un bouton radio, le code JavaScript remplit dynamiquement l’étiquette avec le format de date sélectionné. Voici ces boutons 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>

Notez que, dans le contexte d’une case d’option, l’expression JavaScript this.value fait référence à la valeur du bouton actuel, qui correspond exactement aux informations que la méthode getDate() peut utiliser.

Un clic sur le bouton récupère la date du serveur, au format spécifié (cliquez pour afficher l’image de taille complète)

PrécédentSuivant