Cursus .Net

7/21/2019 Cursus .Net

1/74

Cursus

ASP.NET 4.0

ICT - opleidingenApplicatieontwikkelaarLeerjaar 3, trimester 1


2/74

cursus ASP.NET 4.0

2 ROC de Leijgraaf

Inhoud ....................................................................................................................................2

1: Introductie .........................................................................................................................3

2: Server Controls. ........................................ ....................................................................... 10

3: De programmeertaal C# ................................................................................ ................... 14

4: Navigatie en CSS ............................................................................................................. 18

5: Validatie .......................................................................................................................... 25

6: State ................................................................................................................................ 29

7: Database .......................................................................................................................... 33

7.1 ASP.NET en databases .............................................................................................. 34

7.2 Database bouwen binnen Visual Web Developer ....................................................... 37

7.3 SqlDataSource met SQL .................................................. .......................................... 40

7.4 werken met stored procedures ................... ................................................................. 42

7.5 doe-het-zelf-methode .............................................................................................. 44

7.6 DataSet ..................................................................................................................... 48

7.7 Extra opdrachten .......... .............................................................................................. 50

8: LINQ ............................................................................................................................... 60

9: Beveiligde toegang .......................................................................................................... 66

10:Beveiligde web-applicatie bouwen................................................................................... 69

Wil je meer weten van ASP.NET 4.0 dan ishet boek van Jan Smits aan te bevelen.

Titel: Handboek ASP.NET 4.0

Uitgever: vanDuuren Informatica

ISBN: 97-890-5940-449-6


3/74

cursus ASP.NET 4.0

opleiding Applicatieontwikkelaar 3

ASP staat voor Active Server Pages; paginas in een website die de server activeren. Dit in

tegenstelling tot bv. HTML dat door de browser aan de client-kant wordt uitgevoerd.

ASP is geen programmeertaal maar een onderdeel van de .NET framework van Microsoft.

Programmeertalen als C# en Visual Basic kun je toepassen in ASP-web-applicaties. In deze

cursus gebruiken we C#.

Wat heb je nodig?

Microsoft heeft Visual Studio gebouwd als ontwikkelomgeving. Afhankelijk van de soort

applicatie gebruik je bv. Visual C# voor een Windows-desktopapplicatie of Visual Web

Developer voor een web-applicatie. In deze cursus speelt de Web Developer de hoofdrol.

Als je websites bouwt die actief omgaan met invoergegevens van gebruikers zoals

inloggegevens of bestelling in een webwinkel dan heb je een webserver nodig. Microsoft

heeft zijn eigen webserver IIS (Internet Information Services). In de ontwikkelomgeving die

je gaat gebruiken zit IIS ingebouwd. Dit is voldoende om de website te kunnen testen. Ga je

de web-applicatie beschikbaar stellen dan gebruik je een eigen webserver of je host je websitebij een provider.

Voor de opslag en het bewerken van gegevens wordt een database-programma ingezet; in een

Microsoft-omgeving is dat SQL-Server. Ook voor dit onderdeel geldt dat het ingebouwd zit in

de ontwikkelomgeving wat voldoende is om je website te testen.

Om de opdrachten in deze cursus te kunnen uitvoeren heb je dus voldoende aan Visual Web

Developer 2010 Express. Deze software is gratis te downloaden, maar ook beschikbaar op

school (vraag de docent). Het is natuurlijk overbodig om te vermelden dat het installeren op

een pc moet gebeuren met Windows als besturingssysteem (Windows 7 prof.-editie of hoger).

Installeren Visual Web Developer.

Over het installeren valt weinig te vertellen; het proces verloopt geheel automatisch.

Als de installatie is geslaagd dan vind je op je bureaublad een nieuw icoon


4/74

cursus ASP.NET 4.0

4 ROC de Leijgraaf

Kennismaking met Visual Web Developer.

(Dit is een eerste oefening; voer de opdrachten uit.)

- Start Visual Web Developer.- Kies in menu File New website of klik op New Web Site.

- Selecteer Visual C# en voer de naam van je website inoef1. Klik OK.Let ook op de locatie waar de website wordt weggeschreven.


5/74

cursus ASP.NET 4.0


Er verschijnt een scherm dat kenmerkend is voor Visual Studio, de ontwikkelomgeving van

Microsoft.

Een nieuwe pagina maken.

- Klik met de rechter muisknop op C:\....\oef1 in het venster Solution Explorer- Kies Add New Item.

o Selecteer Web Formo geef de pagina een naam:hallo

o place code in separate filemag NIET aangevinkt zijn en klik Add


6/74

cursus ASP.NET 4.0

6 ROC de Leijgraaf

De nieuwe pagina kan in de design-stand of in de

source-stand worden weergegeven. Met de optie Split

zie je beide.

Is links de Toolbox niet zichtbaar dan kun je de Toolbox oproepen met:

- Kies in menu View- Selecter Other Windows- En kies Toolbox

Het is mogelijk dat de Toolbox niet naast,

maar op de pagina ligt. Klik op het knopje

automatisch verbergen.

Klik je op het driehoekje bij standard dan

zie je dat er meerdere toolboxen zijn.

Voorlopig kun je met de standard-toolbox

vooruit.

Als je de broncode (source) zichtbaar maakt dan zie je dat er eigenlijk een gewone HTML-

pagina is aangemaakt met de bekende codes als , < head> en .

In de eerste regels zie je:

- Dat de pagina programmacode van C# kan bevatten; dit is informatie voor dewebserver.

- Informatie over de pagina zoals w3.org dat wil hebben.- Dat de html-code aan de xhtml-eisen moet voldoen van W3.org


7/74

cursus ASP.NET 4.0


De eerste pagina bouwen.- Zet de nieuwe pagina in de design-stand- Sleep vanuit de toolbox een Textbox, een Button en een Label in de pagina- Klik 1x op Button en pas de tekst aan bij Properties

- Klik op label en verander bij properties de tekst in voer je naam in.

- Dubbel-klik op de button verstuur.

De code opent zich;

B1C(, EA)

(TB1.T != "")

L1.T = "H, "+ TB1.T;

L1.T = "J .";

- Sla het document op (CTRL + S )- Test de pagina (CTRL + F5)

Resultaat

Na opstarten Na invoeren naam en klik Geen naam, alleen klik


8/74

cursus ASP.NET 4.0

8 ROC de Leijgraaf

De code in zijn geheel:

B1C(, EA)

(TB1.T != "")

L1.T = "H, "+ TB1.T;

L1.T = "J .";

Toelichting:

- Het eerste gedeelte bevat informatie voor de web-server en de programmacode dietussen de tags staat.- Het tweede deel bevat html-code. In deze code vallen twee dingen op:

o Bij de meeste codes staat runat=servero Bij de formulier-elementen staat asp:TextBox; dit noemt men server controls

In beide gevallen betekent dit dat de webserver er iets mee moet doen.


9/74

cursus ASP.NET 4.0


In onderstaande afbeelding zie je de zelfde opdracht in PHP.

Zie je de overeenkomsten en verschillen met ASP?

Zo, de kop is er af.

Op naar hoofdstuk2.


10/74

cursus ASP.NET 4.0

10 ROC de Leijgraaf

Een server control of kortweg control, is een functioneel element dat je in een pagina zet alsof

het HTML is. Het verschil is dat ASP bij het verwerken van de pagina de webserver

inschakelt (runat=server) en daarna de pagina doorstuurt naar de browser. Aan zon

controle kan veel code vastzitten; dit is ingebouwde functionaliteit. Als programmeur maak je

hiervan gebruik, maar je kent de code niet; je kunt autorijden, maar weet niet wat er onder demotorkap gebeurt.

De meest gebruikte server controls

In hoofdstuk 1 heb je al kennisgemaakt met drie veel gebruikte controls:

- TextBox: invoerveld- Button: actie-knop- Label: uitvoerveld

Links zie je de lijstmet standaard

controls.

Rechts zie je de

eigenschappen die je

kunt aanpassen van

een Button.

Belangrijk is om te

weten wat de

mogelijkheden zijn

van een control;

wanneer gebruik je

welke control en

welke eigenschappen

kun je afregelen.

Tijdens de opdrachten

worden de controls

besproken die je moet

gebruiken.


11/74

cursus ASP.NET 4.0


Een meer geavanceerde server control

Opdracht Kalender

- Start Visual Web Developer- Maak een nieuwe website (naam isoef2)

- Maak een nieuwe pagina (naam isdagen)- Zet de pagina dagen in de design stand- Sleep een TextBox, een Calendar, een Button en een Label in de pagina- Ga terug naar Source stand (programmacode) en plaats de titel- Plaats de teksten en controls in een tabel- Ga terug naar de design stand- Klik op de Calendar en kijk bij properties (voor de waarden, zie afbeelding)

o Appearance backcoloro WeekendDaystyleo ToDayDaystyleo SelectedDayDaystyle

Bewaar de pagina: CTRL + S

Voer het programma uit: CTRL + F5

Het scherm zal er ongeveer zo uit zien.

Dit is de layout; er zit nog geen code achter

die iets met de invoer gaat doe.

Code

De opdracht is om je geboortedatum in te

voeren en in de kalender de dag van vandaag

(of een andere datum) te selecteren.Door een klik op de button Bereken

verschijnt het aantal dagen dat je oud bent.

- Zet de pagina in de design stand endubbel-klik op Bereken.

Het scherm met de code verschijnt.

Plaats tussen de accolades bij de event handler Button1_Click de volgende code.

Zie afbeelding volgende pagina.


12/74

cursus ASP.NET 4.0

12 ROC de Leijgraaf

C1SC(, EA)

B1C(, EA)

DT;DT;TS1;I322; = C.TDT(GD.T); = C1.SD;1 = .S();2 = C.TI32(1.TD);AD.T = C.TS(2);

Toelichting:

- Regel 1 t/m 4: declareren van variabelen- Regel 5: de geboortedatum uit de TextBox GebDatum wordt geconverteerd van tekst

naar datum; het resultaat zit in variabele geboortedatum

- Regel 6: de geselecteerde datum in de kalender wordt overgenomen in de variabelevandaag

- Regel 7: de variabele aantal1 bevat de timespan (de tijd) tussen de datum van vandaagen de geboortedatum

- Regel 8: de timespan in aantal1 wordt geconverteerd naar een getal in aantal2- Regel 9: de inhoud van variabele aantal2 wordt geconverteerd naar tekst en geplaatst

in het label AantalDagen

Dit kan compacter, maar de eerste keer gaat het stapje voor stapje.

Bekijk even hoe de Calendar in elkaar zit


13/74

cursus ASP.NET 4.0


HTML volledig:

C1SC(, EA)

B1C(, EA)

DT;DT;TS1;I322; = C.TDT(GD.T); = C1.SD;1 = .S();2 = C.TI32(1.TD);

AD.T = C.TS(2);

: :

&; :

Het rekenwerk!

Bijzondere wijze

van rekenen met

datums. Let op het

type Timespan bij

aantal1 en de

berekening van dedagen.

Eigenschappen van

de kalender die je

bij properties hebt

ingesteld.


14/74

cursus ASP.NET 4.0

14 ROC de Leijgraaf

#

Omdat je de leerlijn C# hebt doorlopen weet je al veel van deze programmeertaal. In

webpaginas zorgt html en css voor de layout; C# is de taal voor de sturing, de functionaliteit.

Door het maken van de volgende opdrachten ga je je kennis opfrissen.

- Maak een nieuwe website aan met de naam oef3- Maak voor elke opdracht een nieuwe pagina aan

Opdracht Rekenmachine

Dit programma vraagt op twee getallen; door een klik op n van de vier buttons

(rekenkundige bewerkingen) verschijnt de uitkomst. In de afbeeldingen zie de design stand in

Visual Web Developer en het resultaat in Internet Explorer.

Tip: 2 textboxen, 4 buttons en 1 label

Als de pagina in de design-stand staat kun je dubbel-klikken op de plus-knop; de pagina gaat

dan over in de source-stand en de cursor bevindt zich in het -gedeelte. Standaard

verschijnt daar de tekst: protected void Button1_Click(object sender, EventArgs e)

PC(, EA)

;;; = C.TD(TB1.T); = C.TD(TB2.T); = + ;L1.T = .TS();

De code tussen de accolades kun je kopiren voor de andere rekenkundige bewerkingen.

Hoeveel tekens moet je veranderen?


15/74

cursus ASP.NET 4.0


Opdracht Contributie (beslissing)

Bij een vereniging heeft men de volgende contributieregeling:

- Kinderen jonger dan 13 jaar: 100,-- Kinderen ouder dan 12 jaar en jonger dan 18 jaar: 150,-- Volwassenen (18 jaar en ouder): 250,-

- Ben je 18 jaar of ouder en student dan krijg je 75,- korting.

Tip:

- student ja/nee met twee radiobuttons; let op de groupname.Waarom moeten de beide radiobuttons dezelfde groupname hebben?

- In C# stel je de vraag: if(RadioButton1.Checked)

Een PSD met een mogelijke oplossing.


16/74

cursus ASP.NET 4.0

16 ROC de Leijgraaf

Opdracht De tafel van . . . (tellende lus)

Het programma vraagt om een getal; na klik op button

verschijnt de tafel van.. het getal.

Het tonen van het resultaat is een klein probleem.

Kun je 10 labels plaatsen zie n voor n worden gevuld?

Tip: het resultaat staat in n label en moet tijdens het proces groeien.

Binnen de teller staat de volgende code (namen van variabelen kunnen anders zijn)

Voorbeeld: getal is 7 en de teller loopt van 1 t/m 10.

- Teller =1 dan resultaat 1 X 7 = 7
totaal is 1 X 7 = 7

- Teller = 2 dan resultaat 2 X 7 = 14
totaal is 1 X 7 = 7
2 X 7 = 14

- Teller = 3 dan resultaat 3 X 7 = 21
totaal is 1 X 7 = 7
2 X 7 = 14
3 X 7 = 21

Enz.

ExtraMaak een programma dat een binair getal

omrekent naar een decimaal getal.

Bepaal eerst het aantal tekens van het

binaire getal om de teller te kunnen

samenstellen.


17/74

cursus ASP.NET 4.0


Opdracht Verdubbelen spaarbedrag (voorwaardelijke lus)

Het programma vraagt om het spaarbedrag en het rentepercentage; na klik op button berekent

het programma hoeveel jaren je moet sparen om het bedrag te verdubbelen.

Tips:

- rentepercentage kan 4, 5, 6 of 7 zijn. Invoer via dropdownlist.- In C# kun je het geselecteerde getal uitlezen metDropDownList1.SelectedItem.Value- Variabelen die je nodig hebt:

o Spaarbedrag (inhoud van de textbox)o Rentepercentage (dropdownlist)o Rente (de jaarlijkse rente die op de spaarrekening wordt bijgeschreven)o Jaar (de variabele die telt hoe vaak de lus wordt herhaald)o Dubbel (als het spaarbedrag groter is dan dubbel dan kan het programma

stoppen.- In de afbeelding staat als uitkomst 2025,81651537853

Ken je de functie nog om getallen op 2 decimalen af te ronden in C#?

Extra:Maak een programma waar je moet invoeren het

maandelijks te storten spaarbedrag, het

rentepercentage en het eindbedrag dat je wilt

bereiken. Als antwoord geeft het programma

hoeveel maanden je moet sparen.


18/74

cursus ASP.NET 4.0

18 ROC de Leijgraaf

In de eerste hoofdstukken heb je losse paginas gemaakt; elke pagina met zijn eigen

functionaliteit. Om deze paginas vanuit een centrale pagina op te kunnen starten maak je een

homepage. Als je de website zo structureert dan wordt het beheer van de website

arbeidsintensief. Immers elke pagina staat op zich en elke verandering in bv. menustructuur of

layout moet je dan op elke pagina doorvoeren.Oplossing voor dit probleem is modulair werken en css (cascading stylesheets) gebruiken.

Modulair werken in ASP.NET

ASP.NET kent het principe van een MasterPage. Deze MasterPage bevat de schermopbouw

van de website. Nieuwe paginas worden aangemaakt op basis van deze MasterPage.

Opdracht MasterPage:

- Maak een nieuwe website aan met de naam oef4.- Maak een nieuwe masterpage aan met de naam MasterPage

o Klik met rechter muisknop op C:\....\oef4o Add New Itemo Selecteer Masterpage,o Optie select master page mag niet

aangevinkt zijn

o Place code in separate file, aanvinken.Visual Web Developer maakt twee

paginas aan met dezelfde naam maar met verschillende extensies.

- default1.aspx met de inhoud (content)

- default.aspx.cs met de programmeercode (C#)

Hierdoor kun je paginas met code afschermen voor personen die alleen met

inhoud en lay-out bezig zijn.

- Maak een nieuwe webpagina aan met de naam Welkomo Zorg nu dat beide opties aangevinkt zijno Na klik op Add wordt gevraagd welke

masterpage?

Selecteer de zojuist aangemaakte

MasterPage

o Toets het woord WELKOM incontentplaceholder1

WELKOM

Om te begrijpen hoe het werkt bekijken we even de code.

MasterPage.master- In regel 1 staat de link naar de code file; code in separate file was aangevinkt- ASP heeft twee contentplaceholders geplaatst; zoals de naam al zeg, hier komt de

inhoud te staan. Beter gezegd, hier wordt de inhoud van de paginas die zijn

aangemaakt op basis van de MasterPage ingevoegd.

- De rest van de code is HTML


19/74

cursus ASP.NET 4.0


MasterPage.master.cs

S;S.C.G;S.L;S.W;S.W.UI;S.W.UI.WC;

MP: S.W.UI.MP

PL(, EA)

Er is een klasse aangemaakt met een methode, die nog leeg is. Verder worden er een aantal

namespaces gebruikt zodat de klassen die zich daarin bevinden beschikbaar zijn.

Welkom.aspx

WELKOM

In regel 1 staan twee verwijzingen; een naar de masterpage en een naar de code file.

De pagina bevat gn HTML-code; het zijn modules die in de MasterPage worden ingevoegd.

De contentplaceholders bepalen waar de content wordt ingevoegd.


20/74

cursus ASP.NET 4.0

20 ROC de Leijgraaf

Welkom.aspx.cs heeft dezelfde inhoud als masterpage.master.cs.

Uit deze code kun je opmaken dat ASP.NET Object-georinteerd werkt. Alle

programmeercode die je schrijft wordt ondergebracht in een klasse.

Bij de opdrachten in de eerste drie hoofdstukken heb je de code niet in een apart bestand

gezet. De programmeercode stond in de tussen de tags . Hier stonden geen

klassen maar alleen modules of functies; in principe dus niet object-georinteerd.

Verder met de opdracht.

- Maak nog een webpagina aan met de naam informatie(zorg dat beide opties zijn aangevinkt)

- Plaats het woord INFORMATIE in contentplaceholder1

- Maak nog een webpagina aan met de naam default1(zorg dat beide opties zijn aangevinkt)

- Plaats het woord STANDAARD BEGINPAGINA in contentplaceholder1

Je hebt nu voldoende paginas om te oefenen met de navigation-controls.

Navigation-controls

Als je in de Toolbox op het kopje Navigation klikt dan zie

je dat Visual Web Developer een aantal menu-controls

bevat. In deze opdracht gebruik je control Menu. Later in

de cursus bouw je een website met de control TreeView.

Omdat er veel handelingen verricht moeten worden is er een stappenplan uitgewerkt.

Stap 1: SiteMap

- Zowel Menu als TreeView maken gebruik van een SiteMap. Dit is een bestandje inXML-formaat waarin de menustructuur ligt opgeslagen.

o Maak een nieuwe pagina aan: Klik met rechter muisknop op C:\....\oef4 in de Solution Explorer Kies Add New Item Soort pagina; kies Sitemap en klik OK

er verschijn een begin van een xml-bestand

Vul dit bestand aan volgens de afbeelding

Met de tags en kun je een rubriek maken waarbinnen items

zitten .

.


21/74

cursus ASP.NET 4.0


Stap 2: aanpassen MasterPage

- Ga naar de MasterPage.master en zet deze in de source stand- Maak er een division bij; plaats de tags boven de aanwezige division

met de contentplaceholder.

- Ga naar de design stand

- Sleep de control Menu uit de Toolbox Navigation in de bovenste divisiono Menu tasks opent zicho Bij data source selecteer je o In het volgende scherm kies je SiteMap en Ok

(de naam wordt SiteMapDataSource1; omdat er maar n SiteMap is wordt er

niet gevraagd om een SiteMap, deze ne wordt automatisch gekoppeld)

De pagina in source-stand tussen de tags .

Stap 3: layout menu aanpassen

- Zet de MasterPage in de source stand

- Klik op


22/74

cursus ASP.NET 4.0

22 ROC de Leijgraaf

CSS Cascading Stylesheet

Er is bij het aanmaken van de website een standaard stylesheet aangelegd. Je kunt dit vinden

in de map Styles; het bestand heet Site.css. Je kunt dit stylesheet aan de MasterPage koppelen

en kijken wat het resultaat is.

OpdrachtCSS- Plaats in de MasterPage een koppeling naar het stylesheet. Let op: tussen de head-tags,

maar nietin de contentplaceholder head.

De koppeling is een bekende regel

Het resultaat:

- Open het stylesheet Site.css- Pas de code aan en kijk wat de gevolgen zijn.

Nieuw stylesheet

- Maak een nieuw stylesheeto Klik met rechtermuisknop op de map Styleso Add new itemo Kies stylesheeto Naam: mijncss.css

- Plaats de volgende code.

: 600;: 100;: Y;

.

: 600;: 500;: A;

- In de MasterPage zitten twee divisionso Voeg toe bij de eerste div class=menubalko Voeg toe bij de tweede div class=inhoud

- Sla alle documenten op en voer uit!

Voor meer informatie over CSS, zie de cursus HTML en CSS.


23/74

cursus ASP.NET 4.0


Bestaande webpaginas ombouwen.

Webpaginas maken is leuk, maar kan ook tijdrovend zijn. Als een website uit veel

verschillende losse paginas bestaat die je wilt ombouwen naar het modulaire model moet je

dan opnieuw beginnen?

Soms is opnieuw beginnen beter dan verbouwen. Toch ga je in de volgende opdracht een

bestaande webpagina zodanig aanpassen dat deze als module wordt ingevoegd in demasterpage.

Opdrachtverbouwing

Stap 1: importeren bestaande webpaginas- Maak een nieuwe website aan met de naam oef4_verbouwing- Importeer uit website oef3 de paginas rekenmachine, contributie, tafel, sparen

o Klik met rechter muisknop op C:\...\oef4_verbouwingo Kies Add Existing Item

ga naar de directory oef3 en selecteer de vier bestanden en klik OK

Na deze actie staan de vier paginas in website oef4_verbouwing.

Stap 2: SiteMap maken- Aanpassen Web.SiteMap

Stap 3: MasterPage- Maak een nieuwe masterpage met de naam MasterPage- Plaats tussen de form-tags een tabel met n rij en twee kolommen

In de linker cel komt het menu, in de rechter cel staat de contentplaceholder

- Sleep van de Toolbox Navigation een control TreeView naaar de linker cel van detabel en koppel de sitemap.

In code:


24/74

cursus ASP.NET 4.0

24 ROC de Leijgraaf

Stap 4: Default-pagina- Verwijder de huidige default-pagina en maak een nieuwe aan met dezelfde naam maar

op basis van de nieuwe MasterPage. Toets de tekst REKENWONDERS in de

contentplaceholder1

Je kunt nu de website testen.

Als je echter op rekenen klik dan verschijnt de juiste webpagina, maar het menu isverdwenen. De pagina rekenen moet nog omgebouwd worden van een volledige html-pagina

naar een module die ingevoegd wordt in de MasterPage.

Stap 5: Bestaande webpagina ombouwen- Open rekenen.aspx- Regel 1:

toevoegen de verwijzing naar de masterpage

- Verwijder de regel


25/74

cursus ASP.NET 4.0


Validatie is de controle op geldigheid van ingevoerde gegevens. Deze controle kan

plaatsvinden aan de client-kant of aan de server-kant. Meestal gebeurt de controle aan de

client-kant om onnodig dataverkeer met de server te voorkomen. Het is immers niet zinvol om

de gegevens van een formulier te versturen als ze niet volledig of niet juist zijn ingevuld.

Validatie-controls.

Het zal je niet verbazen dat men binnen ASP.NET enkele

controls heeft ontwikkeld. (zie Toolbox, Validation).

De namen spreken vaak voor zich. Toch even een korte

toelichting:

- CompareValidator:kan twee waarden met elkaar vergelijken; bv. als je

een nieuw wachtwoord aanmaakt moet je dat twee keer invoeren; deze control

controleert of de twee textboxen dezelfde inhoud hebben.

- CustomValidator :een control waarbij je zelf bepaalt wat en hoe er gecontroleerd wordt.

- RangeValidator:controleert of een waarde binnen een bepaald bereik ligt

- RegulairExpressionValidator:controleert de structuur van de invoer; bv. de postcode, emailadres of IP-adres.

- RequiredFieldValidator:controleert of er wel iets is ingevuld

- ValidationSummary:geeft een overzicht van gevonden fouten

Voor meer informatie kun je natuurlijk naar de

website van Microsoft gaan:

http://msdn.microsoft.com/en-

us/library/bwd43d0x.aspx

OpdrachtFormulier

- Maak een nieuwe website aan met denaam oef5

- Maak een nieuwe webpagina aan met denaamformulier

(aanvinken dat code in apart bestand

komt)- Samenstelling formuliero Kopje Formuliero Sleep vanuit de Toolbox HTML

een table in het document

(standaard drie rijen en drie

kolommen)


26/74

cursus ASP.NET 4.0

26 ROC de Leijgraaf

o Rij 1 kolom 1: voornaamRij 2 kolom 1: achternaam

enz. (zie afbeelding)

o Rij 1 kolom 2: TextBox1 (wijzig naam in tbVoornaam)Rij 2 kolom 2: TextBox2 (wijzig naam in tbAchternaam)

enz.

aanwijzigingen:bij geboortedatum drie textboxen: dag maand jaar

bij m/v twee radiobuttons; denk aan GroupName

Het formulier is nu klaar wat layout betreft.

Nu de validatie-controls.

- RequiredFieldValidatorbij voornaam, achternaam, adres en woonplaats kun je alleen maar controleren of er

iets is ingevuld.

Sleep vanuit de Toolbox Validators de Required-control naar rij 1 kolom 3; dit kan

zowel in de design stand als de source stand. Onderstaande code is toegevoegd:

- Aanpassingen:o ID="RFV1" ID=""o EM="RFV"

EM= "- Toevoegen:

o CTV="V"

- Herhaal deze actie voor achternaam, adres en woonplaats

- RangeValidatorbij dag, maand, jaar en aantal kinderen ga je grenzen aangeven.

Dit is het resultaat bij het veld Aantal kinderen.

Belangrijk is het type=integer; een TextBox levert immers tekst aan, als je het type

weglaat dan wordt de invoer als tekst met getallen vergeleken. Dat levert een heel

ander resultaat op.

- CompareValidatorhet wachtwoord moet tweemaal worden ingevoerd; de control CompareValidator kan

twee velden (tbWw1 en tbWw2) met elkaar vergelijken.


27/74

cursus ASP.NET 4.0


- RegularExpressionValidatorcontroleert of de invoer een bepaalde structuur heft; een emailadres bevat altijd

letters @ letters punt letters

Klik bij properties ValidationExpression op de drie puntje; het scherm Regular

Expression Editor opent zich. Hier staan al veel structuren klaar.

Kijk op deze site http://msdn.microsoft.com/en-us/library/ms972966.aspxom te zien

wat de mogelijkheden zijn bij ValidationExpression.

Er staat ook een RequiredFieldValidator bij; het is dus mogelijk om meerdere

validators te combineren.

- CustomValidatorhiermee kun je je eigen validator bouwen; als vb. is de postcode genomen.

&

De belangrijkste property in deze control is ClientValidationFunction.

Hiermee roep je een functie aan op de client. Deze functie is in Javascript geschreven

en bevindt zich in de


28/74

cursus ASP.NET 4.0

28 ROC de Leijgraaf

VP(, )

.IV = (.V.(/([09])4\1([AZ,])2/) != );.IV;

Het is ook mogelijk om een functie aan te roepen

op de server.

- ValidationSummaryDeze control genereert een lijstje met foutmeldingen.

Als je in ons formulier op versturen klikt zonder iets

in te vullen dan krijg je het volgende lijstje:

- Gegevens doorsturen.Waar blijven de gegevens als ze door de validatie zijn

gekomen?

Je gaat de gegevens zichtbaar maken door 13 labels

onder het formulier op te nemen.

o Open webpagina Formulier in de source-stando Plaats 13 labels in een division onderaan de pagina net voor o Open de pagina Formulier.aspx.cso Plaats bij Page_Load de volgende code

PL(, EA)

(P.IPB)

L1.T = V.T;L2.T = A.T;L3.T = A.T;L4.T = P.T;L5.T = W.T;L6.T = D.T;L7.T = M.T;L8.T = J.T;(.C) L9.T = "M"; L9.T = "V"; ;(.C) L10.T = "JA"; L10.T =

"NEE"; ;L11.T = E.T;L12.T = W1.T;L13.T = W2.T;

De gegevens in de textboxen worden in de labels geplaatst. Let op de bijzondere behandeling

van de radiobuttos.

In het volgende hoofdstuk wordt behandeld hoe deze gegevens meegenomen kunnen worden

naar een andere pagina.


29/74

cursus ASP.NET 4.0


State is data die een bezoeker van de website genereert. Je moet hier denken aan het invullen

van een formulier, het vullen van een winkelwagentje etc.

Http, het protocol waaronder webpaginas worden uitgevoerd, is stateless. Dit betekent dat er

tussen twee webpaginas in dezelfde website geen enkele relatie bestaat. Als een bezoeker

online winkelt dan maakt hij een keuze uit de winkel en plaatst artikelen in zijn mandje.Om de gegevens van pagina winkel naar pagina mandje te verplaatsen heb je

hulpmiddelen nodig. Uit de leerlijn PHP ken je Sessions, Cookies, Post en Get.

ASP.NET kent deze hulpmiddelen ook en heeft ook nog andere ingebouwde functionaliteit.

Afhankelijk van de belangrijkheid van de gegevens en de beveiliging moet je de keuze maken

of de overdracht van de gegevens aan de client-kant of aan de server-kant laat plaatsvinden.

Client-kant.

Aan de client-kant kent ASP een drietal mogelijkheden: ViewState, Cookie en QueryString.

ViewStateAls er bij validatie in een PHP-pagina iets niet goed was, kreeg je een leeg formulier terug en

moest alles opnieuw ingevuld worden. In de PHP-leerlijn heb je nog geleerd hoe je gegevensmoest vasthouden na een klik op de verzendknop. ASP kent Viewstate; dit is een voorbeeld

van gegevens vasthouden dat automatisch gebeurt bij formulieren.

In het vorige hoofdstuk heb je een mooi formulier gebouwd met diverse validatie-controles.

Opdracht ViewState

- Start Visual Web Developer- Maak een nieuwe website met de naam oef6- Importeer vanuit oef 5 het bestand formulier.aspx.- Voer het programma uit (CTRL + F5)- Je hebt nu een leeg formulier; voer je naam in en klik op versturen- Je ziet het formulier met je naam en de nodige mededelingen

o klik in debrowser op Pagina Bronweergave(je ziet dan de html-weergave zoals de pagina is uitgevoerd)

o ASP heeft de volgende code zelf toegevoegd onder de -tag

Toelichting:

- Er is een verborgen division bijgekomen met drie verborgen input-velden.- Het derde input-veld heet _VIESTATE; de tekens achter value is de versleutelde

inhoud van de input-velden in het formulier.

- Omdat ViewState aan de client-kant plaatsvindt, zijn de gegevens versleuteld.


30/74

cursus ASP.NET 4.0

30 ROC de Leijgraaf

Cookies.

Een cookie is een bestandje dat gegevens kan bevatten van de gebruiker. Afhankelijk van de

opslag zijn er twee soorten:

- Temporary cookie: opgeslagen in het geheugen van de browser; sluit je de browserdan wordt het cookie vernietigd.

- Permanent cookie: opgeslagen op de vaste schijf. Verwijderen moet je zelf regelen.

Om de techniek te begrijpen maak je de volgende opdracht.

Opdracht Cookie

- Start Visual Web Developer op- Open website oef5- Maak een nieuwe pagina aan met de

naam cookie_uitlezen.

- Maak een nieuwe pagina aan met denaam cookie_maken

o Kopteksto 2 Textboxeno Button

- Dubbel-klik op de button en voer deonderstaande code inB1C(, EA)

HCU = HC("");U.V[1] = TB1.T;U.V[2] = TB2.T;R.C.A(U);

Aan de constructie kun je zien dat HttpCookie een klasse is (object) waarvan je hier een

nieuwe instantie maakt. In de tweede en derde regel wordt het cookie gevuld; in de vierderegel wordt het cookie meegestuurd in de response-stream naar de browser.

- Ga naar pagina cookie_uitlezen.aspx- Plaats twee labels- Ga naar pagina cookie_uitlezen.aspx.cs (de code pagina)- Voer de volgende code in:

PL(, EA)

(R.C[""] != )

1 = R.C[""]["1"];2 = R.C[""]["2"];

L1.T = 1.TS();L2.T = 2.TS();

- Maak de pagina Cookie_maken.aspx tot startpagina(met rechter muisknop klikken op deze pagina in solution explorer Set as startpage)

- Sla alle documenten op en test je product.


31/74

cursus ASP.NET 4.0


Meerdere gegevens in cookie bewaren:HCU = HC("");U.V["1"] = TB1.T;U.V["2"] = TB2.T;R.C.A(U);

Let op: value in meervoud, dus values. En cookieUsername met index; het is dus een array.

Als je maar n input-veld in het cookie stopt dan is het

cookieUsername.Value = TextBox1.Text

Meerdere cookies:

Door de naamgeving in HttpCookie(naam) kun je meerdere cookies maken.

Permanent cookie:

Standaard kiest ASP voor een temporary cookie. Om een permanent cookie te maken moet je

de volgende regel toevoegen:

cookieUsername.Expires = DateTime.nowAddDays(10);

Door een vervaldatum op te geven wordt het automatisch een permanente cookie. In dit

voorbeeld wordt het cookie 10 dagen bewaard.

QueryStringEen URL als http://www.google.nl/search?q=asp.net&hl=nl is geen raadsel meer.

Deze URL bestaat uit twee delen:

- http://www.google.nl/searchwaar staat het zoekprogramma van Google; deze tekst staat i.p.v. het IP-nummer

- ?q=asp.net&hl=nlde gegevens waarop gezocht moet worden en in welke taal

Dit tweede stukje vormt de QueryString.

Opdracht QueryString

- Ga naar de pagina cookie_maken.aspx.cs- Plaats de volgende code tussen de accolades bij butto1_Click

;;; = TB1.T; = TB2.T; = .F(".?=0&=1", ,

);R.R();

De inhoud van TextBox1 en 2 worden overgenomen door de variabelen pagina enbladzijde. Deze variabelen worden weer opgenomen in de url-regel.

Let op de redirect.

- Ga naar de pagina cookie_uitlezen.aspx- Plaats twee labels (3 en 4)- Ga naar de pagina cookie_uitlezen.aspx.cs- Plaats de volgende code tussen de accolades bij Page_Load


32/74

cursus ASP.NET 4.0

32 ROC de Leijgraaf

;; = R.QS[""]; = R.QS[""];L3.T = .TS();L4.T = .TS();

- Sla de documenten op en test het product.

Server-kant.

ASP kent twee opties voor gegevensoverdracht via de server: application en session.

Het nadeel van application is dat deze de gegevens van alle gelijktijdige bezoekers bewaart.

Om te voorkomen dat twee gebruikers niet op hetzelfde moment naar hetzelfde object

schrijven moet je gaan werken met Lock en Unlock.

De session ken je al uit andere talen. Bovendien is dit de beste methode om gegevens te

bewaren en over te dragen. Voor iedere gebruiker wordt een uniek sessienummer aangemaakt.In deze cursus wordt alleen de session behandeld.

Opdracht Session.

- Ga naar pagina cookie_maken.aspx.cs- Voeg de volgende code toe; vr de querystring (waarom?)

S["1"] = TB1.T;S["2"] = TB2.T;

- Ga naar pagina cookie_uitlezen.aspx- Voeg twee labels toe ( 5 en 6)- Voeg de volgende code toe

1;2;1 = S["1"].TS();2 = S["2"].TS();L5.T = 1.TS();

L6.T = 2.TS();

- Sla de documenten op en test het product

Start Cookie_maken; voer tekst 1 en 2 in; klik op button; zie resultaat

Let op de URL van cookie_uitlezen!


33/74

cursus ASP.NET 4.0


De theorie over databases, het ontwerpen van een databasemodel, het bouwen van een

database, de taal SQL om de database te bewerken, al deze onderwerpen zijn uitvoerig aan

bod gekomen in de cursus Databases en SQL. In deze cursus worden de verschillende

werkwijzen met databases besproken binnen ASP.NET .

ADO.NETMicrosoft heeft in haar bestaan vele technieken

ontwikkeld om gegevens in databases te raadplegen

en te bewerken. Dit was nodig omdat andere

producenten de database-wereld in handen hadden.

SQL-Server is later door Microsoft ontwikkeld. Wil

je hier meer over weten, kijk dan op

http://en.wikipedia.org/wiki/Microsoft_SQL_Server

#Genesis

Een belangrijk onderdeel in dit verhaal is het leggen

van een connectie. Omdat er zoveel verschillendedatabase-programmas zijn en Microsoft meerdere

technieken kent om databases te benaderen zijn er

erg veel connectie-mogelijkheden. Er is zelfs een

speciale website om de juiste connectie te zoeken:

www.connectionstring.com

Met de introductie van het .NET Framework heeft

Microsoft ADO.NET gepresenteerd. Een belangrijk gegeven bij netwerk-applicaties en zeker

bij internet-applicaties is het aantal personen dat tegelijk de database wil raadplegen of

bewerken. Daarom heeft Microsoft verschillende technieken ontwikkeld waarbij de gebruiker

wel of geen connectie heeft met de database en als er een connectie is dan zo kort mogelijk. In

onderstaande afbeelding staan twee technieken; de techniek waarbij je tijdens het uitvoeren

van sql-commandos korte tijd verbinding hebt met de database en de techniek waarbij je met

een datatable werkt. Een datatable is een kopie van de database. Bij mutaties in de database

werkt deze laatste methode omslachtiger. Op een gegeven moment zullen de wijzigingen

moeten worden doorgevoerd in de echte database. Als meerdere gebruikers dit tegelijkertijd

willen doen dan moet je maatregelen nemen. Afhankelijk van het gebruik kies je voor een

bepaalde techniek; BOL.COM vraagt om een andere werkwijze dan de website van de

plaatselijke voetbalvereniging.


34/74

cursus ASP.NET 4.0

34 ROC de Leijgraaf

ADO.NET is een verzameling kant-en-klare classes die zich bevinden in de namespace

System.Data. Veel van deze classes worden aangeroepen vanuit controls. In Visual Web

Developer zitten erg veel van deze tools, die het bouwen van webpaginas minder

arbeidsintensief maken.

De Toolbox Data van Visual C#

Dezelfde Toolbox in

Visual Web Developer

DataSources

Als je naar de Toolbox Data kijkt dan zie je

daar een aantal controls die eindige met

DataSource (gegevensbron).

Afhankelijk van het programma waarmee de

database is gemaakt en de techniek die je

wilt toepassen, is er een control.

- AccessDataSource: database inAccess

- EntityDataSource: voor koppelingmet Entiteit modellen.

- LinqDataSource: als je met LINQwerkt

- ObjectDataSource: als je object-georinteerd werkt.

- SiteMapDataSource: de sitemap dientdan als basis

- SqlDataSource: voor een koppelingmet SQL-server

- XmlDataSource: voor een koppelingmet xml-bestand.


35/74

cursus ASP.NET 4.0


Gegevenspresentatie

Naast de koppeling met de database is een goede presentatie van de gegevens ook belangrijk.

Ook hiervoor zijn diverse controls aanwezig.

Gegevens per record:

- DetailsView,

- FormViewGegevens in lijsten:

- DataList,- GridView,- ListView,- Repeater

Verschil tussen DetailsView en FormView.Het verschil zit in de lay-out. DetailsView plaatst

standaard de gegevens in een tabel. Wil je dit ook

bereiken in een FormView dan moet je een template

maken. In beide controls kun je opties als Insert,

Update en Delete aanvinken en ze werken. Je moet danwel bij het koppelen van de View aan de SqlDataSource de optie Generate Insert, Update en

Delete aanvinken. Deze optie zit achter de knop Advanced in het scherm waar je het SQL-

commando moet ingeven.

Eigenschappen gegevenslijsten

De laatst toegevoegde control is de ListView. Deze

biedt zoveel mogelijkheden en is zo flexibel dat de

Repeater en DataList overbodig zijn geworden. Het

belangrijkste verschil met de GridView is de

mogelijkheid om nieuwe records toe te voegen. Als

je GridView gebruikt dan moet je bv. een

DetailsView maken om records te kunnen toevoegen.

Na het plaatsen van een ListView-control en het

koppelen met een DataSource kun je bij ListView

Tasks klikken op ListView configureren.


36/74

cursus ASP.NET 4.0

36 ROC de Leijgraaf

Keuze maken

In deze cursus kunnen niet alle database-technieken worden behandeld; er moet een keuze

gemaakt worden.

De volgende vier technieken ga je toepassen:

1. Snel iets maken kan via de SqlDataSource. Omdat alle code deel uitmaakt van het

aspx-bestand kun je geen onderscheid meer maken tussen de presentatie en deprogrammacode. Personen die zich bezig houden met de layout kunnen ook bij de

code.

2. Een betere manier van werken is om Stored Procedures te maken. Hiermee zijnopdrachten die handelingen uitvoeren met de database beter beveiligd.

3. De meest flexibele en tevens de meest arbeidsintensieve manier is alles zelf maken dusook je eigen klassen maken. Je bouwt je eigen koppeling met de database en met de

control ObjectDataSourceleg je de verbinding naar de webpagina. Deze werkwijze

vereist een grondige kennis van de achterliggende principes.

4. De vierde manier is weer een ander uiterste. Je maakt ten volle gebruik van de wizardsdie in Visual Web Developer aanwezig zijn. Deze wizards bouwen hun eigen laag

tussen de database en de webpaginas. Er wordt gewerkt met een DataSet. Door

keuzes te maken bij het uitvoeren van de wizards kun je eigenschappen en methodenaanmaken. Een nadeel is dat je er zelf geen grip op hebt; je kunt zelfgemaakte klassen

niet gebruiken.

Voorbeeld

Als voorbeeld nemen we de volgende webpagina; na het invoeren van een klantnaam en een

klik op de button, verschijnen de bestelde artikelen van ingevoerde klant.

De gegevens worden uit de database opgehaald met onderstaand commando.

Het vraagteken zal vervangen moeten worden door een variabele met de naam van de klantdie is ingevoerd bij zoeknaam.


37/74

cursus ASP.NET 4.0


Voor deze opdrachten heb je een database nodig; die bouw je zelf in Visual Web Developer.

Onderstaande afbeelding toont het ERD van de database.

Opdracht Database

- Maak een nieuwe website met de naam oef7.- Klik met de rechter muisknop op de map App_data in de

Solution Explorer

- Maak een nieuwe pagina aan van het type SQL-server ennoem de pagina dboef7

- Rechts op het scherm waar normaal de Solution Explorerstaat is nu de Database Explorer verschenen.

Klik je op het driehoekje voor dboef7.mdf dan

verschijnen de objecten die je kunt bouwen binnen een

database.

- Klik met de rechter muisknop op Tables en kies voorAdd New Table

In het scherm dat zich opent, kun je de veldnamen met

eigenschappen invoeren.

In het ERD kun je zien welke tabellen er zijn en hoe de

relaties liggen. Denk zelf goed na over de

veldeigenschappen zoals sleutelvelden.

Het veld Bestelregelnr is van het type autonummering; bij Column Properties kun je

Identity Specification op Yes zetten en Is Identity ook op Yes. De autonummering

begint bij 1 en telt er telkens 1 bij.


38/74

cursus ASP.NET 4.0

38 ROC de Leijgraaf

- Een relatie leggen; bv. tussen klanten en bestellingen:o Dubbel-klik in de database explorer op de tabel Bestellingeno Selecteer het veld b_klantnro Klik met de rechter muisknop op dit veld en kies voor Relationships

b_klantnr wordt een foreign key genoemd; klantnummer in de tabel klanten is

een primairy key

Het scherm Foreign Key Relationships opent zich.- Klik op Add om een relatie toe te voegen

- Klik op Tables And Columns Specifications

- Klik op het blokje met 3 puntjes.

- Het scherm Tables and Columns wordt geopend:o Selecteer bij Primary key table Klanteno Selecteer in het vak daaronder het veld klantnro Selecteer bij Foreign key table Bestellingeno Selecteer in het vak daaronder het veld B_klantnr

Let op de naam die aan de relatie wordt gegeven: FK_bestellingen_klanten

o Klik op OK en Close

- Leg op dezelfde wijze de andere twee relaties


39/74

cursus ASP.NET 4.0


- Voer de volgende gegevens in

Bestelregelnr niet zelf

intoetsen;

autonummering!

Nu de database klaar is kun je beginnen aan de voorbeeld-pagina waarbij de bestellingen per

klant opgevraagd kunnen worden. Om kennis te maken met de genoemde technieken ga je

deze pagina vier keer maken.

4 X ? ! ?


40/74

cursus ASP.NET 4.0

40 ROC de Leijgraaf

De eerste versie van de webpagina maakt gebruik van de control SqlDataSource. waarbij je

zelf het sql-commando moet invoeren dat de gegevens ophaalt.

Opdracht SQL

Stap 1: WebsiteOm te voorkomen dat je door de bomen het bos niet meer ziet, maak je voor elke techniek een

nieuwe website aan.

- Start Visual Web Developer- Maak nieuwe website aan met de naam oef7a

Stap 2: Database.

De database die je in de vorige opdracht hebt gemaakt staat in de map

.\ Visual Studio 2010 \ websites \ oef7 \ App_Data \

Hier staan twee bestanden, de database zelf en een log-bestand.

Je kunt deze twee bestanden kopiren naar dezelfde map in website oef7a.Het is ook mogelijk om vanuit website oef7a een connectie te maken naar de database in oef7.

Stap 3: Webpagina:

- Maak een nieuwewebpagina aan met

de naam

Bestelperklant.aspx

- Plaats de tekst, eentextbox, een button

en een gridview

volgens afbeelding.

Stap 4: Data Source:

- Klik op pijltje rechtsboven van de GridView;- Klik op dropdownlist bij Choose Data Source en selecteer De Data Source Configuration Wizard wordt opgestart.

- Klik op SQL-Database (bij ID verschijnt de naam SqlDataSource1) klik OK- Selecteer bij which data connection. de connectionstring en klik Next- Kies Specify a custom sql statement or stored procedure en klik Next- Je kunt de querybuilder gebruiken of gewoon het sql-commando intoetsen


41/74

cursus ASP.NET 4.0


- @klant_anaam is een parameter; klik op Next

- Hoe wordt de parameter ingevuld:Kies voor session en voer als session-naam in achternaam (door de parameter in een

sessie te stoppen kun je eventueel met dit gegeven naar andere webpaginas om verder te

zoeken of naar andere informatie m.b.t. deze klant).

Je kunt ook bij parameter source kiezen voor Control en bij ControlIDvoor TextBox1; in

dit input-veld voer je de zoeknaam in.

- Sluit af met finish (je kunt eventueel de query testen)

Stap 5: Webpagina afmaken:

- Als je terug bent in de webpagina Bestelperklant.aspx dubbelklik je op de button;

je komt in de pagina Bestelperklant.aspx.cs.

Bij de methode Button_Click voer je in:

- Sla de pagina op en testen (maak de pagina tot startpagina)

Het resultaat bij zoeknaam Berg.

Plaats de webpagina in de source-stand en je ziet alle code, ook het

sql-commando. Zowel de presentatie als de sturing zitten in n

document.

We laten deze werkwijze verder met rust omdat de volgende

methode beter is; werken met Stored Procedures.


42/74

cursus ASP.NET 4.0

42 ROC de Leijgraaf

Een stored procedure is een opgeslagen sql-commando. Deze sql-commandos zijn niet te

manipuleren zoals losse sql-commandos in een webpagina; het is dus een veiligere manier

van werken. Helaas bestaat er geen control of grafische omgeving om een stored procedure te

maken. Blijft over, zelf intoetsen!

Opdracht Stored Procedures

Stap 1: StoredProcedure maken

- Maak een nieuwe website oef7b- Kopieer de database of leg een connectie- Klik in de database explorer met de rechter muisknop op Stored Procedures- Klik Add new procedure- Toets code in:

@klant_anaam is een variabele/parameter die je inhoud kunt geven en dient als

selectiecriterium.

- Bewaar de stored procedure (ctrl + s) en klik met de rechter muisknop opStoredProcedure1 in de database explorer

- Kies voor Execute- In het scherm Run StoredProcedure vul je bij Value de achternaam Berg- Klik OK- Zie het resultaat onderaan in het Output-deel

LET OP: wel horizontaal scrollen om alles te zien


43/74

cursus ASP.NET 4.0


Stap 2: Webpagina maken:

- Maak een nieuwe pagina aanonder de naam

Bestelperklant.aspx

- Voer tekst in, sleep een

textbox en een button inpagina (zie voorbeeld)

- Sleep uit Toolbox Data eenGridView in de pagina

Stap 3: Data source:

- Klik op pijltje rechtsboven de Gridview- Kies bij Choose Data Source voor

- In de volgende schermen kies je vooro SQL-database en OKo Which data connection.. Selecteer ConnectionString en Nexto Kies voor Specify a custom SQL-commando or a stored procedure en Nexto Kies voor StoredProcedure en kies nr. 1 (er is maar n) en Nexto Kies bij parameter source voor Sessiono Session name: achternaamo Klik Nexto Finish (je kunt eventueel een test doen)

Stap 4: Webpagina afmaken:

- Dubbelklik op de button en voer onderstaande code in:

B1C(, EA)

S[""] = TB1.T;

- Let op: er is bij het aanmaken van de datasource bij de viewgrid gekozen voor Session alsinput-gegeven met de naam Achternaam; de session wordt gevuld met de inhoud van de

TextBox1.

- Startpagina maken: rechter muisknop op Bestelperklant.aspx en kies set as startpage

- Sla de pagina op en testen- Toets de naam Berg in en klik op de button

Het resultaat is natuurlijk hetzelfde als bij de vorige opdracht.

De eerste twee werkwijzen zijn bijna hetzelfde; de tweede vorm, stored procedure, is beter

vanwege de betere bescherming van de sql-opdrachten en dus een betere bescherming van de

database.


44/74

cursus ASP.NET 4.0

44 ROC de Leijgraaf

Bij de doe-het-zelf-methode ga je zelf een of meerdere klassen maken. De control

ObjectDataSource gebruikt deze klasse om objecten te bewerken. Een object kan hier een hele

tabel zijn uit de database, een record uit een tabel of een het resultaat van een query. Er is

geen directe verbinding tussen webpagina en database, alle handelingen met de database

verlopen via methodes in jouw klasse.

Opdracht: doe-het-zelf.

Voor de derde keer ga je de webpagina maken waarmee bestellingen per klant kunnen worden

opgevraagd.

Stap 1: connectionstring

- Maak een nieuwe website met de naam oef7c- Leg een koppeling naar de database of kopieer databasedboef7.mdf- Maak een connectionstring aan in Web.config

o Open het document Web.configo Voeg tussen de codes een connectie toe

Er kunnen meerdere connecties staan.

Stap 2: klasse maken met connectie

- Maak de klasse ClassConn waarin je de connectie tot object maakt.o Klik met rechter muisknop op C:\....\oef7co Kies voor type Class en voer naam in ClassConn; klik Add (de vraag

toevoegen aan de map App_code met JA bevestigen)

o Voer code in (zie volgende pagina)


45/74

cursus ASP.NET 4.0


S;S.C.G;S.L;S.W;S.D.SC;S.C;

CC

SCGC()

S =CM.CS["MC"].CS;

SC = SC(S);;

Toelichting:

1. Kijk of de juiste namespaces zijn opgenomen.

2. In deze class zit n methode; hiermee wordt de connectionstring geformeerd.

Deze methode is static omdat je methodes aanroept uit een andere klasse zondervariabelen(parameters) mee te geven (de methode GetConnection uit de klasse

SqlConnection wordt aangeroepen).

3. conString wordt de naam van de nieuwe connectionstring waarin MijnConn is

opgenomen

4. Het resultaat conString wordt in een nieuwe instantie gestopt met de naam con.

Dit resultaat wordt teruggegeven zodat het bruikbaar is in bv. de volgende klasse.

Stap 3: klasse Verkopen maken

- Maak de klasse ClassVerkopen aan.o (handelingen: zie stap 2)o (code met toelichting zie volgende pagina)

1

2

3

4


46/74

cursus ASP.NET 4.0

46 ROC de Leijgraaf

S;S.C.G;S.L;S.W;S.C;S.D.SC;S.D;

CV

CV()

DTSA()

="SELECT ., ., .,., ., .,., .

FROM , , , WHERE . = . . = . . = . = '"+ + "'";

DT = DT();(SC = CC.GC())

SDA = SDA(, );.F();;

Toelichting:

1. Een constructor heeft altijd dezelfde naam als de klasse met toevoeging van ( ).

Een lege constructor zodat de klasse altijd kan worden aangeroepen.

2. De methode DataTable SelectAll() wordt aangeroepen met de parameter zoeknaam

als je de datasource gaat koppelen aan de GridView, dan vraagt de wizard waar de

inhoud van zoeknaam vandaan komt.

3. Het SQL-commando bepaalt welke gegevens worden geselecteerd.

Let op de WHERE constructie; 3 relaties en 1 voorwaarde kl_anaam = zoeknaam.

4. Er wordt een nieuwe instantie gemaakt van DataTable die gebruik maakt van onze

connectie en waarin ook een nieuwe instantie gemaakt wordt met de klasseSqlDataAdaptor die het sql-commando als parameter mee krijgt.

De regel (SC = CC.GC())opent de connective

met de database en sluit automatisch de connective als de opdrachten tussen de

accolades {} zijn uitgevoerd.

2

3

4


47/74

cursus ASP.NET 4.0


Stap 4: webpagina maken

- Verwijder de huidigedefault-pagina en maak een

nieuwe default-pagina

- Plaats de tekst, een textbox,een button en een GridView

volgens afbeelding.

De textbox krijgt de naam

zoekop

- Klik bijChoose Data Source

op

het scherm configure data source wordt geopend.

o Kies voor Object en klik OKo Choose your business object: selecteer ClassVerkopen en klik Nexto Choose a method: selecteer SelectAll . en klik Nexto Selecteer bij Parameter source control en bij ControlID zoekopo klik Finish

- Sla de pagina op en testen op de naam Berg

Belangrijk in verband met de te kiezen techniek:

In de inleiding van dit hoofdstuk is al verteld dat ASP.NET meerdere werkwijzen kent met

betrekking tot databases.In deze opdracht heb je de techniek van DataTable toegepast. Bij deze techniek wordt er een

tabel in het geheugen aangelegd. De inhoud van de tabel is het resultaat van het sql-

commando. Als je alleen gegevens uitleest dan is dit een techniek die eenvoudig is en weinig

belasting geeft op de database (webserver).

Op de volgende pagina begint de opdracht die laat zien hoe je met een DataSet te werk gaat.

Dit hoofdstuk wordt afgesloten met extra opdrachten waarin de werkwijze met DataReader

aan bod komt.


48/74

cursus ASP.NET 4.0

48 ROC de Leijgraaf

De vierde manier is gebaseerd op een DataSet. Met behulp van wizard wordt de code op de

achtergrond gebouwd. Als je gegevens moet ophalen uit meerdere tabellen tegelijk, zoals in

het voorbeeld, dan is de DataSet een betere keuze. Werk je met n tabel dan is DataTable

ook een mogelijkheid.

Op deze manier ben je in staat om aan RAD (Rapid Application Development) te doen.

Opdracht DataSet

Stap 1:

- maak een nieuwe website aan met de naam oef7d.- leg een koppeling of maak een kopie van database oef7.mdf

stap 2: DataSet

- Voeg een nieuw item toe en kies DataSet; naam DSverkopen.Klik OK ( bij voorstel om de DataSet in de App_Code map te plaatsen )

- Sleep vanuit de ToolBox DataSet een TableAdapter in de pagina DSverkopen.

de wizard TableAdapter begint vragen te stellen:o Kies bij Data Connectie: oef7 connectionstring en klik Nexto Kies use SQL-statements en klik Nexto Toets onderstaand sql-commando in of bouw het met de query-builder

SELECT ., ., .,., ., .,., .

FROM , , , WHERE . = . . = . . = . = @

o Which methods? De wizard stelt er twee voor; je gaat akkoord en klikt Finishomdat de query meerdere tabellen tegelijk benadert kun je niet kiezen voor de

derde optie (insert, update en delete); deze optie kan alleen bij een query met n

tabel.

o Klik met de rechter muisknop op heticoontje bij DataTable1 en kies voor

Preview Data. De query kun je testen;

toets bij value Berg in en klik Preview

o Sla dit document op: CTRL + S

Wat je niet ziet is datde wizard classes en

methoden heeft

geschreven.


49/74


50/74

cursus ASP.NET 4.0

50 ROC de Leijgraaf

Nu je een aantal technieken hebt toegepast kun je ook andere database-bewerkingen in

webpaginas bouwen. In de volgende opdrachten worden twee technieken toegepast in een

andere functionaliteit; stored procedure en object-georinteerd.

In de praktijk ga je waarschijnlijk n techniek gebruiken om je daarin te specialiseren.

Werken met stored procedures

De volgende opdrachten maak je in website oef7b; stored procedure.

Opdracht: Selecteren met dropdownlist

Acties:

- Maak een stored procedure die eenlijstje genereert met alle types

- Maak een nieuwe webpagina aan

- Plaats een DropDownListKies als datasource de zojuist

gemaakt stored procedure

- Maak een stored procedure die uitde tabel Artikelen de fietsen

selecteert van het type dat je

gekozen hebt in de dropdownlist

(gebruik de variabele @type)

- Plaats een ListView met alsdatasource de zojuist gemaakte

stored procedure

kies als input voor @type de keuze

die gemaakt wordt met de

dropdownlist

- Zet bij de properties van dedropdownlist AutoPostBack op

True.

- Sla de webpagina op en testen.


51/74

cursus ASP.NET 4.0


De snelle manier van update en delete.

- Maak een nieuwe webpagina aan- Sleep de control GridView naar de pagine- Selecteer bij Choose Data Source

o Selecteer connectionstring Next

o Als voobeeld staat er al Select * from Artikelen; klik op Advancedo Klik Generate Insert, Update en Delete statementso OK, Next, Finish

- Als je de GridView tasks opent kun je editing en deleting en sorting aanvinken- Voer de pagina uit om te zien wat het resultaat is.

Met deze werkwijze maak je ten volle gebruik van de wizard- mogelijkheden binnen

ASP.NET. Het is snel en het werkt.Is dit vanuit de gebruiker gezien ook zo?Klik op delete en weg artikel.

Had je, in plaats van de GridView, gekozen voor de ListView dan had er ook nog de optie

Enable Inserting bij gestaan.

Artikel toevoegenEen fiets toevoegen aan de tabel Artikelen.

Acties:

- Maak webpagina met input-velden en leg-vast-button

- Maak Stored Procedure waarin de gegevens

worden toegevoegd aan de tabel Artikelen.(6 parameters)

- Voeg aan de pagina bv. een DetailsView toewaaraan de Stored Procedure is gekoppeld.

- Kies bij de parameters voor Session- Bij een klik op de button worden de seesion-

variabelen gevuld met de TextBoxen (denk

aan de juiste conversie)


52/74

cursus ASP.NET 4.0

52 ROC de Leijgraaf

.

B1C(, EA)

S[""] = C.TI32(TB1.T);S[""] = TB2.T;S[""] = C.TD(TB3.T);S[""] = C.TI32(TB4.T);S[""] = C.TB(TB5.T);

S[""] = TB6.T;

Om de opdracht perfect te maken:

- zou het programma met een voorstelkunnen komen m.b.t. artikelnummer

(hoogst bestaande nummer +1).

- Inputveld Actief vervangen doorradiobuttons met True en False (actief /

niet actief)

- Inputveld Type vervangen door een

dropdownlist- De ingevoerde gegevens valideren!


53/74

cursus ASP.NET 4.0


Object-georinteerd

In website oef7c heb je object-georinteerd geprogrammeerd. Open deze website voor de

volgende opdrachten.

Opdracht Artikel toevoegen.

Stap 1: webpagina maken- Maak een nieuwe webpagina aan met de

naam Artikel_toevoegen.aspx.

- Plaats tekst, textboxen en button volgensafbeelding.

Stap 2: Class maken

Voor de duidelijkheid maak je voor elke

bewerking van de tabel Artikelen een aparte

klasse. In deze opdracht maak je een klasse met

n methode waarmee je een artikel kunt

toevoegen aan de tabel Artikelen.

- Maak een nieuwe Class aan met de naam ClassArtToevVoor code zie volgende pagina

Stap 3: actie na klik op button

- Ga naar de pagina Artikel_toevoegen en dubbelklik op de buttonde pagina voor de code (Artikel_toevoegen.aspx.cs) wordt geopend

- Plaats de volgende code bij Button1_Click

B1C(, EA)

CAT = CAT();. = C.TI32(TB1.T);. = TB2.T;. = C.TD(TB3.T);. = C.TI32(TB4.T);. = TB5.T;. = TB6.T;CAT.();

Toelichting:

- Er wordt een nieuwe instantie/object gemaakt van de klasse ArtToev- De variabelen van een object/artikel worden gevuld- De methode toevoegartikel wordt aangeroepen

Stap 4: testen

Let op: de gegevens worden niet gevalideerd, dus alleen gegevens invoeren die toegestaan

zijn.


54/74

cursus ASP.NET 4.0

54 ROC de Leijgraaf

S;S.C.G;S.L;S.W;S.D;S.D.SC;

CAT

; ; ; ; ; ; ; ; ; ; ; ;

CAT()// TODO: A

(CAT)

= " (, , ,, , ) (@, @, @, @,@, @)";

(SC = CC.GC())

SC = SC(, );.P.AWV("@", .);.P.AWV("@", .);.P.AWV("@", .);.P.AWV("@", .);.P.AWV("@", .);.P.AWV("@", .);.O(); = .ENQ();

Toelichting:

1. De variabelen worden gedeclareerd2. De methode toevoegartikel met als parameters de instantie3. Sql-commando is duidelijk4. De instantie-variabelen worden overgezet naar de parameters in het sql-commando.

1

2

3

4


55/74

cursus ASP.NET 4.0


Opdracht Artikelbestand bewerken.

In deze opdracht ga je drie webpaginas maken die met elkaar verbonden zijn.

Opdracht Artikel opvragen.

De eerste pagina Artikel_opvragen heeft eendropdownlist om een artikelnummer op te

vragen; na de keuze verschijnt het betreffende

artikel op het scherm. Op deze pagina bevinden

zich ook twee buttons die je doorsturen naar de

pagina Artikel_wijzigen en Artikel_verwijderen.

- De dropdownlist kun je maken zoals in devorige opdracht

(zet AutoPostBack op True)

- Als een artikelnummer is geselecteerd dan

moet er een klasse worden aangeroepenwaarin een methode zit die het artikel

ophaalt uit de database.

Maak een klasse met de naam

ClassArtikelen en de methode selectartikel

(code zie volgende blz.)

- Het resultaat dat de methode selectartikel teruggeeft plaats je bv. in labelsPL(, EA)

(P.IPB)

= C.TI32(DDL1.SV);CA = CA.();

L1.T = C.TS(.);L2.T = .;L3.T = C.TS(.);L4.T = C.TS(.);L5.T = .;L6.T = .;

- De buttons Wijzigen en Verwijderen hebben een verwijzing naar de betreffendepagina en de inhoud wordt meegenomen via een sessie.

B1C(, EA)S[""] = L1.T;S[""] = L2.T;S[""] = L3.T;S[""] = L4.T;S[""] = L5.T;S[""] = L6.T;R.R(".");


56/74

cursus ASP.NET 4.0

56 ROC de Leijgraaf

ClassArtikelenS;S.C.G;S.L;S.W;S.D;S.D.SC;

S.C;

CA

; ; ; ; ; ; ; ; ; ; ; ;

CA()

CA()

= " * A = @";CA = ;(SC = CC.GC())

SC = SC(, );.P.AWV("@", );.O();SDR = .ER();(.R())

= CA();

. = .GI32(0);. = .GS(1);. = .GD(2);. = .GI32(3);. = .GS(4);. = .GS(5);

;


57/74

cursus ASP.NET 4.0


Opdracht Artikel_wijzigen

- Maak een nieuwe webpagina aan met denaam Artikel_wijzigen.aspx

- Plaats tekst, label, textboxen en button

volgens afbeelding

- Het label en de textboxen moeten gevuld

worden met de inhoud van de sessie-

variabelen.

Plaats in de pagina Artikel_wijzigen.aspx.cs bij

PL(, EA)

L1.T = S[""].TS();TB1.T = S[""].TS();TB2.T = S[""].TS();

E.

Let op: artikelnummer zit in een label en kan dus niet gewijzigd worden!

- Na een klik op Leg Vast moeten de gegevens worden weggeschreven naar dedatabase. Schrijf hiervoor de methode Artikelwijzigen in de klasse ClassArtWijz

(code zie volgende pagina)

- In de pagina Artikel_wijzigen wordt de methode aangeroepen en de aangepastegegevens meegestuurd.

B1C(, EA)

CAW = CAW();. = C.TI32(L2.T);. = TB1.T;. = C.TD(TB2.T);. = C.TI32(TB3.T);. = TB4.T;. = TB5.T;CAW.();


58/74

cursus ASP.NET 4.0

58 ROC de Leijgraaf

Code klasse ClassArtWijz met de methode wijzigartikel.

S;S.C.G;S.L;S.W;S.D;

S.D.SC;S.C;

CAW

; ; ; ; ; ; ; ; ; ; ; ;

CAW()

(CAW)

= " = @, = @, = @, = @, = @ A = @";

(SC = CC.GC())

SC = SC(, );.P.AWV("@", .);.P.AWV("@", .);.P.AWV("@", .);.P.AWV("@", .);.P.AWV("@", .);.P.AWV("@", .);.O();RA = .ENQ();


59/74

cursus ASP.NET 4.0


Opdracht Artikel_verwijderen

- Maak een nieuwe pagina aan met de naamArtikel_verwijderen.aspx

- De gegevens worden getoond en je kunt klikken op

o JA ; het artikel wordt verwijderd uit de databaseo NEE ; je keert terug op pagina Artikel_opvragen.

- Voor het verwijderen schrijf je een methode verwijderartikel in de klasseClassArtVerw

S;

S.C.G;S.L;S.W;S.D;S.D.SC;

CAV

; ;

CAV()

(CAV)

= " A = @";

(SC = CC.GC())

SC = SC(, );.P.AWV("@", .);.O();RA = .ENQ();

- Bij een klik op JA

B1C(, EA)

CAV = CAV();. = C.TI32(L1.T);CAV.();


60/74

cursus ASP.NET 4.0

60 ROC de Leijgraaf

LINQ (language integrated

query) is een querytaal zoals

SQL. LINQ zit in de .NET

omgeving gebouwd en is te

gebruiken in talen als C#.LINQ is een nieuwe techniek

om de kloof tussen database en

webpaginas te overbruggen. In

feite is LINQ een laag tussen

de database en de webpagina

die automatisch wordt

aangemaakt en vol zit met

classes en methoden.

LINQ kun je toepassen op

verschillende vormen van

gegevensverzamelingen; als er

maar structuur in zit. Naastdatabases kunnen dit zijn: een

array, een xml-bestand, maar ook het bestandssysteem op je computer.

Opdracht Linq-array

Gegeven de volgende array

[] = "A", "A", "B", "B", "B", "C","C";

Je wilt een pagina maken waar je de

beginletter kunt invoeren en na een klikop een nbutton verschijnen alle namen die

beginnen met de ingevoerde letter.

- Maak een nieuwe website aan metde naam oef8

- Maak een nieuwe pagina aan- Plaats tekst, textbox, button en

listbox volgens afbeelding

- Dubbelklik op button voer devolgende code in


61/74

cursus ASP.NET 4.0


D2: S.W.UI.P

;[] = "A", "A", "B", "B", "B", "C",

"C";

PL(, EA)

(P.IPB)

= TB1.T.TU();LB1.I.C(); =

.SW();

( )LB1.I.A();

B1C(, EA)

Toelichting:

1. Variabele letter declareren en de array namen declareren en vullen.2. De actie wordt uitgevoerd als er op de button is geklikt; er ontstaat dan een postback

situatie.

3. De variabele letter krijgt de inhoud van de textbox; bovendien wordt de inhoudomgezet in een hoofdletter (ToUpper)

4. De query in LINQ-code

5. foreach leest de query uit en toont de inhoud via een listbox.

Opdracht Linq-directory

- Maak een nieuwe pagina aan- Plaats tekst, button en listbox- Bij properties listbox aantal Rows op 20 zetten- Dubbelklik op button en voer de volgende code in

1

2

3

4

5


62/74

cursus ASP.NET 4.0

62 ROC de Leijgraaf

D3: S.W.UI.P

PL(, EA)

(P.IPB)

= S.MP("");DI = DI();

= .GF();

(FI )LB1.I.A(.TS());

B1C(, EA)

Toelichting:

1. Ook hier weer actie na klik op button, dus als er postback situatie is.2. Er wordt hier gebruik gemaakt van de klasse DirectoryInfo; dit is pas mogelijk als je

de namespace IO hebt toegevoegd. Voeg bovenaan de codepagina de regel toe:

using System.IO;

Onder de volgende link zit een website van Microsoft met 101 voorbeelden over LINQ.

http://msdn.microsoft.com/en-us/vcsharp/aa336746


63/74

cursus ASP.NET 4.0


Opdracht Linq-database

Stap 1: Database:

- Open website oef8- Kopieer de database of leg een connectie.

Stap 2: LINQ-connectie maken- Klik met de rechter muisknop op

C:/../oef10. (Solution Explorer)

en kies voor Add New Item

- Kies voor LINQ to SQL classes; naam: linqtest (bevestig de vraag met JA; de mapApp_Code wordt aangemaakt).

- Open de database explorer en maak de tabellen zichtbaar- Sleep de vier tabellen in de pagina App_Code/linqtest.dbml en sla de pagina op

De tussenlaag is hiermee aangemaakt.

Stap 3: Een nieuwe Class maken:

- Maak een nieuwe Class aan met de naam ClassBestelperklant


64/74

cursus ASP.NET 4.0

64 ROC de Leijgraaf

S;S.C.G;S.L;S.W;

///

///S CB///CB

DC = DC();

CB()

//// TODO: A //

SA()

= .

. . . . .B . . . .A. == ., ., ., .,

.A, ., ., . ;

;

Toelichting:1. Let op dat system.data en system.data.sqlclient nu ontbreken

Je gebruikt system.Linq

2. Er is een linq-connectie gemaakt in de vorige handeling; op de achtergrond heeft het

programma toen de klasse linqtosqlDataContext aangemaakt.

Hier roep je een nieuwe instantie aan met de naam ldc

3. Altijd een constructor maken met dezelfde naam als de klasse.

(wordt er standaard ingezet)

4. Het sql-commando in LINQ-formaat

let op dat de methode het resultaat teruggeeft: return query

Het werk op de achtergrond is klaar, nu nog een webpagina.

1

2

3

4


65/74


66/74

cursus ASP.NET 4.0

66 ROC de Leijgraaf

Een website waarbij niet alle paginas vrij toegankelijk zijn of een website die alleen

toegankelijk is voor leden moet je afschermen met een beveiligde toegang. Meestal bestaat

deze toegang uit een inlogscherm waarbij de gebruiker een juiste combinatie van inlognaam

en wachtwoord moet invoeren.

ASP.NET

Je kunt natuurlijk alles zelf programmeren, maar in ASP.NET zit de mooie functionaliteit

Membership (lidmaatschap). Er zijn functies en controls voor het aanmelden als lid bij een

website, het inloggen, wachtwoord wijzigen, wachtwoord vergeten, enz.

Opdracht Beveiliging

Stap 1: administration tool

- Maak een nieuwe website aan onder de naam leden

- Kies in het menu Website voor ASP.NET Configurationde ASP.NET website administration tool wordt opgestart

- Klik op tabblad Security- Klik bij Users op Create

User

- Voer een gebruiker in;alle velden zijn verplicht

en het wachtwoord moet

minimaal uit zes tekens

bestaan waarvan een

speciaal (iets anders dan

een letter of cijfer); bv

asdf!1

- Klik op create user -continue en sluit de

administration tool af.

- Terug in Visual WebDeveloper klik je bij de

Solution Explorer op

Refresh

Bij App_Data is een nieuwe database aangemaakt. In de database explorer kun je de

inhoud bekijken.

- Open ASPNETDB.mdf Tablesklik met rechter muisknop op aspnet_users en kies show data tableje ziet de ingevoerde gegevens waarbij een uniek ID en het wachtwoord versleuteld zijn.


67/74

cursus ASP.NET 4.0


Stap 2: Webpaginas

Het beveiligingssysteem bestaat nu en kan toegepast worden op webpaginas.

- Maak een nieuwe webpagina aan met de naam login.aspx- Schakel naar de design-stand en sleep vanuit de ToolBox Login een login-control naar

de pagina.

- Sla de pagina op.- Maak een nieuwe webpagina aan met de naam testlogin.aspx- Schakel naar de design-stand en sleep vanuit de ToolBox Login

o een login-status-control naar de pagina.o een login-name-controlo een login-view met de tekst zichtbaar na inloggen.

- Sla de pagina op- Schakel de authentication in het bestand web.config uit door html-opmerking-tekens te

plaatsen en sla het bestand op.

Hierdoor gebruikt ASP.NET de pagina login.aspx die jij gemaakt hebt in plaats van de

genoemde pagina in web.config.

- Maak pagina testlogin.aspx tot startpagina- Start de website met ctrl+F5

De login-status-control ziet dat er niet is ingelogd en toont daarom de mededeling LOGIN.

- Klik op login en de login-pagina wordt geopend; voer inlognaam en wachtwoord in.- Na inloggen verschijnt weer de beveiligde pagina. (inloggen is veranderd in uitloggen).

Stap 3: Gebruikers autoriseren

Autoriseren is de gebruiker rechten geven om een pagina te mogen openen. Deze rechten kun

je instellen met de administration tool.

- Maak een nieuwe map aan met de naam Ledenklik met rechter muisknop op c:// oef en kies New Folder

- Maak een nieuwe webpagina aan in de map Leden met denaam ww_wijzigen.aspx

- Sleep vanuit de Toolbox Login een change-password-control in de pagina.

- Sla de pagina op- Open de administration tool (menu Website ASP.NET Configuration)- Kies tabblad Security en klik op Manage Access Rules bij Access Rules- Klik op Add new access rule

o Klik op map Ledeno Selecteer Anonymous userso Selecteer Deny

(gebruikers die niet ingelogd zijn wordt de toegang tot de map leden geweigerd)

- Klik OK en sluit af


68/74

cursus ASP.NET 4.0

68 ROC de Leijgraaf

- Start de pagina ww_wijzigen.aspx op (startpagina maken)Eerst verschijnt het login-scherm en als je bent ingelogd opent zich ww_wijzigen.aspx

In de map leden is naast de webpagina ook een bestand web.config verschenen. Als je dit

bestand opent dan zie je:

Gebruikers (users) die we niet kennen (?) worden geweigerd (deny).

Het tegenovergestelde is

Als je een map hebt voor de beheerder met de naam Kees dan kan de autorisatie op deze map

er zo uit zien:

De volgorde van de rechten kan belangrijk zijn. Als je de rechten instelt via de administration

tool plaatst deze de * en ? automatisch onderaan.

Roles

Autoriseren kan bij veel gebruikers een hele klus zijn. Daarom is er

de mogelijkheid om groepen te maken; ROLES genoemd.


69/74

cursus ASP.NET 4.0


In dit hoofdstuk ga je vanaf het begin een beveiligde website bouwen. Het is een hele klus,

maar wel belangrijk om te weten. Deze opdracht resulteert in een basis-website die als

voorbeeld kan dienen voor toekomstige, nog te bouwen sites.

Opdracht Vereniging

Stap 1: aanleggen structuur

- Start Visual Web Developer en maak een nieuwe website met de naam Vereniging- Verwijder de paginadefault.aspx(Let op: Site.Masternietverwijderen)- Voeg de mappen toeadmin, ledenengasten- Maak een nieuwe master-pagina aan in de root-directory (C://vereniging/)

o Plaats een tabel van n rij met twee kolommeno Plaats in de linker kolom de links, een loginstatus-control en een loginname-

controle

De code tussen de body-tags:

HOMELEDENADMINAANMELDEN

- Maak de volgende paginas aan op basis van deze MasterPageo In de root-directory

Default.aspx Login.aspx

o In de map admin Default.aspx Adminpag.aspx Web.config


70/74

cursus ASP.NET 4.0

70 ROC de Leijgraaf

o In de map leden Ledenpag.aspx WWwijzigen.aspx Web.config

o In de map gasten Aanmelden.aspx WWvergeten.aspx

Na deze acties staat in de Solution Explorer deze structuur

Stap 2: autorisatie

- Ga naar de administration tool en maak de volgende gebruikers aanNaam Wachtwoord Email Rollen

Henk Henk!admin1 [email protected] Admins en Leden

Ingrid Ingrid!admin2 [email protected] Admins en Leden

Kees Kees!lid1 [email protected] Leden

Agnes Agnes!lid2 [email protected] Leden

Yasir Yasir!lid3 [email protected] Leden

- Maak de rollen Admins en Leden aan; maak de juiste personen lid van een of meergroepen

- Aanpassen van de web.config bestandeno Open web.config van de root-directory en pas de authentication aan en voeg

een authorization toe (zie code)

Authentication zorgt er voor dat iedereen, die niet ingelogd is, naar login.aspx wordt geleid.

Authorization zorgt er voor dat gasten toegang hebben tot de hele site. Op map-niveau ga je

nu beveiligen.


71/74

cursus ASP.NET 4.0


o Open web.config van de map Admin en vul de code aan

De leden van de groep admins krijgen hier rechten; alle gebruikers worden geweigerd

o Open web.config van de map Leden en vul de code aan

De leden van Admins en Leden hebben toegang; andere gebruikers worden geweigerd.

Instellingen op map-niveau overschrijven altijd de instellingen op een hoger niveau.

Stap 3: de paginas inhoud geven

- Open vanuit de map admin de pagina allegebruikers.aspx- Plaats de tekst Alleen voor beheerders in de contentplaceholder

- Open vanuit de map leden de pagina ledenpag.aspx- Plaats de tekst Alleen voor leden in de contentplaceholdler

- Open vanuit de root de pagina default.aspx- Plaats de tekst Welkom bij onze vereniging.

- Open vanuit de root de pagina login.aspx- Plaats een login-control in de

contentplaceholder

Dit is de inlogpagina; de layout

van de control kun je aanpassen

o Klik op > en auto Format;selecteer andere layout

o Klik op de tekst passworden verander deze bij

properties Text in

wachtwoord

LET OP dat je niet de ID

wijzigt


72/74

cursus ASP.NET 4.0

72 ROC de Leijgraaf

- Open vanuit de map gasten de pagina aanmelden.aspxo Plaats de control CreateUserWizard in de contentplaceholder

- Open vanuit de map gasten de pagina wwvergeten.aspxo Plaats de control PassWordRecoverry in de contentplaceholdero De gebruiker zal een mailtje moeten ontvangen met het nieuwe wachtwoord.

Om dit te kunnen testen moet je het volgende regelen: Maak een gebruiker aan met een bestaand email-adres (bij voorkeur je

eigen emailadres zodat je het bericht kunt ontvangen.

Plaats in web.config de volgende instelling

De invulling van xxxx, yyyy en zzzz is afhankelijk van je werkomgeving.

- Plaats een link bij op de MasterPage die wwvergeten.aspx aanroept.

Je kunt de website nu al testen. Zorg dat de default-pagina in de root startpagina is.Als je op leden klikt of op admin dan verschijnt er een inlogscherm.

Login als kees (kees!lid1) en klik dan op admin.

Kees is geen administrator en mag dus deze pagina niet bekijken.

Klikt Kees op leden dan ziet hij de pagina ledenpag met de tekst alleen voor leden.

Klik je op aanmelden en voer je een nieuwe gebruiker in dan is deze meteen ingelogd, maar

kan nog niets zien. De administrator zal de aanmelder eerst lid moeten maken van de groep

leden.

- Dit kan ook automatisch door in de pagina aanmelden.aspx het volgende op te nemen:o Na een dubbelklik op de button Create User kun je de code invoeren waarmee

de aanmelder meteen lid wordt van de groep leden


73/74

cursus ASP.NET 4.0



74/74

cursus ASP.NET 4.0

Cursus .Net

Documents

Transcript of Cursus .Net