Glengamoi (Forum) · AspHeute · .NET Heute (RSS-Suche) · AspxFiles (Wiki) · .NET Blogs

ASP.NET User Controls im Einsatz

Geschrieben von: Christian Holm
Kategorie: ASP.NET

This printed page brought to you by AlphaSierraPapa

User Controls (vormals Pagelets) sind ja ganz praktisch - man schreibt sich kleine Code Snippets die man immer wieder in seinen ASP.NET Web Projekten benötigt. Wenn sie dann zum Einsatz kommen sollen - einfach in dem ASP.NET File registrieren und aufrufen. Daß man aber auch mehr als ein simples Email-Standard-Formular mit den ASP.NET User Controls erstellen kann, soll dieser Artikel zeigen.

Obwohl der Artikel einfachst gehalten ist, baut er auf den folgenden Voraussetzungen auf:

Da der Sourcecode der Beispiele in C# geschrieben ist, sollten Sie grundlegende Kenntnisse über diese Programmiersprache haben - es finden sich dazu natürlich etliche Artikel bei AspHeute, die Ihnen das notwendige Wissen vermitteln.

Es ist zu beachten, daß wie immer bei unseren ASP.NET Artikeln, Sie nur dann vom downloadbaren Sourcecode profitieren können, wenn Sie das Microsoft .NET Framework SDK auf einem Webserver installiert haben.

Weiters verwendet dieser Artikel bereits ASP+ Web Form Controls (TextBox, Label). Für den Fall, daß Sie noch nicht sattelfest auf diesem Gebiet sind, bietet der Artikel Einführung in ASP.NET Web Forms das nötige Grundwissen dafür.

ASP.NET User Controls

Seit Microsoft die BETA 1 des .NET Framwork SDKs freigegeben hat, hat sich einiges verändert. So auch bei den User Controls, die vormals Pagelets hießen. Abgesehen von der neuen Namensgebung ist auf den ersten Blick die neue Dateiendung *.ascx auffällig. Die ehemalige Endung *.aspc ist somit ungültig, und wird von der Runtime mit "User control source files must have a .ascx file extension" quittiert.

Kehren wir aber zum eigentlichen Artikelthema wieder zurück. In dem Artikel Einführung in ASP.NET Validation Controls (Teil 2) hatte ich ja das Thema kurz angeschnitten und habe gezeigt, wie man einfache Web Form Controls einfügt und in einer ASP.NET Datei registriert und aufruft. Heute möchte ich Ihnen zeigen wie man ganzen Sourcecode darin verpacken kann und welche Probleme dabei auftreten können.

Nach zwei einfachen Beispielen die nur das Notwendigste zeigen, habe ich ein Beispiel vorbereitet, das einige Möglichkeiten der User Controls zeigt. Zudem zeigt es auch wie man ASP.NET User Controls dynamisch lädt, das heißt, diese erst zu laden, wenn man weiß, welche man laden möchte. Zunächst aber zu den einfachen Beispielen.

Hello World einmal anders

Programmierer werden diese Phrase sicher kennen bzw. sich dabei langweilen. Es gibt viele Möglichkeiten jemanden mit diesem schon leicht verstaubten Gruß zu beglücken - diesmal steckt aber ASP.NET dahinter! In dem nun folgenden Beispiel - welches Sie unter HelloWorld.aspx bzw. die User Control hello.ascx im Download finden - wird der Ausdruck einfach in der User Control mit einem Response.Write ausgegeben.

Beginnen wir mit der ASP.NET HelloWorld.aspx Datei:

<%@ Register TagPrefix="Say" TagName="HelloWorld" Src="hello.ascx" %>

<Say:HelloWorld runat="server" />

Wie Sie sehen nichts Neues. Sie registrieren einfach die gewünschte User Control, in diesem Fall die hello.ascx, mit Hilfe der Register Direktive. Danach müssen Sie sie nur noch an der gewünschten Stelle im Sourcecode aufrufen. TagPrefix und TagName geben hier die nötige Identifikation an - diese wird wie bei den Web Form Controls gehandhabt.

Der Code der User Control sieht folgendermaßen aus:

<% @Control Language="C#" %>
<%
  Response.Write("Hello World!");
%>

Damit die Runtime weiß was hier geschehen soll, ist die Control Directive anzugeben. Damit ist eindeutig festgelegt, daß sich Code in der User Control befindet, der ausgeführt werden soll. Das Ergebnis kennen wir ja alle.

Solange es bei so einfachen, event-losen Statements bleibt, ist diese Methode haltbar. Was aber wenn Sie Events triggern wollen, bzw. der Client auf Ihrer ASP.NET Webseite interagieren soll? Auch das ist kein Problem! Sie verwenden einfach den <script>-Block um dies zu bewerkstelligen. Hier können Sie dann nach Herzenslust Ihren C# Code eintragen, d.h Methoden anführen, somit Events triggern, komplexere Datenbankoperationen durchführen, etc.

Das nächste Beispiel hat die selbe Aufgabenstellung, allerdings mit Verwendung des serverseitigen <script>-Blockes. Der Sourcecode der Datei Helloworld2.aspx enthält keine Veränderungen gegenüber dem ersten Beispiel.

Sehen wir uns daher gleich die User Control usrcontr.ascx an:

<% @Control Language="C#" %>
<script language="C#" runat="server">

 void btnSubmit_Click(Object Src, EventArgs E)
 {
    txtHW.Text = "Hello World";
 }
</script>

<form runat=server>
<asp:Button id="btnSubmit" text="Click" 
    onclick="btnSubmit_Click" runat="server"/>
<asp:Label id="txtHW" runat="server" />
</form>

In der Methode btnSubmit_Click weisen wir der Label Web Control mit der ID "txtHW" den String "Hello World" zu. Wie schon erwähnt, muß sich diese Methode innerhalb des <script>-Blockes befinden damit sie ausgeführt werden kann. Damit wir einen Event triggern können, verwende ich eine ASP.NET Button Web Control. Diese muß sich, um einen Postback durchführen zu können innerhalb des <form>-Blocks befinden. Wenn wir also einen Postback durchführen indem wir die Button Control betätigen wird in der _Click Event Methode der Label Web Control der angegebene String zugewiesen.

Damit hätten wir die beiden Grundfälle der User Control Code Execution bzw. die Event-Triggerung in User Controls besprochen. Nun folgt wie versprochen das etwas anspruchsvollere Beispiel.

SQL Datenbank Abfrage mit User Controls

Wie die Überschrift schon verrät, werden wir Informationen aus einer SQL Datenbank gewinnen. Mit Hilfe von ADO.NET werden wir die Verbindung aufbauen, ein einfaches SQL-Statement ausführen, die erhaltenen Daten in ein DataSet Objekt schreiben und dieses einem DataGrid mit Hilfe von DataBind zuweisen um die Daten im Browser anzuzeigen.

Damit es nicht allzu einfach wird kann man auf der Startseite eine Tabelle der SQL-Datenbank auswählen. Der Auswahl Event (AutoPostBack einer DropDownList Web Control) lädt dann erst zu diesem Zeitpunkt die richtige User Control, wo der Client dann eine Auswahl der Datenspalten treffen kann, die er angezeigt haben möchte.

Dieses Beispiel umfaßt die im Download erhältlichen Dateien DBQuery.aspx sowie die beiden User Controls ProdChkBox.ascx und SupplChkBox.ascx. Als Datenbank habe ich der Einfachheit halber wieder die Northwind Datenbank verwendet, die bei jeder Standard-Installation des Microsoft SQL Servers 7.0 oder höher mitinstalliert wird.

Das Beispiel verwendet die folgende Zugangsberechtigung (Username / Password): uid=sa; pwd=;. Wenn die SQL Server Datenbank nicht auf dem lokalen Computer (dem Webserver) installiert ist, so müssen Sie zusätzlich den Data Source Parameter im Connection-String auf den Namen (oder die IP Adresse) des Datenbankservers ändern.

Da der gesamte Sourcecode etwas zu umfangreich für den Artikel ist, möchte ich nur den Artikel-relevanten Sourcecode besprechen. Beginnen wir mit der Hauptseite DBQuery.aspx:

void TableSelChange(Object Source, EventArgs E)
{
    if (TableSel.Controls.Count > 0) return;

    string strTableSel;
    strTableSel = drpdTableSel.SelectedItem.Text;
      
    switch(strTableSel)
    {
    case "Produkte": 
       TableSel.Controls.Add( Page.LoadControl("ProdChkBox.ascx") );
       break;
    
    case "Lieferanten": 
       TableSel.Controls.Add( Page.LoadControl("SupplChkBox.ascx") );
       break;
    }
}

Nachdem eine Entscheidung über die gewünschte Tabelle der Datenbank in der DropDownList Web Control drpdTableSel getroffen wurde, wird das Ergebnis durch einen AutoPostBack mit Hilfe eines switch Statements ausgewertet. Je nach ausgewählter Option wird erst jetzt die erforderliche User Control geladen. Dies geschieht durch die Page.LoadControl Methode.

Nehmen wir an, wir haben in der DropDownList Control "Produkte" ausgewählt. Dadurch wird die User Control ProdChkBox.ascx geladen.

Wir erhalten nun die Möglichkeit uns bis zu drei Datenspalten anzeigen zu lassen, indem wir in den dazugehörigen CheckBox Web Form Controls ein Häkchen setzen. Wenn wir dann auf den Button "Abschicken" klicken erhalten wir die Daten in den selektierten Datenspalten. Dadurch, daß das SQL-Statement einfach gehalten ist, erhalten wir alle in der ausgewählten Tabelle enthaltenen Datensätze.

Das Ergebnis sieht dann im Browser Fenster (mit bereits formatierter DataGrid Web Control) folgendermaßen aus:

Wir können natürlich auch eine andere Auswahl treffen und wiederum auf "Abschicken" klicken um eine neue Anordnung zu treffen.

Für den Fall, daß wir auf der Startseite "Lieferanten" ausgewählt haben, sieht das Ergebnis so aus:

Sehen wir uns aber nun den relavanten Sourcecode an:

...
void btnSubmit_Click (Object Sender, EventArgs E)
{
     
     char[] chTrim ={','};
     string strSQLCol;
     string strConn ="server=(local)\\NetSDK;database=northwind;Trusted_Connection=yes";
     string strSQL="";

     StringBuilder strColumns = new StringBuilder();
   
     for (int i=0; i < ColumnChkBox.Items.Count; i++)
     {
       if (true == ColumnChkBox.Items[i].Selected)
       {
         strColumns.Append(ColumnChkBox.Items[i].Text);
         strColumns.Append(",");       
         
       }   
     }
   
    strSQLCol = strColumns.ToString();
    strSQLCol = strSQLCol.TrimEnd(chTrim);
    strSQL = "SELECT " + strSQLCol + " FROM Products";
	
	...

Das SQL-Statement baue ich mir mit der StringBuilder Klasse zusammen, indem ich die in der CheckBoxList Web Form Control mit der ID "ColumnChkBox" angehakten Listitems mit Append anfüge. Zusätzlich muß ich sicherstellen, daß die einzelnen Datenspalten durch einen Beistrich getrennt werden. Danach das StringBuilder Objekt noch auf den Datentyp String umcasten, und den letzten überflüssigen Beistrich wieder mit der Trim Funktion entfernen.

Schließlich baue ich mir das SQL-Statment zusammen indem ich einfach die fehlenden Statments an den bestehenden String anfüge. Dieses Beispiel ist sicher nicht die optimierteste (bei jedem PostBack wird eine Connection und ein neues DataSet erstellt) und sicherste (KEINE Fehlerbehandlung) Version, aber zum Testen der User Controls ganz gut geeignet.

Schlußbemerkung

Dieser Artikel zeigte Ihnen wie man in ASP.NET User Controls Sourcecode ausführen kann. Zusätzlich wurde gezeigt, daß es ebenfalls möglich ist in User Controls Events zu triggern und PostBacks durchzuführen.

Das abschließende Beispiel hat gezeigt, wie man basierend auf einer Client Auswahl einer ASP.NET Web Form Control User Controls erst bei Bedarf lädt.