Dynamisches Auffüllen eines Steuerelements (C#)
von Christian Wenz
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.
Ü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. In diesem Tutorial wird gezeigt, wie Sie dies einrichten.
Schritte
Zunächst benötigen Sie einen ASP.NET-Webdienst, der die Methode implementiert, die von DynamicPopulate
aufgerufen werden soll. Die Webdienstklasse erfordert das ScriptService
Attribut, das in Microsoft.Web.Script.Services
definiert ist. Andernfalls kann ASP.NET AJAX nicht den clientseitigen JavaScript-Proxy für den Webdienst erstellen, der wiederum von DynamicPopulate
benötigt wird.
Die Webmethode muss ein Argument vom Typ Zeichenfolge erwarten, genannt contextKey
, da das DynamicPopulate
Steuerelement mit jedem Webdienstaufruf eine Einzelne kontextbezogene Information sendet. Der folgende Webdienst gibt das aktuelle Datum in einem Format zurück, das durch das contextKey
Argument dargestellt wird:
<%@ 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;
}
}
Der Webdienst wird dann als DynamicPopulate.cs.asmx
gespeichert. Alternativ können Sie die getDate()
-Methode als Seitenmethode innerhalb der tatsächlichen ASP.NET Seite mit dem DynamicPopulate
-Steuerelement implementieren.
Erstellen Sie im nächsten Schritt eine neue ASP.NET-Datei. Wie immer besteht der erste Schritt darin, den ScriptManager
auf der aktuellen Seite aufzunehmen, um die ASP.NET AJAX-Bibliothek zu laden und das Control Toolkit funktionsfähig zu machen:
<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" />
Eine HTML-Schaltfläche (als HTML-Steuerelement, da kein Postback auf dem Server erforderlich ist) wird dann verwendet, um die dynamische Auffüllung auszulösen:
<input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />
Schließlich brauchen wir die DynamicPopulateExtender
Kontrolle, um die Dinge zu verdrahten. Die folgenden Attribute werden festgelegt (abgesehen von den offensichtlichen Attributen ID
und runat
="server"
):
TargetControlID
Wo das Ergebnis des Webdienstaufrufs platziert werden sollServicePath
Pfad zum Webdienst (weglassen, wenn Sie eine Seitenmethode verwenden möchten)ServiceMethod
Name der Web- oder SeitenmethodeContextKey
Kontextinformationen, die an den Webdienst gesendet werden sollenPopulateTriggerControlID
-Element, das den Webdienstaufruf auslöstClearContentsDuringUpdate
ob das Zielelement während des Webdienstaufrufs geleert werden soll
Wie Sie sehen, erfordert das Steuerelement einige Informationen, aber alles ist recht einfach. Hier sehen Sie das Markup für das DynamicPopulateExtender
Steuerelement im aktuellen Szenario:
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="myDate" ServicePath="DynamicPopulate.cs.asmx"
ServiceMethod="getDate"
ContextKey="format1" PopulateTriggerControlID="Button1" />
Führen Sie die ASP.NET Seite im Browser aus, und klicken Sie auf die Schaltfläche. Sie erhalten das aktuelle Datum im Monats-Tag-Jahr-Format.
Ein Klick auf die Schaltfläche ruft das Datum vom Server ab (Klicken Sie hier, um das bild in voller Größe anzuzeigen).