Steuerelemente

Ob Windows Forms, KDE und Co. oder auch im Internet: Immer spielen Steuerelemente (Controls) eine wichtige Rolle bei der Gestaltung von Benutzeroberflächen. Die Steuerelemente sind dabei vorgefertigte Bausteine, aus denen die Oberfläche zusammengebaut wird, zudem werden immer wiederkehrende Aufgaben (z. B. Login-Felder, Navigation, Suche, Werkzeugleisten, …) durch Steuerelemente rationalisiert.

Alle Steuerelemente in ASP.NET erben wichtige Eigenschaften von Control, unter anderem die Funktionalität für die Datenbindung und für Design und Layout; der Programmierer hat dadurch ein einfaches und einheitliches Kochrezept.

Die wichtigsten „Erblasten“ von Control sind …

… die ID Eigenschaft

Diese Zeichenfolge identifiziert ein Steuerelement, sie darf keine Leerzeichen enthalten. Da sich der HTML-Code (z. B. in der default.aspx Datei) und der Programmcode (z. B. in default.aspx.cs) auf die selbe Klasse beziehen, definiert die ID, die im HTML-Element angegeben wurde, die Membervariable im Code. Wem das jetzt zu schnell ging, sollte sich das folgende Beispiel genau ansehen:

<!-- hier der HTML-Code, die zugehörige Klasse ist "_Default" -->
<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"></head>
<body>
   <form id="ersteForm" runat="server">
       <!-- hier wird ein Member vom Typ Label definiert
            mit dem Namen "MeinLabel  -->
       <asp:Label id="MeinLabel" runat="server" /> 
   </form>
</body>
</html>

// der zugehörige C#-Code
using System;
using System.Web;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // das selbe Label!
        MeinLabel.Text="Beschriftung...";
    }
}

… die Visible-Eigenschaft

Hiermit steuert man, wie das Steuerelement gerendert wird: für den Browser-Benutzer sichtbar oder nicht. Ändert man diese Eigenschaft nachdem die Seite bereits gerendert wurde, hat das keinen Einfluss auf die Ausgabe.

… die Parent- und Controls-Eigenschaft

Liefert das übergeordnete Steuerelement zurück. Das Parent-Steuerelement kann dabei auch die Webseite selbst sein. Der Nutzen wird oft erst bei größeren Webseiten deutlich. Der umgekehrte Weg ist durch das Duo

HasControls() – gibt true zurück, wenn das Steuerlement untergeordnete Steuerelemente besitzt, sonst false
und der Controls-Aufzählung

möglich. Beispiel:

// Hat MeinCtrl seinerseits Controls ?
if (MeinCtrl.HasControls())
{
 // das erste enthaltene Control wird nicht gerendert... 
 MeinCtrl.Controls[0].Visible = false;
}

Zusammen bilden diese Eigenschaften eine Baum-Struktur, die den gesamten hierarchischen Aufbau einer Webseite enthält.

Arten von Steuerelementen

Trotz dieser gemeinsamen Erblasten existieren in ASP.NET drei Arten von Steuerelementen:

ASP.NET Websteuerelemente (wenn man so will, die eigentlichen „ASP.NET“-Steuerelemente)

Sie liegen allesamt im Namensraum System.Web.UI.WebControls. Ihr Stammvater ist die Klasse WebControl; diese Klasse hat gegenüber Control weitere Eigenschaften, die für das Design einer Webseite wichtig sind, zum Beispiel

Berandung, Höhe und Breite eines Steuerelements,
Farbgestaltung, Schriftart, Skin
und Einfluss auf den Zugriff durch den Benutzer

Zu diesen gehören die in den Beispielen verwendeten Steuerelemente TextBox (Eingabe von Text), Label (Ausgabe von Text) und die DropDown-Liste (aufklappbare Auswahlliste); aber auch viel kompliziertere, wie das Kalender-Steuerelement und die Steuerelemente zur Verwaltung von Tabellendaten. Insgesamt stehen fast vierzig solche Steuerelemente zur Verfügung. Diejenigen mit HTML-Erfahrung werden sich jetzt vielleicht Folgendes fragen: zu vielen der „einfacheren“ Steuerelemente scheint es ein Gegenstück in HTML zu geben – wo liegt der Unterschied? Die ASP.NET Websteuerelemente werden passend für den jeweiligen Benutzer-Browser gerendert; beispielweise wird, falls möglich, JavaScript-Code eingefügt, der die Benutzung der Seite vereinfacht oder unnötige "POST-backs" zum Server vermeidet.

HTML-Code als Steuerelement: Das Attribut runat="server" sorgt dafür, dass das HTML-Element als Steuerelement auf dem Server gerendert wird. Diese Steuerelemente erben ihre Member von der Klasse HtmlControl, ihr Namensraum lautet System.Web.UI.HtmlControls. Sie ermöglichen im Gegensatz zu dem ASP.NET Websteuerelementen die vollständige Kontrolle über den erzeugten HTML-Code.

Benutzerdefinierte Steuerelemente: hier können Sie ihrer Kreativität freien Lauf lassen. Sie können beispielsweise bestehende Steuerelemente mit Vorlagen zu neuen Steuerelementen zusammenbauen oder von grundauf neue Steuerelemente programmieren, indem Sie von der Klasse WebControl bzw. Control ihr Steuerelement ableiten.

ASP.NET-Steuerelemente

Diese Steuerelemente wurden bisher schon bei einigen Beispielen verwendet. Diese Steuerelemente bilden das Fundament einer ASP.NET-Webseite, im Jargon der ASP.NET-Dokumentation werden sie Webserversteuerelemente genannt. Diese Steuerelemente enthalten auch Eigenschaften und Methoden, die für das Design einer Seite verwendet werden können.

Ein Familienportrait der ASP.NET-Steuerelemente würde den Umfang dieses Buchs bei weitem sprengen, so dass hier nur die wichtigsten vorgestellt werden

Steuerelemente zur Textausgabe

Hierfür sind vor allem das Label- und das Literal-Steuerelement vorgesehen. Beide geben den Text, der mit Hilfe der Text-Eigenschaft festgelegt wird, einfach auf der Webseite aus. Die Funktion hinter diesen Elementen ist denkbar einfach. Die Elemente werden in die Seite durch die Tags

<asp:Label [Attribute …] />
bzw. <asp:Literal [Attribute …] />

in die Seite eingefügt. Um den Unterschied zwischen diesen „Zwillingen“ hervorzuheben, sollte man beide in Aktion ansehen:

<%@ Page Language="C#"  CodeFile="beispiele.aspx.cs" Inherits="_meineSeite" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
     <title>ASP.NET-Steuerelemente</title>
</head>
<body>

     <form id="einfacheSteuerelemente" runat="server">
          <h1>Die einfachen Steuerelemente zur Text-Ausgabe …</h1>
          <p>           
              Label:        <asp:Label ID="labelBsp" runat="server" /><br />
              Literal:      <asp:Literal ID="literalBsp" runat="server" /> 
          </p>  
     </form>
 
</body>
</html>

der zugehörige C#-Code:

using System;
using System.Web;
using System.Web.UI.WebControls; 

public partial class _meineSeite : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // auf beiden Elementen wird der gleiche String ausgegeben
        string ausgabe = "Fischers Fritze fischt Fische!";
        labelBsp.Text = ausgabe;
        literalBsp.Text = ausgabe;
    }
}

Der entscheidende Ausschnitt in der HTML-Ausgabe lautet dann

 <h1>Die einfachen Steuerelemente zur Text-Ausgabe …</h1>
  <p>           
   Label:        <span id="labelBsp">Fischers Fritze fischt Fische!</span> <br />
   Literal:      Fischers Fritze fischt Fische!
  </p>

Das heißt: das Labelelement ergänzt den ausgegebenen Text um weitere Elemente, das Literalelement gibt den Text ohne zusätzliche Umschweife aus.

Einfache Steuerelemente zur Eingabe

Skins und Design

Datenbindung

HTML-Code als Steuerelement

Eigene Steuerelemente entwickeln

|

Hoch zu Inhaltsverzeichnis |