DSP 2 – ASP.NET

Verstockt Steven

Wat is het .NET Framework ?

• ASP.NET staat niet op zichzelf, het maakt onderdeel uit van het Microsoft .NET Framework.

• Door Microsoft ontwikkeld platform waarop verschillende soorten applicaties uitgevoerd kunnen worden.

• Een gemeenschappelijke basis die er voor zorgt dat verschillende soorten applicaties van dezelfde functionaliteit gebruik kunnen maken, zodat er weinig verschil bestaat tussen het maken van die applicaties.

• Momenteel ondersteunen ruim 20 programmeertalen het .NET Framework, waaronder VB.NET, C#, JScript.NET, J#, Cobol, Perl, en FORTRAN.

Common Language Runtime

• De basis van het .NET Framework

• Is verantwoordelijk voor het uitvoeren van applicaties op een efficiënte en veilige manier.

• Beheert het geheugen, controleert of de applicatie wel voldoende rechten heeft om bepaalde acties uit te voeren, en of er niets gedaan wordt waardoor het systeem instabiel kan worden.

Common Language Runtime

• Werkt bovenop het operating system, zodat applicaties niet direct met het operating systeem communiceren. Op die manier worden applicaties afgeschermd van de complexiteit van het operating systeem.

• Een hele serie met diensten die door de zogenaamde Base Class Library worden aangeboden spelen hier ook een belangrijke rol in, omdat deze library de functies biedt die anders door het operating systeem worden verzorgd.

• Voordeel dat de applicaties in principe onafhankelijk zijn van het operating systeem,

.NET Framework : Applicaties

• Applicaties die onder het .NET Framework werken, zijn te onderscheiden in vier verschillende soorten:

1. Windows Forms applicaties (desktop applicaties en client-server applicaties)

2. Windows Services (diensten) 3. ASP.NET applicaties (webapplicaties) 4. ASP.NET Web Services (diensten die via het web aan

te roepen zijn door andere systemen)

• Al deze applicaties worden gemaakt met een van de talen die het .NET Framework ondersteunen. Dit zijn alle talen die zich houden aan de afspraken die vastliggen in de Common Language Specification.

Schematische weergave van het .NET framework

Common Language Specification : de specificatie waaraan een programmeertaal moet voldoen om goed te kunnen functioneren in het .Net framework.

Welke webserver heb ik nodig ?• Zoals gezegd werkt het .NET Framework, en dus

ASP.NET, alleen op Microsoft Windows. Daarmee is het aantal webservers dat ASP.NET kan ondersteunen al enigszins beperkt.

• Verder moet de webserver de mogelijkheid bieden ASP.NET pagina's uit te voeren.

• Internet Information Server (IIS) en z'n kleine broer Personal Web Server (PWS) bieden die mogelijkheid.

• Ook Cassini, een experimentele webserver die geheel geschreven is voor het .NET Framework. Cassini is alleen geschikt voor het verwerken van pagina's die opgevraagd zijn door een webbrowser op dezelfde computer. (om veiligheidsredenen)

ASP.NET installeren ?

• .NET Framework + webserver

• Via ASP.NET Web Matrix Project : dan hoeft u naast het .NET Framework alleen dat te installeren(Web Matrix bevat Cassini webserver).

• Via Visual Studio .NET, dan hoeft u alleen een webserver te installeren, omdat het .NET Framework tijdens de installatie van Visual Studio .NET geïnstalleerd wordt.

• .NET Framework Software Development Kit (SDK) : bevat documentatie, een aantal handige programma's en vele voorbeelden. (optioneel)

Systeemvereisten

Door de beperkingen van oudere versies van Microsoft Windows ondersteunen echter alleen de volgende versies ASP.NET:

• Microsoft Windows 2000 • Microsoft Windows XP

• Tevens heeft u minimaal Internet Explorer 5.5 nodig.

INSTALLATIE FRAMEWORK

• Als u geen CD heeft met daarop het installatiebestand voor het .NET Framework, download dan de Microsoft .NET Framework Redistributable (ongeveer 21 MB).

• Voer dotnetredist.exe uit en geef aan waar u wilt dat het installatiebestand dotnetfx.exe naar wordt uitgepakt.

• Voer dotnetfx.exe uit.

• Ga terug naar de downloadpagina van de Microsoft .NET Framework Redistributable en download het nieuwste service pack. Installeer het service pack

Installatie webserver

• Op Microsoft Windows 2000 of Microsoft Windows XP Professional kunt u Internet Information Server (IIS) of Personal Web Server (PWS) installeren.

• Op Microsoft Windows XP Home Edition kan dit niet, en bent u dus aangewezen op de Cassini webserver. Cassini werkt ook op Microsoft Windows 2000 en Microsoft Windows XP Professional.

ASP.NET ontwikkelomgevingen

• ASP.NET pagina's zijn net als HTML pagina's gewone tekstbestanden.

• In principe al genoeg aan een programma zoals Notepad

• Er zijn echter programma's die veel handiger zijn en specifiek ondersteuning bieden voor ASP.NET, de een wat omvangrijker dan de ander. (Visual Studio.Net + WebMatrix)

VISUAL STUDIO .NET

• Voor de professionele ontwikkelaar biedt Microsoft Visual Studio .NET.

• volwaardige ontwikkelomgeving die gericht is op het maken van grote applicaties.

• bevat visuele designomgeving voor het ontwerpen van pagina's, hulpmiddelen voor het snel schrijven van foutloze code, hulpmiddelen voor het opsporen en verhelpen van fouten, en allerlei wizards.

• Bovendien ondersteunt Visual Studio .NET alle talen die standaard ondersteund worden door het .NET Framework.

ASP.NET WEBMATRIX

• voor beginnende programmeurs en voor ontwikkelaars

• om meer te doen dan webapplicaties bouwen, is Visual Studio .NET te uitgebreid.

• Om die groep mensen, voornamelijk ASP programmeurs, snel met ASP.NET te laten werken, heeft Microsoft het gratis ASP.NET Web Matrix Project opgezet.

• Ondanks dat het ASP.NET Web Matrix Project gratis is, is het programma zeer goed.

• Centraal staat de editor met zowel een visuele designomgeving als een tekstgebaseerde omgeving.

ASP.NET Web Matrix Project installeren

• Download het ASP.NET Web Matrix Project (ongeveer 1,2 MB). (Noot: U hoeft zich niet voor de ASP.NET Forums in te schrijven.)

• Start webmatrix.msi

Benodigde voorkennis voor ASP.NET ?

• Deze cursus is zo opgezet dat u weinig kennis nodig heeft om met ASP.NET te beginnen.

• De enige vereiste is dat u een redelijke basiskennis heeft van HTML.

• Verder heeft u basis programmeerkennis nodig

Wat is ASP.NET• Webapplicties die actuele informatie weergeven of

reageren op keuzes van de gebruiker.

• Voorbeelden van webapplicaties zijn bijvoorbeeld nieuwssites, online winkelen, bankieren, routeplanners, forums waar u vragen kunt stellen of beantwoorden, …

• Zulke webapplicaties bestaan uit meer dan HTML alleen.

• Er is immers ook een platform nodig waarop de functionaliteit ontwikkeld en uitgevoerd kan worden, en ASP.NET is zo'n platform.

• Opvolger van Active Server Pages (ASP), is echter tot veel meer in staat dan ASP en is bovendien veel makkelijker te gebruiken.

Hoe werkt ASP.NET ?

• Een website die niet dynamisch is bestaat uit een verzameling van HTML pagina's.

• Een webapplicatie die gemaakt is in ASP.NET bestaat in principe uit een verzameling ASP.NET pagina's.

• Wanneer een ASP.NET pagina opgevraagd wordt met een webbrowser, dan wordt de ASP.NET pagina eerst op de webserver uitgevoerd en wordt het resultaat (HTML) naar de webbrowser teruggestuurd.

• Dit betekent dat er voor een webbrowser geen verschil bestaat tussen een website die uit HTML pagina's bestaat en een website die uit ASP.NET pagina's bestaat.

Hoe werkt ASP.NET ?

• Omdat een pagina elke keer dat deze opgevraagd wordt opnieuw HTML genereert, kan het resultaat van de pagina keer op keer verschillen.

• Als een pagina een formulier bevat waar een gebruiker gegevens in in kan vullen, dan kunnen die gegevens gebruikt worden om bijvoorbeeld een gegevensbron te wijzigen, een email te versturen, of iets op te zoeken.

• Door een aaneenschakeling van pagina's ontstaat zo een applicatie die te vergelijken is met applicaties die op uw eigen systeem werken. De pagina's vervullen daarin de rol van vensters in een 'normale' applicatie.

Welke kennis heb ik nodig om ASP.NET applicaties te maken?

• Uw bestaande HTML kennis is onmisbaar bij het maken van ASP.NET applicaties.

• kennis van een programmeertaal die door ASP.NET ondersteund wordt.

• De talen die standaard door ASP.NET ondersteund worden zijn:

1. Visual Basic .NET (VB.NET) 2. C# 3. JavaScript (JScript.NET)

• Er zijn meer talen die gebruikt kunnen worden met ASP.NET, maar die moeten apart geïnstalleerd worden.

Wat heb ik nodig voor ASP.NET ?

• Om ASP.NET pagina's te kunnen bekijken is alleen een webbrowser nodig.

• Wilt u echter ASP.NET pagina's op uw systeem kunnen maken en uitvoeren, dan heeft u specifieke software nodig :

Webserver : voor de communicatie met een webbrowser. Deze webserver moet kunnen samenwerken met ASP.NET

Microsoft .NET Framework

programma waarmee u ASP.NET pagina's kunt maken. (Visual Studio / WebMatrix)

De basis van een ASP.NET pagina

• ASP.NET pagina -> extensie .aspx

• Alle bestanden met deze extensie worden op de webserver uitgevoerd.

• Als u Web Matrix (of VS) start krijgt u meteen een venster te zien waarmee u een nieuwe pagina kunt maken in een door u gekozen map

Onze eerste ASP.NET pagina• Label op de pagina zetten :

- werk in visuele designomgeving

- linker kant van uw scherm -> 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.

- via de knoppenbalk, of via het Properties venster rechts onderin het scherm

- Verander de tekst van het label in « Development en Support »

Uitvoeren van code via Web Matrix• Als u een pagina maakt in ASP.NET Web Matrix Project,

of deze opent via het Workspace venster, dan kunt u de betreffence pagina uitvoeren door op de Start knop te klikken.

• U kunt ook uit het menu View->Start kiezen, of op F5 drukken. U krijgt dan het volgende venster te zien:

De code van deze eerste pagina …

• Via de knoppen « code » en « all » onderaan het werkscherm kan je de code opvragen van je pagina

De code 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.

• 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.

• Het ingevoegde label noemen we een server control, een element waarvan de server bepaalt hoe het er in de webbrowser uit komt te zien.

• 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.

Het label aanpassen

• U kunt de eigenschappen van een server control manipuleren vanuit code.

• Voeg nu een knop toe 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.

GEBEURTENISMETHODE• De code die zich achter de knop bevindt is een functie

die uitgevoerd wordt als de gebruiker op de ingevoegde knop klikt.

• In die functie kunt u dus code plaatsen die reageert op die gebeurtenis.

WAT DOET DEZE CODE … ?

VOEG EEN KNOP TOE OM DE FONT-SIZE TE VERANDEREN NAAR MEDIUM

Bespreking van het code-fragment

• Merk op dat de knop ook wordt ingevoegd aan de hand van een speciaal element <asp:Button>, 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.

• De verschillende onderdelen van een ASP.NET pagina hebben verschillende functies.

• De pagina declaratie geeft aan hoe een pagina uitgevoerd moet worden

• Het script blok bevat de code die uitgevoerd moet worden bij bepaalde gebeurtenissen.

• De HTML dient als sjabloon voor de server controls. Alle gewone HTML wordt 1-op-1 naar de webbrowser gestuurd en kan dus niet gewijzigd worden.

• Server controls zijn de de veranderlijke elementen. Zij kunnen de oorzaak zijn van gebeurtenissen, en kunnen veranderd worden als gevolg van die gebeurtenissen.

OEFENINGEN

• Maak een Web Form dat 2 labels bevat. Label1 bevat je voornaam en label 2 je achternaam. Voeg vervolgens een knop toe om de inhoud van de labels te verwisselen.

• Maak een Web Form waarmee je een verkeerslicht kan simuleren. Je gebruikt hiervoor 3 labels met een letter O (tekstkleur zwart). Voeg 1 knop toe om het verkeerslicht achtereenvolgens op groen, oranje, rood te zetten. (verander tekstkleur van het label !)

• Maak een Web Form om een scorebord van een voetbalmatch bij te houden. Via 2 knoppen kan de score voor elke ploeg worden opgehoogd.

Server controls• Server controls bepalen voor een groot deel het

dynamisch karakter van een pagina.

• Ten eerste zijn er server controls die vrijwel gelijk zijn aan elementen die in HTML ook voorkomen. Het label, de knop, tekstvelden, keuzelijsten, en tabellen.

• ASP.NET zorgt er echter voor dat als er iets gedaan wordt met die elementen, dat er code uitgevoerd wordt die daaraan verbonden is.

• Ten tweede zijn er server controls die opgebouwd zijn uit verscheidene HTML elementen. ( bvb. Calendar control )

• Als laatste zijn er server controls die niet per sé een zichtbaar resultaat hebben, maar die een bepaalde functie vervullen, zoals het controleren van gegevens die een gebruiker heeft ingevoerd.

Basiseigenschappen van een server control

• het attribuut runat = server. Als u een bepaald HTML element wilt aanpassen op de server, dan kunt u die voorzien van dit attribuut. Dat HTML element wordt daarmee in feite een server control, maar we noemen ze HTML controls.

• een id attribuut : met daarin een unieke naam binnen de pagina.

• Een voorvoegsel asp. Het voorvoegsel en de naam van het soort control worden gescheiden door een dubbele punt.

• Opmerking :: Server controls die niet standaard deel uitmaken van ASP.NET hebben een ander, nader te bepalen voorvoegsel.

Code van een servercontrol

<asp:ServerControlNaam ID="naam" Runat="server"> waarde</asp:ServerControlNaam>

of

<asp:ServerControlNaam ID="naam" Runat="server"/>

1. server controls moeten altijd een eind-tag hebben 2. de waarde van attributen moet tussen aanhalingstekens

(dubbele quotes) of apostrofs (enkele quotes) staan. 3. server control code moet immers well-formed zijn (zoals XML) 4. de begin tag en de eind tag moeten precies hetzelfde zijn5. De namen van de server controls en de attributen zijn verder

niet hoofdlettergevoelig

Specifieke eigenschappen van een server control

• Verschillende server controls hebben verschillende eigenschappen en daardoor verschillende attributen.

• De eigenschappen die gemeenschappelijk zijn, zoals hoogte en breedte zijn gelukkig wel voor iedere control hetzelfde, iets wat in HTML niet altijd het geval is.

Oefening : Voeg een calendar control toe aan je pagina. Laat een label bovenaan de calendar de geselecteerde dag tonen. De geselecteerde dag kan je opvragen via Calendar1.SelectedDate.ToLongDateString(). Verander ook de layout van de calendar door enkele eigenschappen aan te passen.

Daar waar als u op een knop klikt de OnClick gebeurtenis plaats vindt, vindt bij het selecteren van een andere dag de OnSelectionChanged gebeurtenis plaats. De kalender gebruikt niet OnClick als gebeurtenis, omdat die niet duidelijk genoeg is. Een gebruiker kan namelijk ook op de kalender klikken om van maand te wisselen.

Deel 1 van de code

Deel 2 van code

Simpele server controls

• zijn min of meer gelijk aan elementen die in HTML ook beschikbaar zijn

• voordeel is dat de server controls veel consistenter zijn, en daardoor makkelijker in gebruik.

• Bovendien zijn ze dynamisch en dus vanuit code aan te passen.

1. Literal control 2. Label control 3. HyperLink control 4. Image control

1. LITERAL CONTROL

• De Literal control is bedoeld voor platte tekst (tekst zonder opmaak)

• De opmaak van die tekst wordt bepaald door de omliggende opmaak.

• De Literal control geeft u de mogelijkheid om dit stuk tekst dynamisch aan te passen.

• Omdat er geen opmaak mee gemoeid is, vergt het gebruik van de Literal control heel weinig van ASP.NET.

<asp:Literal ID="naam" Runat="server">tekst</asp:Literal>of<asp:Literal ID="naam" Runat="server" Text="tekst"/>

1. LITERAL CONTROL

• Slechts één eigenschap van de Literal control van belang, namelijk de tekst (Text). De tekst kan gegeven worden op 2 manieren (zie vb)

• De Literal control heeft nog twee eigenschappen die het deelt met alle server controls, namelijk EnableViewState en Visible.

• Beiden kunnen True (waar) of False (niet waar) als waarde hebben, waarbij de standaard waarde True is.

• De eigenschap EnableViewState heeft te maken met het bewaren van waardes in de server control

2. LABEL CONTROL

• Hetzelfde als de Literal control, met het verschil dat je aan de Label control een opmaak toe kunt kennen.

• Label control heeft een groot aantal eigenschappen die de Literal control niet heeft.

• Deze eigenschappen hebben betrekking op hoe de server control opgemaakt is in de webbrowser, en hoe deze zich gedraagt met betrekking tot navigatie in de browser (via de tab toets, sneltoets, en muis).

• Deze eigenschappen zijn heel belangrijk, omdat vrijwel alle andere server controls (met uitzondering van de Literal control) dezelfde eigenschappen hebben.

FONT EIGENSCHAPPEN

• Naast de eigenschappen in de vorige tabellen bevat de Label control ook nog de eigenschap Font.

• Die eigenschap is weer een combinatie van andere eigenschappen, zoals lettertype, grootte, vet, cursief, enz.

• De Font eigenschap is in feite een object klasse die zelf eigenschappen bevat. Als er tekst opgemaakt moet worden, gebeurt dit altijd via de Font klasse, dus ook deze is erg belangrijk.

Oefening

• Probeer onderstaand label na te maken

• Probeer zelf nog enkele combinaties uit op 4 andere labels die je hobby’s voorstellen.

Oplossing 1

<asp:Label id="Label1" Runat="server" Font-Italic="True" Font-Size="Large" Font-Names="Verdana,Helvetica" ForeColor="Blue" BackColor="#C0C0FF" BorderStyle="Dotted" BorderColor="Black" Height="50px" Width="150px"> Label </asp:Label>

3. HYPERLINK CONTROL• De HyperLink control is het server control equivalent van

de link in HTML.

• De HyperLink control is vrijwel identiek aan de Label control, maar bevat nog drie extra eigenschappen.

4. IMAGE CONTROL

• De Image control heeft dezelfde functie als het img element in HTML, het weergeven van een afbeelding.

• Naast de eigenschappen van een label, bevat de Image control ook de eigenschappen op de volgende pagina.

• Omdat er geen tekst weergegeven wordt met de Image control, heeft deze geen Font eigenschap.

<asp:Image id="Image1" runat="server" ImageUrl="images/framework.jpg" BorderStyle="Solid" BorderWidth="2px" BorderColor="Red" Width="355px" Height="222px"> </asp:Image>

Oefening

• Maak een asp.net pagina waar je een figuur weergeeft van 200 op 300 px, omgeven door een blauwe rand van 3 px.

• Als er op de knop volgende wordt gedrukt, wordt er een andere figuur getoond.

Server controls voor formulieren • ASP.NET bevat net zoals HTML een aantal elementen

waarmee een gebruiker gegevens naar de server kan sturen, zoals een tekstveld, keuzerondje en selectievakje.

• Deze controls zijn handiger in gebruik dan deze in HTML. Bvb selectievakje stuurt als deze aangevinkt is de tekst "on" naar de server. Via de checked-eigenschap kan dan op de server de toestand worden opgevraagd.

• TextBox control • Button control • LinkButton control • ImageButton control • CheckBox control • RadioButton control

TextBox Control

• Geeft een tekstveld weer in de webbrowser. Dit tekstveld kan 1 of meerdere regels groot zijn, of een wachtwoordveld zijn

• In HTML worden deze drie verschillende tekstvelden met verschillende elementen ingevoegd, hoewel het eigenlijk drie vormen van hetzelfde type veld zijn.

• De TextBox control heeft dezelfde eigenschappen als een Label control + de eigenschappen die u in de tabel op de volgende slide vindt.

Oefening

• Probeer via AutoPostBack de inhoud van 2 tekstvelden in 2 labels weer te geven. Het script gedeelte krijg je al.

Button control

• Volgende les …

• Deze namiddag DSP 2 uitleg project !!!

• 15 uur , iedereen aanwezig !!!