Programmeren in ASP.NET/Webformulieren

Wat is een webformulier?

Webformulieren zijn het hoofdonderdeel van ASP.NET.

Elk webformulier bevat een <form>-tag met een runat="server" attribuut:

<form id="formulier1" runat="server">

Webformulieren zijn in feite HTML-formulieren die uitgebreid zijn met alle mogelijk eigenschappen, methodes en events om een optimale controle te hebben vanuit een programma. Als je Visual Studio gebruikt, kan je formulierelementen gewoon op het formulier slepen, en vervolgens de code eenvoudig toevoegen.

Webformulieren werken zo dat bij het selecteren uit een lijst of bij het klikken op een knop automatisch server-side code uitgevoerd wordt. Dit gebeurt met zogenaamde postbacks.

Webformulieren bestaan uit twee delen: het HTML-gedeelte in een aspx-bestand (ook het markup-gedeelte genoemd), en de code achter het formulier.

Het doel van webformulieren

De nieuwe mogelijkheden in webformulieren zijn:

Volledige scheiding van HTML-markup en code
Een uitgebreide verzameling server-side controls die de browser kunnen herkennen en overeenkomstig de juiste HTML doorgeven
Minder code nodig doordat een deel van de code al in de controls verwerkt is.
Een programmeermodel gebaseerd op events
Programmeurs kunnen hun eigen controls maken met aangepaste functionaliteit. Deze controls kunnen ook beschikbaar gemaakt worden voor iedereen.

Een voorbeeld van een webformulier in Visual Web Developer

We maken hier een webformulier waarin de gebruiker zijn voornaam en familienaam invult; Daarna kan de gebruiker op de "Login"-knop klikken. De volledige naam verschijnt dan in een label onder de knop.

Om het Login-formulier te maken

Open Visual Studio en klik "New file..." in het "File"-menu.
Kies "Web Form" in de lijst
Kies de naam van de pagina bij "Name", bv. "login.aspx"
Klik OK om het formulier aan te maken

Nu zou je een webformulier genaamd "login.aspx moeten zien in het middelste venster.

Maak het formulier zoals hierboven door de titels in het formulier te typen, door de juiste web-server-controls erop te slepen, en de eigenschappen in te stellen volgens de tabel hieronder:

Tabel: Controls gebruikt in het Login-formulier:

Control	Soort	Property	Waarde
tbVoornaam	TextBox	Name	"tbVoornaam"
		Text	""
tbNaam	TextBox	Name	"tbNaam"
		Text	""
btnSubmit	Button	Name	"btnSubmit"
		Text	"Login"
lblVolledigeNaam	Label	Name	"lblVolledigeNaam"
		BorderStyle	"Insert"
		Text	""

Je kan de pagina nu al testen door ze op te vragen in je browser (druk F5). Je kan nu gegevens inbrengen, maar als je op "Login" klikt, gebeurt er nog niks.

Code aan de knop koppelen

Sluit het programma af door de browser te sluiten.
Zorg dat de pagina in design mode te zien is, en dubbelklik op de "Login"-knop. Een codevenster verschijnt, met de event procedure "btnSubmit" (als je dubbelklikt wordt het default event van de knop aangemaakt).
Vul deze methode in zodat ze er als volgt uitziet:

Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) 
	lblVolledigeNaam.Text = tbNaam.Text & ", " & tbVoornaam.Text
End Sub

Hier wordt de "Text"-eigenschap van zowel de tbNaam als de tbVoornaam invoervakken opgevraagd, en deze gegevens worden in de Label control geplaatst. De ganse pagina ziet er nu zo uit:

login.aspx

<%@ Page Language="VB" %>
<script runat="server">

    Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
            lblVolledigeNaam.Text = tbNaam.Text & ", " & tbVoornaam.Text
    End Sub

</script>
<html>
<head>
</head>
<body>
    <form runat="server">
        <p>
            Voornaam: 
            <asp:TextBox id="tbVoornaam" runat="server">Voornaam</asp:TextBox>
        </p>
        <p>
            Naam: 
            <asp:TextBox id="tbNaam" runat="server">Naam</asp:TextBox>
        </p>
        <p>
            <asp:Button id="btnSubmit" onclick="btnSubmit_Click" runat="server" 
				Text="Login"></asp:Button>
        </p>
        <p>
            <asp:Label id="lblVolledigeNaam" runat="server">Naam</asp:Label>
        </p>
    </form>
</body>
</html>

Nu kan je de pagina testen. Als je de pagina voor de eerste keer oproept, ziet de broncode er ongeveer zo uit:

<html>
<head>
</head>
<body>
  <form name="_ctl0" method="post" action="login.aspx" id="_ctl0">
	<input type="hidden" name="__VIEWSTATE" 
		value="dDwtMTMwMjU2NjUyMzs7PhIlntyfq+qht9mIdQSMSeZjf1zG" />
    <p>
         Voornaam: 
         <input name="tbVoornaam" type="text" value="Voornaam" id="tbVoornaam" />
    </p>
    <p>
         Naam: 
         <input name="tbNaam" type="text" value="Naam" id="tbNaam" />
    </p>
    <p>
         <input type="submit" name="btnSubmit" value="Login" id="btnSubmit" />
    </p>
    <p>
         <span id="lblVolledigeNaam">Naam</span>
    </p>
  </form>
</body>
</html>

Je merkt een aantal zaken:

de code is niet meer te zien
alle web-controls zijn omgezet in gewone HTML-elementen
het formulier heeft als action-attribuut de pagina zelf.
er is een verborgen invoerveld "__VIEWSTATE" met een ingewikkelde waarde. Dit veld wordt gebruikt om vroeger ingevulde waarden te bewaren tussen roundtrips (zie ook hoofdstuk 22).

Hoe werkt dit webformulier?

Wanneer een webformulier ingeladen wordt, zijn er een aantal events die opgeroepen worden in een bepaalde volgorde. Er zijn ook events die gebeuren bij bepaalde acties van de gebruiker. Bij een gewone ASP- of HTML-pagina wordt de pagina verwerkt op een lineaire manier, van boven naar beneden. Bij webformulieren is dat helemaal anders.

Tabel: Volgorde van events in een webformulier

Event	Uitleg
opvragen pagina	De gebruiker vraagt een pagina op
↓
code inladen	Wanneer een pagina opgevraagd wordt, zal een DLL (Dynamic Link Library) geladen worden die zowel de tags in de ASPX-pagina als de code in de pagina verwerkt. Indien deze DLL nog niet bestaat of indien ze ouder is dan de ASPX-pagina, dan wordt ze gecompileerd.De pagina wordt in een beginstaat gebracht zoals beschreven in de HTML-tags in het ASPX-bestand.
↓
Page_Preinit()	Hier kan je instellingen doen die moeten gebeuren nog voor Page_Init. Dit wordt gebruikt om bv. een thema via code in te stellen.
↓
Page_Init()	Als je wil kan je in je code het Page_Init() event verwerken om de begintoestand van de pagina verder in te stellen. Als de gebruiker nieuwe waarden ingegeven heeft, dan zijn die nog niet aanwezig op dit moment.
↓
toestand van de pagina herstellen	Indien de pagina informatie naar zichzelf gepost heeft, zal de staat van de pagina ook hersteld worden dankzij een mogelijke "viewstate" die werd bewaard. Als de gebruiker wijzigingen aangebracht heeft aan de toestand van de pagina, dan worden deze wijzigingen nu ook toegevoegd.
↓
Page_Load()	Vervolgens wordt het Page_Load()-event afgevuurd. Met dit event kan je testen of het de eerste keer is dat de pagina geladen wordt, anders werd de pagina verkregen door een postback van een gebruiker die een knop of een andere control aangeklikt heeft.Het kan zijn de je enige initialisatie wil doen als de pagina voor de eerste keer geladen wordt, bijvoorbeeld het koppelen van informatie aan sommige controls. Let op dat je hier de invoer van de gebruiker niet overschrijft.
↓
Control events	Control-events worden alleen verwerkt in het geval van postback. Eerst krijg je alle "change" events. Al deze events worden in de browser verzameld, en ze worden alleen uitgevoerd op het moment dat de pagina teruggestuurd wordt naar de server. Voorbeelden zijn het veranderen van tekst in een invoervak, of het maken van een selectie uit een lijst. Vervolgens wordt het control-event afgevuurd dat de postback veroorzaakte. Dit kan een klik op een knop zijn, of "autopostback" change events zoals het CheckedChanged event van een check box.
↓
Page_Prerender()	Dit event geeft je een laatste kans om nog iets aan de pagina te veranderen.
↓
Rendering	Dan wordt de pagina in HTML opgebouwd ("rendered"). Viewstate-informatie wordt toegevoegd in een verborgen veld op de pagina zodat ASP.NET alle informatie krijgt als de pagina opnieuw opgevraagd wordt met een postback. Code tussen <%...%> tags wordt hier ook uitgevoerd.
↓
Naar de client	De pagina wordt naar de browser van de client gestuurd.
↓
Page_Unload()	Er is nog een laatste pagina-event dat je code kan verwerken voor de pagina verdwijnt: Page_Unload(). Omdat de pagina al aangemaakt is, wordt dit event typisch gebruikt voor het opruimen of loggen (informatie op de server bijhouden over wat er gebeurd is).
↓
einde	Tenslotte wordt de klasse die de pagina vertegenwoordigt opgeruimd, en de pagina wordt uit het geheugen van de server gehaald.

Als je de ASPX-pagina of de code verandert, en de pagina wordt daarna weer opgevraagd dan wordt de dynamisch aangemaakte DLL die overeenstemt met de pagina opnieuw aangemaakt. Deze DLL wordt telkens na aanmaak op de schijf bewaard (meestal in de folder c:\Windows\Microsoft.NET\Framework\vx.x.xxxx\Temporary ASP.NET files).

Opmerkingen

Indien je alleen HTML-server-controls gebruikt in je formulier, dan mag je een action-attribuut toevoegen, om naar een nieuwe pagina te gaan als de gebruiker het formulier indient.
In dit geval hoeft het formulier soms ook niet het "runat=server" attribuut te hebben.
In het andere geval (als er dus ook web-controls zijn) zal de server geen rekening houden met het action-attribuut, het posten gebeurt altijd naar het webformulier zelf. Het "runat=server" attribuut is hier altijd vereist voor het formulier. Om de gebruiker door te sturen naar een andere pagina gebruik je dan de Response.Redirect() of Server.Transfer()-methode (zie verder).
In een formulier kan je de standaard focus instellen op een bepaalde control, dit is de control die initieel de toetsenbordinvoer krijgt van de gebruiker. Stel hiervoor de property DefaultFocus in van het formulier zelf (alleen ASP.NET 2.0)
Op een panel of formulier kan je ook de property DefaultButton instellen.

Round trip en postback

Een interactieve sessie met een gebruiker bestaat meestal uit de volgende stappen:

De gebruiker vraagt een webformulier op bij de server.
De webserver stuurt het formulier op.
De gebruiker geeft data in en dient het formulier in bij de server.
De server verwerkt het formulier, en stuurt het resultaat op naar de gebruiker.

In deze stappen wordt stap 3 de postback genoemd, terwijl stap 3 en 4 samen een round trip genoemd worden. Een round trip houdt dus een volledige reis over het netwerk naar de webserver en terug met het antwoord.

Om het onderscheid te kunnen maken tussen de eerste aanvraag en de postback aanvraag, kan de server gebruik maken van de IsPostBack eigenschap van het Page object. Deze eigenschap is alleen True bij postback. Bij de eerste aanvraag van een pagina is deze eigenschap False.

Je kan dit gebruiken als je bepaalde operaties alleen de eerste keer wil laten uitvoeren.

Oefeningen

Maak een pagina met 3 multiple-choice vragen. Na het invullen bereken je de score.
Maak het formulier uit de vorige oefening in het dubbel: éénmaal met HTML-controls en éénmaal met web-controls. Vergelijk.
Maak een pagina waar je 3 artikelen kan bestellen (met elk een invoervak voor de hoeveelheid). Bereken het totaalbedrag op dezelfde pagina (na het drukken op een knop).
Je verkoopt pizza's, die je aan huis bestelt. Maak een toepassing bestaande uit 4 pagina's:
1. De gebruiker vult het aantal in voor pizza's. Geef keuze tussen 3 soorten.
2. De gebruiker vult het aantal in voor drank. Geef keuze tussen 3 soorten drank.
3. De gebruiker geeft zijn naam en adres in.
4. Het resultaat toont een samenvatting van de bestelling en de totaalprijs.
Maak een pagina met een formulier om een adres in te vullen. Maak twee externe stylesheet met styles voor deze pagina (bijvoorbeeld "pastel" en "roodwit"). Zorg ervoor dat alle controls gebruik maken van de stylesheet. Maak een keuzeknop waar je de stijl van de ganse pagina in één keer kan omschakelen. Tip: maak van de <link>-tag een HTML-control.

← Web-server-controls

Programmeren in ASP.NET

Veelgebruikte objecten →