Von André Schubert (T-Systems International GmbH, SSC P&PA)
Für die Entwicklung von ASP.Net Webanwendungen gibt es bereits eine Menge von zusätzlichen Web Controls, die die Arbeit erleichtern sollen. Selbst Microsoft bietet zum kostenlosen Download vier verschiedene Web Controls an. Ein Treeview-, Multipage-, Tabstrip- und Toolbar Control. Andere Anbieter jedoch verlangen hohe Preise für ihre Controls, also warum nicht selber so ein Web Control bzw. Custom Control entwickeln?
Zielsetzung
Ziel dieses Artikels soll es sein, das Erstellen eines eigenen Web Controls (Custom Control) zu verstehen und selber durchzuführen.
Was genau ist ein Web Control (Custom Control)?
Asp.Net Custom Controls sind Server Controls, welche auf dem Server laufen und Logik sowie Teile der UI (User Interface) in sich kapseln. Das hat den Vorteil, dass sie wieder verwendbar und einfacher zu warten sind. Diese Controls können in Asp.Net Seiten und Codebehind Klassen verwendet werden. Man kann sie auch in die Werkzeugleiste des Visual Studios integrieren, so dass sie immer in greifbarer Nähe sind. Großer Vorteil dieser Controls ist es, dass man sie sich nach eigenen Vorstellungen zusammenbauen kann, oder man erweitert vorhandene Controls um weitere gewünschte Eigenschaften.
Im Folgenden möchte ich zeigen wie einfach es ist solch ein Control zu erstellen. Zu diesem Zweck möchte ich zeigen wie man eine Textbox entwickelt, die sofort überprüft, nach jeder Eingabe, ob die vorgegebene maximale Wortlänge erreicht wurde. Dieses Textbox Control soll so gebaut sein, dass die Logik für einfache als auch mehrzeilige Textboxen funktioniert.
Los geht’s
Als erstes erstellt man sich mit Hilfe von Visual Studio 2003 ein neues Projekt der Kategorie „Web-Steuerelementbibliothek“ mit dem Namen „XTextBox“.
Um später noch weitere Custom Controls zu erstellen, benennt man, in den Eigenschaften des Projekts, den Namespace in „XControls“ um.
Somit sind die Vorraussetzungen geschaffen, um ein eigenes Custom Control zu bauen. Dazu fügt man dem Projekt eine neue Klasse mit dem Namen „XTextBox“ hinzu.
Damit man nicht die gesamte Logik und sämtliche Properties einer gewöhnlichen Textbox neu implementieren muss, lässt man die Klasse XTextBox einfach von der Klasse Textbox aus dem Namespace „System.Web.UI.WebControls“ erben.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
namespace XControls
{
///
/// textbox control that checks if the length of the userinput text
/// is smaller than the max length of the textbox or equal
///
[DefaultProperty("Text"),
ToolboxData("<{0}:XTextBox runat=server>")]
public class XTextBox : TextBox
{
…
Im nächsten Schritt implementiert man eine Property, die dafür sorgt, dass die Live-Überprüfung der Eingabe aktiviert oder deaktiviert wird. Dieser Property vom Typ bool habe ich den Namen „Length Check“ gegeben.
private bool _bLengthCheck;
///
/// length check property of textbox control to enable or disable the check
///
[Bindable(true),
Category("Behavior"),
DefaultValue("true")]
public bool LengthCheck
{
get
{
return _bLengthCheck;
}
set
{
_bLengthCheck = value;
}
}
Wie man sieht hat die Property drei weitere Eigenschaften, welche in eckigen Klammern eingeschlossen sind. Die Eigenschaft „Bindable“ gibt an, ob die Property „Length Check“ im Visual Studio Designer editiert werden darf. Hierzu setzt man sie auf true oder false. Die Eigenschaft „Category“ gibt an unter welchem Reiter im Visual Studio Designer Eigenschaftenfenster diese Property zum Editieren auftaucht. Mit der Eigenschaft „DefaultValue“ gibt man einen Standardwert für die Property vor.
Für die Eigenschaft Category hat Microsoft einige Konstanten vorgegeben, um einige zu nennen: Appearance, Behavior, Data und Layout. Eine Auflistung aller Konstanten findet man hier.
Nachdem man nun die Property für die Aktivierung oder Deaktivierung der Überprüfung implementiert hat, ist es an der Zeit, die Überprüfung an sich zu implementieren. Dafür greife ich auf JavaScript zurück, wodurch ich mir einen Postback zurück zum Server spare und somit die Überprüfung clientseitig schneller ausgeführt wird. Man darf aber nicht vergessen, den Inhalt später beim Postback zum Server nochmals auf Gültigkeit zu prüfen, da eine Validierung clientseitig per JavaScript unsicher ist!
Für die Implementierung der Überprüfung überschreibt man am besten den OnPreRender Event des Controls, da man dort die beste Möglichkeit hat um das JavaScript in das Control zu integrieren.
///
/// prerender event of the textbox control
///
///
protected override void OnPreRender(EventArgs e)
{
try
{
…
Die Überprüfung an sich ist ganz simpel und läuft folgendermaßen ab: Man überprüft ob die Property „MaxLength“ der Textbox größer 0 ist und ob die Property „Length Check“ auf true steht. Erst wenn beide Properties gesetzt sind, soll die Überprüfung aktiv werden. Somit wird dann dem Control per „Attributes.Add()“ ein JavaScript hinzugefügt, welches die aktuelle Länge des eingegebenen Strings bei jedem Tastendruck überprüft und beim Überschreiten der maximalen Länge des Strings eine Meldung per „javascript:alert()“ ausgibt und die Textbox rot färbt.
this.Attributes.Add("onkeypress",strScript);
Damit die Überprüfung für einfache Textboxen sowie Multilinetextboxen funktioniert, muss eine Fallunterscheidung durchgeführt werden, indem man die Property „TextMode“ der Textbox abfragt.
if(this.TextMode != TextBoxMode.MultiLine)
Das Ergebnis der Fallunterscheidung sollten dann zwei verschiedene JavaScript Blöcke sein, für den jeweiligen Einsatz.
Einfache Textbox
strScript +=
"if(document.getElementById('" + this.ClientID + "').value.length >= document.getElementById('" + this.ClientID + "').maxLength)"
+ "{"
+ "document.getElementById('"+ this.ClientID +"').style.border='2px';"
+ "document.getElementById('"+ this.ClientID +"').style.borderStyle='solid';"
+ "document.getElementById('"+ this.ClientID +"').style.borderColor='#ff3333';"
+ "alert(\"Please don't type in any more character. The actual length of your input exeeds the maxlength limit.\");"
+ "}"
+ "else"
+ "{"
+ "document.getElementById('" + this.ClientID + "').style.border='1px';"
+ "document.getElementById('" + this.ClientID + "').style.borderStyle='solid';"
+ "document.getElementById('" + this.ClientID + "').style.borderColor='#999999';"
+ "}";
Multiline Textbox
strScript +=
"var Laenge = document.getElementById('" + this.ClientID + "').outerText;"
+ "if(Laenge.length >= " + this.MaxLength + ")"
+ "{"
+ "document.getElementById('" + this.ClientID + "').style.border='2px';"
+ "document.getElementById('" + this.ClientID + "').style.borderStyle='solid';"
+ "document.getElementById('" + this.ClientID + "').style.borderColor='#ff3333';"
+ "alert(\"Please don't type in any more character. The actual length of your input exeeds the maxlength limit.\");"
+ "}"
+ "else"
+ "{"
+ "document.getElementById('" + this.ClientID + "').style.border='1px';"
+ "document.getElementById('" + this.ClientID + "').style.borderStyle='solid';"
+ "document.getElementById('" + this.ClientID + "').style.borderColor='#999999';"
+ "}";
Damit ist die Erstellung des Controls abgeschlossen und das Projekt kann kompiliert werden, um die Dll zu erzeugen, welche wir zum Testen benötigen.
Testen des XTextBox Controls
Zum Testen des Controls erstellt man sich eine Webanwendung mit einer einfachen ASP.Net Seite, in die man dann das erstellte XTextBox Control integriert.
Am einfachsten geht die Integration des Controls, in dem man es in der Werkzeugleiste hinzufügt. Dazu klickt man mit der rechten Maustaste in die Werkzeugleiste und wählt die Option „Element hinzufügen/entfernen“. Im folgenden Dialog gibt man den Pfad zur erzeugten XTextBox Dll an und drückt auf hinzufügen.
Nun sollte das Control in der Werkzeugleiste erscheinen und man kann es wie gewohnt im Designer von Visual Studio per Drag and Drop auf die Webseite ziehen.
Um die Überprüfung der XTextBox zu aktivieren, wählt man im Eigenschaftenfenster den Eintrag „Length Check“ und stellt ihn auf true. Außerdem muss ein Wert größer 0 bei der Property „MaxLength“ gewählt werden.
Nun kann man die Anwendung starten und es sollte eine Seite mit einer TextBox erscheinen. Gibt man nun ein Wort ein, dessen Länge den Wert der Property „MaxLength“ überschreitet, so sollte eine Meldung erscheinen und die Textbox sollte rot umrandet sein.
Schlussbemerkung
Wie man sieht ist die Erstellung eines Custom Controls gar nicht so schwierig wie man erst annimmt.
Mittels dieses Verfahrens ist es möglich, vielfältige eigene Controls zu erzeugen, welche man in die Werkzeugleiste integrieren kann, um sie möglichst oft wieder zu verwenden.
Und das Gute dabei ist, man hat noch Geld gespart!
Linkquellen
Über den Autor
André Schubert ist 27 Jahre alt, wohnt in Berlin und ist gelernter Fachinformatiker FR Anwendungsentwicklung. Mein Spezialgebiet ist die Entwicklung von Webanwendungen unter anderem mit ASP.Net 1.1 und seit Neuestem mit .Net 2.0. Du erreichst ihn am Besten via E-Mail unter Andre.Schubert@t-systems.com.
