Exemplarische Vorgehensweise: Erstellen von wiederverwendbaren Elementen mit ASP.NET-Benutzersteuerelementen

  • Artikel

Aktualisiert: November 2007

Mit ASP.NET-Benutzersteuerelementen können Sie die Funktionen mehrerer Serversteuerelemente in einer Einheit kapseln. Benutzersteuerelemente bestehen aus einem oder mehreren ASP.NET-Serversteuerelementen – Button-Steuerelementen, TextBox-Steuerelementen usw. – neben dem Code, der für die gewünschte Funktion der Steuerelemente erforderlich ist. Das Benutzersteuerelement kann auch benutzerdefinierte Eigenschaften oder Methoden enthalten, die die Funktionen des Benutzersteuerelements für einen Container bereitstellen, der i. d. R. einer ASP.NET-Seite entspricht.

In dieser exemplarischen Vorgehensweise erstellen Sie ein ASP.NET-Benutzersteuerelement, das als Auswahlsteuerelement fungiert. Das Auswahlsteuerelement weist zwei Listen auf. Dabei enthält eine Liste (die Quelle) mehrere Auswahlmöglichkeiten. Die Benutzer können Elemente in der Liste SourceList auswählen und die Elemente daraufhin der Liste TargetList hinzufügen.

Diese exemplarische Vorgehensweise besteht aus drei Teilen mit dem folgenden Inhalt:

  • Im ersten Teil erstellen Sie das grundlegende Benutzersteuerelement und fügen Steuerelemente sowie Code hinzu.

  • Im zweiten Teil erstellen Sie eine neue ASP.NET-Seite (die Hostseite) und fügen das Benutzersteuerelement daraufhin der ASP.NET-Seite hinzu.

  • Im dritten Teil fügen Sie dem Benutzersteuerelement benutzerdefinierte Eigenschaften und Methoden hinzu, sodass Sie mit dem Steuerelement der Hostseite interagieren können.

In dieser exemplarischen Vorgehensweise werden u. a. die folgenden Aufgaben veranschaulicht:

  • Erstellen eines Benutzersteuerelements und Hinzufügen von ASP.NET-Serversteuerelementen zum Benutzersteuerelement.

  • Erstellen von Eigenschaften und einer Methode im Benutzersteuerelement

  • Hinzufügen eines Benutzersteuerelements zu einer Hostseite

  • Hinzufügen von Code zur Hostseite zum Behandeln des Benutzersteuerelements

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

  • Das Webentwicklungstool Microsoft Visual Web Developer

  • Microsoft .NET Framework

In dieser exemplarischen Vorgehensweise wird davon ausgegangen, dass Sie über allgemeine Kenntnisse in Visual Web Developer verfügen. Eine Einführung finden Sie unter Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer.

Erstellen der Website

Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (z. B. in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese Website verwenden und zum nächsten Abschnitt übergehen. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

  1. Öffnen Sie Visual Web Developer.

  2. Zeigen Sie im Menü Datei auf Neu, und klicken Sie anschließend auf Website.

    Das Dialogfeld Neue Website wird angezeigt.

  3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

  4. Geben Sie in dem sich am weitesten rechts befindlichen Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

    Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.

  5. Klicken Sie in der Liste Sprache auf die Programmiersprache, in der Sie arbeiten möchten.

  6. Klicken Sie auf OK.

    Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Erstellen des Benutzersteuerelements

Das Erstellen eines Benutzersteuerelements ist mit dem Erstellen einer ASP.NET-Webseite vergleichbar. Tatsächlich stellt ein Benutzersteuerelement eine Teilmenge einer ASP.NET-Seite dar, und es kann die meisten Elementtypen enthalten, die Sie in eine ASP.NET-Seite aufnehmen.

So erstellen Sie ein Benutzersteuerelement

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie anschließend auf Neues Element hinzufügen.

  2. Klicken Sie im Dialogfeld Neues Element hinzufügen <Path> unter Von Visual Studio installierte Vorlagen auf den Eintrag Web-Benutzersteuerelement.

  3. Geben Sie im Feld Name die Zeichenfolge ListPicker ein.

    Die Benutzersteuerelementdatei weist die Erweiterung .ascx auf, die ListPicker automatisch hinzugefügt wird.

  4. Wählen Sie in der Liste Sprache die Programmiersprache aus, in der Sie arbeiten möchten.

  5. Klicken Sie auf Hinzufügen.

    Das neue Steuerelement wird erstellt und im Designer geöffnet. Das Markup für das Steuerelement ist mit dem für eine Seite vergleichbar. Dabei gilt eine wichtige Ausnahme: Am Anfang der Seite befindet sich keine @ Page-Direktive. Stattdessen ist eine @ Control-Direktive vorhanden, mit der die Datei für ASP.NET als Benutzersteuerelement identifiziert wird.

Hinzufügen von Serversteuerelementen zum Benutzersteuerelement

In diesem Teil der exemplarischen Vorgehensweise fügen Sie die Steuerelemente hinzu, aus denen die Benutzeroberfläche für das Benutzersteuerelement besteht.

So fügen Sie Serversteuerelemente hinzu

  1. Wechseln Sie in die Entwurfsansicht. (Wenn Sie mit einer Code-Behind-Seite arbeiten, wechseln Sie zum ListPicker.ascx-Steuerelement und danach in die Entwurfsansicht.)

  2. Klicken Sie im Menü Tabelle auf Tabelle einfügen.

  3. Erstellen Sie mithilfe des Dialogfelds Tabelle einfügen eine Tabelle mit einer Zeile und drei Spalten, und klicken Sie dann auf OK.

    Sie erstellen die Tabelle, die die Steuerelemente enthalten soll, d. h. eine Layouttabelle.

  4. Geben Sie in der linken Spalte der Tabelle Available ein, und drücken Sie dann die EINGABETASTE, um eine neue Zeile zu erstellen.

  5. Geben Sie in der rechten Spalte Selected ein, und drücken Sie dann EINGABETASTE, um eine neue Zeile zu erstellen.

  6. Ziehen Sie in der Toolbox aus der Gruppe Standard die folgenden Steuerelemente in die Tabelle, und legen Sie ihre Eigenschaften wie folgt fest:

    Steuerelement

    Eigenschaften

    Ziehen Sie ein ListBox-Objekt in die linke Spalte, und platzieren Sie es unter Available.

    Höhe: 200px

    ID: SourceList

    Breite: 200px

    Ziehen Sie eine Schaltfläche in die mittlere Spalte.

    ID: AddAll

    Text: >>

    Ziehen Sie eine Schaltfläche in die mittlere Spalte.

    ID: AddOne

    Text: (LEERTASTE)>(LEERTASTE)

    Ziehen Sie eine Schaltfläche in die mittlere Spalte.

    ID: Remove

    Text: (LEERTASTE)X(LEERTASTE)

    Ziehen Sie ein ListBox-Objekt in die rechte Spalte, und platzieren Sie es unter Selected.

    Höhe: 200px

    ID: TargetList

    Breite: 200px

    ImageButton-Steuerelemente können statt Button-Steuerelementen verwendet werden, sodass ein Bild angezeigt wird, das auf Mausklicks reagiert. Für diese exemplarische Vorgehensweise genügt es jedoch, Text zu verwenden, der den Typ Grafik emuliert, der häufig zum Angeben von Alle hinzufügen, Hinzufügen und Entfernen verwendet wird. Dies wird jeweils durch zwei spitze Klammern nach rechts (>>), eine spitze Klammer nach rechts (>) und durch das X dargestellt.

  7. Sie können die Breite und Höhe der Tabellenspalten Ihren Vorstellungen entsprechend anpassen.

  8. Klicken Sie auf die Liste SourceList, und klicken Sie dann unter Eigenschaften für die Items-Eigenschaft auf die Schaltfläche mit dem Auslassungszeichen (…).

    Das Dialogfeld ListItem-Auflistungs-Editor wird angezeigt.

  9. Klicken Sie dreimal auf Hinzufügen, um drei Elemente hinzuzufügen.

  10. Legen Sie unter ListItem-Eigenschaften für das erste, zweite und dritte Element Text jeweils auf A, B und C fest.

    Sie erstellen vorerst Testdaten. Zu einem späteren Zeitpunkt dieser exemplarischen Vorgehensweise (unter "Hinzufügen von benutzerdefinierten Eigenschaften und Methoden zum Benutzersteuerelement") entfernen Sie die Testdaten, und Sie fügen Code hinzu, mit dem die Liste SourceList dynamisch geladen wird.

Hinzufügen von Code zum Behandeln der Benutzerauswahl

Benutzer wählen Elemente mit den Schaltflächen aus, die sich in der mittleren Spalte der Tabelle befinden. Deshalb befindet sich der Code für das Steuerelement größtenteils in Handlern für die Click-Ereignisse.

So fügen Sie Code zum Behandeln der Benutzerauswahl hinzu

  1. Doppelklicken Sie in der Entwurfsansicht auf die Schaltfläche >> (AddAll), um einen Ereignishandler für das Click-Ereignis zu erstellen, und fügen Sie daraufhin den folgenden hervorgehobenen Code hinzu.

    Protected Sub AddAll_Click(ByVal sender As Object, _
        ByVal e As EventArgs) Handles AddAll.Click
   TargetList.SelectedIndex = -1   Dim li As ListItem   For Each li In SourceList.Items      AddItem(li)   Next
End Sub

    protected void AddAll_Click(object sender, EventArgs e)
{
    TargetList.SelectedIndex = -1;    foreach(ListItem li in SourceList.Items)    {        AddItem(li);    }
}

    Der Code durchläuft alle Listenelemente in der Liste SourceList. Für jedes Element wird die AddItem-Methode aufgerufen und das aktuelle Element an sie übergeben. In dieser Vorgehensweise schreiben Sie später den Code für die AddItem-Methode.

  2. Wechseln Sie zur Entwurfsansicht, doppelklicken Sie auf die Schaltfläche > (AddOne), um einen Ereignishandler für das Click-Ereignis zu erstellen, und fügen Sie daraufhin den folgenden hervorgehobenen Code hinzu:

    Protected Sub AddOne_Click(ByVal sender As Object, _
       ByVal e As EventArgs) Handles AddOne.Click
   If SourceList.SelectedIndex >= 0 Then      AddItem(SourceList.SelectedItem)   End If
End Sub

    protected void AddOne_Click(object sender, EventArgs e)
{
    if(SourceList.SelectedIndex >= 0)    {        AddItem(SourceList.SelectedItem);    }
}

    Mit diesem Code wird zunächst überprüft, ob eine Auswahl in der Liste SourceList vorhanden ist. Der Code ruft ggf. die AddItem-Methode auf, die Sie an späterer Stelle in dieser Vorgehensweise schreiben, und übergibt ihr das Element, das gegenwärtig in der Liste SourceList ausgewählt ist.

  3. Wechseln Sie zur Entwurfsansicht, doppelklicken Sie auf die Schaltfläche X (Remove), um einen Ereignishandler für das Click-Ereignis zu erstellen, und fügen Sie daraufhin den folgenden hervorgehobenen Code hinzu:

    Protected Sub Remove_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles Remove.Click
   If TargetList.SelectedIndex >= 0 Then     TargetList.Items.RemoveAt(TargetList.SelectedIndex)     TargetList.SelectedIndex = -1   End If
End Sub

    protected void Remove_Click(object sender, EventArgs e)
{
    if (TargetList.SelectedIndex >= 0)    {        TargetList.Items.RemoveAt(TargetList.SelectedIndex);        TargetList.SelectedIndex = -1;      }
}

    Mit dem Code wird zunächst überprüft, ob die Liste TargetList eine Auswahl enthält. Wenn eine Auswahl vorhanden ist, entfernt der Code das ausgewählte Element aus der Liste und der Auswahl.

  4. Fügen Sie die folgende AddItem-Methode hinzu:

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.SelectedIndex = -1
   TargetList.Items.Add(li)
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;
    TargetList.Items.Add(li);
}

    In diesem Code wird der Liste TargetList bedingungslos ein Element hinzugefügt. In dieser exemplarischen Vorgehensweise verbessern Sie später (unter "Hinzufügen von benutzerdefinierten Eigenschaften und Methoden zum Benutzersteuerelement") diesen Code, indem Sie die Option hinzufügen, mit der bestimmt werden kann, ob Duplikate vorhanden sind.

Sie können ein Benutzersteuerelement nicht direkt testen, da es auf einer Seite gehostet werden muss. Im nächsten Abschnitt erstellen Sie eine ASP.NET-Webseite, auf der Sie das Steuerelement verwenden können.

Verwenden des Benutzersteuerelements

Wie jedes Steuerelement muss ein Benutzersteuerelement auf einer Seite gehostet werden. In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine Hostseite für das Steuerelement, und anschließend fügen Sie der Seite ein Benutzersteuerelement hinzu.

So erstellen Sie eine Hostseite

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie anschließend auf Neues Element hinzufügen.

  2. Klicken Sie unter Von Visual Studio installierte Vorlagen auf Web Form.

  3. Geben Sie im Feld Name die Zeichenfolge HostUserControl ein.

  4. Wählen Sie in der Liste Sprache die Sprache aus, in der Sie arbeiten möchten, und klicken Sie dann auf Hinzufügen.

    Die neue Seite wird im Designer angezeigt.

So fügen Sie der Seite das Benutzersteuerelement hinzu

  1. Wechseln Sie in die Entwurfsansicht.

  2. Ziehen Sie die Benutzersteuerelementdatei (ListPicker.ascx) aus dem Projektmappen-Explorer auf die Seite.

    Hinweis:

    Stellen Sie sicher, dass Sie sich in der Entwurfsansicht befinden, wenn Sie ListPicker.ascx auf die Seite ziehen.

    Das Steuerelement wird im Designer angezeigt.

  3. Wechseln Sie zur Quellansicht.

    Durch das Platzieren des Benutzersteuerelements auf der Seite werden zwei neue Elemente auf der Seite erstellt:

    • Auf der Seite befindet sich oben eine neue @ Register-Direktive, und sie sieht in etwa folgendermaßen aus:

      <%@ Register Src="ListPicker.ascx" TagName="ListPicker"
   TagPrefix="uc1" %>

      Die @ Register-Direktive ist erforderlich, da das Benutzersteuerelement eine externe Komponente darstellt. Die Werte in der Direktive stellen Informationen bereit, die für ASP.NET erforderlich sind, damit das Steuerelement beim Kompilieren und Ausführen der Seite gefunden wird. Das TagPrefix-Attribut und das TagName-Attribut geben gemeinsam an, wie das Benutzersteuerelement auf der Seite deklariert wird. Mit dem Src-Attribut wird die Datei und ggf. der Pfad zum Speicherort der Quelldatei angegeben.

    • Das zweite neue Element stellt das Element für das Benutzersteuerelement dar, und es sieht in etwa folgendermaßen aus:

      <uc1:ListPicker id="ListPicker1" Runat="server" />

      Das Element für ein Benutzersteuerelement ähnelt dem Element für ein gewöhnliches ASP.NET-Serversteuerelement. Der Unterschied besteht darin, dass das Benutzersteuerelement ein anderes Tagpräfix (uc1) und einen eindeutigen Tagnamen (ListPicker) aufweist. Obwohl die Werte automatisch durch die @ Register-Direktive festgelegt wurden, als das Benutzersteuerelement auf der Seite eingefügt wurde, können Sie für das Benutzersteuerelement ein beliebiges Tagpräfix und einen beliebigen Tagnamen verwenden, sofern die Werte auf der Seite noch nicht verwendet werden.

Testen des Benutzersteuerelements

Nun können Sie die vorläufige Version des Benutzersteuerelements testen.

So testen Sie das Benutzersteuerelement

  1. Drücken Sie STRG+F5, um die Seite auszuführen.

    Die Seite wird im Browser angezeigt, und es werden die beiden Listen und die drei Schaltflächen angezeigt, aus denen das Benutzersteuerelement besteht.

  2. Klicken Sie auf die Schaltfläche >> (AddAll).

    Alle Werte aus der Liste SourceList werden in die Liste TargetList kopiert.

  3. Klicken Sie nacheinander auf die einzelnen Elemente in der Liste TargetList, und klicken Sie dann jeweils auf die Schaltfläche X (Entfernen), bis Sie alle Elemente entfernt haben.

  4. Wählen Sie in der Liste SourceList einen einzelnen Wert aus, und klicken Sie dann auf die Schaltfläche > (AddOne).

    Der Wert wird in die Liste TargetList kopiert.

  5. Sie können das Steuerelement solange testen, bis Sie sicher sind, dass es wie vorgesehen funktioniert.

  6. Wenn Sie damit fertig sind, schließen Sie den Browser.

Hinzufügen von benutzerdefinierten Eigenschaften und Methoden zum Benutzersteuerelement

Das Benutzersteuerelement funktioniert nun. Als universell einsetzbares Steuerelement kann es jedoch noch nicht verwendet werden. Mit einer geeigneteren Version des Benutzersteuerelements können Sie folgende Aktionen ausführen:

  • Angeben der Liste der Elemente, die in der Liste SourceList dynamisch angezeigt werden sollen.

  • Abrufen der Liste der Elemente, die der Benutzer in der Liste TargetList ausgewählt hat.

  • Angeben, ob doppelte Werte in der Liste TargetList optional zugelassen werden sollen.

  • Bereitstellen einer Möglichkeit, alle Elemente in der Liste TargetList schnell zu löschen.

Zum Ausführen dieser Aufgaben muss die Hostseite mit dem Benutzersteuerelement kommunizieren können – sowohl zum gemeinsamen Nutzen von Werten (Festlegen und Lesen von Eigenschaften) als auch zum Ausgeben von Befehlen (Aufrufen von Methoden). In diesem Teil der exemplarischen Vorgehensweise ändern Sie das Benutzersteuerelement und fügen ihm einige Member (Eigenschaften und Methoden) hinzu.

Sie fügen dem Benutzersteuerelement zwei Eigenschaften hinzu. Die erste Eigenschaft ruft die Liste von Elementen ab, die in der Liste TargetList enthalten sind. Mit der zweiten Eigenschaft können Sie angeben, ob die Liste TargetList doppelte Werte akzeptiert. In diesem Abschnitt fügen Sie später eine Methode hinzu, mit der Sie die Liste SourceList auffüllen können.

So fügen Sie Code zum Definieren benutzerdefinierter Eigenschaften hinzu

  1. Öffnen Sie für das ListPicker-Steuerelement die Codedatei, oder wechseln Sie in diese Datei.

  2. Erstellen Sie mit dem folgenden Code die SelectedItems-Eigenschaft:

    Public ReadOnly Property SelectedItems() As ListItemCollection
   Get
      Return TargetList.Items
   End Get
End Property

    public ListItemCollection SelectedItems
{
   get { return TargetList.Items ; }
}

    Die SelectedItems-Eigenschaft ruft die Werte aus der Liste TargetList ab. Diese kann schreibgeschützt sein, weil Sie die Werte in der Liste TargetList nie programmgesteuert festlegen müssen.

  3. Erstellen Sie mit dem folgenden Code die AllowDuplicates-Eigenschaft:

    Public Property AllowDuplicates() As Boolean
   Get
      Return CType(ViewState("allowDuplicates"), Boolean)
   End Get
   Set(ByVal value As Boolean)
      ViewState("allowDuplicates") = value
   End Set
End Property

    public Boolean AllowDuplicates
{
    get
    {
        return (Boolean)ViewState["allowDuplicates"];
    }
    set
    {
        ViewState["allowDuplicates"] = value;
    }
}

    Die AllowDuplicates-Eigenschaft ist eine Eigenschaft mit Lese-/Schreibzugriff. Der Wert der AllowDuplicates-Eigenschaft muss explizit im Ansichtszustand gespeichert werden, sodass er zwischen Schleifen beibehalten wird. (Die SelectedItems-Eigenschaft muss nicht explizit im Ansichtszustand gespeichert werden, da die Liste TargetList die Werte im Ansichtszustand speichert.)

Sie haben nun die Eigenschaften definiert. Dennoch müssen Sie den vorhandenen Code im Benutzersteuerelement ändern, um die AllowDuplicates-Eigenschafteneinstellung zu nutzen.

So ändern Sie vorhandenen Code zum Verwenden der AllowDuplicates-Eigenschaft

  • Suchen Sie die AddItem-Methode, die Sie unter "Hinzufügen von Code zum Behandeln der Benutzerauswahl" an anderer Stelle dieser exemplarischen Vorgehensweise geschrieben haben, und ersetzen Sie den Inhalt durch den folgenden hervorgehobenen Code:

    Protected Sub AddItem(ByVal li As ListItem)
   TargetList.Selectedindex = -1   If Me.AllowDuplicates = True Then      TargetList.Items.Add(li)   Else      If TargetList.Items.FindByText(li.Text) Is Nothing Then         TargetList.Items.Add(li)      End If   End If
End Sub

    protected void AddItem(ListItem li)
{
    TargetList.SelectedIndex = -1;    if (this.AllowDuplicates == true)    {        TargetList.Items.Add(li);    }    else    {        if (TargetList.Items.FindByText(li.Text) == null)        {            TargetList.Items.Add(li);        }    }
}

    Der Code führt die gleiche Funktion wie zuvor aus (Hinzufügen eines Elements zur Liste TargetList), nun überprüft der Code jedoch, ob die AllowDuplicate-Eigenschaft auf true festgelegt ist. Wenn die AllowDuplicate-Eigenschaft auf true festgelegt ist, wird das Element hinzugefügt. Wenn die AllowDuplicate-Eigenschaft auf false festgelegt ist, sucht der Code nach einem vorhandenen Element mit demselben Wert wie das vorgeschlagene neue Element und fügt das neue Element hinzu, wenn kein vorhandenes Element gefunden wurde.

Da Sie den Inhalt der Liste SourceList mithilfe einer Eigenschaft festlegen, können Sie die Testdaten entfernen, die Sie unter "Hinzufügen von Serversteuerelementen zum Benutzersteuerelement" in dieser exemplarischen Vorgehensweise an anderer Stelle eingegeben haben.

So entfernen Sie die Testdaten für die Liste SourceList

  1. Wechseln Sie in die Entwurfsansicht.

  2. Klicken Sie auf das SourceList-Steuerelement, und klicken Sie dann unter Eigenschaften für Elemente auf die Schaltfläche mit dem Auslassungszeichen (…).

    Der ListItem-Auflistungs-Editor wird angezeigt.

  3. Klicken Sie jeweils auf die Schaltfläche Entfernen, um die einzelnen Beispielelemente zu entfernen, und klicken Sie dann auf OK.

Hinzufügen einer Methode zum Benutzersteuerelement

Sie können auch Methoden zum Ausführen von Aufgaben im Benutzersteuerelement hinzufügen, wenn die Methoden von Code auf der Hostseite aufgerufen werden. Fügen Sie in dieser exemplarischen Vorgehensweise zum Veranschaulichen zwei Methoden hinzu. Die erste Methode kann zum Hinzufügen von Elementen zur Liste SourceList aufgerufen werden. Die zweite Methode löscht den Inhalt der Liste TargetList.

So fügen Sie eine Methode zum Löschen der Liste TargetList hinzu

  1. Fügen Sie mit dem folgenden Code die AddSourceItem-Methode hinzu:

    Public Sub AddSourceItem(ByVal sourceItem As String)
    SourceList.Items.Add(sourceItem)
End Sub

    public void AddSourceItem(String sourceItem)
{
    SourceList.Items.Add(sourceItem);
}

  2. Fügen Sie mit dem folgenden Code die ClearAll-Methode hinzu:

    Public Sub ClearAll()
    SourceList.Items.Clear()
    TargetList.Items.Clear()
End Sub

    public void ClearAll()
{
    SourceList.Items.Clear();
    TargetList.Items.Clear();
}

  3. Klicken Sie im Menü Datei auf Alle speichern, um die am Benutzersteuerelement vorgenommenen Änderungen zu speichern.

Testen der Benutzersteuerelementeigenschaften und der Methode

Die letzte Aufgabe in dieser exemplarischen Vorgehensweise besteht darin, die Hostseite so zu verbessern, dass Werte mit dem Benutzersteuerelement gemeinsam genutzt werden können. Sie können einige der Eigenschaften für das Benutzersteuerelement deklarativ festlegen. (Sie können die Liste SourceList nicht direkt mit dem Code in dieser exemplarischen Vorgehensweise festlegen. Sie können sie jedoch programmgesteuert festlegen.) In dieser Verfahrensweise legen Sie die AllowDuplicates-Eigenschaft auf den Standardwert true fest.

So legen Sie Benutzersteuerelementeigenschaften deklarativ fest

  1. Wechseln Sie zur Seite HostUserControl.aspx, oder öffnen Sie diese.

  2. Legen Sie AllowDuplicates in der Quellansicht deklarativ fest, indem Sie Syntax verwenden, die in etwa folgendermaßen aussieht:

    <uc1:ListPicker id="ListPicker1" Runat="server"
    AllowDuplicates="true" />

    Beachten Sie, dass Sie für AllowDuplicates die Funktionen von Microsoft IntelliSense erhalten.

Programmgesteuertes Arbeiten mit dem Benutzersteuerelement

Sie können mit dem Benutzersteuerelement auch programmgesteuert arbeiten, die Eigenschaften festlegen und abrufen sowie die Methoden aufrufen. Sie fügen der Hostseite zum Veranschaulichen der programmgesteuerten Arbeit mit dem Benutzersteuerelement einige Steuerelemente hinzu.

So arbeiten Sie programmgesteuert mit dem Benutzersteuerelement

  1. Wechseln Sie in die Entwurfsansicht.

  2. Ziehen Sie in der Toolbox aus der Gruppe Standard die folgenden Steuerelemente in die Tabelle auf der Hostseite, und legen Sie dann die Eigenschaften wie angegeben fest.

    Steuerelement

    Eigenschaften

    TextBox

    ID: NewItem

    Text: (empty)

    Button

    ID: AddItem

    Text: Add Item

    Button

    ID: LoadFiles

    Text: File List

    Button

    ID: ClearSelection

    Text: Clear All

    CheckBox

    AutoPostBack: True

    Aktiviert: True

    ID: AllowDuplicates

    Text: Allow duplicates

    Button

    ID: ShowSelection

    Text: Show Selection

    Label

    ID: Selection

    Text: (empty)

  3. Doppelklicken Sie in der Entwurfsansicht auf AllowDuplicates, um einen Ereignishandler für das CheckedChanged-Ereignis zu erstellen, und fügen Sie daraufhin den folgenden hervorgehobenen Code hinzu:

    Protected Sub AllowDuplicates_CheckedChanged( _
ByVal sender As Object, _
ByVal e As EventArgs) Handles AllowDuplicates.CheckedChanged
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked
End Sub

    protected void AllowDuplicates_CheckedChanged(Object sender, EventArgs e)
{
    ListPicker1.AllowDuplicates = AllowDuplicates.Checked;
}

  4. Wechseln Sie zur Entwurfsansicht, doppelklicken Sie auf AddItem, um einen Ereignishandler für das Click-Ereignis zu erstellen, und fügen Sie daraufhin den folgenden hervorgehobenen Code hinzu:

    Protected Sub AddItem_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles AddItem.Click
    Dim sourceItem As String = Server.HtmlEncode(NewItem.Text)    ListPicker1.AddSourceItem(sourceItem)
End Sub

    protected void AddItem_Click(object sender, EventArgs e)
{
    ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text));
}

    Der Code erstellt eine ListItemCollection-Auflistung in Code und füllt sie mit Beispieldaten auf. Daraufhin legt der Code die SourceItems-Eigenschaft auf die Auflistung fest.

  5. Wechseln Sie zur Entwurfsansicht, doppelklicken Sie auf LoadFiles, um einen Ereignishandler für das Click-Ereignis zu erstellen, und fügen Sie daraufhin den folgenden hervorgehobenen Code hinzu:

    Protected Sub LoadFiles_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles LoadFiles.Click
   Dim path As String = Server.MapPath(Request.ApplicationPath)   Dim files() As String = System.IO.Directory.GetFiles(path)   Dim filename As String   For Each filename in Files      ListPicker1.AddSourceItem(filename)   Next
End Sub

    protected void LoadFiles_Click(object sender, EventArgs e)
{
   String path = Server.MapPath(Request.ApplicationPath);   String[] files = System.IO.Directory.GetFiles(path);   foreach(String filename in files)   {      ListPicker1.AddSourceItem(filename);   }
}

    Dieser Code ist mit dem Code für AddItem vergleichbar, abgesehen davon, dass mit diesem Code im Stammverzeichnis der Website eine Liste von Dateien hinzugefügt wird.

  6. Wechseln Sie zur Entwurfsansicht, doppelklicken Sie auf ShowSelection, um einen Ereignishandler für das Click-Ereignis zu erstellen, und fügen Sie daraufhin den folgenden hervorgehobenen Code hinzu:

    Protected Sub ShowSelection_Click(ByVal sender As Object, _
      ByVal e As EventArgs) Handles ShowSelection.Click
   Dim lItem As ListItem   Dim selectedItemsString As String = ""   For Each lItem in ListPicker1.SelectedItems      selectedItemsString &= "<br>" & lItem.Text   Next   Selection.Text = selectedItemsString
End Sub

    protected void ShowSelection_Click(object sender, EventArgs e)
{
   String selectedItemsString = "";   foreach(ListItem lItem in ListPicker1.SelectedItems)   {      selectedItemsString += "<br>" + lItem.Text;   }   Selection.Text = selectedItemsString;
}

    Dieser Code ruft ein Objekt ab, das als ListItemCollection-Objekt typisiert ist, jedes Element in der Auflistung liest und daraufhin die Ergebnisse in Auswahl anzeigt.

  7. Wechseln Sie zur Entwurfsansicht, doppelklicken Sie auf ClearSelection, um einen Ereignishandler für das Click-Ereignis zu erstellen, und fügen Sie daraufhin den folgenden hervorgehobenen Code hinzu:

    Protected Sub ClearSelection_Click(ByVal sender As Object, _
ByVal e As EventArgs) Handles ClearSelection.Click
   ListPicker1.ClearAll()
End Sub

    protected void ClearSelection_Click(object sender, EventArgs e)
{
   ListPicker1.ClearAll();
}

    In diesem Code wird die ClearAll-Methode aufgerufen, damit das Benutzersteuerelement alle Elemente aus TargetList entfernen kann.

Testen der fertig gestellten Benutzersteuerelemente

Nun können Sie das fertige Benutzersteuerelement testen.

So testen Sie das Benutzersteuerelement

  1. Drücken Sie STRG+F5, um die Seite auszuführen.

  2. Geben Sie im Textfeld einen Wert ein, und klicken Sie dann auf Element hinzufügen.

  3. Wiederholen Sie Schritt 2 mehrmals, bis im Benutzersteuerelement eine Auswahl von Elementen vorhanden ist.

  4. Wählen Sie mithilfe der Schaltflächen ein oder mehrere Quellelemente aus der Liste SourceList aus, und fügen Sie sie dann der Liste TargetList hinzu.

  5. Klicken Sie auf Auswahl anzeigen.

    Die TargetList-Listenelemente werden unter Auswahl angezeigt.

  6. Klicken Sie auf Alle löschen.

  7. Klicken Sie auf Dateiliste.

    In der Liste SourceList wird nun eine Liste von Dateinamen angezeigt.

  8. Klicken Sie im Benutzersteuerelement auf Hinzufügen, um der Liste TargetList mehrere Elemente hinzuzufügen.

  9. Versuchen Sie, der Liste TargetList ein Element hinzuzufügen, das bereits in der Liste vorhanden ist.

    Das Element wird hinzugefügt und ist nun doppelt vorhanden.

  10. Deaktivieren Sie das Kontrollkästchen Duplikate zulassen, und versuchen Sie dann erneut, Duplikate hinzuzufügen.

    Die Duplikate werden der Liste TargetList nicht hinzugefügt.

  11. Klicken Sie auf Auswahl anzeigen.

    Die Liste von Elementen in der Liste TargetList wird auf der Hostseite angezeigt.

Nächste Schritte

Obwohl das von Ihnen erstellte Steuerelement nicht sehr komplex ist, haben Sie viele Grundfunktionen kennen gelernt, die Sie in ein Benutzersteuerelement integrieren können. Das Verbessern von Steuerelementen besteht hauptsächlich im Bereitstellen zusätzlicher Eigenschaften und Methoden, die die Möglichkeiten der Verwendung des betreffenden Steuerelements verbessern. Zusätzliche Member können Folgendes einbeziehen:

  • Darstellungseigenschaften

    Sie können Benutzersteuerelementeigenschaften erstellen, mit denen Benutzer u. a. den Hintergrund und die Listengröße für das Steuerelement festlegen können.

    Hinweis:

    Standardmäßig wird für das Benutzersteuerelement das aktuelle Design verwendet, das auf die untergeordneten Steuerelemente angewendet wird. Wenn Sie beispielsweise ein Design für ein Button-Steuerelement definiert haben, werden die Schaltflächen im Benutzersteuerelement mit diesem Design angezeigt.

  • Dateneigenschaften

    Sie können Eigenschaften hinzufügen, mit denen das Benutzersteuerelement eine größere Vielfalt an Daten verwenden kann, die in der Liste SourceList angezeigt werden. Sie können beispielsweise Eigenschaften zum Festlegen eines Datasets, einer Datentabelle und eines Datenanzeigefelds hinzufügen.

  • Funktionen

    Sie können dem Benutzersteuerelement zusätzlich Schaltflächen und Code hinzufügen, damit Benutzer Elemente nicht nur aus der Liste SourceList in die Liste TargetList kopieren können, sondern Elemente auch verschieben können – wobei das Element aus der Liste SourceList entfernt wird, wenn es in die Liste TargetList verschoben wird. Das Steuerelement könnte dann Schaltflächen aufweisen, mit denen die Daten aus der Liste TargetList wieder zurück in die Liste SourceList verschoben werden können.

Siehe auch

Aufgaben

Gewusst wie: Konvertieren von Web Forms-Seiten in ASP.NET-Benutzersteuerelemente

Konzepte

Übersicht über ASP.NET-Benutzersteuerelemente

Übersicht über Sicherheitsrisiken bei Webanwendungen