Als alle benodigde onderdelen voor ASP.NET aanwezig zijn op uw systeem kunt u uw eerste ASP.NET pagina maken. Met welk programma u dat doet kunt u zelf bepalen. In deze handleiding wordt uitgegaan van het ASP.NET Web Matrix Project (Web Matrix), omdat dit een klein programma is waarmee handig en snel gewerkt kan worden. Alle code wordt geschreven in Web Matrix, maar wordt ook los weergegeven, zodat u met een ander programma kunt werken.
Als u een ASP.NET pagina maakt, moet u deze de extensie .aspx geven. Alle bestanden met deze extensie worden door de webserver doorgegeven aan ASP.NET en dan door ASP.NET uitgevoerd. Als u Web Matrix start krijgt u meteen een venster te zien waarmee u een nieuwe pagina kunt maken in een door u gekozen map, zoals u kunt zien in figuur 1 hieronder.
Figuur 1, Een pagina maken in Web Matrix
Op dit moment maakt het nog niet zoveel uit welke taal u kiest voor de pagina. Als u echter van plan bent met een bepaalde taal te gaan werken, is het verstandig om die hier te selecteren. Als u nog geen programmeerervaring heeft kunt u het beste beginnen met Visual Basic .NET, omdat die taal dichtbij normaal Engels ligt en daarom makkelijker te begrijpen is. Dus ook als u later besluit om een andere taal te gebruiken, laat Visual Basic .NET u goed zien wat er gebeurt. Heeft u kennis van Java of JavaScript, dan is C# de beste keuze, omdat deze talen qua syntax veel gemeen hebben.
Als de pagina gemaakt is ziet u een visuele designomgeving. Aan de linker kant van uw scherm zit een Toolbox, kies voor Label en sleep deze op de pagina. Terwijl het label geselecteerd is, kunt u de opmaak ervan aanpassen. Maak het label bijvoorbeeld blauw, grootte 5 en kies Arial Black als lettertype. Dit kunt u doen via de knoppenbalk, of via het Properties venster rechts onderin het scherm (pas eventueel de grootte van de verschillende vensters aan). Via dat scherm kunt u ook de tekst van het label veranderen in 'Hallo Wereld!'. Als het goed is ziet uw scherm er nu ongeveer uit als in figuur 2.
Figuur 2, Uw eerste pagina in Web Matrix
Als u naar het tabje All gaat, krijgt u de onderliggende code te zien. Als u geen gebruik maakt van Web Matrix, kunt u de resulterende broncode zien. Die ziet er min of meer als volgt uit.
<%@ Page Language="VB" %> <script runat="server"> ' Insert page code here ' </script> <html> <head> </head> <body> <form runat="server"> <asp:Label id="Label1" runat="server" Font-Size="Large" ForeColor="Blue" Font-Names="Arial Black"> Hallo Wereld! </asp:Label> <!-- Insert content here --> </form> </body> </html>
De code hierboven bestaat uit een aantal delen. De eerste regel noemen we de pagina declaratie. Hierin kunt u aanwijzingen aan ASP.NET geven over hoe de pagina uitgevoerd moet worden. In dit geval is de enige aanwijzing de gebruikte programmeertaal (Noot: Als u C# heeft geselecteerd als taal, staat op de eerste regel Language="C#" in plaats van Language="VB"). Onder de pagina declaratie volgt een script blok. Als u bekend bent met JavaScript in de webbrowser ziet dit er redelijk bekend uit. Het script blok heeft een attribuut runat="server", waarmee aangegeven wordt dat de code die erin staan uitgevoerd moet worden op de server. In dit geval staan er alleen twee regels die voorafgegaan worden door een apostrophe (enkele quote), hetgeen in VB.NET aangeeft dat het hier gaat om commentaar dat niet uitgevoerd moet worden. Commentaar is handig om aan te geven wat iets doet, zodat u als u de code later weer eens ziet u weet wat u gedaan heeft. Na het script blok begint gewone HTML. De HTML bevat een formulier dat ook het attribuut runat="server" bevat. Hiermee wordt aangegeven dat het hier gaat om een zogenaamd Web Form, een formulier waarvan de inhoud op de server bepaald wordt. In het formulier zit een element dat wel HTML lijkt, maar het niet is. Dit is het ingevoegde label, en we noemen dit een server control. Een server control is een element waarvan de server bepaalt hoe het er in de webbrowser uit komt te zien. Dit kan tijdens het ontwerp via de attributen van de server control, net zoals bij HTML. U ziet dat er een font-grootte en -type opgegeven is en dat er een kleur aan de voorgrond (de tekst zelf) wordt toegekend. Als u de pagina in een webbrowser opvraagt (in Web Matrix door op Start te klikken of op F5 te drukken), dan ziet de pagina er vrijwel hetzelfde uit als in de visuele designonmgeving. De server control is door ASP.NET omgezet in HTML die zo dicht bij de weergave in de designomgeving ligt als mogelijk. Hierdoor kan de daadwerkelijk gegenereerde HTML verschillen per webbrowser.
U kunt de eigenschappen van een server control ook manipuleren vanuit code. U kunt dit het beste zien door een knop toe te voegen aan de pagina. Sleep een button van de Toolbox in de pagina. Pas eventueel via het Properties venster de tekst aan. Dubbelklik op de knop in de designomgeving. U krijgt nu een stuk code te zien dat er als volgt uit ziet:
VB.NET
Sub Button1_Click(sender As Object, e As EventArgs) End Sub
C#
void Button1_Click(Object sender, EventArgs e) {
}
De bovenstaande code is een functie die uitgevoerd wordt als de gebruiker op de ingevoegde knop kilkt. In die functie kunt u dus code plaatsen die reageert op die gebeurtenis. We noemen zo'n functie daarom een gebeurtenismethode. Verander de bovenstaande code in de code hieronder.
VB.NET
Sub Button1_Click(sender As Object, e As EventArgs) If Label1.ForeColor.Equals(System.Drawing.Color.Blue) Then Label1.ForeColor = System.Drawing.Color.Red Else Label1.ForeColor = System.Drawing.Color.Blue End If End Sub
C#
void Button1_Click(Object sender, EventArgs e) {
if(Label1.ForeColor.Equals(System.Drawing.Color.Blue)) {
Label1.ForeColor = System.Drawing.Color.Red;
} else {
Label1.ForeColor = System.Drawing.Color.Blue;
}
}
Sla nu de pagina op en ververs de pagina. U krijgt nu bij de tekst de knop te zien die u heeft toegevoegd. Als u er een aantal malen op klikt, verandert de kleur van de tekst in het label van rood naar blauw en weer terug. De code die u toegevoegd heeft kijkt of de huidige kleur van het label gelijk is aan blauw. Is dat zo, dan wordt de kleur veranderd in rood, en als het niet zo is in blauw. Met al het commentaar verwijderd ziet de code van de hele pagina er uit als hieronder weergegeven. Merk op dat de knop ook ingevoegd is aan de hand van een speciaal element, en dat dit dus ook een server control is. Het element verwijst naar de code die u heeft aangepast in het onclick attribuut. Als er op de knop geklikt wordt, wordt de pagina verstuurd naar de webserver, en wordt de code op de server uitgevoerd. De verandering van kleur wordt dus niet door de webbrowser gedaan, maar door de server.
VB.NET
<%@ Page Language="VB" %> <script runat="server"> Sub Button1_Click(sender As Object, e As EventArgs) If Label1.ForeColor.Equals(System.Drawing.Color.Blue) Then Label1.ForeColor = System.Drawing.Color.Red Else Label1.ForeColor = System.Drawing.Color.Blue End If End Sub </script> <html> <head> </head> <body> <form runat="server"> <p> <asp:Label id="Label1" runat="server" Font-Size="Large" ForeColor="Blue" Font-Names="Arial Black"> Hallo Wereld! </asp:Label> </p> <p> <asp:Button id="Button1" onclick="Button1_Click" runat="server" Text="Klik mij!"> </asp:Button> </p> </form> </body> </html>
C#
<%@ Page Language="C#" %>
<script runat="server">
void Button1_Click(Object sender, EventArgs e) {
if(Label1.ForeColor.Equals(System.Drawing.Color.Blue)) {
Label1.ForeColor = System.Drawing.Color.Red;
} else {
Label1.ForeColor = System.Drawing.Color.Blue;
}
}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:Label id="Label1" runat="server"
Font-Size="Large" ForeColor="Blue" Font-Names="Arial Black">
Hallo Wereld!
</asp:Label>
</p>
<p>
<asp:Button id="Button1" onclick="Button1_Click"
runat="server" Text="Klik mij!">
</asp:Button>
</p>
</form>
</body>
</html>
De verschillende onderdelen van een ASP.NET pagina hebben, zoals u heeft kunnen zien, verschillende functies. De pagina declaratie geeft aan hoe een pagina uitgevoerd moet worden, en het script blok bevat de code die uitgevoerd moet worden bij bepaalde gebeurtenissen. In het voorbeeld gebeurt er alleen wat als er op de knop gedrukt wordt, maar er zijn nog veel meer gebeurtenissen die plaats kunnen vinden. De HTML dient als sjabloon voor de server controls, die tot slot de veranderlijke elementen zijn. Server controls kunnen de oorzaak zijn van gebeurtenissen, en kunnen veranderd worden als gevolg van die gebeurtenissen. Alle gewone HTML wordt 1-op-1 naar de webbrowser gestuurd en kan dus niet gewijzigd worden.