MSDN Magazin > Home > Ausgaben > 2008 > January >  Cutting Edge: Anpassen von Steuerelementen mit ...
Cutting Edge
Anpassen von Steuerelementen mit AJAX-Extendern
Dino Esposito

Eingabesteuerelemente sind in allen Anwendungen erforderlich, sie sind jedoch besonders wichtig, wenn Ihre Webanwendung das Aushängeschild Ihres Unternehmens ist. Diese Steuerelemente sind oft das primäre Merkmal, mit dem Benutzer Ihre Anwendung und sogar Ihre Glaubwürdigkeit beurteilen.
Sowohl in Windows® als auch in der Webprogrammierung werden Benutzeroberflächen mithilfe von Steuerelementen erstellt. Die Auswahl verfügbarer Steuerelemente ist jedoch nicht sehr umfassend. Eingabesteuerelemente für Windows Forms basieren nach wie vor auf Win32®-Steuerelementen, und bei Websteuerelementen handelt es sich um nicht viel mehr als Wrapper um HTML-<INPUT>-Tags. Es werden offensichtlich bessere Eingabesteuerelemente benötigt, insbesondere für diejenigen, die ASP.NET AJAX-Anwendungen schreiben, da diese stark auf clientseitige Benutzerinteraktion angewiesen sind.
In dieser zweiteiligen Reihe wird besonderer Schwerpunkt auf die Eingabefunktionen von ASP.NET 3.5 gelegt, der Großteil der bereitgestellten Informationen gilt jedoch auch für ASP.NET 2.0 mit installierten ASP.NET AJAX Extensions. Die Artikel befassen sich mit der Verbesserung von ASP.NET-Eingabesteuerelementen mithilfe einiger der JavaScript-betriebenen Verhaltensweisen, die im AJAX Control Toolkit verfügbar sind, hier als ACT bezeichnet. In diesem Monat wird der Satz einfacher ACT-Eingabeerweiterungen behandelt, im nächsten Monat werden fortgeschrittenere Features beschrieben.

Erste Schritte
ACT ist eine Shared-Source-Bibliothek mit Websteuerelementen, die Sie von codeplex.com/AtlasControlToolkit herunterladen können. ACT erweitert vorhandene ASP.NET-Serversteuerelemente mit vordefinierten Blöcken von Skriptcode. ACT-Extenders können sowohl auf integrierte als auch auf benutzerdefinierte ASP.NET-Steuerelemente angewendet werden.
Technisch gesehen fügen ACT-Komponenten eine zusätzliche JavaScript-Schicht über Steuerelementen wie „TextBox“ und „Panel“ hinzu. Die Verwendung von AJAX ist daher nicht zwingend notwendig. Die Implementierung von ACT hängt jedoch stark von den JavaScript-Funktionen in der Microsoft® AJAX-Bibliothek sowie der ASP.NET AJAX Extensions-Serverlaufzeit ab.
ACT-Lizenzbestimmungen werden unter asp.net/ajax/ajaxcontroltoolkit behandelt. Die ACT-Projektseite zu CodePlex enthält zwei Downloads: ASP.NET 2.0 mit AJAX Extensions und ASP.NET 3.5 (siehe codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx).
Um ACT mit ASP.NET-Anwendungen zu verwenden, müssen Sie auf die Assembly im Projekt verweisen, und ACT daraufhin mit einer beliebigen Seite registrieren, die sie verwendet. Sie können ACT auf Seitenbasis mithilfe der @Register-Direktive und unter Angabe eines willkürlichen Präfix registrieren, etwa so:
  <%@ Register Assembly="AjaxControlToolkit" 
               Namespace="AjaxControlToolkit" 
               TagPrefix="act" %>
Alternativ können Sie die Bibliothek in der web.config-Datei für alle Seiten in der Anwendung registrieren. Im Folgenden finden Sie das zu verwendende Konfigurationsskript:
  <pages>
     <controls>
        <add tagPrefix="act" 
             namespace="AjaxControlToolkit" 
             assembly=" AjaxControlToolkit" />
     </controls>
  </pages>
ACT-Steuerelemente werden nicht automatisch in der Visual Studio-Toolbox angezeigt, das Hinzufügen einer neuen Registerkarte ist jedoch recht einfach, wie in Abbildung 1 ersichtlich.
Abbildung 1 ACT in Visual Studio 2008 

Erweitern der Funktionen eines Steuerelements
In einem objektorientierten Framework wie ASP.NET stellt jedes Serversteuerelement eine Klasse dar, die Sie durch Ableiten neuer Steuerelemente aus der Klasse weiter anpassen können. Stellen Sie sich beispielsweise vor, dass Sie ein maskiertes Textfeldsteuerelement benötigen. Dazu erstellen Sie zunächst eine neue MaskedTextBox-Klasse, die von der integrierten TextBox-Klasse abgeleitet ist. In der abgeleiteten Klasse fügen Sie die Eigenschaften und clientseitigen Features hinzu, die für das Verhalten eines maskierten Eingabefelds erforderlich sind. Wenn Sie später ein numerisches Textfeld oder ein „Nach oben“/„Nach unten“-Eingabefeld benötigen, können Sie eine weitere benutzerdefinierte Steuerelementklasse erstellen. Die Erstellung eines neuen Elements für jedes zusätzliche Feature ist jedoch nicht die beste Möglichkeit. Wie in Abbildung 2 dargestellt, verfügen Sie am Ende über eine große Menge an Steuerelementen, die eine flache Hierarchie bilden, in der jedes neue Steuerelement derselben Basisklasse nur wenige Verhaltensweisen hinzufügt.
Abbildung 2 Abgeleitete Steuerelemente im Vergleich zu Extendern (Klicken Sie zum Vergrößern auf das Bild)
Es gibt glücklicherweise eine zweite Methode zur Erweiterung eines Steuerelements: Die Erweiterung des Verhaltens einer bestimmten Instanz eines vorhandenen Steuerelements. In diesem Fall wird die zusätzliche Verhaltensweise über einen ASP.NET-Extender hinzugefügt. Es können beliebig viele zusätzliche Verhaltensweisen mit einer Instanz eines bestimmten Steuerelements zur Verbesserung seiner Funktionen ohne die Erstellung neuer Klassen verbunden werden.
Als ASP.NET-Serversteuerelement erhält ein Extender einen Verweis auf das erweiterte Steuerelement und ändert sein Verhalten durch Einspeisen von Skriptcode. Das Extendersteuerelement verfügt möglicherweise über eine Reihe eigener Eigenschaften, sodass Programmierer das Verhalten weiter konfigurieren können. Die Verbindung zwischen dem Ziel-ASP.NET-Steuerelement und seinem Extendersatz wird normalerweise deklarativ im Seitenmarkup hergestellt. Der folgende Codeausschnitt zeigt, wie Sie einem Textfeld eine numerische „Nach oben“/„Nach unten“-Schnittstelle hinzufügen, sodass Benutzer Zahlen durch einfaches Klicken auf eine „Nach oben“/„Nach unten“-Schaltfläche auswählen können:
<asp:TextBox ID="Children" runat="server" />
<act:NumericUpDownExtender ID="UpDown1" runat="server"
     TargetControlID="Children" 
     Width="100" />
Wie Sie sehen, enthält die Seite ein normales TextBox-Steuerelement sowie eine Instanz des NumericUpDownExtender-Steuerelements. Die TargetControlID-Eigenschaft auf dem Extender legt die ID des Extendee-Steuerelements fest. Die Width-Eigenschaft ist spezifisch für den Extender und definiert die endgültige Breite des Extendee-Steuerelements sowie aller zusätzlichen Elemente der Benutzeroberfläche, die vom Extender beigetragen wurden – in diesem Fall ein Paar von „Nach oben“/„Nach unten“-Schaltflächen (siehe Abbildung 3). Die Eigenschaften des Extenders können sowohl deklarativ als auch programmgesteuert in der Codebehind-Klasse festgelegt werden.
Abbildung 3 NumericUpDown Extender in Aktion 

Anatomie eines Extendersteuerelements
ACT enthält klassische Serversteuerelemente für die Bedienung bestimmter Anforderungen der Benutzeroberfläche, sowie Extender für das Hinzufügen bestimmter Verhaltensweisen zu vorhandenen Steuerelementen. In ACT gibt es beispielsweise ein TabContainer-Steuerelement für die Einrichtung einer registerkartenbasierten Schnittstelle und ein ReorderList-Steuerelement, das einem Listenfeld Drag & Drop-Unterstützung für das Verschieben von Elementen bietet. ACT besteht jedoch größtenteils aus Extendern.
In Abbildung 4 sehen Sie einen Extender, der von der Basisklasse, „ExtenderControl“, definiert in der AJAX-Erweiterungsassembly, erbt. Intern überschreibt eine benutzerdefinierte Extendersteuerelementklasse die GetScriptReferences-Methode, die die Liste der in die Clientseite einzuspeisenden Skriptdateien zur Implementierung der Verhaltensweise zurückgibt, und die GetScriptDescriptors-Methode, die die Liste der Zuordnungen zwischen clientseitigen und serverseitigen Eigenschaften zurückgibt. Folglich werden alle Werte, die einer bestimmten Eigenschaft auf dem Client zugewiesen sind, auf dem Server ordnungsgemäß widergespiegelt. Abgesehen von diesem relativ standardmäßigen Code ist ein Extender lediglich JavaScript-Code, der das DOM einsetzt, um dem Endbenutzer umfangreichere Benutzeroberflächenelemente bereitzustellen.
[
[TargetControlType(typeof(Control))]
[ClientScriptResource("IntroAjax.FocusBehavior"), "focusBehavior.js")]
public class FocusExtender : AjaxControlToolkit.ExtenderControlBase
{
    [ExtenderControlProperty]
    [RequiredProperty]
    public string HighlightCssClass
    {
        get { return GetPropertyValue("HighlightCssClass", ""); }
        set { SetPropertyValue("HighlightCssClass", value); }
    }

    [ExtenderControlProperty]
    public string NoHighlightCssClass
    {
        get { return GetPropertyValue("NoHighlightCssClass", ""); }
        set { SetPropertyValue("NoHighlightCssClass", value); }
    }
}

Der in Abbildung 4 dargestellte Beispielextender fügt praktisch allen ASP.NET-Steuerelementen eine Fokusverhaltensweise hinzu, d. h. allen Steuerelementen, die vom Control-Steuerelement abgeleitet sind. Das Fokusfeature ist in der verknüpften Datei „focusbehavior.js“ implementiert. Diese Skriptdatei wird wahrscheinlich in die Assembly eingebettet, die das Extendersteuerelement enthält, und dann bei Anforderung auf den Client heruntergeladen. Die Datei „focusbehavior.js“ verwendet das Programmiermodell der Microsoft AJAX-Bibliothek (siehe den von mir verfassten Artikel vom Dezember 2007 unter msdn.microsoft.com/msdnmag/issues/07/12/CuttingEdge) und ist um eine Initialisierungsmethode herum konstruiert, die Dokumentobjektmodell (Document Object Model, DOM)-Handler für focus- und blur-Ereignisse registriert. Im focus-Handler legt der Code die CSS-Klasse für das Zielelement fest. Im blur-Handler setzt er die CSS-Klasse zurück. Weitere Details finden Sie im Quellcode, der diese Rubrik begleitet. Alles in allem ist die einfachste Möglichkeit für die Erstellung von Extendern die Verwendung der Funktionen von ACT. Führen Sie das Installationsprogramm im heruntergeladenen Toolkit aus, richten Sie die Vorlagen ein, und wählen Sie „Add AJAX Control Extender“ (AJAX-Steuerelementextender hinzufügen) aus, um ein Gerüst für den Extender und die Verhaltensweise zu beziehen. Weitere Informationen finden Sie unter asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/CreatingNewExtender.aspx.

Eingabeextender
Wie bereits erwähnt bietet ACT mehrere Extender, die Schaltflächen, Textfeldern, Bereichen, Listenfeldern usw. neue Features hinzufügen. Die Komponenten in ACT können in folgende Kategorien gruppiert werden: Bereich, Eingabe, generische Benutzeroberfläche, Animation. Eine vollständige Liste der Komponenten mit Dokumentation und Beispielcode finden Sie unter asp.net/ajax/control-toolkit. Die vollständige Liste der Eingabeextender in ACT ist in Abbildung 5 dargestellt.

Eingabeextender Zielsteuerelemente Vorrangiges Ziel Beschreibung
AutoComplete TextBox Verbesserte Benutzerfreundlichkeit Bietet eine Liste mit Vorschlägen, während der Benutzer Eingaben im Bearbeitungsfeld vornimmt.
Calendar TextBox Eingeschränkte Eingabe Bietet clientbasierte Datumsauswahlfunktionen mit anpassbarem Datumsformat.
ConfirmButton IButtonControl Verhindern von Fehlern Zeigt ein Bestätigungsdialogfeld an, wenn der Benutzer auf die Schaltfläche klickt.
FilteredTextBox TextBox Eingeschränkte Eingabe Benutzer können nur Text eingeben, der mit einem bestimmten Zeichensatz übereinstimmt.
HoverMenu Control Verbesserte Benutzerfreundlichkeit Zeigt den Inhalt eines verknüpften Bereichssteuerelements an, wenn die Maus neben einem bestimmten Steuerelement platziert wird – wie ein QuickInfo.
ListSearch ListControl Verbesserte Benutzerfreundlichkeit Ermöglicht Benutzern die Suche nach einem Element in einer Liste durch Eingabe ausgewählter Zeichen.
MaskedEdit TextBox Eingeschränkte Eingabe Benutzer können nur Text eingeben, der in eine bestimmte Eingabemaske passt.
ModalPopup Control Verbesserte Benutzerfreundlichkeit Implementiert ein klassisches modales Dialogfeld ohne Verwendung der window.alert-Methode des Browsers. Im Grunde wird der Inhalt eines Fensterbereichs angezeigt, und die Benutzer werden an einer Interaktion mit der zugrunde liegenden Seite gehindert.
MutuallyExclusiveCheckBox CheckBox Eingeschränkte Eingabe Hiermit können Sie logische Gruppen von Kontrollkästchen definieren, sodass Benutzer nur eins in einer Gruppe aktivieren können:
NumericUpDown TextBox Verhindern von Fehlern Zeigt „Nach oben“ und „Nach unten“-Schaltflächen für die Auswahl des nächsten oder vorherigen Werts an.
Slider TextBox Verhindern von Fehlern Verwendet eine Benutzeroberfläche, die einem Schieberegler ähnelt, zur Auswahl eines numerischen Werts in einem Bereich.
TextBoxWatermark TextBox Verhindern von Fehlern Fügt Wasserzeichentext hinzu, der verschwindet, wenn der Benutzer mit der Eingabe beginnt, und erneut angezeigt wird, wenn das Textfeld leer ist.
ToggleButton CheckBox Verbesserte Benutzerfreundlichkeit Ermöglicht Benutzern die Anzeige benutzerdefinierter Bilder zum Rendern der Häkchenknöpfe.
ValidatorCallout BaseValidator Verbesserte Benutzerfreundlichkeit Verbessert die Benutzeroberfläche von Validierungssteuerelementen durch Anzeige einer Beschriftung im Sprechblasenstil für jede Fehlermeldung.

Wasserzeichen und Eingabe
Eines der unerfreulichsten Elemente auf einer Webseite ist ein unbeschriftetes Textfeld oder eine Seite, in der die Beschriftungen und Textfelder nicht übereinstimmen. Dies kann durch den vom Benutzer ausgewählten Schriftgrad verursacht werden, das Ergebnis ist jedoch, dass der Benutzer nicht genau weiß, was in das Textfeld gehört. Eine sehr nützliche Lösung ist ein Textwasserzeichen – Standardtext im Textfeld, der ausgeblendet wird, wenn der Benutzer mit der Eingabe im Feld beginnt (siehe Abbildung 6). Der folgende Code illustriert, wie dieser Effekt erzielt wird:
Abbildung 6 Ausgewählte Eingabeextender (Klicken Sie zum Vergrößern auf das Bild)
<act:TextBoxWatermarkExtender runat="server" ID="TextBoxWatermark1"
     TargetControlID="TextBox1" 
     WatermarkText="Type Last Name Here" 
     WatermarkCssClass="watermarked" />
Der Extender speist Skriptcode ein, der focus-, blur- und keydown-Ereignisse behandelt. Wenn das Steuerelement Fokus erhält, verschwindet das Wasserzeichen. Wenn das Steuerelement Fokus verliert, wird das Wasserzeichen erneut angezeigt, wenn kein Text eingegeben wurde. Der Wasserzeichentext wird gelöscht, wenn die Seite Daten zurückgibt. Dies wird mit einem Handler für das DOM-Sendeereignis erreicht. Das Wasserzeichen-Extendersteuerelement ermöglicht Ihnen die Angabe des Texts und des darauf anzuwendenden CSS-Stils. Möglicherweise möchten Sie einen speziellen CSS-Stil für die visuelle Unterscheidung von herkömmlichem Eingabetext zum Wasserzeichentext verwenden.
In HTML gibt es ein primäres Element für das Annehmen von Daten – das <Eingabe>element. Es muss für Zahlen, Zeichenfolgen, Daten, Währungswerte usw. verwendet werden. Es ist häufig erforderlich, eine numerische Eingabe auf einen bestimmten Wertebereich zu beschränken. Sie können diese Geschäftsregel sicherlich über eine Überprüfungsebene durchsetzen, es wäre jedoch besser, dies direkt im Eingabefeld vorzunehmen.
Die Slider- und NumericUpDown-Extender zwingen Benutzer, nur Zahlen innerhalb eines bestimmten Bereichs einzugeben. Der Slider-Extender blendet sein verknüpftes Textfeld (TextBox) aus und ersetzt es durch einen grafischen Schieberegler, der sich schrittweise innerhalb eines Mindest- und Maximalabstands bewegt. Das zugrunde liegende Textfeld kann programmgesteuert auf einen beliebigen Wert eingestellt werden. Beachten Sie jedoch, dass der zugewiesene Wert mit dem numerischen Bereich kompatibel sein muss, der über den Schieberegler eingestellt ist, ansonsten wird dies vom Schieberegler automatisch angepasst. Betrachten Sie das folgende Beispiel:
<act:SliderExtender runat="server" ID="SliderExtender1"  
     TargetControlID="Income" 
     Minimum="0" 
     Maximum="200000" 
     Steps="41" 
     BoundControlID="IncomeAsText" />
Der Schieberegler gilt für ein Textfeld namens „Income“ und stellt sicher, dass ihm visuell ein Wert im Bereich 0-200000 zugewiesen ist. Die Steps-Eigenschaft gibt an, wie viele getrennte Schritte bereitgestellt werden sollen. Durch die vorhergehende Einstellung springt der Schieberegler jedes Mal um 5000. Wenn Sie den Schieberegler auf dem Server programmgesteuert festlegen, wird der Wert zunächst in eine Zahl umgewandelt, und daraufhin dem nächsten Schrittwert zugeordnet. Wenn Sie in einer Zeichenfolge übergeben, ignoriert der Schieberegler diese und kehrt zum ursprünglichen Wert des Bereichs zurück. Wenn Sie den Wert des zugrunde liegenden Textfelds auf dem Client über Javascript festlegen, wird der Wert über das nächste Postback korrekt erkannt, dies wird jedoch nicht sofort in der Benutzeroberfläche widergespiegelt. Um den Wert im Schieberegler programmgesteuert innerhalb des Clients zu ändern, verwenden Sie den folgenden Code:
$find("SliderExtender1").set_Value(145678);
Weshalb sollten Sie „$find“ anstelle von „$get“ auswählen? Die $get-Funktion ist die Kurzschreibweise für „document.getElementById“. Daher kann sie nur nach DOM-Elementen suchen. Die $find-Funktion steht für „Sys.Application.findComponent“ und gilt für alle Komponenten der Microsoft AJAX-Bibliothek, die programmgesteuert erstellt wurden. Ein Extender wird der Seite mithilfe des folgenden Skripts hinzugefügt:
Sys.Application.add_init(
  function() {
      $create(AjaxControlToolkit.SliderBehavior, 
           {"BoundControlID":"IncomeAsText",
            "Maximum":200000,
            "Steps":41,
            "id":"SliderExtender1"}, 
           null, 
           null, 
           $get("Income"));
  }
);
Da es sich um eine Microsoft AJAX-Bibliothekskomponente handelt, kann sie nur mithilfe der $find-Funktion gefunden werden.
Die Eigenschaft „BoundControlID“ verweist auf ein DOM-Element, das den aktuellen Schiebereglerwert dynamisch anzeigt. In den meisten Fällen verwenden Sie zu diesem Zweck eine <Spanne> oder eine Bezeichnung. Intern unterscheidet der Schieberegler zwischen INPUT und allen anderen HTML-Elementen. Er legt die Eigenschaft „Value“ im ersteren Fall fest, sonst verwendet er die Eigenschaft „innerHTML“ des entsprechenden DOM-Elements.
Das Schiebereglerskript blendet das zugrunde liegende Textfeld aus. Das Element wird also möglicherweise während des Ladens der Seite kurz angezeigt. Sie können es deklarativ mithilfe von CSS-Stilen ausblenden. Beachten Sie außerdem, dass normale Textfelder inline angezeigt werden, während es sich bei Schiebereglerfeldern um positionierte Blöcke handelt.
Der NumericUpDown-Extender wählt den nächsten/vorherigen Wert aus einer gebundenen Liste möglicher Werte aus. Obwohl der Name dies möglicherweise impliziert, ist „NumericUpDown“ nicht nur ein Tool für das Festlegen numerischer Mengen. Mit der RefValues-Eigenschaft können Sie zu durchlaufende Werte anzeigen:
<act:NumericUpDownExtender ID="UpDown1" runat="server"
     Width="120" 
     RefValues="None;1;2;3;4;5;More than 5;" 
     TargetControlID="Children" />
„NumericUpDown“ kann Referenzwerte von einem Remotedienst abrufen. Der Dienst wird jedes Mal asynchron aufgerufen, wenn der Benutzer auf die „Nach oben“/„Nach unten“-Schaltflächen klickt. Beachten Sie, dass der Dienst durch Skripts aufrufbar sein und Methoden mit der folgenden Signatur enthalten muss:
public int YourMethod(int current, string tag)  
Sie konfigurieren den Extender zur Verwendung des Remotediensts über die Eigenschaften „ServiceDownPath“, „ServiceDownMethod“, „ServiceUpPath“ und „ServiceUpMethod“. Die „Nach oben“- und „Nach unten“-Schaltflächen müssen am Ende nicht über Skript automatisch generiert werden. Es kann sich hierbei um Schaltflächen handeln, die bereits auf der Seite definiert sind und auf die über die Eigenschaften „TargetButtonDownID“ und „TargetButtonUpID“ verwiesen wird.

Bestätigung und Modalität
Eingabeformulare, die Daten zum Ausführen wichtiger Serverprozeduren sammeln, sollten möglichst erst gestartet werden, nachdem der Benutzer seine beabsichtigten Handlungen bestätigt hat. Es ist beispielsweise ratsam, einen Bestätigungsschritt zu implementieren, bevor Daten auf dem Server dauerhaft gelöscht werden. Ein clientseitiger Bestätigungsschritt kann nur über Javascript implementiert werden, etwa durch Anzeige eines modalen Dialogfelds. Am einfachsten geht dies über einen ConfirmButton-Extender:
<act:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
     TargetControlID="Button1" 
     ConfirmText="Are you sure you want to 
                 "send this data?&#10;Really sure?" />
Der Extender verknüpft das Klickereignis des gebundenen Schaltflächensteuerelements (nicht nur „Button“, sondern auch „LinkButton“ und „ImageButton“) und zeigt ein Warnungs-Nachrichtenfeld an. Wenn Sie die Nachricht abbrechen, findet das Postback nicht statt. Die window.alert-Methode des Browsers wird verwendet, um die Nachricht anzuzeigen. Sie können dasselbe Feature natürlich auch manuell ohne den Extender codieren, der Extender ist jedoch einfacher und besser wiederverwendbar.
Wenn Sie eine umfangreichere, individuellere Benutzeroberfläche wünschen, müssen Sie nach anderen Lösungen suchen. Der ModalPopup-Extender ist eine Alternative, die näher untersucht werden sollte. „ModalPopup“ fügt einem Markup Modalität hinzu – in der Regel einen Bereich. Er ist an ein Schaltflächenelement gebunden und dient zum Anzeigen des angegebenen DIV-Tags sowie zum Deaktivieren der zugrunde liegenden Seite. Das Element im obersten DIV-Tag kann nicht geschlossen werden, außer über die Benutzeroberfläche, die es bereitstellt. Klickaktionen auf beliebige Elemente, die sich nicht im obersten DIV befinden, gehen verloren und erreichen das beabsichtigte Ziel nicht. „ModalPopup“ umgeht dies durch Hinzufügen eines unsichtbaren DIV, um das gesamte Browserfenster abzudecken. Diese Schicht fängt alle Benutzeraktionen ab, bevor sie zugrunde liegende Steuerelemente erreichen. Mit kluger CSS-Programmierung können Sie eine Reihe wirkungsvoller Effekte hinzufügen, wie das Ausgrauen aller Elemente unterhalb des obersten DIV (siehe Abbildung 7).
Abbildung 7 ModalPopup-Extender (Klicken Sie zum Vergrößern auf das Bild)
Im folgenden Code für den ModalPopup-Extender verweist die PopupControlID-Eigenschaft direkt auf das Markupelement, das angezeigt werden soll:
<act:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
     TargetControlID="LinkButton1"
     PopupControlID="Panel1"
     BackgroundCssClass="modalBackground"
     OkControlID="Button1"
     OnOkScript="yes()"
     OnCancelScript="no()"
     CancelControlID="Button2" />
In den meisten Fällen handelt es sich bei diesem Element um ein ASP.NET-Bereichssteuerelement oder ein einfaches DIV-Element. Die BackgroundCssClass-Eigenschaft gibt den CSS-Stil an, der für die Dauer des modalen Dialogs auf die zugrunde liegende Seite angewendet werden soll. Um den in Abbildung 7 gezeigten abgeblendeten Effekt zu erhalten, verwenden Sie die folgenden Attribute:
.modalBackground 
{
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}
Fast alle modalen Dialogfelder verfügen über die Schaltflächen „OK“ und „Abbrechen“. Bei diesen Schaltflächen kann es sich um Standardschaltflächen bzw. um Verknüpfungs- oder Bildschaltflächen handeln, und sie können mit einem beliebigen Text beschriftet sein. Verwenden Sie die Eigenschaften „OkControlID“ und „CancelControlID“, um dem Extender anzugeben, welche Steuerelemente im Bereich die Schaltflächen „OK“ und „Abbrechen“ darstellen. Ebenso verwenden Sie die Eigenschaften „OnOkScript“ und „OnCancelScript“, um JavaScript-Funktionen anzugeben, die ausgeführt werden sollen, wenn der Benutzer zur Bestätigung oder zum Schließen auf das modale Dialogfeld klickt.

Erweiterte Kontrollkästchen
Ein weiterer Extender, der Benutzern bei der Eingabe korrekter Daten helfen und dem System zusätzliche Clientüberprüfung ersparen kann, ist „MutuallyExclusiveCheckBox“. Hiermit können Sie logische Gruppen von Kontrollkästchen definieren, sodass Benutzer nur eins in einer Gruppe aktivieren können:
<asp:CheckBox runat="server" ID="beginner" Text="Beginner" />
<asp:CheckBox runat="server" ID="intermed" Text="Intermediate" />
<act:MutuallyExclusiveCheckBoxExtender runat="server" ID="Mutual1"
     TargetControlID="beginner"
     Key="Expertise" />
<act:MutuallyExclusiveCheckBoxExtender runat="server" ID="Mutual2"
     TargetControlID="intermediate"
     Key="Expertise" />
Die vorhergehenden Extender definieren eine Gruppe mit zwei Kontrollkästchen namens „Expertise“, die sich gegenseitig ausschließen. Normalerweise verwenden Sie Kontrollkästchen, um mehr als eine Auswahl zu ermöglichen, und Optionsfelder, um den Benutzer zu zwingen, nur eine Option auszuwählen. Weshalb sollten Sie an dieser Stelle also kein RadioButtonList-Steuerelement verwenden? Wie Sie vielleicht bemerkt haben, können anfangs alle Optionen für ein RadioButtonList-Steuerelement deaktiviert sein, wenn jedoch einmal eine Auswahl getroffen wurde, kann nicht wieder zu einem komplett deaktivierten Zustand zurückgekehrt werden. Anders gesagt können Sie ein Element nur durch Auswahl eines anderen deaktivieren, und eins ist immer ausgewählt. Bei einer Gruppe mit Kontrollkästchen, die MutuallyExclusiveCheckbox-Extender verwenden, liegt diese Einschränkung nicht vor.
Kontrollkästchen werden normalerweise mithilfe von Bitmaps angezeigt, die im Browser eingebettet sind. Die programmgesteuerte Änderung der Bitmap ist nicht einfach, da keine öffentliche Eigenschaft verfügbar gemacht wird. Der ToggleButton-Extender blendet das gebundene Kontrollkästchenelement aus und ersetzt es durch ein dynamisch generiertes Markup, das das Layout eines Kontrollkästchens emuliert. Dazu verwendet es jedoch zwei benutzerdefinierte Bitmaps für den aktivierten und deaktivierten Zustand:
act:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
    TargetControlID="CheckBox1" 
    ImageHeight="19"
    ImageWidth="19"
    UncheckedImageUrl="~/images/DontLike.gif" 
    CheckedImageUrl="~/images/Like.gif" />
Der ToggleButton-Extender kann nicht auf ein CheckBoxList-Steuerelement angewendet werden. Er funktioniert nur mit einzelnen Kontrollkästchen. Es ist von Vorteil, das Aussehen des Standardkontrollkästchens ändern zu können.

Eingeschränkte Eingabe
Zum Verhindern von Benutzerfehlern kann die Eingabe durch Ausfiltern unerwünschter Zeichen, ungültiger Ausdrücke oder Daten des falschen Typs gesteuert werden. Mithilfe des Standard-TextBox-Steuerelements setzen Sie eine korrekte Eingabe durch Überprüfung auf dem Server durch. Die Zeichenfolge kann dabei in einen anderen Datentyp umgewandelt werden. Mit AJAX sind Eingabedatentypen besser steuerbar. Durch Verwendung des Calendar-Extenders beispielsweise machen Sie es Benutzern praktisch unmöglich, etwas anderes als ein Datum einzugeben. ASP.NET enthält zwar ein Serverkalendersteuerelement, ein Calendar-Extender unterscheidet sich jedoch erheblich davon, da die Benutzeroberfläche komplett auf dem Client aufbaut, ausschließlich auf dem Client funktioniert und während der Benutzernavigation nach Monat und Datum keinerlei Postbacks erzeugt. Wenn ein bestimmter Browser darüber hinaus JavaScript nicht unterstützt, wird das alte Textfeld angezeigt:
<act:CalendarExtender ID="CalendarExtender1" runat="server"
     TargetControlID="Birth"
     Format="dd/MM/yyyy" />
Der vorhergehende Codeausschnitt reicht für die Anzeige eines Popupkalenders aus, da das verbundene Textfeld den Fokus erhält. Alternativ dazu können Sie das Popup anzeigen, wenn der Benutzer auf eine Seitenschaltfläche klickt. Die ID der Schaltfläche wird über die PopupButtonID-Eigenschaft festgelegt. Die Format-Eigenschaft gibt das Format des Datums an, wie es im Textfeld angezeigt wird, wenn der Benutzer das Kalenderpopup beendet (siehe Abbildung 8).
Abbildung 8 Calendar-Extender 
Der FilteredTextBox-Extender hindert einen Benutzer an der Eingabe ungültiger Zeichen in ein Textfeld. Dabei wird JavaScript hinzugefügt, durch das eine Verknüpfung zur Tastaturaktivität hergestellt und unerwünschte Tastenanschläge herausgefiltert werden. Sie können den Extender so konfigurieren, dass bestimmte Zeichen abgelehnt bzw. dass lediglich festgelegte Zeichen akzeptiert werden. Für diese Einstellung verwenden Sie die FilterMode-Eigenschaft. Sie bestimmt den anzuwendenden Filtertyp – nur Zahlen, nur Klein- oder Großbuchstaben sowie einen benutzerdefinierten Zeichensatz. Beachten Sie, dass ein Textfeld mit einem Wasserzeichen nicht gefiltert werden kann, um nur numerische Werte anzunehmen. Die Filterschicht löscht nämlich jeden von Ihnen festgelegten Wasserzeichentext.

Das Ziel: verbesserte Webseiten
Extender sind eine leistungsfähige und geschickte Möglichkeit, ASP.NET-Steuerelementen zusätzliche Verhaltensweisen hinzuzufügen. ACT enthält mehr als 30 Extender für die Erweiterung integrierter Steuerelemente. In ACT finden Sie Extender für das Hinzufügen von Animation, Drag & Drop-Funktionen, automatische Vervollständigung und vor allem für die Verbesserung von Eingabefunktionen. ACT kann mit oder ohne den ursprünglichen Quellcode heruntergeladen werden. Zusätzlich verfügen die kompliziertesten Extender über Querabhängigkeiten. Der Calendar-Extender erfordert beispielsweise den Popup-Extender.
In dieser Rubrik wurden die einfachsten und häufigsten Extender erörtert, die zu einer effektiveren Seitengestaltung beitragen können. Im nächsten Artikel geht es um erweiterte Funktionen wie maskiertes Bearbeiten und automatische Vervollständigung.

Senden Sie Fragen und Kommentare für Dino Esposito (in englischer Sprache) an cutting@microsoft.com.


Dino Esposito ist Mentor bei Solid Quality Learning und Autor von „Introducing Microsoft ASP.NET AJAX“ (Microsoft Press, 2007). Er lebt in Italien und ist ein weltweit gefragter Referent bei Branchenveranstaltungen. Sie erreichen ihn unter der Adresse cutting@microsoft.com. Seinen Blog finden Sie unter weblogs.asp.net/despos.

Page view tracker