Verwenden von DynamicPopulate mit einem Benutzersteuerelement und JavaScript (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. Besondere Vorsicht ist jedoch zu beachten, wenn sich der Extender in einem Benutzersteuerelement befindet.

Ü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. Besondere Vorsicht ist jedoch zu beachten, wenn sich der Extender in einem Benutzersteuerelement befindet.

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 Zeichenfolge erwartet, genannt contextKey, da das DynamicPopulate Steuerelement mit jedem Webdienstaufruf einen Teil der 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 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 vom Server stammenden Daten anzuzeigen.

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

Auch in der Benutzersteuerungsdatei verwenden wir drei Optionsfelder, von denen jedes eines der drei möglichen Datumsformate darstellt, die vom Webdienst unterstützt werden. Wenn der Benutzer auf eine der Optionsfelder klickt, führt der Browser JavaScript-Code aus, der wie folgt aussieht:

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

Dieser Code greift auf die DynamicPopulateExtender zu (machen Sie sich noch keine Sorgen um die seltsame ID, dies wird später abgedeckt) und löst die dynamische Population mit Daten aus. Im Kontext des aktuellen Optionsfelds bezieht sich auf den Wert, der format1oder format2format3 genau das ist, this.value 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.cs.asmx" ServiceMethod="getDate"/>

Auch hier können Sie die seltsame ID bemerken, die im Steuerelement verwendet wird: mcd1$myDate anstelle von myDate. Zuvor wurde der JavaScript-Code verwendet mcd1_dpe1 , um auf anstelle DynamicPopulateExtender von dpe1zuzugreifen. Diese Benennungsstrategie ist eine besondere Anforderung bei der Verwendung DynamicPopulateExtender innerhalb eines Benutzersteuerelements. Darüber hinaus müssen Sie das Benutzersteuerelement auf eine bestimmte Weise einbetten, damit alles funktioniert. Erstellen Sie eine neue ASP.NET Seite, und registrieren Sie ein Tagpräfix für das Benutzersteuerelement, das Sie gerade implementiert haben:

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

Fügen 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 nur das ID Attribut festlegen (und runat="server"natürlich), 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 eine 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 Sie, um das Bild in voller Größe anzuzeigen)

ZurückWeiter