Erstellen eines Extendersteuerelements zum Zuordnen eines Clientverhaltens zu einem Webserversteuerelement

Aktualisiert: November 2007

Mithilfe von AJAX-Funktionen in ASP.NET können Sie die Fähigkeiten einer Webanwendung erweitern, um eine hohe Benutzerfreundlichkeit zu erreichen. Sie können die ECMAScript (JavaScript)-, DHTML- und AJAX-Fähigkeiten des Webbrowsers nutzen, um visuelle Effekte, clientseitige Verarbeitung (wie Überprüfungen) usw. zu verwenden.

In diesem Lernprogramm wird erläutert, wie Sie ein Extendersteuerelement erstellen, das ein Clientverhalten kapselt und mit einem Webserversteuerelement verknüpft. Das Clientverhalten fügt den DOM-Elementen (Document Object Model, Dokumentobjektmodell) des Browsers Funktionen hinzu. Das Extendersteuerelement wird dann einem oder mehreren Typen von ASP.NET-Serversteuerelementen zugeordnet, um das Verhalten diesen Serversteuerelementen hinzuzufügen. Sie können einem ASP.NET-Serversteuerelement auch mehrere Extendersteuerelemente zuordnen.

In diesem Lernprogramm erfahren Sie, wie Sie folgende Aktionen ausführen:

• Erstellen eines Extendersteuerelements, das Clientverhalten kapselt und das an Webserversteuerelemente auf einer ASP.NET-Webseite angefügt wird.

• Erstellen eines Clientverhaltens, das dem Webserver-Extendersteuerelement zugeordnet wird.

• Behandeln von Ereignissen aus dem Browser-DOM mithilfe des Clientverhaltens.

  Hinweis:
  Sie können ASP.NET-Serversteuerelementen auch Rich Client-Fähigkeiten ohne ein separates Extendersteuerelement hinzufügen. Ein Beispiel, wie ein Webserversteuerelement erstellt wird, das dieselben Clientfunktionen wie dieses Lernprogramm enthält, finden Sie unter Hinzufügen von Clientfunktionen zu einem Webserversteuerelement.

• Kompilieren des benutzerdefinierten Extendersteuerelements in eine Assembly und Einbetten zugehöriger JavaScript-Dateien in dieselbe Assembly als Ressourcen.

• Verweisen auf das kompilierte benutzerdefinierte Extendersteuerelement in einer ASP.NET AJAX-fähigen Webseite.

Ermitteln der Clientanforderungen

Dieses Lernprogramm implementiert ein einfaches Clientverhalten, das ein Steuerelement (z. B. ein TextBox-Steuerelement oder ein Button-Steuerelement) auf einer Webseite hervorhebt, wenn das Steuerelement im Browser ausgewählt wird (bzw. den Fokus erhält). So kann sich beispielsweise die Hintergrundfarbe des Steuerelements ändern, wenn es den Fokus erhält, und dann wieder zur Standardfarbe zurückkehren, wenn der Fokus zu einem anderen Steuerelement wechselt.

Zum Implementieren dieses Verhaltens muss das Clientsteuerelement aus diesem Lernprogramm die in der nachfolgenden Tabelle aufgeführten Fähigkeiten besitzen:

Erstellen des Extendersteuerelements

Mithilfe eines Extendersteuerelements können Sie das Clientverhalten kapseln, damit es von Entwicklern von ASP.NET-Seiten verwendet werden kann. Ein Extendersteuerelement ist ein Webserversteuerelement, das von der abstrakten ExtenderControl-Klasse im System.Web.UI-Namespace erbt. Extendersteuerelemente können auf bestimmte Typen von Webserversteuerelementen angewendet werden. Auf welche Typen von Webserversteuerelementen ein Extendersteuerelement angewendet werden kann, bestimmen Sie mithilfe des TargetControlTypeAttribute-Attributs.

Das Extendersteuerelement aus diesem Lernprogramm kann auf jede Art von Webserversteuerelement angewendet werden. Das folgende Beispiel zeigt die Klassendefinition.

<TargetControlType(GetType(Control))> _
Public Class FocusExtender
    Inherits ExtenderControl

[TargetControlType(typeof(Control))]
public class FocusExtender : ExtenderControl

Das neue Extendersteuerelement enthält zwei Eigenschaften, die zum Implementieren der Clientanforderungen dienen:

• HighlightCssClass, die die CSS-Klasse identifiziert, die auf das DOM-Element angewendet werden soll, um das Steuerelement hervorzuheben, wenn es den Fokus besitzt.

• NoHighlightCssClass, die die CSS-Klasse identifiziert, die auf das DOM-Element angewendet werden soll, wenn es nicht den Fokus besitzt.

Erben von der abstrakten ExtenderControl-Klasse

In der folgende Tabelle sind Member der abstrakten ExtenderControl-Klasse aufgeführt, die Sie in einem Extendersteuerelement implementieren müssen.

Mithilfe der GetScriptDescriptors()-Methode definiert das Extendersteuerelement in diesem Lernprogramm die Instanz des Typs von Clientverhalten. Das Steuerelement erstellt ein neues ScriptBehaviorDescriptor-Objekt (die ScriptBehaviorDescriptor-Klasse ist von der ScriptDescriptor-Klasse abgeleitet) und schließt das Objekt in den Rückgabewert für die GetScriptDescriptors-Methode ein.

Das ScriptBehaviorDescriptor-Objekt enthält den Namen der Clientklasse (Samples.FocusBehavior) und den ClientID-Wert für das zugeordnete (Ziel-) Webserversteuerelement. Der Name der Clientklasse und die ClientID-Eigenschaftenwerte werden an den Konstruktor für das ScriptBehaviorDescriptor-Objekt übergeben. Ein Verweis auf das Zielwebserversteuerelement wird als Parameter an die GetScriptDescriptors(Control)-Methode übergeben. Mithilfe des Verweises kann der ClientID-Wert des Zielwebserversteuerelements bestimmt werden, der als id-Wert für das gerenderte DOM-Element verwendet wird.

Die ScriptBehaviorDescriptor-Klasse wird zum Festlegen der Eigenschaftenwerte des Clientverhaltens verwendet, die aus Eigenschaften des Extendersteuerelements auf dem Server abgerufen werden. Zum Definieren der Eigenschaften des Clientverhaltens verwendet das Extendersteuerelement die AddProperty-Methode der ScriptBehaviorDescriptor-Klasse. Anschließend gibt das Extendersteuerelement den Namen und den Wert für die Eigenschaft des Clientverhaltens anhand der entsprechenden Eigenschaft des Serverextendersteuerelements an. In diesem Beispiel wird ein ScriptBehaviorDescriptor-Objekt verwendet, um die Werte für die highlightCssClass-Eigenschaft und die nohighlightCssClass-Eigenschaft im Clientverhalten festzulegen.

Das Extendersteuerelement übergibt das ScriptBehaviorDescriptor-Objekt im Rückgabewert der GetScriptDescriptors-Methode. Daher rendert ASP.NET jedes Mal, wenn das Webserversteuerelement für den Browser gerendert wird, JavaScript, das eine Instanz des Clientverhaltens mit allen definierten Eigenschaften und Ereignishandlern erstellt. Die Verhaltensinstanz wird gemäß der vom Zielwebserversteuerelement gerenderten ClientID-Eigenschaft an das DOM-Element angefügt. Das folgende Beispiel zeigt deklarativen ASP.NET-Markup, das ein ASP.NET-Serversteuerelement und das Extendersteuerelement aus diesem Lernprogramm auf einer Seite enthält.

<asp:TextBox ID="TextBox1"  />
<sample: FocusExtender 
    ID="FocusExtender1" 
    HighlightCssClass="MyHighLight"
    NoHighlightCssClass="MyLowLight"
    TargetControlID="TextBox1" />

Die gerenderte Ausgabe der Seite enthält einen Aufruf der $create-Methode, die das zu erstellende Clientverhalten identifiziert. Außerdem werden Werte für die Eigenschaften des Clientverhaltens und der id-Wert des DOM-Elements angegeben, auf das das Clientverhalten abzielt. Das folgende Beispiel zeigt eine gerenderte $create-Methode.

$create(Samples.FocusBehavior, {"highlightCssClass":"MyHighLight","nohighlightCssClass":"MyLowLight"}, null, null, $get('TextBox1'));

Das Extendersteuerelement in diesem Lernprogramm übergibt mithilfe der GetScriptReferences-Methode den Speicherort der Skriptbibliothek, die den Typ von Clientverhalten definiert. In diesem Beispiel ist dies eine URL zu der Skriptdatei namens FocusBehavior.js, die in diesem Lernprogramm später erstellt wird. Der Verweis erfolgt durch Erstellen eines neuen ScriptReference-Objekts und anschließendes Festlegen der Path-Eigenschaft auf die URL der Datei, die den Clientcode enthält.

Das folgende Beispiel zeigt die Implementierungen der GetScriptDescriptors-Methode und der GetScriptReferences-Methode.

Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
    Dim reference As ScriptReference = New ScriptReference()
    reference.Path = ResolveClientUrl("FocusBehavior.js")

    Return New ScriptReference() {reference}
End Function

Protected Overrides Function GetScriptDescriptors(ByVal targetControl As Control) As IEnumerable(Of ScriptDescriptor)
    Dim descriptor As ScriptBehaviorDescriptor = New ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID)
    descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
    descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

    Return New ScriptDescriptor() {descriptor}
End Function

protected override IEnumerable<ScriptReference> GetScriptReferences()
{
    ScriptReference reference = new ScriptReference();
    reference.Path = ResolveClientUrl("FocusBehavior.js");

    return new ScriptReference[] { reference };
}

protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
{
    ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID);
    descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
    descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

    return new ScriptDescriptor[] { descriptor };
}

Erstellen des Clientverhaltens

Im Extendersteuerelement gibt die GetScriptReferences-Methode eine JavaScript-Datei (FocusBehavior.js) an, die den Clientcode für den Verhaltenstyp enthält. In diesem Abschnitt wird der JavaScript-Code in dieser Datei beschrieben.

Der Clientverhaltenscode stimmt mit den in den ScriptDescriptor-Objekten angegebenen Membern überein, die von der GetScriptDescriptors-Methode zurückgegeben werden. Ein Clientverhalten kann auch Member besitzen, die zu keinen Membern im Serverextendersteuerelement gehören.

Das Extendersteuerelement in diesem Lernprogramm legt den Namen für das Clientverhalten auf Samples.FocusBehavior fest und definiert zwei Eigenschaften des Clientverhaltens (highlightCssClass und nohighlightCssClass).

Weitere Informationen zum Erstellen von Clientkomponenten und -verhalten finden Sie unter Erstellen einer Clientkomponentenklasse mit dem Prototypmodell.

Erstellen des Clientnamespace

Der Clientcode muss zuerst die registerNamespace-Methode der Type-Klasse aufrufen, um den Namespace (Samples) zu erstellen. Das folgende Beispiel zeigt, wie der Clientnamespace registriert wird.

// Register the namespace for the control.
Type.registerNamespace('Samples');

Definieren der Clientklasse

Die Samples.FocusBehavior-Klasse definiert die Samples.FocusBehavior-Clientklasse. Sie enthält zwei Eigenschaften zum Speichern der vom Webserversteuerelement bereitgestellten Eigenschaftenwerte.

Definieren des Klassenprototyps

Nachdem die Samples.FocusBehavior-Klasse definiert ist, definiert der Clientcode den Prototyp für die Klasse. Der Prototyp enthält get-Eigenschaftenaccessoren und set-Eigenschaftenaccessoren sowie Ereignishandler für das onfocus-Ereignis und das onblur-Ereignis des DOM-Elements. Außerdem enthält er eine initialize-Methode, die aufgerufen wird, wenn eine Instanz des Verhaltens erstellt wird, sowie eine dispose-Methode, die die Bereinigung ausführt, wenn das Verhalten von der Seite nicht mehr benötigt wird.

Definieren der Ereignishandler für das DOM-Element

Ereignishandler für eine Clientklasse werden als Methoden des Klassenprototyps definiert. Mithilfe der addHandlers-Methode (die in diesem Thema später zusammen mit der initialize-Methode diskutiert wird) werden die Handler mit Ereignisdelegaten und mit Ereignissen des Browser-DOM verknüpft.

Definieren der Eigenschaftenmethoden Get und Set

Jede im ScriptDescriptor-Objekt angegebene Eigenschaft der GetScriptDescriptors-Methode des Extendersteuerelements muss über zugehörige Clientaccessoren verfügen. Die Clienteigenschaftenaccessoren werden als get_<property name>-Methode und set_<property name>-Methode des Clientklassenprototyps definiert.

Implementieren der Methoden Initialize und Dispose

Die initialize-Methode wird beim Erstellen einer Instanz des Verhaltens aufgerufen. Mit dieser Methode können Sie Standardeigenschaftenwerte festlegen, Funktionsdelegaten erstellen und Delegaten als Ereignishandler hinzufügen.

Die initialize-Methode der Samples.FocusBehavior-Klasse führt Folgendes aus:

• Sie ruft die initialize-Methode der Sys.UI.Behavior-Basisklasse auf.

• Sie ruft die addHandlers-Methode auf, um Ereignisdelegaten als Handler für das onfocus-Ereignis und das onblur-Ereignis des zugehörigen DOM-Elements hinzuzufügen. Beachten Sie, dass der "on"-Teil des Ereignisnamens (z. B. onfocus) nicht angegeben wird.

Die dispose-Methode wird aufgerufen, wenn eine Instanz eines Verhaltens auf der Seite nicht mehr benötigt und daher entfernt wird. Verwenden Sie diese Methode, um für das Verhalten nicht mehr erforderliche Ressourcen (z. B. DOM-Ereignishandler) freizugeben.

Die dispose-Methode der Sample.FocusBehavior-Klasse führt Folgendes aus:

• Sie ruft die clearHandlers-Methode auf, um die Ereignisdelegaten als Handler für das onfocus-Ereignis und das onblur-Ereignis des zugehörigen DOM-Elements zu löschen.

• Sie ruft die dispose-Methode der Behavior-Basisklasse auf.

  Hinweis:
  Die dispose-Methode einer Clientklasse kann auch mehrere Male aufgerufen werden. Stellen Sie sicher, dass der Code, den Sie in der dispose-Methode eintragen, dieses berücksichtigt.

Registrieren des Verhaltens

Der letzte Schritt zum Erstellen des Clientverhaltens besteht darin, die Clientklasse durch Aufrufen der registerClass-Methode zu registrieren. Da es sich bei der Klasse um ein Clientverhalten handelt, enthält der Aufruf der registerClass-Methode den JavaScript-Klassennamen zum Registrieren. Außerdem gibt er Behavior als Basisklasse an.

Das unten stehende vollständige Beispiel enthält einen Aufruf an die notifyScriptLoaded-Methode der Sys.Application-Klasse. Dieser Aufruf ist erforderlich, um Microsoft AJAX Library zu benachrichtigen, dass die JavaScript-Datei geladen wurde.

Im folgenden Beispiel wird der vollständige JavaScript-Code für das Samples.FocusBehavior-Clientverhalten dargestellt. Für den Code in diesem Lernprogramm muss die JavaScript-Datei den Namen FocusBehavior.js erhalten und im Scripts-Verzeichnis gespeichert werden.

// Register the namespace for the control.
Type.registerNamespace('Samples');

//
// Define the behavior properties.
//
Samples.FocusBehavior = function(element) { 
    Samples.FocusBehavior.initializeBase(this, [element]);

    this._highlightCssClass = null;
    this._nohighlightCssClass = null;
}

//
// Create the prototype for the behavior.
//

Samples.FocusBehavior.prototype = {


    initialize : function() {
        Samples.FocusBehavior.callBaseMethod(this, 'initialize');

        $addHandlers(this.get_element(), 
                     { 'focus' : this._onFocus,
                       'blur' : this._onBlur },
                     this);

        this.get_element().className = this._nohighlightCssClass;
    },

    dispose : function() {
        $clearHandlers(this.get_element());

        Samples.FocusBehavior.callBaseMethod(this, 'dispose');
    },

    //
    // Event delegates
    //

    _onFocus : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this._highlightCssClass;          
        }
    },

    _onBlur : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this._nohighlightCssClass;          
        }
    },


    //
    // Behavior properties
    //

    get_highlightCssClass : function() {
        return this._highlightCssClass;
    },

    set_highlightCssClass : function(value) {
        if (this._highlightCssClass !== value) {
            this._highlightCssClass = value;
            this.raisePropertyChanged('highlightCssClass');
        }
    },

    get_nohighlightCssClass : function() {
        return this._nohighlightCssClass;
    },

    set_nohighlightCssClass : function(value) {
        if (this._nohighlightCssClass !== value) {
            this._nohighlightCssClass = value;
            this.raisePropertyChanged('nohighlightCssClass');
        }
    }
}

// Optional descriptor for JSON serialization.
Samples.FocusBehavior.descriptor = {
    properties: [   {name: 'highlightCssClass', type: String},
                    {name: 'nohighlightCssClass', type: String} ]
}

// Register the class as a type that inherits from Sys.UI.Control.
Samples.FocusBehavior.registerClass('Samples.FocusBehavior', Sys.UI.Behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Im folgenden Beispiel wird der vollständige Code für die ASP.NET-Seite dargestellt.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>ASP.NET AJAX Behavior Sample</title>
    <style type="text/css">
    .LowLight
    {
        background-color:#EEEEEE;
    }

    .HighLight
    {
        background-color:#FFFFF0;
    }
    .LowLightButton
    {
        font-weight:normal;
        width:100px;
    }

    .HighLightButton
    {
        font-weight:bold;
        width:100px;
    }
    </style>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <table border="0" cellpadding="2">
              <tr>
                <td><asp:Label  ID="Label1" AssociatedControlID="TextBox1">Name</asp:Label></td>
                <td><asp:TextBox ID="TextBox1"  /></td>
              </tr>
              <tr>
                <td><asp:Label  ID="Label2" AssociatedControlID="TextBox2">Phone</asp:Label></td>
                <td><asp:TextBox ID="TextBox2"  /></td>
              </tr>
              <tr>
                <td><asp:Label  ID="Label3" AssociatedControlID="TextBox3">E-mail</asp:Label></td>
                <td><asp:TextBox ID="TextBox3"  /></td>
              </tr>
            </table>

            <asp:Button  ID="Button1" Text="Submit Form" />

            <sample:FocusExtender ID="FocusExtender1" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox1" />
            <sample:FocusExtender ID="FocusExtender2" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox2" />
            <sample:FocusExtender ID="FocusExtender3" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox3" />
            <sample:FocusExtender ID="FocusExtender4" 
                                  NoHighlightCssClass="LowLightButton"
                                  HighlightCssClass="HighLightButton"
                                  TargetControlID="Button1" />
        </div>

    </form>
</body>
</html>

Das folgende Beispiel enthält den vollständigen Code für die FocusExtender-Klasse. Dieser Code wird normalerweise im Verzeichnis App_Code abgelegt.

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.Collections.Generic

Namespace Samples.VB

    <TargetControlType(GetType(Control))> _
    Public Class FocusExtender
        Inherits ExtenderControl

        Private _highlightCssClass As String
        Private _noHighlightCssClass As String

        Public Property HighlightCssClass() As String
            Get
                Return _highlightCssClass
            End Get
            Set(ByVal value As String)
                _highlightCssClass = value
            End Set
        End Property

        Public Property NoHighlightCssClass() As String
            Get
                Return _noHighlightCssClass
            End Get
            Set(ByVal value As String)
                _noHighlightCssClass = value
            End Set
        End Property

        Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
            Dim reference As ScriptReference = New ScriptReference()
            reference.Path = ResolveClientUrl("FocusBehavior.js")

            Return New ScriptReference() {reference}
        End Function

        Protected Overrides Function GetScriptDescriptors(ByVal targetControl As Control) As IEnumerable(Of ScriptDescriptor)
            Dim descriptor As ScriptBehaviorDescriptor = New ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID)
            descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
            descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

            Return New ScriptDescriptor() {descriptor}
        End Function
    End Class
End Namespace

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

namespace Samples.CS
{
    [TargetControlType(typeof(Control))]
    public class FocusExtender : ExtenderControl
    {
        private string _highlightCssClass;
        private string _noHighlightCssClass;

        public string HighlightCssClass
        {
            get { return _highlightCssClass; }
            set { _highlightCssClass = value; }
        }

        public string NoHighlightCssClass
        {
            get { return _noHighlightCssClass; }
            set { _noHighlightCssClass = value; }
        }

        protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Path = ResolveClientUrl("FocusBehavior.js");

            return new ScriptReference[] { reference };
        }

        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
        {
            ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID);
            descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
            descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

            return new ScriptDescriptor[] { descriptor };
        }
    }
}

Dynamisches Kompilieren des Extendersteuerelements zum Testen

Jedes Webserversteuerelement (wie das Extendersteuerelement in diesem Lernprogramm) muss kompiliert werden, bevor darauf auf einer Webseite verwiesen werden kann. Mit dem dynamischen Kompilierungsfeature von ASP.NET 2.0 können Sie Webserversteuerelemente testen, ohne die Steuerelemente manuell in eine Assembly kompilieren zu müssen. Damit sparen Sie Zeit, wenn Sie Code für Webserversteuerelemente schreiben und debuggen. Die folgende Anleitung zeigt Ihnen, wie Sie Ihr Extendersteuerelement mithilfe des Ordners App_Code dynamisch kompilieren.

So legen Sie das Extendersteuerelement zum dynamischen Kompilieren in den Ordner App_Code

1. Erstellen Sie unterhalb des Stammordners der Website einen Ordner mit dem Namen App_Code.

2. Verschieben Sie die CS- oder VB-Quelldateien für das Steuerelement und alle zugehörigen Klassen in den Ordner App_Code.

   – oder –

   Wenn Sie dem Bin-Ordner bereits eine Assembly für das Steuerelement hinzugefügt haben, löschen Sie diese. Bearbeiten Sie die Quelldateien von nun an im Ordner App_Code. Der Steuerelement-Quellcode wird bei jedem Ausführen des Projekts kompiliert.

   Hinweis:
   Sie können entweder ein Steuerelement in eine Assembly kompilieren und die Assembly im Bin-Ordner ablegen oder die Quelldatei des Steuerelements im Ordner App_Code speichern, aber nicht beides. Wenn Sie das Steuerelement in beiden Ordnern speichern, kann der Seitenparser Verweise aus einer Webseite auf das Steuerelement nicht auflösen und löst einen Fehler aus.

3. Führen Sie die Webseite aus. Das Extendersteuerelement wird dynamisch kompiliert.

Testen des dynamisch kompilierten Extendersteuerelements in einer Webseite

Die folgende Vorgehensweise beschreibt, wie das Extendersteuerelement in einer ASP.NET AJAX-fähigen Webseite getestet wird. Der Code für das Webserversteuerelement wird dynamisch aus dem Ordner App_Code kompiliert.

So verwenden Sie das Verhalten in einer ASP.NET-Seite

1. Erstellen Sie eine neue ASP.NET-Webseite.

2. Wenn die Seite nicht bereits über ein ScriptManager-Steuerelement verfügt, fügen Sie eines hinzu.

3. Erstellen Sie CSS-Stilregeln für hervorgehobene und für nicht hervorgehobene Textfelder.

   Auf welche Weise das Steuerelement hervorgehoben wird, bleibt Ihnen überlassen. Sie können zum Beispiel die Hintergrundfarbe des Steuerelements ändern, einen Rahmen hinzufügen oder die Schriftart von Text ändern.

4. Fügen Sie der Seite eine @ Register-Direktive hinzu, und geben Sie dann den Namespace und das TagPrefix-Attribut für das Extendersteuerelement an.

   Hinweis:
   In diesem Beispiel befindet sich der Code für das Serversteuerelement im Ordner App_Code, sodass er dynamisch kompiliert werden kann. Daher ist kein Assemblyattribut angegeben.

5. Fügen Sie der Seite ein TextBox-Steuerelement und ein Button-Steuerelement hinzu, und legen Sie deren Id-Eigenschaften fest.

   Das Markup für die Steuerelemente muss enthalten.

6. Fügen Sie der Seite eine Instanz des FocusExtender-Steuerelements hinzu.

7. Legen Sie für die TargetControlID-Eigenschaft des FocusExtender-Steuerelements die ID des Button-Steuerelements fest, das Sie zuvor hinzugefügt haben.

8. Legen Sie für die HighlightCssClass-Eigenschaft den CSS-Stil zum Hervorheben und für die NoHighlightCssClass-Eigenschaft den CSS-Stil zum Nichthervorheben fest.

9. Führen Sie die Seite aus, und wählen Sie jedes Steuerelement aus.

   Achten Sie darauf, dass das Button-Steuerelement hervorgehoben wird, wenn Sie es auswählen.

10. Ändern Sie die TargetControlID-Eigenschaft des FocusExtender-Steuerelements auf die ID des TextBox-Steuerelements, und führen Sie die Seite anschließend erneut aus.

    Nun wird das TextBox-Steuerelement hervorgehoben, wenn es den Fokus besitzt. Das im FocusExtender-Steuerelement gekapselte Verhalten kann auf unterschiedliche ASP.NET-Serversteuerelemente auf der Seite angewendet werden. Wenn das Verhalten auf mehrere Steuerelemente angewendet werden soll, können Sie der Seite mehrere Instanzen des Extendersteuerelements hinzufügen und jeder Instanz ein anderes ASP.NET-Serversteuerelement zuordnen.

Kompilieren des Extendersteuerelements in eine Assembly

Wenn Sie die JavaScript-Komponente und den Erweiterungscode des Webserversteuerelements in eine Assembly einbetten, lässt sich Ihr benutzerdefiniertes Extendersteuerelement leichter bereitstellen. Eine Assembly vereinfacht auch das Verwalten der Versionskontrolle für das Steuerelement. Außerdem können Steuerelemente erst dann der Toolbox eines Designers hinzugefügt werden, wenn sie in eine Assembly kompiliert sind.

In der folgenden Anleitung wird beschrieben, wie Sie mit Visual Studio eine neue Codebibliothek in Ihrem vorhandenen Lernprogrammprojekt erstellen. Sie werden eine Kopie Ihrer Codedateien in eine neue Codebibliothek in dem Projekt für dieses Lernprogramm verschieben. Beim Kompilieren des Extendersteuerelements in eine Codebibliothek wird eine Assembly erstellt, die Sie bereitstellen können.

Hinweis:
Um diese Schritte ausführen zu können, müssen Sie Microsoft Visual Studio 2005 oder Visual Studio 2008 verwenden. Sie können Microsoft Visual Web Developer Express Edition nicht verwenden, da mit Visual Web Developer Express Edition nicht zwei Projekte in derselben Projektmappe erstellt werden können.

So fügen Sie einem vorhandenen Projekt eine neue Codebibliothek hinzu

1. Klicken Sie in Visual Studio im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

   Das Dialogfeld Neues Projekt wird angezeigt.

2. Wählen Sie unter Projekttypen entweder Visual C# oder Visual Basic aus.

3. Wählen Sie unter Vorlagen die Vorlage Klassenbibliothek aus, und geben Sie dem Projekt den Namen Samples.

4. Wählen Sie in der Liste Projektmappe den Eintrag Zu Projektmappe hinzufügen aus, und klicken Sie dann auf OK.

   Die Klassenbibliothek Samples wird der vorhandenen Projektmappe hinzugefügt.

So verschieben Sie das benutzerdefinierte Serverextendersteuerelement in eine Codebibliothek

1. Fügen Sie dem Klassenbibliotheksprojekt Samples die folgenden Verweise hinzu, die für das benutzerdefinierte Serverextendersteuerelement erforderlich sind:

   • System.Drawing

   • System.Web

   • System.Web.Extensions

2. Kopieren Sie im Projektmappen-Explorer die Datei FocusExtender.cs oder FocusExtender.vb sowie die Datei FocusBehavior.js aus dem ursprünglichen Lernprogrammprojekt in den Stamm des Klassenbibliotheksprojekts Samples.

3. Legen Sie im Fenster Eigenschaften der Datei FocusBehavior.js für Buildvorgang die Option Eingebettete Ressource fest.

   

4. Fügen Sie der AssemblyInfo-Datei die folgende Eigenschaft hinzu.

   <Assembly: System.Web.UI.WebResource("Samples.FocusBehavior.js", "text/javascript")> 
   

   [assembly: System.Web.UI.WebResource("Samples.FocusBehavior.js", "text/javascript")]
   

   Hinweis:
   Die Datei AssemblyInfo.vb befindet sich im Knoten Eigenes Projekt des Projektmappen-Explorers. Wenn Ihnen im Knoten Eigenes Projekt keine Dateien angezeigt werden, klicken Sie im Menü Projekt auf Alle Dateien anzeigen. Die Datei AssemblyInfo.cs befindet sich im Knoten Eigenschaften des Projektmappen-Explorers.

   Die WebResource-Definition für JavaScript-Dateien muss der Namenskonvention [Assemblynamespace] [JavaScript-Dateiname].js folgen.

   Hinweis:
   Standardmäßig legt Visual Studio für den Assemblynamespace den Assemblynamen fest. Sie können den Assemblynamespace in den Eigenschaften der Assembly bearbeiten.

5. Ändern Sie in der FocusExtender-Klassendatei das ScriptReference-Objekt in der GetScriptReferences-Methode so, dass es auf das in der Samples-Assembly eingebettete Clientsteuerelementskript verweist. Nehmen Sie dazu die folgenden Änderungen vor:

   • Ersetzen Sie die Path-Eigenschaft durch eine auf Samples festgelegte Assembly-Eigenschaft.

   • Fügen Sie eine Name-Eigenschaft hinzu, und legen Sie als deren Wert Samples.FocusBehavior.js fest.

   Das folgende Beispiel zeigt das Ergebnis dieser Änderungen.

           Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
               Dim reference As ScriptReference = New ScriptReference()
               reference.Assembly = "Samples"
               reference.Name = "Samples.FocusBehavior.js"
   
               Return New ScriptReference() {reference}
           End Function
   

        protected override IEnumerable<ScriptReference> GetScriptReferences()
           {
               ScriptReference reference = new ScriptReference();
               reference.Assembly = "Samples";
               reference.Name = "Samples.FocusBehavior.js";
   
               return new ScriptReference[] { reference };
           }
   

6. Erstellen Sie das Projekt.

   Nach Abschluss der Kompilierung verfügen Sie über eine Assembly mit dem Namen Samples.dll. Die JavaScript-Codedatei (FocusBehavior.js) ist in dieser Assembly als Ressource eingebettet.

   Hinweis:
   Vergessen Sie nicht, das Klassenbibliotheksprojekt jedes Mal neu zu erstellen, wenn Sie neue Quelldateien hinzufügen oder vorhandene Dateien ändern.

Verwenden des kompilierten Extendersteuerelements aus einer Assembly in einer Webseite

Nun werden Sie in einer ASP.NET AJAX-fähigen Webseite auf das kompilierte benutzerdefinierte Extendersteuerelement verweisen.

So verweisen Sie in einer ASP.NET AJAX-fähigen Webseite auf das kompilierte benutzerdefinierte Extendersteuerelement

1. Erstellen Sie ein neues ASP.NET AJAX-Projekt.

2. Erstellen Sie im Stammverzeichnis der Website ein Verzeichnis mit dem Namen Bin.

3. Kopieren Sie die Assembly Samples.dll aus dem Ordner Bin\Debug oder Bin\Release des Klassenprojekts Samples in den neuen Ordner Bin.

4. Fügen Sie eine neue ASP.NET-Webseite mit dem Namen TestFocusExtender.aspx hinzu, und fügen Sie der neuen Seite dann das folgende Markup hinzu.

   <%@ Register Assembly="Samples" Namespace="Samples.VB" TagPrefix="sample" %>
   

   <%@ Register Assembly="Samples" Namespace="Samples.CS" TagPrefix="sample" %>
   

   Da das Serversteuerelement in einer Assembly kompiliert ist, verfügt die @ Register-Direktive zusätzlich zum Namespace-Attribut und zum TagPrefix-Attribut über ein Assembly-Attribut, das auf die Samples-Assembly verweist.

5. Führen Sie die Seite aus, und wählen Sie jedes Steuerelement aus.

   Wenn Sie das FocusBehavior-Steuerelement auswählen, wird es hervorgehoben.

Die Webseite, die das kompilierte benutzerdefinierte Extendersteuerelement verwendet, enthält das Assembly-Attribut in der @ Register-Direktive. Ansonsten ist es dieselbe Webseite, die Sie für das Steuerelement im Ordner App_Code verwendet haben.

Siehe auch

Konzepte

Hinzufügen von Clientfunktionen zu einem Webserversteuerelement

Verwenden des ASP.NET UpdatePanel-Steuerelements mit datengebundenen Steuerelementen

Referenz

Sys.UI.Behavior Class CTP

ExtenderControl

ScriptManager