User Controls
1. Inleiding
2. UserControls maken
3. Rechtstreeks inladen
4. Dynamisch inladen
5. Slot/eindwoord
1. Inleiding
Wat zijn UserControls? UserControls zijn zelfgemaakte Controls door middel van WebControls. Web Controls zijn vaste controls van ASP.NET, denk maar aan "TextBox", "Label", "DropDownList", "Button", enz...
Bij het maken van UC gebruik je de standaard controls en kan je er ook een eigen opmaak aan geven. De UserControl kan je in je ASP.NET webpagina's toevoegen en werkt dan als één geheel.
Het voordeel van het gebruik van een UserControl is dat je ze zoveel kan gebruiken en herbruiken als je wilt. Je kan bijvoorbeeld een formulier hebben dat in één website meerdere malen gebruikt wordt.
In plaats van elke keer opnieuw het formulier te schrijven, laadt je gewoon de UserControl op je pagina.
Een UserControl maken trekt redelijk hard op een gewone .aspx pagina als het gaat om het gebruik van WebControls en opmaak. Ook kan je code toevoegen aan een UserControl
Maar, er zijn enkele verschillen:
- UserControls hebben als extensie .ascx en niet .aspx
- Ze kunnen niet functioneren op zichzelf, ze moeten ingeladen worden op een .aspx-pagina
- Je kan alle HTML gebruiken behalve deze elementen behalve form, html en body, omdat deze in de pagina (moeten) zitten waar de UserControl ingeladen wordt
In deze tutorial leg ik uit hoe je de UserControls kan aanmaken, hoe je ze rechtstreeks op een pagina toevoegt en hoe je ze dynamisch toevoegt.
 top
2. UserControls maken
Als je Visual Studio hebt geopend en je hebt een openstaand project (Website, geen Form), kan je het volgende doen:
File -> Add new item... -> User Control. Je geeft de control een naam en er staat al standaard een stukje code. Je kan ook gewoon vanuit VS een nieuw
bestand aanmaken en dan voor User Control kiezen. Als je wilt kan je ze evengoed in kladblok aanmaken, ze kunnen toch pas bekeken worden in een bestaande .aspx-pagina.
Wat je meteen zou moeten opvallen is dat er niet 'Page' staat, maar 'Control'. Ik denk dat wel duidelijk is waarom het niet 'Page' is!
In dit voorbeeld maken we een login-control aan met validatie op de invoer (enkel tegen lege invoer). In ASP.NET bestaat deze al, maar nu maken we deze zelf.
Het is een gemakkelijk voorbeeld, en een login-control kan vaak gebruikt worden.
We beginnen dus met een formuliertje te maken met daarin de nodige WebControls, namelijk:
- 2x TextBox (naam en paswoord)
- 2x RequiredFieldValidator (één voor elke TextBox, meer over validaties in .NET: KLIK)
- 3x Label (twee voor bij de TextBoxen en één voor eventuele meldingen)
- 1x Button (aanamelen)
De opmaak van je formulier kies je zelf natuurlijk, mijn control (login_control.ascx) ziet er nu zo uit:
<% @ Control Language="C#" CodeFile="login_control.ascx" ClassName="login_control" Inherits="login"%>
<asp:Table ID="tabel_inlog" runat="server">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="label_een" runat="server" Text="Naam: " AssociatedControlID="login_naam" />
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="login_naam" runat="server" />
<asp:RequiredFieldValidator ID="rfv_een" runat="server" ControlToValidate="login_naam" ErrorMessage="*" Display="Static" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="label_twee" runat="server" Text="Paswoord: " AssociatedControlID="login_paswoord" />
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="login_paswoord" runat="server" TextMode="Password" />
<asp:RequiredFieldValidator ID="rfv_twee" runat="server" ControlToValidate="login_paswoord" ErrorMessage="*" Display="Static" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell ColumnSpan="2" HorizontalAlign="Left">
<asp:Button ID="login_knop" runat="server" Text="Inloggen" OnClick="login_Click" />
<br />
<asp:Label ID="meldingen" runat="server" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
Nu moeten we er nog wat code achter steken om het te laten werken. De code zit in een apart bestand, namelijk 'login_control.ascx.cs'.
Als je de control hebt opgeslagen als bvb. inloggen.ascx, dan is de naam van de codefile 'inloggen.ascx.cs'.
Je kan natuurlijk ook UserControls maken met VB.NET. De opmaak is hetzelfde, alleen gebruik je in de codefile VB.NET en deze file heeft als extensie .vb!
Maar goed, wat komt er nu?
Als de invoer correct is (er moet iets ingevuld zijn) gaan we controleren of de ingevoerde naam overeenkomt met het ingevoerde paswoord..
Normaal gezien doen we dit door communicatie met een database. In dit voorbeeld gebruiken we gewoon als naam "titjes" en als paswoord "12345" voor de eenvoudigheid.
We maken een event aan voor onze knop, met als naam hetgeen we bij "OnClick" hebben gezet als attribuut van de Button.
Vervolgens controleren we of de naam en het paswoord juist is, als het juist is plaatsen we een cookie, anders geven we een foutmelding. Voor de mensen die VB willen, ik heb de code er ook in VB bijgezet.
Vergeet dan wel niet dat de codefile dan .ascx.vb wordt en dat je dan als "Language" VB opgeeft in plaats an C#!
| C# |
VB |
string naam, paswoord;
protected void login_Click(object sender, EventArgs e)
{
naam = Server.HtmlEncode(login_naam.Text);
paswoord = Server.HtmlEncode(login_paswoord.Text);
if (naam == "titjes" && paswoord == "12345")
{
HttpCookie mijn_cookie = new HttpCookie("gebruiker", naam);
mijn_cookie.Expires = DateTime.Now.AddDays(1);
Response.Cookies.Add(mijn_cookie);
Response.redirect("index.aspx");
}
else
{
meldingen.Text = "Foute invoer, probeer opnieuw!"
}
}
|
Dim naam, paswoord As String
Sub login_Click(ByVal Sender As System.Object, ByVal e As System.EventArgs)
naam = Server.HtmlEncode(login_naam.Text)
paswoord = Server.HtmlEncode(login_paswoord.Text)
If naam = "titjes" And paswoord = "12345" Then
Dim mijn_cookie As HttpCookie
mijn_cookie = New HttpCookie("gebruiker", naam)
mijn_cookie.Expires = DateTime.Now.AddDays(1)
Response.Cookies.Add(mijn_cookie)
Response.Redirect("index.aspx")
Else
meldingen.Text = "Foute invoer, probeer opnieuw!"
End If
End Sub
|
Dit stukje code plaats je onder het Page_Load-event dat er al standaard staat. Sla alles op en de User Control is klaar!
top
3. Rechtstreeks inladen
Nu onze UserControl af is moeten we hem nog kunnen gebruiken. Maak een nieuwe standaard .aspx-pagina aan en ga met je cursor onder deze regel staan:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
Daar zet je dan deze regel (uitleg volgt):
<%@ Register TagPrefix="asp" TagName="inlog_control" Src="~/login_control.ascx"%>
"Register" wil zeggen dat je iets gaat, zoals wel duidelijk is, registreren op de .aspx-pagina, zodat de pagina weet dat er een UserControl zal worden ingeladen.
"TagPrefix" is het prefix van de Control, van alle standaard WebControls is dit "asp", ik heb dit hiet hetzelfde gelaten, maar je mag er ook iets anders zetten.
"TagName" is de naam van je control, deze moet je volledig zelf kiezen. MAAR: als je als prefix "asp" hebt gekozen kan je best niet als naam "login" gebruiken want de control "<asp:Login ..." bestaat al!!!
"Src" klinkt wel duidelijk, dit is de plaats waar de pagina de control kan vinden.
Zo, onze UserControl is "geregistreerd", nu moeten we hem enkel nog op de pagina zetten. Stel we hebben een pagina met een titel en voor de rest alleen onze login-control.
Dan plaatsen we onze control net zoals alle andere WebControls: prefix en naam en dan een ID geven:
<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="highlight.aspx.cs" Inherits="_Default"%>
<!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>.: UserControls:.</title>
</head>
<body>
<form id="form_een" runat="server">
<div style="text-align:center">
<br />
<div style="text-decoration:underline; font-weight:bold">
Inoggen met een UserControl
</div>
<br />
<asp:inlog_control ID="login_een" runat="server" />
</div>
</form>
</body>
</html>
top
4. Dynamisch inladen
Je kan behalve echt de Control al te registreren op je .aspx-pagina, hem ook dynamisch inladen (via code).
We declareren een variabele, niet als string of integer, maar als de naam van onze login-control.
De waarde hiervan is het resultaat van een Casting. We laden de Control (login_control) in onze code en "casten" deze naar de variabele die we hebben opgegeven.
Dit klinkt allemaal een beetje ingewikkeld, maar als je de code ziet wordt het wel duidelijk.
Als je met een Project (Website) bezig bent in Visual Studio is dit gemakkelijk want de instance krijgt een kleurtje en zo weet je dat je juist bent.
We geven dan onze dynamisch aangemaakte control een ID en plaatsen hem op onze pagina. Ik zal een voorbeeld in C# en VB geven maar het zal dan niet met CodeFiles zijn,
De code zit in dezelfde pagina als dat van het formulier (.aspx-pagina).
| C# |
VB |
<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="highlight.aspx.cs" Inherits="_Default"%>
<!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>.: UserControls:.</title>
</head>
<script language="C#">
protected void Page_Load(object sender, EventArgs e)
{
login_control lc = (login_control)Page.LoadControl("login_control.ascx");
lc.ID = "login_een";
cel_een.Controls.Add(lc);
}
</script>
<body>
<form id="form_een" runat="server">
<asp:Table ID="tabel_een" runat="server>
<asp:TableRow>
<asp:TableCell ID="cel_een">
</asp:TableRow>
</asp:Table>
</form>
</body>
</html>
|
<%@ Page Language="VB" AutoEventWireup="true" ValidateRequest="false" CodeFile="highlight.aspx.cs" Inherits="_Default"%>
<!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>.: UserControls:.</title>
</head>
<script language="VB">
Sub Page_Load (ByVal Sender As System.Object, ByVal e As System.EventArgs)
Dim lc As login_control = Page.LoadControl("login_control.ascx")
lc.Id = "login_een"
cel_een.Controls.Add(lc)
End Sub
</script>
<body>
<form id="form_een" runat="server">
<asp:Table ID="tabel_een" runat="server>
<asp:TableRow>
<asp:TableCell ID="cel_een">
</asp:TableRow>
</asp:Table>
</form>
</body>
</html>
|
top
5. Slot/eindwoord
Hierbij zijn we bij het einde van deze tutorial. Het is in het begin niet gemakkelijk en het is wat aanpassen met wat waar hoort.
Mar alles is denk ik duidelijk genoeg uitgelegd en met code genoeg, zodat je met UserControls aan de slag kan. Het gebruik ervan biedt
oneindige mogelijkheden want je maakt natuurlijk de Control die jij wilt! Ik hoop dat ik jullie weer een stukje heb kunnen bijbrengen
uit de grote interessante wereld van .NET!
Als er vragen/opmerkingen zijn of als er zijn dingen die je niet begrijpt, laat me dan gerust iets weten via een reactie of PM!
Voor de leden: stem alstublieft, zo weet ik wat jullie er van vinden en wat er nog beter kan!
|
