Dynamisches Auffüllen eines Steuerelements mit JavaScript-Code (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 Befüllung mit benutzerdefiniertem clientseitigem JavaScript-Code zu initiieren.

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

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 (Datei 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 eine neue ASP.NET Website, und beginnen Sie mit dem ASP.NET AJAX ScriptManager-Steuerelement:

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

Fügen Sie dann ein Bezeichnungssteuerelement hinzu (z. B. mithilfe des HTML-Steuerelements desselben Namens oder des <asp:Label /> Websteuerelements), das später das Ergebnis des Webdienstaufrufs anzeigt.

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

** Fügen Sie als Nächstes ein DynamicPopulateExtender-Steuerelement ein und stellen Sie Webdienstinformationen sowie das Zielsteuerelement bereit, aber nicht den Namen des Steuerelements, das die Population auslöst; dies wird später mit benutzerdefiniertem JavaScript gemacht!

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

Jetzt zum JavaScript-Teil. Die durch die ASP.NET AJAX-Bibliothek definierte $find()-Funktion gibt einen Verweis auf serverseitige Objekte des ASP.NET AJAX Control Toolkit zurück, z. B. DynamicPopulateExtender. In der aktuellen Datei gibt $find("dpe") einen Verweis auf das eine Steuerelement DynamicPopulateExtender auf der Seite zurück. Sie macht eine Methode verfügbar populate() , die den dynamischen Populationsprozess auslöst. Für die populate() Methode ist ein Argument erforderlich: der Kontextschlüssel, der als Argument für die getDate() Webmethode dient. Beispielsweise würde $find("dpe").populate("format1") die Beschriftung mit dem aktuellen Datum im Monats-Tag-Jahr-Format einfügen.

Um das Beispiel etwas flexibler zu gestalten, kann der Benutzer jetzt zwischen mehreren Datumsformaten wählen. Für jeden von ihnen wird ein Optionsfeld angezeigt. Sobald der Benutzer auf ein Optionsfeld klickt, füllt der JavaScript-Code die Beschriftung dynamisch mit dem ausgewählten Datumsformat aus. Hier sind diese Radiobuttons:

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

Beachten Sie, dass im Kontext eines Optionsfelds der JavaScript-Ausdruck this.value auf den Wert der aktuellen Schaltfläche verweist, der genau die gleichen Informationen darstellt, mit denen die getDate() Methode arbeiten kann.

Ein Klick auf die Schaltfläche ruft das Datum vom Server im angegebenen Format ab (Klicken Sie, um das Bild in voller Größe anzuzeigen)

ZurückWeiter