Cursus ASP.net : User Controls

Wat zijn User Controls

Als .Net ontwikkelaar kan je de Web Controls uitbreiden met je eigen controls: User Controls. Deze User Controls vormen herbruikbare componenten. Je kan ze in een Web Form Application gebruiken precies zoals de gewone controls.

Het aanroepen van Controls in .Net kent volgende fasen:

Initialiseren
Laad Viewstate
Postback data verwerken
Load
PostBack veranderingen waarnemen
Postback events afhandelen
Prerender
status opslaan
Render
Dispose
Unload

User Controls aanmaken: Kalender.ascx

Met Visual Studio .net kan je op een eenvoudige manier User Controls in een project aanmaken:

Start een nieuwe Web Site: Controls
Kies Project > add Web User Control: Kalender.ascx

Een User control vormt een grafische component die je in een Web Form kan gebruiken, een User Control kan je echter niet zelfstandig uitvoeren. Vandaar dat User Controls een andere extensie hebben: ascx in plaats van aspx. Een User Control (.ascx) kan je in Visual Studio.net heel eenvoudig op de pagina slepen.

Maak volgende lay-out in de Web Form Default.aspx:

Toon /verberg sourcecode

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td valign="top">
                    Geboortedatum:</td>
                <td>
                    <uc1:Kalender ID="Kalender1" runat="server" />
                </td>
            </tr>
            <tr>
                <td valign="top">
                    Datum in dienst:</td>
                <td>
                    <uc1:Kalender ID="Kalender2" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

De Page directive Register wordt gebruikt om een control te registeren op een webpagina. Nu kan je zoveel instanties van de Control Kalender op de Web Form gebruiken als je wil.

Pas nu de Kalender.ascx - file aan (design of HTML-view naar keuze):
voeg een TextBox, een Button en een Calendar Control toe.
Geef passende ID's aan de Controls, zet de eigenschap Visible van de Calendar op false.
Maak de kalender op via Auto Format...

Toon /verberg sourcecode

Kalender.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Kalender.ascx.cs" Inherits="Kalender" %>
<asp:TextBox ID="TxtDatum" runat="server"></asp:TextBox>
<asp:Button ID="BtnSelecteer" runat="server" Text="Selecteer" /><br />
<asp:Calendar ID="Kal" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4"
    DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
    Height="180px" Visible="False" Width="241px">
    <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
    <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
    <SelectorStyle BackColor="#CCCCCC" />
    <WeekendDayStyle BackColor="#FFFFCC" />
    <OtherMonthDayStyle ForeColor="Gray" />
    <NextPrevStyle VerticalAlign="Bottom" />
    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
    <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>

Geef volgende code in voor de CodeBehind file Kalender.ascx.cs:

using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Kalender : System.Web.UI.UserControl
{
        protected void Page_Load(object sender, System.EventArgs e)
		{
			TxtDatum.Style["Text-align"] = "right";
		}

		protected void BtnSelecteer_Click(object sender, System.EventArgs e)
		{
			Kal.Visible = !Kal.Visible;
		}

		protected void Kal_SelectionChanged(object sender, System.EventArgs e)
		{
			TxtDatum.Text = Kal.SelectedDate.ToShortDateString();
			Kal.Visible = false;
		}

}

In designweergave van Default.aspx zie je nu de User Control
Voer de toepassing uit

Eigenschappen definiëren - Inloggen.ascx

User Controls kunnen ook eigenschappen hebben, deze kan je net zo eenvoudig instellen als bij de Web Form controls.

We maken een toepassing waarvoor we een User Control maken waarin de gebruiker een gebruikersnaam en een paswoord kan ingeven.
Voeg een Web User Control toe, geef deze de naam Inloggen

Inloggen.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Inloggen.ascx.cs" Inherits="Inloggen" %>

<style type="text/css">
   .UCLogin { BORDER: 1px solid <%= RandKleur %> }
</style>

<table class="UCLogin">
    <tr>
        <td>
            <asp:Label ID="Label1" runat="server" Text="Gebruikersnaam"></asp:Label></td>
        <td style="width: 158px">
            <asp:TextBox ID="TxtGnaam" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="Label2" runat="server" Text="Paswoord"></asp:Label></td>
        <td style="width: 158px">
            <asp:TextBox ID="TxtPwd" runat="server" TextMode="Password"></asp:TextBox></td>
    </tr>
    <tr>
        <td>
        </td>
        <td style="width: 158px">
            <asp:Button ID="BtnInloggen" runat="server" Text="Inloggen" OnClick="BtnInloggen_Click" /></td>
    </tr>
</table>

Je merkt dat we met CSS een opmaak voorzien voor de tabel die de controls omvat. De waarde van de eigenschap RandKleur wordt runtime in de CSS-klasse UCLogin ingegeven.

In de CodeBehind-file Inloggen.ascx.cs voorzie je volgende code:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Inloggen : System.Web.UI.UserControl
{
    private string randkleur;

    public string RandKleur
    {
        get { return randkleur; }
        set { randkleur = value; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (TxtGnaam.Text == "")
        {
            TxtGnaam.Text = "Naam a.u.b.";
            TxtGnaam.Attributes["onclick"] = "this.value=''";
        }
        else
        {
            TxtGnaam.Attributes["onclick"] = "void(0)";
        }
    }
}

Maak een Web Form aan waarin je de User Control gebruikt:

InlogScherm.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InlogScherm.aspx.cs" Inherits="InlogScherm" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:Inloggen ID="Inloggen1" runat="server" RandKleur="red" />
    </div>
    </form>
</body>
</html>

Je merkt dat we de eigenschappen van de User Control met attributen kunnen aangeven, precies zoals in gewone Web Form Controls.

Custom Controls

In de voorgaande voorbeelden hebben we een User Control gemaakt door bestaande Controls te gebruiken en samen te brengen tot een grotere control.
Dergelijke controls worden opgeslagen in een ascx-bestand binnen je Web Site.

Je kan Custom Controls maken door over te erven van een bestaande control.
Dergelijke controls huizen in een Control Library en worden gecompileerd in een assembly.

TextBoxSpeciaal

We maken een control die overerft van een gewone TextBox en zorgen ervoor dat wanneer de eigenschap Enabled op false staat, de TextBox als gewone tekst wordt getoond (zonder kadertje).

Hou de huidige Web Site geopend in Visual Studio
Kies File > New Project > Visual c# > Windows > Windows Control Library
Name: MijnControls
Solution: Add to Solution
Kies een geschikte locatie
Add > new item... > Web Custom Control: TextBoxSpeciaal.cs
Verwijder WebCustomControl1.cs

TextBoxSpeciaal.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MijnControls
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:TextBoxSpeciaal runat=server>")]
    public class TextBoxSpeciaal : TextBox
    {
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]

        public string LabelCSS
        {
            get { return ((string)ViewState["LabelCSS"]); }
            set { ViewState["LabelCSS"] = value; }
        }

        protected override void Render(HtmlTextWriter output)
        {
            if (!this.Enabled)
            {
                //toon enkel de tekst
                output.Write(@"{1}", this.LabelCSS, this.Text);

            }
            else
            {
                //render volgens de normale manier
                base.Render(output);
            }
        }
    }
}

Onze Control erft over van de TextBox-control, standaard wordt overgeërfd van WebControl.
Merk ook op dat een aantal attributen gespecifiëerd staan boven de klassedeclaratie:
- DefaultProperty: eigenschap die gevuld wordt wanneer iemand een waarde toekent aan de component in plaats van aan een eigenschap van de component
- ToolBoxData: tag die wordt gegenereerd wanneer we de component op een Web Form slepen.
We overriden in deze klasse de methode Render uit de basisklasse. In de methode Render geef je aan welke HTML-output door de control moet worden gegenereerd.
Standaard wordt in een Web Custom Control de methode RenderContents overridden uit de klasse WebControl, dit hebben we hier niet nodig.
We hebben een eigenschap LabelCSS voorzien waarmee we de CSS-klasse kunnen instellen wanneer de control niet enabled is. De waarde van deze eigenschap wordt onthouden in de ViewState.
Zorg ervoor dat een dll-gecompileerd wordt voor de klasse TxtSpeciaal: Build > Build MijnControls
Maak in de Web Site een nieuwe Web Form: GebruikTextBoxSpeciaal.aspx
Leg in de Web Site een referentie naar MijnControls.dll uit de Bin>Debug map van de ControlLibrary MijnControls
Sleep uit de Toolbox een TextBoxSpeciaal TxtTest op de Web Form
Zorg ook voor een Button: BtnToggleEnabled

GebruikTextBoxSpeciaal.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GebruikTextBoxSpeciaal.aspx.cs" Inherits="GebruikTextBoxSpeciaal" %>

<%@ Register Assembly="MijnControls" Namespace="MijnControls" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .rood {background-color:red;color:yellow}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <cc1:textboxspeciaal id="TxtTest" runat="server" LabelCSS="rood"></cc1:textboxspeciaal>
        <br />
        <asp:Button ID="BtnToggleEnabled" runat="server" Text="Disable" OnClick="BtnToggleEnabled_Click" /></div>
    </form>
</body>
</html>

GebruikTextBoxSpeciaal.aspx.cs
...
protected void BtnToggleEnabled_Click(object sender, EventArgs e)
{
    TxtTest.Enabled = !TxtTest.Enabled;
    if (TxtTest.Enabled) BtnToggleEnabled.Text = "Disable";
    else BtnToggleEnabled.Text = "Enable";
}
...

CustomBox

We maken nog een Custom Control: een uitklapbare box met titel en inhoud.
De pagina houdt met cookies bij wat de status van elke box is.

Voeg een Web Custom Control toe aan de library MijnControls: CustomBox.cs
Plaats een figuur met dezelfde naam als de klasse in de rootfolder van de Control Library: CustomBox.bmp
Vraag de eigenschappen van de figuur op en stel in: Build Action: embedded resource
Download de nodige figuren en plaats ze in een submap images van het project
We maken vijf private variabelen en hun eigenschappen aan:
- inhoud: inhoud van de box - string
- titel: titel van de box - string
- breedte: breedte van de box - Unit
- open: moet de box standaard zichtbaar zijn ? - bool
- volgnr: eigen volgnr van de control
We declareren een statische variabele aantal, zodat we weten hoeveel CustomBoxen geplaatst werden, dit aantal schrijven we voor elke box weg in de instantievariabele volgnr, zodoende heeft elke box zijn eigen volgnr
We maken vier methoden die een StringBuilder retourneren. Door een StringBuilder te gebruiken worden grotere strings intern sneller verwerkt. We overriden de methode Render om de HTML-output van de control op te geven.
- MaakCode: stijldefinities en javascript-functies voor onze CustomBoxen
  - CSS stijlblok tussen style-tags
  - Javascript codeblok stussen script-tags
  Deze code wordt slechts 1 keer op de pagina geplaatst, voor de box met volgnr 1.
- MaakKop: maakt een titeldeel voor een box aan.
- MaakInhoud: maakt een raamwerk voor de inhoud van de box aan, hierin wordt later de eigenschap Inhoud in gedumpt
- MaakVoet: zorgt voor een correct afsluiting van de HTML-tags
- Render: override de Render methode van een control
  - Leest de statuswaarde voor de box uit een cookie en vult de eigenschap Open met de waarde true of false
  - zorgt ervoor dat de Kop, de Inhoud en de Voet op de pagina worden geplaatst

CustomBox.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

namespace MijnControls
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:CustomBox runat=server></{0}:CustomBox>")]

    public class CustomBox : WebControl
    {
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]

        #region "vars en properties"

        private string inhoud;
        private string titel;
        private static Unit breedte;
        private bool open;

        // eigen volgnr van de control
        private int volgnr;

        // aantal aangemaakte CustomBoxen
        private static int aantal = 0;

        public CustomBox()
        {
            aantal++;
            volgnr = aantal;
        }
        /// De tekst die in de box moet verschijnen,
        /// kan zichtbaar en onzichtbaar worden gemaakt
        public string Inhoud
        {
            get { return inhoud; }
            set { inhoud = value; }
        }

        /// De titel voor een box,
        /// wordt steeds getoond
        public string Titel
        {
            get { return titel; }
            set { titel = value; }
        }

        /// Aangeven met een boolean of de inhoud moet worden weergegeven
        /// bij openen van de pagina
        public bool Open
        {
            get { return open; }
            set { open = value; }
        }

        /// Breedte van de CustomBox
        public override Unit Width
        {
            get { return breedte; }
            set { breedte = value; }
        }

        /// Breedte van de CustomBox
        private int Aantal
        {
            get { return aantal; }
            set { aantal = value; }
        }

        #endregion

        #region "methoden"

        private StringBuilder MaakCode()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("");

            if (volgnr == 1)
            {
                //stijlblok toevoegen
                sb.Append("<style> "
                    + "BODY { margin: 10px 10px 10px 10px; }"
                    + ".CustomBox { width: " + Width + "; border-width: 0px; }"
                    + ".CustomBox .Hoofd { height: 25px; background-color: #CCCCCC; "
                        + "color: #6699CC; font-weight: bold; font-size: x-small; "
                        + "font-family: verdana, arial, helvetica; }"
                    + ".CustomBox .Hoofd TD { border-top: solid 1px #6699CC; "
                        + "border-bottom: solid 1px #6699CC; }"
                    + ".CustomBox .Hoofd .Hoekcel { border-top: solid 0px #6699CC; }"
                    + ".CustomBox .Inhoud {  color: Black; font-size: x-small; "
                        + "font-family: verdana, arial, helvetica; }"
                    + ".CustomBox .Inhoud TD { border-bottom: solid 1px #6699CC; "
                        + "border-left: solid 1px #6699CC; border-right: solid 1px #6699CC; }"
                    + ".HandCursor { cursor: hand; }"
                    + ".Text {  }"
                    + "</style>");

                // Javascript functies toevoegen
                sb.Append("<script language=javascript>"
                    + "function Boxinhoud( obj, cbid )"
                    + "{"
                        + "var inhoudBox = document.getElementById('Inhoud' +cbid );"
                        + "var datum = new Date();"
                        + "datum.setDate(datum.getDate()+5);"

                        + "if ( inhoudBox.style.display == 'none' )"
                            + "{	"
                                + "inhoudBox.style.display = 'block';"
                                + "obj.src = 'images/CustomBox_sluit.gif';"
                                + "setCookie(cbid,'true',datum);"
                            + "}else{"
                                + "inhoudBox.style.display = 'none';"
                                + "obj.src = 'images/CustomBox_open.gif';"
                                + "setCookie(cbid,'false',datum);"
                            + "}"
                        + "}"

                    + "function setCookie(name, value, expires)"
                    + "{"
                        + "document.cookie= name + '=' + escape(value) +"
                        + "((expires) ? '; expires=' + expires.toGMTString() : '')"
                    + "}"
                    + "</script>");
            }
            return sb;
        }

        private StringBuilder MaakKop(string breedte, string titel)
        {
            
            StringBuilder sb = new StringBuilder();
            sb.Append("<table id='" + this.ID + "'class='CustomBox' cellpadding='0' cellspacing='0'>"
                + "<tr class='Hoofd'>"
                    + "<td width='1%' align='left' class='Hoekcel'>"
                        + "<img src='images/CustomBox_linkerhoek.gif'>"
                    + "</td>"
                    + "<td width='97%'>"
                        + "<span>" + Titel + " </span>"
                    + "</td>"
                    + "<td width='1%'>"
                        + "<img src='images/CustomBox_"
                        + (Open ? "sluit.gif" : "open.gif")
                        + "' class='HandCursor' onclick='Boxinhoud( this, \"" + this.ID + "\" )'>"
                    + "</td>"
                    + "<td width='1%' align='right' class='Hoekcel'>"
                        + "<img src='images/CustomBox_rechterhoek.gif'>"
                    + "</td>"
                + "</tr>"
                + "</table>");
            return sb;
                
        }

        private StringBuilder MaakInhoud()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<table id='Inhoud" +this.ID +"' class='CustomBox' "
                        +"cellpadding='0' cellspacing='0' style='display: "
                        + (Open ? "block" : "none") + "';>"
                            + "<tr class='Inhoud'>"
                                + "<td><!-- Inhoud Begin -->");
            return sb;
        }

        private StringBuilder MaakVoet()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<!-- Inhoud Einde --></td></tr></table>");
            return sb;
        }

        protected override void Render(HtmlTextWriter output)
        {
            for (int i = 0; i < Page.Request.Cookies.Count; i++)
            {
                HttpCookie cookie = Page.Request.Cookies[i];

                if (cookie.Name.Equals(this.ID) == true)
                {
                    Open = Convert.ToBoolean(cookie.Value);
                }
            }

            output.Write(
                  MaakCode().ToString() 
                + MaakKop(Width.ToString(), Titel).ToString()
                + MaakInhoud().ToString()
                + Inhoud
                + MaakVoet().ToString());
        }

        public override void Dispose()
        {
            Aantal = 0;
            base.Dispose();
        }
        #endregion
    }
}

Maak in je Web Site een nieuwe Web Form: GebruikCustomBox
Leg een referentie naar CustomBox.dll.
Kopiëer de submap images in de Web Site
Sleep een CustomBox op en Web Form.
Maak een toepassing waarin je CustomBoxen gebruikt, stel de eigenschappen Titel, Inhoud, Open en Width in.

Opmerking: zoals je merkt moet je ervoor zorgen dat de figuren beschikbaar zijn in je Web Site. Het is daardoor meestal handig ervoor te zorgen dat Custom Controls "self-contained" zijn en geen externe bestanden nodig hebben. Maar ja, het is eens leuk iets met figuurtjes te doen :)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GebruikCustomBox.aspx.cs" Inherits="GebruikCustomBox" %>

<%@ Register Assembly="MijnControls" Namespace="MijnControls" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h2>Inhoud</h2>
			<table cellspacing="10" border="0">
				<tr>
					<td valign="top"><cc1:CustomBox id="CustomBox1" runat="server" Width="150px" Inhoud="Leve ASP.net<br>Volg ASP.net aan het <a href='http://www.ivobrugge.be/cursusweb'>IVO Brugge</a>"
							titel="ASP.net" Open="True"></cc1:CustomBox></td>
					<td valign="top"><cc1:CustomBox id="CustomBox2" runat="server" Width="150px" Inhoud="Leuk hoor, werken met Custom Controls"
							titel="Control"></cc1:CustomBox>
                         
						<p></p>
					</td>
				</tr>
				<tr>
					<td valign="top"><cc1:CustomBox id="Custombox3" runat="server" Width="150px" Inhoud="Leve Java<br>Volg Java aan het <a href='http://www.ivobrugge.be/cursusweb'>IVO Brugge</a>"
							titel="Java" Open="True"></cc1:CustomBox></td>
					<td valign="top"><cc1:CustomBox id="Custombox4" runat="server" Width="150px" Inhoud="Dit is een server-side Custom Box"
							titel="<span style='color:red'>Belangrijk</span>" Open="true"></cc1:CustomBox>
						<p></p>
					</td>
				</tr>
			</table>

    </div>
        <br />
        <asp:Button ID="Button1" runat="server" Text="PostBack" />
       
    </form>
</body>
</html>

Composite Controls

Wat zijn Composite Controls

Composite Controls of samengestelde controls stellen je in staat meerdere controls te bundelen in één gecompileerde Custom control.

Hiertoe maak je een klasse voor je Control met volgende kenmerken:

Override de methode CreateChildControls van de klasse Control om instanties te maken van de deelcontrols en ze toe te voegen aan de collectie Controls.
Implementeer de interface System.Web.UI.INamingContainer die ervoor zorgt dat de deelcontrols intern unieke namen krijgen toegewezen.

Een Composite Control maken

Met VS.net kan je als volgt een Composite Control maken:

Nieuw project: new User Control Library: MaakCompositeControl
sluit en verwijder de automatisch aangemaakte klasse WebCustomControl
add new item > UI > Web Custom Control > TekstControl

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Drawing; // voor de bitmap

namespace MaakCompositeControl
{
    /// <summary>
    /// Summary description for TekstControl.
    /// </summary>
    [DefaultProperty("Text"), 
    ToolboxData("<{0}:TekstControl runat=server></{0}:TekstControl>"),
    ToolboxBitmap(@"D:\William\WWW\Cursusweb\ASPNET\h7\MaakCompositeControl\TekstControl.bmp")
    ]
    public class TekstControl : System.Web.UI.WebControls.WebControl, INamingContainer
    {
	
        [Bindable(true), 
        Category("Appearance"), 
        DefaultValue("")] 
		
        protected override void CreateChildControls()
        {
            LiteralControl lc = new LiteralControl("<h1>ASP.net Composite Control</h1>");
            Controls.Add(lc);

            TextBox txt = new TextBox();
            Controls.Add(txt);
        }

    }
}

Je kan met VS.net ook een bitmap aanmaken voor later gebruik in de toolbox:

add new item > Resources > Bitmap file
Via de eigenschappen stel de hoogte en breedte in op 16px
Maak een tekeningtje zoals dit:
Geef de naam TekstControl.bmp
Pas het pad aan in de klasse TekstControl zodat je bmp-file gevonden wordt

Je kan nu een ASP.net Web Application maken, de component op de toolbox plaatsen en gebruiken in een WebForm:
Het resultaat in HTML-weergave:

<%@ Register TagPrefix="cc1" Namespace="MaakCompositeControl" Assembly="MaakCompositeControl" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="GebruikCompositeControl.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>WebForm1</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
	</HEAD>
	<body>
		<form id="Form1" method="post" runat="server">
			<cc1:TekstControl id="TekstControl1" runat="server"></cc1:TekstControl>
		</form>
	</body>
</HTML>

We kunnen vanuit een Composite control ook eigenschappen gebruiken. Hiermee kunnen we bijvoorbeeld eigenschappen van de deelcontrols aan de buitenwereld kenbaar maken.

We moeten er bij het aanspreken van de eigenschappen van de individuele controls wel zeker zijn dat ze reeds geplaatst werden in de composite control. We kunnen er voor zorgen dat de methode CreateChildControls zeker uitgevoerd is met de methode EnsureChildControls.

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Drawing;

namespace MaakCompositeControl
{
    /// <summary>
    /// Summary description for TabelControl.
    /// </summary>
    [DefaultProperty("Text"), 
    ToolboxData("<{0}:TekstControl runat=server></{0}:TekstControl>"),
    ToolboxBitmap(@"D:\William\WWW\Cursusweb\ASPNET\h7\MaakCompositeControl\TekstControl.bmp")
    ]
    public class TekstControl : System.Web.UI.WebControls.WebControl, INamingContainer 
    {
          
        private string titel;
		private TextBox txt;

        public string Titel
        {
            get { return titel; }
            set { titel = value; }
        }

        public string Tekst
        {
            get 
            {
                EnsureChildControls();
                return txt.Text; 
            }
            set 
            { 
                EnsureChildControls();
                txt.Text = value;
            }
        }

              
	
        [Bindable(true), 
        Category("Appearance"), 
        DefaultValue("")] 
		
        protected override void CreateChildControls()
        {
            LiteralControl lc = new LiteralControl("<h1>" +Titel +"</h1>");
            Controls.Add(lc);

            txt = new TextBox();
            Controls.Add(txt);
        }

    }
}

In een Web Application kunnen we nu de eigenschappen voor de Composite Control instellen:

<cc1:TekstControl id="TekstControl1" titel="Hoera!" tekst="invulveld" runat="server"></cc1:TekstControl>

ASP.net : User Controls

User Controls

Wat zijn User Controls

User Controls aanmaken: Kalender.ascx

Eigenschappen definiëren - Inloggen.ascx

Custom Controls

Custom Controls

TextBoxSpeciaal

CustomBox

Composite Controls

Wat zijn Composite Controls

Een Composite Control maken

Oefeningen