Remplissage dynamique d’un contrôle (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 une méthode de page) et remplit la valeur résultante dans un contrôle cible sur la page, sans actualisation de page.

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. Ce tutoriel montre comment configurer cela.

Étapes

Tout d’abord, vous avez besoin d’un service web ASP.NET qui implémente la méthode à appeler par DynamicPopulate. La classe de service web nécessite l’attribut ScriptService qui est défini dans Microsoft.Web.Script.Services; sinon, ASP.NET AJAX ne peut pas créer le proxy JavaScript côté client pour le service web, qui à son tour est requis par DynamicPopulate.

La méthode web doit s’attendre à 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. Le service web suivant retourne la date actuelle dans un format représenté par l’argument contextKey :

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

Le service web est ensuite enregistré en tant que DynamicPopulate.vb.asmx. Vous pouvez également implémenter la getDate() méthode en tant que méthode de page dans la page ASP.NET réelle avec le DynamicPopulate contrôle.

À l’étape suivante, créez un fichier ASP.NET. Comme toujours, la première étape consiste à inclure le ScriptManager dans la page active pour charger l’ASP.NET bibliothèque AJAX et pour que le Kit de ressources de contrôle fonctionne :

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

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

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

Un bouton HTML (en tant que contrôle HTML, car nous n’avons pas besoin d’une publication sur le serveur) sera ensuite utilisé pour déclencher la population dynamique :

<input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />

Enfin, nous avons besoin du DynamicPopulateExtender contrôle pour relier les choses vers le haut. Les attributs suivants seront définis (à l’exception des attributs évidents, ID et runat="server") :

• TargetControlID où placer le résultat de l’appel de service web
• ServicePath chemin d’accès au service web (omettez si vous souhaitez utiliser une méthode page)
• ServiceMethod nom de la méthode web ou de la méthode de page
• ContextKey informations de contexte à envoyer au service web
• PopulateTriggerControlID élément qui déclenche l’appel de service web
• ClearContentsDuringUpdate s’il faut vider l’élément cible pendant l’appel de service web

Comme vous pouvez le voir, le contrôle nécessite quelques informations, mais la mise en place de tout est assez simple. Voici le balisage du DynamicPopulateExtender contrôle dans le scénario actuel :

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

Exécutez la page ASP.NET dans le navigateur et cliquez sur le bouton ; vous recevrez la date actuelle au format mois-jour-année.

Un clic sur le bouton récupère la date à partir du serveur (Cliquez pour afficher l’image en taille réelle)

PrécédentSuivant