Einstieg in ASP.NET von Matthias Lohrer

Kapitel 10 Webserversteuerelemente selbst erstellen
	10.1 Benutzersteuerelemente (User Controls)
		10.1.1 Ein einfaches Benutzersteuerelement erstellen
		10.1.2 Die Control-Direktive
		10.1.3 Die Register-Direktive für Benutzersteuerelemente verwenden
		10.1.4 Die Basisklasse UserControl
		10.1.5 Eigenschaften für Benutzersteuerelemente definieren
		10.1.6 In Benutzersteuerelementen auf Ereignisse reagieren
	10.2 Benutzerdefinierte Steuerelemente (Custom Controls)
		10.2.1 Eine zählende Schaltfläche

Kapitel 10 Webserversteuerelemente selbst erstellen

ASP.NET bietet viele Bausteine für Webanwendungen. Darüber hinaus haben Sie die Möglichkeit, Ihre eigenen Bausteine zu erstellen.

ASP.NET bietet verschiedene Möglichkeiten, eigene Steuerelemente zu erstellen. Benutzersteuerelemente (User controls) sind Ausschnitte aus aspx-Dateien. Sie sind aus HTML- und ASP.NET-Skript-Bestandteilen aufgebaut. Noch weiter gehende Möglichkeiten bieten benutzerdefinierte Steuerelemente (Custom controls). Das sind selbst definierte Klassen, die Sie in Ihren aspx-Seiten ähnlich wie die Standard-Webserversteuerelemente einbinden können.

10.1 Benutzersteuerelemente (User Controls)

Die einfachste Kategorie selbst definierter Steuerelemente sind die Benutzersteuerelemente (User controls), die einen beliebigen Ausschnitt aus einer aspx-Seite aufnehmen können. Benutzersteuerelemente funktionieren ähnlich wie Include-Dateien. Im einfachsten Fall enthalten sie nur HTML-Code. Benutzersteuerelemente können aber auch Skripte enthalten, und Sie können für Benutzersteuerelemente auch eigene Eigenschaften und Ereignisse definieren.

10.1.1 Ein einfaches Benutzersteuerelement erstellen

Viele Websites enthalten auf allen Seiten am Seitenfuß einen Copyright-Hinweis. Diesen Bestandteil können Sie gut über ein Benutzersteuerelement auf allen Seiten einfügen. Als Ausgangssituation liegt beispielsweise die Datei user_01.aspx vor:

<!-- user_01.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True" %>
<html><head>
<title>Benutzersteuerelemente verwenden</title>
</head><body>
<h1>Benutzersteuerelemente verwenden</h1>
<p>Hier steht der Text ...</p>
<hr>
<center>© Matthias Lohrer 2002, 2003</center>
</body></html>

Die Passage von <hr> bis </center> taucht in dieser Form auf allen Seiten der Website auf. Dieser Abschnitt soll in ein Benutzersteuerelement ausgelagert werden, damit Sie bei einer Änderung, etwa in einem neuen Jahr, nicht alle Seiten der Website anpassen müssen.

So geht's: Die wiederkehrende Passage kopieren Sie in eine neue Datei und speichern sie unter einem Namen mit der Ergänzung ascx (c für Control statt p für Page), z. B. copyright.ascx. Am Anfang dieser Datei fügen Sie die Direktive <%@ Control %> (statt <%@ Page ...%>) ein:

<!-- copyright.ascx -->
<%@ Control %>
<hr><center>© Matthias Lohrer 2002, 2003</center>

Die neue Form von user_01.aspx speichern Sie unter dem Namen user_02.aspx. Hier führen Sie zwei Änderungen aus. Am Anfang der Seite registrieren Sie das Benutzersteuerelement mit der Register-Direktive:

<%@ Register Tagprefix="mlohrer" Tagname="copyright" src="copyright.ascx" %>

So wie bei asp:DataGrid etc. das asp das Präfix bildet, können Sie für Ihre eigenen Benutzersteuerelemente Ihr eigenes Präfix festlegen, indem Sie das Tagprefix-Attribut setzen. Mit dem Tagname-Attribut legen Sie den Namen fest und mit src geben Sie den Dateinamen an.

Im HTML-Teil der Seite rufen Sie das Benutzersteuerelement in dieser Form auf:

<mlohrer:copyright runat="server" />

Vergessen Sie nicht die Angabe runat="server"! So sieht die überarbeitete Seite im Zusammenhang aus:

<!-- user_02.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True" %>
<%@ Register Tagprefix="mlohrer" Tagname="copyright" src="copyright.ascx" %>
<html><head>
<title>Benutzersteuerelemente verwenden</title>
</head><body>
<h1>Benutzersteuerelemente verwenden</h1>
<p>Hier steht der Text ...</p>
<mlohrer:copyright runat="server" />
</body></html>

Die Ausgabe im Browser von user_02.aspx ist identisch mit der Ausgabe von user_01.aspx.

Achtung Beachten Sie, dass in ascx-Dateien das form-Tag nicht auftauchen darf. Das form-Tag darf nur in der aspx-Datei enthalten sein, die das Benutzersteuerelement aufruft.

10.1.2 Die Control-Direktive

Eine ascx-Datei kann maximal eine Control-Direktive enthalten. Die verfügbaren Attribute entsprechend weit gehend den Attributen der Page-Direktive.

Atribut	mögliche Werte	Beschreibung
AutoEventWireup	True (Default) oder False	Bei True werden Ereignisse automatisch weitergeleitet.
ClassName	String	Der Klassenname für dieses Steuerelement
CompilerOptions	Gültige Compiler-Optionen	Compiler-Optionen, die zum Compiler weitergeleitet werden
Debug	True oder False (Default)	Bei True wird mit Debugsymbolen kompiliert.
Description	Beschreibung	Textliche Beschreibung
EnableViewState	True (Default) oder False	Bei True bleibt der Seitenstatus erhalten.
Explicit	True oder False (Default)	Bei True wird mit der Option Option Explicit kompiliert.
Inherits	Eine von UserControl abgeleitete Klasse	Legt die zugehörige Code-Behind-Klasse fest
Language	Die von .NET unterstützten Sprachen	Die verwendete Programmiersprache
Strict	True oder False (Default)	Bei True wird der Option Strict-Modus von VB.NET verwendet.
Src	Gültiger Dateipfad	Name der Quelldatei der Code-Behind-Klasse
WarningLevel	Werte von 0 bis 4	Gibt an, bei welcher Warnungsebene der Compiler das Kompilieren abbrechen soll

Tabelle 10.1 Attribute der Control-Direktive

10.1.3 Die Register-Direktive für Benutzersteuerelemente verwenden

Bevor Sie ein Benutzersteuerelement in einer Seite verwenden können, müssen Sie es der Seite bekannt machen. Dazu verwenden Sie die Register-Direktive. Bei Benutzersteuerelementen hat die Register-Direktive immer diese Form:

<%@ Register tagprefix="myPrefix" 
             tagname="myTagname" 
             Src="myDateiPfad" %>

10.1.4 Die Basisklasse UserControl

Programmtechnisch gesehen sind Benutzersteuerelemente Klassen. Benutzersteuerelemente stammen immer von der Basisklasse System.Web.UI.UserControl ab. In der Control-Direktive des Benutzersteuerelements können Sie über das Attribut ClassName den Klassennamen für das Benutzersteuerelement ausdrücklich angeben. Es ist auch möglich, ein Benutzersteuerelement nicht direkt von der Klasse UserControl abzuleiten, sondern von einer anderen Klasse, die aber ihrerseits irgendwo in ihrem Stammbaum von UserControl abstammen muss. Dazu verwenden Sie das Inherits-Attribut der Control-Direktive. Durch die Verwendung des Src-Attributs können Sie außerdem die ascx-Datei mit einer Code-Behind-Datei verknüpfen.

Ein Benutzersteuerelement kann selbst andere Benutzersteuerelemente enthalten.

Die Klasse UserControl verfügt über einige Eigenschaften, die auch Page kennt. Dazu zählen etwa die Eigenschaften IsPostBack, Request, Response, Server und Session.

Weil Benutzersteuerelemente Klassen sind, können Sie mit ihnen entsprechend umgehen. Sie können ihnen beispielsweise Eigenschaften zuweisen, was im folgenden Abschnitt demonstriert wird.

Eigenschaften
Application	HttpApplicationState	Stellt das Application-Objekt zur Verfügung
Attributes	AttributeCollection	Eine Auflistung der Attribut-Wert-Paare, die in der aspx-Datei im Tag für das Benutzersteuerelement definiert sind
Cache	Cache	Das Cache-Objekt, das der Anwendung zugeordnet ist, in der das Benutzersteuerelement eingesetzt wird
IsPostBack	Boolean	True, wenn das Benutzersteuerelement als Antwort auf ein Postback geladen wird
Request	HttpRequest	Das Request-Objekt der aktuellen Anforderung
Response	HttpResponse	Das Response-Objekt der aktuellen Anforderung
Server	HttpServerUtility	Das Server-Objekt der aktuellen Anforderung
Session	HttpSessionState	Das Session-Objekt der aktuellen Anforderung
Trace	TraceContext	Das TraceContext-Objekt der aktuellen Anforderung
Methoden
InitializeAsUserControl(Page)		Initialisiert das UserControl-Objekt, z. B. myControl.InitializeAsUserControl(Me)
MapPath(virtualPath As String)	String	Ordnet dem virtuellen Verzeichnis den absoluten Dateipfad zu

Tabelle 10.2 Steckbrief der Klasse UserControl

10.1.5 Eigenschaften für Benutzersteuerelemente definieren

Das erste Beispiel für ein Benutzersteuerelement war sehr einfach, es enthielt nur statischen HTML-Code. Als Nächstes lernen Sie, beim Aufruf eines Benutzersteuerelements so etwas wie eine Variable zu übergeben, wodurch das Benutzersteuerelement flexibler wird. Programmtechnisch gesehen definieren Sie für die Klasse des Benutzersteuerelements eine Eigenschaft. Beim Aufruf des Benutzersteuerelements in der aspx-Seite legen Sie die Eigenschaft fest, indem Sie ein entsprechendes Attribut angeben.

Wenn Sie das Benutzersteuerelement für die Copyright-Angabe beispielsweise auf mehreren Websites verwenden wollen, dann wäre es praktisch, wenn der Name des Rechteinhabers variabel wäre.

So definieren Sie eine variable Eigenschaft für ein Benutzersteuerelement:

1. In der ascx-Datei fügen Sie im Skript-Abschnitt den nötigen Code hinzu, mit dem für eine Klasse eine Eigenschaft definiert wird. Für das Beispiel benötigen Sie eine Eigenschaft Firmenname. Das erweiterte Steuerelement bekommt den Namen copyright_02.ascx und hat diese Form.

<!-- copyright_02.ascx -->
<%@ Control Language="VB" Debug="True" Strict="True" %>
<script runat="server">
Private strFirma As String

   Public Property Firmenname() As String
      Get
         Firmenname = strFirma
      End Get
      
      Set (ByVal inFirmenname As String)
         strFirma = inFirmenname
      End Set
   End Property

</script>
<hr><center>© <% = Firmenname %> 2002, 2003</center>

Diese Definition der Eigenschaft Firmenname ist streng nach der objektorientierten Lehre entworfen. Mit Private strFirma As String deklarieren Sie zunächst eine private Variable, auf die nur die Klasse selbst Zugriff hat. Den öffentlichen Zugriff auf die Eigenschaft Firmenname ermöglichen Sie über die Property-Anweisung. Im HTML-Abschnitt des Benutzersteuerelements wird der Firmenname über eine einfache Inline-Anweisung eingefügt.

2. user_03.aspx ruft das erweiterte Benutzersteuerelement auf, indem das Skript im mlohrer:copyright-Element das Attribut Firmenname="Matthias Lohrer" hinzufügt.

<!-- user_03.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True" %>
<%@ Register tagprefix="mlohrer" tagname="copyright" 
             Src="copyright_02.ascx" %>
<html><head>
<title>Benutzersteuerelemente verwenden</title>
</head><body>
<h1>Benutzersteuerelemente verwenden</h1>
<p>Hier steht der Text ...</p>
<mlohrer:copyright runat="server" 
                   Firmenname="Matthias Lohrer" />
</body></html>

10.1.6 In Benutzersteuerelementen auf Ereignisse reagieren

In Benutzersteuerelementen können Sie ähnlich wie in aspx-Seiten auf Ereignisse reagieren. Wenn Sie in einem Benutzersteuerelement etwa Webserversteuerelemente einfügen, können Sie hier auch die benötigten Ereignisroutinen definieren. Auch Page_Load ist beispielsweise verfügbar. Ereignisse wie Page_Load und andere werden an die aufrufende aspx-Seite weitergeleitet, wenn in der Control-Direktive des Benutzersteuerelements die Standardeinstellung AutoEventWireup=True nicht verändert wurde.

Das folgende Beispiel demonstriert zwei Dinge. Zum einen sehen Sie, wie Sie Webserversteuerelemente in Ihren Benutzersteuerelementen verwenden können. Als Nebeneffekt erkennen Sie, dass Sie ein Benutzersteuerelement in eine Seite auch mehrfach einbinden können, ohne dass Sie diesen Fall im Code des Benutzersteuerelements selbst berücksichtigen müssten.

Viele Websites bieten die Option an, einen Newsletter zu abonnieren. Auf Ihrer Website möchten Sie verschiedene Newsletter anbieten und diese Option außerdem auf mehreren Seiten zur Verfügung stellen. Eine bestimmte Funktionalität wird also in jeweils leichter Abwandlung an mehreren Stellen benötigt, so dass die Realisierung als Benutzersteuerelement nahe liegt.

Hier klicken, um das Bild zu Vergrößern

Abbildung 10.1 Jedes Benutzersteuerelement bearbeitet seine Ereignisse selbst.

Hier klicken, um das Bild zu Vergrößern

Abbildung 10.2 Mehrfach eingebundene Benutzersteuerelemente erhalten im HTML-Code eindeutig unterscheidbare Namen.

user_04.ascx realisiert ein Benutzersteuerelement für ein solches E-Mail-Abo. user_04.aspx bindet das Benutzersteuerelement zweimal ein. Abbildung 10.1 zeigt die Darstellung von user_04.aspx im Browser und Abbildung 10.2 zeigt den erzeugten HTML-Quellcode.

<!-- user_04.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True" %>
<%@ Register Tagprefix="mlohrer" Tagname="emailabo" 
             Src="user_04.ascx" %> 
<html><head>
<title>Benutzersteuerelemente verwenden</title>
</head><body>
<h3>Wählen Sie einen Newsletter aus!</h3>
<form runat="server">
<mlohrer:emailabo runat="server"
        Newsletterthema="Alles über Wellensittiche" />
<mlohrer:emailabo runat="server"
        Newsletterthema="Alles über Hauskatzen" />
</form>
</body>
</html>

<!-- user_04.ascx -->
<%@ Control Language="VB" Strict="True" Debug="True" %>
<script runat="server">
Private txtThema As String

   Public Property Newsletterthema() As String
      Get
         Newsletterthema = txtThema
      End Get
      
      Set (ByVal inThema As String)
         txtThema = inThema
      End Set
   End Property

Public Sub emailabo (ByVal Sender As Object, _
                     ByVal E As CommandEventArgs)
   ausgabe.InnerHtml ="Sie erhalten den Newsletter<b> "
   ausgabe.InnerHtml += Newsletterthema
   ausgabe.InnerHtml += " </b>an die Adresse <b>"
   ausgabe.InnerHtml += txtEMail.value
   ausgabe.InnerHtml += "</b>."
End Sub

Sub Page_Load (ByVal Sender As Object, _
               ByVal E As EventArgs)
   Beschreibung.innerHtml = txtThema 
End Sub

</script>

<p style="background-color:#eeeeee;height:70pt" >
<b id="Beschreibung" runat="server" ></b><br>
<input type="text"
       id="txtEMail" 
       value="Ihre E-Mail-Adresse" 
       runat="server">
<asp:Button Text="News abonnieren" 
            runat="server"
            OnCommand="emailabo" /> <br>
<span id="ausgabe" runat="server" />
</p>

Der HTML-Teil des Benutzersteuerelements fasst alle Ausgabeelemente in einem einzelnen p-Element zusammen. Über das Attribut style="background-color:#eeeeee;height:70pt" bekommt der Absatz eine feste Höhe und einen hellgrauen Hintergrund zugewiesen. Für die Beschreibung wird ein b-Element zur Verfügung gestellt. Es folgen ein input-Element und ein asp:Button-Element für die Eingabe der E-Mail-Adresse. Für eine Feedback-Meldung wird ein span-Element bereitgestellt.

Beim Laden der aspx-Seite, in die dieses Benutzersteuerelement eingebunden wird, wird auch die Page_Load-Prozedur dieses Benutzersteuerelements ausgeführt. Dabei bekommt die Beschreibung die Variable txtThema zugewiesen.

txtThema ist eine private Variable, die nach außen über die Eigenschaft Newsletterthema zur Verfügung steht. Innerhalb der aspx-Seite wird das Newsletterthema gesetzt, indem bei der Deklaration ein entsprechendes Attribut angegeben wird:

<mlohrer:emailabo runat="server"
         Newsletterthema="Alles über Hauskatzen" />

Wenn der Anwender seine E-Mail-Adresse eingibt und News abonnieren anklickt, dann wird die Prozedur emailabo() ausgeführt. Innerhalb dieser Prozedur erstellt das Beispiel keine komplette E-Mail-Verwaltung, sondern gibt lediglich eine Meldung zur Bestätigung aus.

Beim Blick auf den HTML-Code wird auch klar, wie ASP.NET mit mehreren Benutzersteuerelementen auf einer Seite umgeht. ASP.NET vergibt für die input type="submit"-Elemente automatisch ein name-Attribut, so dass es die unterschiedlichen E-Mail-Abos voneinander unterscheiden kann.

<< zurück

<top>

vor >>