login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > ASP.NET

Gegevens:
Geschreven door:
 nemesiskoen
Moeilijkheidsgraad:
 Normaal
Hits:
 6953
Punten:
Aantal punten:
  (4.2)
Aantal stemmen:
 5
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (0)
 


Tutorial:

WebControls en pagina-elementen

1. Inleiding
2. Een kleine brok theorie
3. Webcontrols
 top
1. Inleiding
Na de eerste tutorial is het tijd voor het echte werk: de praktijk.
We beginnen met een klein beetje theorie, beetje uitleg over de verschillende mogelijkheden.
Vervolgens ga ik verder ingaan op 1 van deze mogelijkheden.
Later kom ik misschien nog terug op uitbreidingen maar we beginnen bij het begin.
 top
2. Een kleine brok theorie

Om te beginnen: asp.NET code kan tussen twee verschillende soorten 'blokken' staan.
De bekende oude syntaxix 'opbouwblokken' genaamd en de nieuwe script blokken: 'code declaratieblokken'.
<%
'code'
%>
opbouwblok

<script runat="server">
'code'
</script>
code declaratieblok

Binnen deze blokken kunnen 'event-handlers' voorkomen. Zij zijn zowat de bouwstenen van asp.NET.
Ze zijn misschien beter bekend onder de naam 'subroutines' en daar vind je hier meer uitleg over.
Deze 'event-handlers' reageren op vanalles binnen de pagina: een formulier dat gepost wordt, het laden van een pagina, het veranderen van data binnen een formulier...

Pagina elementen
Wat kan er zich nu binnen een asp.NET pagina bevinden.
Eerst en vooral: 'statische HTML-tags'.
<html>
<head>
<title>foo</title>
</head>
<body>
<b>bar</b><br />
blaat
</body>
</html>

Vervolgens de 'HTML-commentaar':
<!-- -->

Configuratie onderdelen genaamd 'directives'. (hier kom ik misschien later nog op terug)
Server-side code: de code tussen de 'opbuwblokken' en de 'code declaratieblokken'.
Event-handlers: 'er is op een button geklikt... wat nu?'
Clientside-script blokken: javascript en vbscript.
Serverside commentaar:
<%-- -->

Usercontrols: besturingselementen die worden gedeclareerd in een .ascx bestand (code en formulier afzonderen).
ASP.NET-serverside constrols:
1. HTML controls:
<input type="text" runat="server" />
<input type="text" runat=server />

De quotes rond 'server' moeten (zoals ik laat zien) niet altijd.
Ikzelf doe dit wel.
Over bovenstaande code: deze ga ik niet gebruiken in mijn voorbeelden.
Wat ik wel ga gebruiken zijn :
2. webcontrols:
<asp:button>
<asp:label>
<asp:...

Vervolgens zijn er nog 'aangepaste servercontrols'. Waar weeral de code wordt gescheiden van de formulieren.
Dit doormiddel van .cs (C#) en .vb (VB) bestanden, deze bevatten declaraties die in de serverside code wordt opgeroepen.
Dan zijn er nog 2 die overblijven:
Speciale besturingselemten en besturingselementen voor data.
De eerste (speciale besturingselementen) zijn voorgeprogrammeerde formulier-elementen die je heel gemakelijk kan aanpassen, denk aan een kalender.
De besturingselemten voor data die worden gebruikt voor foutafhandeling: je wilt bv alleen een numerieke waarde laten invullen bij een formulier.
 top
3. Webcontrols

En nu aan het werk!
Zoals ik al zei gaan we hier de 'webcontrols' behandelen.
Om te beginnen: elke webcontrol (afgekort wC vanaf nu) moet gedeclareerd worden.
Dit gebeurd binnen het formulier, door een element aan te maken en dit door te sturen naar de server (runat=server).
Elke wC heeft bepaalde eigenschappen. Bv: id (de naam van het element), visible (is het zichtbaar: true of false), text (de inhoud van de wC) en zo zijn er nog een paar.
Ik ga beginnen met bovenstaande te behandelen.

Hoe maak ik een wC aan.
We gaan in dit voorbeeld een klein formuliertje opbouwen.
Bestaande uit een textveldje, een button en een label.
We beginnen met de standaard code.
<%@ Page Language="VB" %>
<script runat="server">

    ' Insert page code here
    '

</script>

<html>
<head>
</head>
<body>
    <form runat="server">
        <!-- Insert content here -->
    </form>
</body>
</html> 

We zetten 3 elementen in het formulier: een textveld, een button en een label.
Het is de bedoeling dat we iets gaan invullen in het textveld, vervolgens op de button klikken en dat dan de button en het textveld verdwijnen en er in de plaats een label met de text van het textveld staat.
<%@ Page Language="VB" %>
<script runat="server">

    ' Insert page code here
    '

</script>
<html>
<head>
</head>
<body>
    <form runat="server">
        <asp:textbox id="tekst" visible="true" runat="server" />
        <asp:button id="knop" visible="true" runat="server" />
        <asp:label id="labeltje" visible="false" runat="server" />

    </form>
</body>
</html>

We geven de button een extra attribuut: 'onclick'. Als er op geklikt wordt dan wordt er een subroutine aangeroepen genaamd 'verwerk'.
<asp:button id="knop" visible="true" runat="server" onClick="verwerk" />

De subroutine verwerk gaan we nu aanmaken.
Er wordt nog niets gedaan.
<script runat="server">

    Sub verwerk(Sender As Object, E As EventArgs)

        

    End Sub

</script>

De waarde van 'labeltje' gaan we gelijk zetten aan die van 'tekst' en die van 'tekst' verwijderen (die hebben we niet meer nodig).
         labeltje.Text = tekst.Text
        tekst.Text = ""

Labeltje moet zichtbaar gemaakt worden en de 2 andere onzichtbaar.
        labeltje.Visible = true
        tekst.Visible = false
        knop.Visible = false


Nu moeten we nog 1 ding doen om het af te werken.
De button heeft geen waarde (text) en daarom zal er ook niets op staan.
Het zal niet duidelijk zijn voor de gebruiker wat de button precies doet (en of het wel een button is).
         <asp:button id="knop" visible="true" text="verwerk" runat="server" onClick="verwerk" />

Alles achtereen ziet het er zo uit:
<%@ Page Language="VB" %>
<script runat="server">

    Sub verwerk(Sender As Object, E As EventArgs)

        labeltje.Text = tekst.Text
        tekst.Text = ""

        labeltje.Visible = true
        tekst.Visible = false
        knop.Visible = false

    End Sub

</script>

<html>
<head>
</head>
<body>
    <form runat="server">
        <asp:textbox id="tekst" visible="true" runat="server" />
        <asp:button id="knop" visible="true" text="verwerk" runat="server" onClick="verwerk" />
        <asp:label id="labeltje" visible="false" runat="server" />
    </form>
</body>
</html>



Hopelijk heeft bovenstaand voorbeeld een duidelijker beeld geschept over de verschillende webcontrols, hoe ze te gebruiken en hun attributen te manipuleren.
 top

« Vorige tutorial : Begin met ASP.NET Volgende tutorial : Calendar »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.017s