De reden voor deze extra set controls is dat HTML-controls veelal attributen ondersteunen met verwarrende namen : het size-attribuut geeft je bijvoorbeeld in een listbox het aantal zichtbare rijen (onder elkaar), in textbox stelt dit attribuut de breedte in. Van een textarea wordt de breedte dan weer aangegeven met het rows-attribuut. Je merkt, een heel chaotische naamgeving van attributen.

Met de Web Form Controls beschik je over een set server-side controls die consequent zijn in het gebruik van attributen. Deze controls worden bij uitvoer naar de browser vertaald in de respectievelijke HTML-elementen.

Toepassing

Wij werken in VS 2005 met de codebehind-techniek, een manier om de opmaakcode (plaatsing van de elementen) en logische code van elkaar te scheiden. We maken een kleine toepassing ter illustratie:

• Kies File > new > Web Site
• Kies een ASP.Net Web Site
• Geef als location: file system: .../H5 (map voor hoofdstuk 5)
• Rechtsklik Default.aspx en hernoem tot KlikForm.aspx
• Plaats vanuit de toolbox een button op de pagina:
  • Kies eigenschappen (F4)
  • ID: CmdToonBericht, Text: Klik me
• Plaats vanuit de toolbox een label op de pagina:
  • Kies eigenschappen (F4)
  • ID: LblKlik, BorderStyle: solid; BorderWidth: 1px
• Bekijk de source:
  • het label werd een asp:Label
  • de knop werd een een asp:Button
  • De eigenschappen die je hebt ingesteld vind je terug als attributen in de respectievelijke tag
• Dubbelklik de knop
  • Je komt terecht in een ander bestand: KlikForm.aspx.cs
    Dit is de codebehind-file voor het bestand KlikForm.aspx: in deze file zal alle programmacode voor de pagina komen te staan.
  • je kan nu code schrijven in de routine CmdToonBericht_Click:

    	LblKlik.Text = "Er werd geklikt !";
    	

• Voer de toepassing uit.
• Vergeet niet de broncode van de resultatenpagina eens te bekijken, alle onbestaande HTML-attributen zijn verdwenen en werden ingewisseld voor standaard HTML/CSS-eigenschappen.

CodeBehind

Het is belangrijk in te zien hoe de codebehind-techniek werkt:

Het bestand KlikForm.aspx.cs bevat een klasse _Default, deze klasse erft over van System.Web.UI.Page: de basisklasse voor elke asp.net pagina. De klasse _Default bevat dus door overerving alle methoden en eigenschappen van de klasse Page.

Sinds C# 2.0 wordt gewerkt met een gedeeltelijke klassen op partial classes: een manier om een klasse te splitsen over verschillende bestanden. Concreet zal het .Net FrameWork bij het uitvoeren van een pagina een klasse genereren die objectreferenties bevat naar alle objecten die we op een pagina KlikForm.aspx hebben geplaatst (in het eerste voorbeeld een Button en een Label). Deze klasse wordt samengevoegd met onze eigen CodeBehind-klasse _Default in KlikFom.aspx.cs.
Vandaar dat we in de CodeBehind zonder probleem kunnen verwijzen naar objecten van de webpagina, als staan deze objecten er niet expliciet gedeclareerd.

Wanneer je werkt met de Web Form Controls, dan zal je merken dat deze algemeen in de code worden weergegven door een tag die start met asp:.

Er zijn heel wat Web Form Controls. Wat je zeker moet inzien is dat de browser deze tags niet kent. Deze tags dienen op de server verwerkt te worden en te worden omgezet in correcte HTML-tags.

Op deze manier zullen wij verderop in de cursus onze eigen controls maken: we kiezen een eigen naam voor de tag en leren de server hoe de control moet worden omgezet in HTML/javascript - code.

Elk van deze controls heeft tal van eigenschappen, het is niet de bedoeling in deze cursus om elke control gedetailleerd te beschrijven. Het is wel algemeen zo dat de eigenschappen van een control ingesteld kunnen worden via het eigenschappenvenster (F4), via de source-code, maar ook runtime kunnen aangepast worden in methodes in een codebehind file.

Voorbeeldtoepassing: afmeting en kleur van een Panel veranderen

Maak een toepassing waarbij je met behulp van twee knoppen een divisie breder kan maken en de kleur ervan kan veranderen.

Oplossing: in een nieuwe Web Site plaats je volgende controls op de pagina:

• Een Panel (ID: Paneel - BorderStyle: Solid - BorderWidth: 1px)
  Via de 'design mode' verander je de tekst in het Panel in "Ik ben een paneel"
• Een Button (ID: CmdBreder - Text: Maak Breder)
• Een Button (ID: CmdKleur - Text: Andere Kleur)
• Een HiddenField (ID: HFteller - Value: 0 )

Zorg voor de volgende code in de CodeBehind-file:

...
using System.Drawing;
...
private void CmdBreder_Click(object sender, System.EventArgs e)
{
			//Paneel breder maken
			Paneel.Width = Unit.Pixel((int)Paneel.Width.Value + 5);
}

private void CmdKleur_Click(object sender, System.EventArgs e)
{
	//definieer de verschillende kleuren
	string[] kleuren = { "red", "blue", "black", "pink", "white" };

	//lees de huidige waarde van de teller (verborgen formulierveld)
	int teller = Convert.ToInt32(HFteller.Value);

	//teller ophogen, indien te hoog weer op nul
	if (++teller >= kleuren.Length) teller = 0;

	//Paneel instellen op juist kleur
	Paneel.BackColor = Color.FromName(kleuren[teller]);

	//Tellerwaarde wegschrijven in verborgen formulierveld
	HFteller.Value = teller.ToString();
}

Belangrijk is hierbij de techniek met een verborgen veld om de waarde van de teller te bewaren. Met een gewone variabele kan je geen informatie tussen verschillende pagina-aanvragen bewaren: http is stateless.

We zullen later zien dat er hiervoor wel nog andere technieken bestaan dan het werken met verborgen velden.

Een belangrijke opmerking hierbij: deze toepassing leent er zich in principe beter toe om client-side met bijvoorbeeld javascript te worden opgelost. Het is belangrijk dat je goed inziet dat telkens wanneer je in deze toepassing de breedte of de kleur van het Paneel wijzigt, er een repost naar de server gebeurt, dit is het PostBack-principe van ASP.net !

AutoPostBack.aspx bevat:

• CheckBox (ID:CB - AutoPostBack: true - Text:Aankruisvakje)
• RadioButton (ID:RB1 - AutoPostBack: true - Text: Radio1 - GroupName: radio)
• RadioButton (ID:RB12- AutoPostBack: true - Text: Radio2 - GroupName: radio)
• Label (ID:L - Randstijl en kleurtjes kiezen)
• CB, RB1 en RB2: stel via de eigenschappen > events voor de eigenschap CheckedChanged in: MijnCode, we gebruiken een gemeenschappelijke eventroutine voor de drie controls.

AutoPostBack.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace AutoPostBack
{
	
	public partial class AutoPostBack : System.Web.UI.Page
	{
	
		private void Page_Load(object sender, System.EventArgs e)
		{

		}

		private void MijnCode(object sender, System.EventArgs e)
		{
			CheckBox c = (CheckBox)sender;
			L.Text += "Verandering vastgesteld in " +c.ID 
				+"<br>De waarde is nu: " +c.Checked
				+"<br>Tekstwaarde: " +c.Text +"<hr>";
		}

	}
}

Wanneer je de broncode opvraagt in de browser, dan merk je dat er client-side javascriptcode werd gegenereerd die ervoor zorgt dat formuliergegevens worden verstuurd wanneer de gebruiker een actie onderneemt.

Bij een repost naar de server worden de verborgen formuliervelden __EVENTTARGET en __EVENTARGUMENT naast __VIEWSTATE meegestuurd. Aan de hand van deze formuliervelden kan de server uitmaken welk control werd beïnvloed en welke server-side code moet worden uitgevoerd. In dit voorbeeld wordt bij het klikken (dus eigenlijk veranderen) van het aankruisvakje of een selectierondje de methode MijnCode uitgevoerd.

In deze routine typecasten we het eerste ontvangen argument van de klasse Object naar CheckBox: we zijn zeker dat het object dat de actie veroorzaakt tot deze klasse behoort (RadioButton erft over van CheckBox).

Een RadioButton is dus in feite afgeleid van een CheckBox in ASP.NET. Een RadioButton heeft een extra eigenschap : GroupName. Dit resulteert client-side in het name-attribuut voor de RadioButton. Gekoppelde radiobuttons (een groep waarin je maar eentje kan selecteren) geef je dus dezelfde waarde voor GroupName.

Merk op dat wanneer je op het reeds geselecteerde selectierondje klikt de pagina ook wordt teruggestuurd maar nu wordt MijnCode niet uitgevoerd

Overzicht

Achtergrond

Elke validatiecontrol heeft daar naast specifieke eigenschappen en methoden (en voor de CustomValidatorcontrol ook een event).

De input validation controls kunnen zowel client- als serverside controle op gegevens uitvoeren. Om client-side controle uit te voeren maken de formulierelementen gebruik van Javascript. De benodigde javascript-routines staan in een het bestand aspnet_client\system_web\versie_n\WebUIValidation.js.

Heb je dit bestand niet, dan kopiëer je de map aspnet_client uit \inetpub\wwwroot of gebruik je aspnet_regiis -c (bevindt zich in C:\WINDOWS\Microsoft.NET\Framework\versie_n) vanaf de command prompt om deze bestanden aan te maken.

Input Validation Controls Gebruiken

Validatie controleren

Validatie uitschakelen

Overzicht

Met deze server-side controls kan je lijsten genereren die veelal SELECT-elementen in HTML als resultaat geven. Er zijn echter heel krachtige List-Controls die een ander resultaat genereren, zoals het automatisch genereren van datatabellen.

Achtergrond

Elk van de afzonderlijke Controls vormt een nieuwe klasse met eventueel nieuwe properties en methodes.

Gebruik

In dit voorbeeld worden de Listbox, Dropdownlist en RadioButtonList samen gebruikt en wordt telkens getoond welke Control werd aangepast. Door de AutoPostBack-property telkens op true te zetten moeten we zelfs niet op een knop drukken.

Met VS.net kan je deze controls op een webpagina slepen en de inhoud bepalen via de eigenschap Items.
De items worden in de code vertaald in ListItem-Controls.

• Maak een toepassing met daarin de controls DropDownList1 (België, Nederland, Frankrijk), ListBox1 (Hond, Kat, Paard), RadioButtonList1 (Groen, Rood, Blauw) en een label lblVerander.
• Plaats voor de List Controls de eigenschap AutoPostBack op true.
• Voorzie een event-afhandelingsroutine die het label aanvult wanneer een verandering gebeurt - bij het event SelectedIndexChanged van de List Controls:

  private void Verander(object sender, System.EventArgs e)
  {
  	ListControl l = (ListControl)sender;
  	lblVerander.Text += "<p><b>Verandering in Control:</b>" 
  			+l.ID
  			+"<br>SelectedIndex: " +l.SelectedIndex
  			+"<br>Tekst: " +l.SelectedItem.Text
  			+"<br>Waarde: " +l.SelectedValue;
  }
  
  

• Voorzie ListBox2 (Jan, Piet, Joris, Corneel, Eric, Denise, Hedwige, Justine, Kim) met:
  • AutoPostBack op true
  • SelectionMode op multiple
• Voorzie een event-handler routine voor het afhandelen van een meervoudige selectie:

  private void VeranderMeerdere(object sender, System.EventArgs e)
  {
  	ListControl l = (ListControl)sender;
  	string tekst = "<p><b>Verandering in Control:</b>" +l.ID;
  	foreach(ListItem li in l.Items)
  	{
  		if(li.Selected) tekst += "<br>" +li.Text;
  	}
  	lblVerander.Text += tekst;
  }
  
  

  Voor een ListBox, DropDownList en RadioButtonList kan je een Input Validation Control voorzien, nu wordt de eigenschap SelectedItem.Value gecontroleerd.

  De Repeater, DataList en DataGrid komen later aan bod.