Verwenden von DynamicPopulate mit einem Benutzersteuerelement und JavaScript (VB)

von Christian Wenz

PDF herunterladen

Das DynamicPopulate-Steuerelement im ASP.NET AJAX Control Toolkit ruft einen Webdienst (oder eine Seitenmethode) auf und füllt den resultierenden Wert in ein Zielsteuerelement auf der Seite, ohne eine Seitenaktualisierung. Es ist auch möglich, die Datenpopulation mit benutzerdefiniertem clientseitigem JavaScript-Code auszulösen. Besondere Sorgfalt muss jedoch beachtet werden, wenn sich der Extender in einem Benutzersteuerelement befindet.

Übersicht

Das DynamicPopulate Steuerelement im ASP.NET AJAX Control Toolkit ruft einen Webdienst (oder eine Seitenmethode) auf und füllt den resultierenden Wert in ein Zielsteuerelement auf der Seite, ohne eine Seitenaktualisierung. Es ist auch möglich, die Befüllung mit benutzerdefiniertem clientseitigem JavaScript-Code zu initiieren. Besondere Sorgfalt muss jedoch beachtet werden, wenn sich der Extender in einem Benutzersteuerelement befindet.

Schritte

Zunächst benötigen Sie einen ASP.NET-Webdienst, der die Methode implementiert, die vom Control DynamicPopulateExtender aufgerufen werden soll. Der Webdienst implementiert die Methode getDate(), die ein Argument vom Typ "string" mit dem Namen contextKey erwartet, weil das DynamicPopulate-Steuerelement bei jedem Webdienstaufruf ein Stück Kontextinformation sendet. Hier ist der Code (Dateien DynamicPopulate.vb.asmx), der das aktuelle Datum in einem von drei Formaten abruft:

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

Erstellen Sie im nächsten Schritt ein neues Benutzersteuerelement (.ascx Datei), das durch die folgende Deklaration in der ersten Zeile gekennzeichnet ist:

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

Ein <label> Element wird verwendet, um die Daten anzuzeigen, die vom Server stammen.

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

Außerdem verwenden wir in der Benutzersteuerungsdatei drei Radio-Buttons, die jeweils eines der drei möglichen Datumsformate darstellen, die vom Webdienst unterstützt werden. Wenn der Benutzer auf eines der Optionsfelder klickt, führt der Browser JavaScript-Code aus, der wie folgt aussieht:

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

Dieser Code greift auf das DynamicPopulateExtender zu (machen Sie sich noch keine Sorgen wegen der seltsamen ID, dies wird später behandelt) und löst die dynamische Befüllung mit Daten aus. Im Kontext des aktuellen Optionsfelds bezieht sich this.value auf seinen Wert, der format1, format2 oder format3 ist, genau das, was die Webmethode erwartet.

Das Einzige, was im Benutzersteuerelement noch fehlt, ist das DynamicPopulateExtender-Steuerelement, das die Optionsfelder mit dem Webdienst verknüpft.

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

Auch hier können Sie die seltsame ID notieren, die im Steuerelement verwendet wird: mcd1$myDate statt .myDate Zuvor hat der JavaScript-Code mcd1_dpe1 verwendet, um auf DynamicPopulateExtender zuzugreifen, anstatt dpe1 zu verwenden. Diese Benennungsstrategie ist eine besondere Anforderung, um DynamicPopulateExtender innerhalb eines Benutzersteuerelements zu verwenden. Darüber hinaus müssen Sie das Benutzersteuerelement auf eine bestimmte Weise einbetten, damit es alles funktioniert. Erstellen Sie eine neue ASP.NET Seite, und registrieren Sie ein Tagpräfix für das soeben implementierte Benutzersteuerelement:

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

Schließen Sie dann das ASP.NET AJAX-Steuerelement ScriptManager auf der neuen Seite ein:

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

Fügen Sie schließlich das Benutzersteuerelement zur Seite hinzu. Sie müssen das ID Attribut (und runat="server"natürlich) nur festlegen, aber Sie müssen es auch auf einen bestimmten Namen festlegen: mcd1 Da dies das Präfix ist, das innerhalb des Benutzersteuerelements verwendet wird, um mit JavaScript darauf zuzugreifen.

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

Das war’s! Die Seite verhält sich wie erwartet: Ein Benutzer klickt auf eines der Optionsfelder, das Steuerelement im Toolkit ruft den Webdienst auf und zeigt das aktuelle Datum im gewünschten Format an.

Die Optionsfelder befinden sich in einem Benutzersteuerelement (Klicken, um das Bild in voller Größe anzuzeigen)