Dynamisches Auffüllen eines Steuerelements über den JavaScript-Code (C#)

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 ohne Seitenaktualisierung in ein Zielsteuerelement auf der Seite ein. Es ist auch möglich, die Auffüllung mithilfe von benutzerdefiniertem clientseitigem JavaScript-Code auszulösen.

Überblick

Das DynamicPopulate Steuerelement im ASP.NET AJAX Control Toolkit ruft einen Webdienst (oder eine Seitenmethode) auf und füllt den resultierenden Wert ohne Seitenaktualisierung in ein Zielsteuerelement auf der Seite ein. Es ist auch möglich, die Auffüllung mithilfe von benutzerdefiniertem clientseitigem JavaScript-Code auszulösen.

Schritte

Zunächst benötigen Sie einen ASP.NET-Webdienst, der die methode implementiert, die DynamicPopulateExtender vom Steuerelement aufgerufen werden soll. Der Webdienst implementiert die -Methode getDate() , die ein Argument vom Typ string erwartet, genannt contextKey, da das DynamicPopulate Steuerelement bei jedem Webdienstaufruf einen Teil von Kontextinformationen sendet. Hier ist der Code (Datei DynamicPopulate.cs.asmx), der das aktuelle Datum in einem von drei Formaten abruft:

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

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 (für instance 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 bereit, aber nicht den Namen des Steuerelements, das die Auffüllung auslöst, wird später mithilfe von benutzerdefiniertem JavaScript durchgeführt!

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

Nun zum JavaScript-Teil. Die $find() durch die ASP.NET AJAX-Bibliothek definierte Funktion gibt einen Verweis auf serverseitige Objekte des ASP.NET AJAX Control Toolkit zurück, z DynamicPopulateExtender. B. . Gibt in der aktuellen Datei $find("dpe") einen Verweis auf das einzelne DynamicPopulateExtender Steuerelement auf der Seite zurück. Es macht eine Methode namens populate() verfügbar, die den dynamischen Auffüllungsprozess auslöst. Die populate() -Methode erfordert ein Argument: den Kontextschlüssel, der als Argument für die getDate() Webmethode dient. Für instance $find("dpe").populate("format1") würde also die Bezeichnung mit dem aktuellen Datum im Monats-Tag-Jahr-Format auffüllen.

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 JavaScript-Code die Bezeichnung dynamisch mit dem ausgewählten Datumsformat auf. Dies sind die folgenden Optionsfelder:

<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 sich der JavaScript-Ausdruck this.value im Kontext eines Optionsfelds auf den Wert der aktuellen Schaltfläche bezieht, bei dem es sich um genau die gleichen Informationen handeln kann, mit denen die getDate() Methode arbeiten kann.

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

ZurückWeiter