7/21/2019 Cursus .Net
1/74
Cursus
ASP.NET 4.0
ICT - opleidingenApplicatieontwikkelaarLeerjaar 3, trimester 1
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
5/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 5
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
7/21/2019 Cursus .Net
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/21/2019 Cursus .Net
7/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 7
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
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
9/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 9
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.
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
11/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 11
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.
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
13/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 13
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.
7/21/2019 Cursus .Net
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?
7/21/2019 Cursus .Net
15/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 15
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.
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
17/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 17
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.
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
19/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 19
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.
7/21/2019 Cursus .Net
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 .
.
7/21/2019 Cursus .Net
21/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 21
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
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
23/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 23
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:
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
25/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 25
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)
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
27/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 27
- 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
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
29/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 29
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.
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
31/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 31
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
7/21/2019 Cursus .Net
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!
7/21/2019 Cursus .Net
33/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 33
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.
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
35/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 35
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.
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
37/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 37
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.
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
39/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 39
- 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 ? ! ?
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
41/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 41
- @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.
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
43/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 43
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.
7/21/2019 Cursus .Net
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)
7/21/2019 Cursus .Net
45/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 45
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
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
47/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 47
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.
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
49/74
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
51/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 51
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)
7/21/2019 Cursus .Net
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!
7/21/2019 Cursus .Net
53/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 53
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.
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
55/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 55
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(".");
7/21/2019 Cursus .Net
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);
;
7/21/2019 Cursus .Net
57/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 57
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.();
7/21/2019 Cursus .Net
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();
7/21/2019 Cursus .Net
59/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 59
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.();
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
61/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 61
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
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
63/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 63
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
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
65/74
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
67/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 67
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
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
69/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 69
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
7/21/2019 Cursus .Net
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.
7/21/2019 Cursus .Net
71/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 71
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
7/21/2019 Cursus .Net
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
7/21/2019 Cursus .Net
73/74
cursus ASP.NET 4.0
opleiding Applicatieontwikkelaar 73
7/21/2019 Cursus .Net
74/74
cursus ASP.NET 4.0