Veebistuudium arendus ASP.NET (0)

Andmebaasipõhiste veebirakenduste arendamine Microsoft Visual Studio
ja SQL Server ’i baasil

ASP.NET
Tallinn
2011

Sisukord

ASP.NET 4
Põhivõimalused 5
Lihtsa veebilehestiku loomine HTML keele abil 5
Astmelised laadilehed (CSS) – cascading style sheets 28
Programmeeritavad veebilehed 39
Andmebaasipõhise veebirakenduse loomine 51
Ülesandeid 55
Andmetabeli näitamine veebilehel 55
Ülesandeid 58
Andmete lisamine 58
Ülesandeid 60
Lehe kohendamine 60
Ülesandeid 67
Järjestamine 67
Ülesandeid 71
Otsimine 71
Ülesandeid 74
Konfiguratsioonifail web.config 75
Edasijõudnutele 120
Veebi kopeerimine 120
Programmi koodi paigutamine eraldi faili 121
Seadistamine (Web.config) 123
Rakenduse jälgimine ( Trace ) 124
Vigade haldamine 128
AJAX 133
Lokaliseerimine 135
Master Pages 140
Elemendid lehel 142
Veebilehtede kujundamine kasutades nägusid ( Themes ) 157
Väärtuste tööaegne meelespidamine 159
Veebisaidi turvamine 163
Andmetega manipuleerimine 171
WebParts 181
Veebiteenused 182
IIS 188
Kokkuvõte 189
Lisad 190

ASP.NET

ASP.NET on .NET raamistiku moodul, mis võimaldab sul luua veebirakendusi, kasutades sealjuures minimaalselt koodi.
ASP.NET ei ole mitte ASP ( Active Server Pages) uus versioon , vaid täiesti uus lähenemine veebirakenduste loomisele. Erinevalt ASPist ja ka PHPst, mis on peamiselt skriptimise keeled, on ASP.NET lehtede taga olev kood täielikult objektorienteeritud. Seega tuleks ASP. NETi võrrelda mitte PHP vaid JAVA rakendustega. Kasutaja saab, kuid ei pruugi täpselt mõelda HTMLi eripärade peale. Pigem määrab ta, milliseid komponente ta soovib veebilehel näha ning need näidatakse, arvestades vajadusel kasutaja veebilehitseja eripäradega – eriti kehtib see mobiilseadmete kohta.
Koodi ASP.NET lehtede tarbeks võib kirjutada ükskõik millises .NET keeles. Lisaks veebivormidele on võimalik oma rakendust veebis serveerida ka läbi veebiteenuste.
Ka ASP. NETist on olemas mitmeid versioone. Kui võrrelda ASP.NET versioone 1.1, 2.0, 3.5 ja 4.0 siis võib öelda, et palju on jäänud samaks, kuid üht teist on ka ümber tehtud ja lisatud. Hea uudis on see, et kõik vanad konstruktsioonid töötavad, kuid juurde on tulnud mitmed uued meetodid. Tänu provaideri( teenusepakkuja ) põhisele lähenemisele on rakenduse loomine alates 2.0 versioonist muutunud märksa abstraktsemaks ja lihtsamaks. Palju koodi on viidud lehekülje tagustelt koodilehtedelt teenusepakkujatesse. ASP.NET versioonis 3.5 on juurde tulnud toetus AJAXile (Asyncronious Java and Xml), mõned uued serveri kontrollid ning LINQ kasutamise võimalus. AJAX võimaldab andmeid lehel reaalajas muuta ilma, et peaks kogu lehte selle tarbeks uuesti laadima .
ASP.NET lehed koosnevad tekstifailidest, mida saab serveerida läbi IIS ( Internet Information Service ) virtuaalkaustade. Lehtede loomiseks sobivad kõik tekstiredaktorid. Abivahendeid usaldavale inimesele on kõige parem kasutada kirjutamiseks sellised abivahendeid, mis lehtede loomisel kiirendavad koodi kirjutamist lõpetades alustatud sõnu, kontrollivad jooksvalt süntaksit ning aitavad HTMLi loomisel. Üheks selliseks abivahendiks on Visual Studio . Ehkki palja "rumala" tekstiredaktoriga kirjutamisel on eeliseks lihtsus, siis nt Visual Studio Web Developer Expressiga on lootus ka algajal nõnda läbi saada, et ta paljudesse menüüdesse ära ei upu.

Põhivõimalused

Lihtsa veebilehestiku loomine HTML keele abil

Esimene veebileht

Kõige lihtsam veebirakendus koosneb ühest lehest. Veebilehtede levinumaks keeleks on HTML, mida veebilehitsejad mõistavad lugeda ning loetud teksti põhjal kasutajale lehe ette kuvada. Mitmete veebitehnoloogiate (ASP.NET, Java servlet, PHP, Python ...) tulemusena lehitsejasse saadetav tekst on ikkagi „puhas“ HTML, nii et osava peitmise korral ei pruugi veebisaidi vaatajal kuidagi võimalik olla kindlaks teha, millise tehnoloogia abil vastav lehestik on kokku pandud. Ning nagu varemalt kombeks ning praegugi lihtsamate, pidevat muutmist mitte vajavate lehtede puhul kasutatakse, võibki veebileht olla üks harilik HTMLi reeglitele vastav tekstifail, mida veebilehitsejas näidatakse. Mitmesugused tehnoloogiad on lihtsalt leidnud võimalusi, kuidas võimalikult mugavalt lehtedel olevad andmeid määrata vastavalt kasutaja soovidele. Lihtsaim HTMLi reeglitele vastav veebileht näeb aga välja järgmine:
Minu esimene leht
Tere maailm
Selle võib salvestada omale sobiva tekstiredaktoriga (nt. Notepad või ka vastinstalleeritud Visual Web Developer). Panna failile laiendiks .html (siis teab veebilehitseja, et vastavat teksti tuleb kujundada HTML-i reeglitele vastavalt), jätta meelde kuhu fail salvestati.
Edasi juba lehitsejas avada nagu tavalist kohaliku masina faili (failimenüüst ava). Tulemuseks leht, kus ülal pealkirjariba peal on lehe pealkiri ning allpool sisu osas lehe sisu.
Minu esimene leht
Tere maailm
Veidi lähemad seletused , et mida miski HTMLi lehe osa tähendada võiks.
Avakäsklus teatab HTMLi versiooni. Nii nagu nt. Wordi dokumentidel on versioonid 2.0, 6.0, 97, 2000, 2003, 2007 jne, nõnda ka HTML on oma arengu käigus muutunud. Kõiki eri versioone ja „murrakuid“ lugedes saaks neid kokku õite mitukümmend. Siit võib välja lugeda, et versiooniks on XHTML 1.0 Transitional – ehk siis 1999ndast ligi kümnendi püsinud kirjapanekuvorming.
Edasi hakkavad HTMLi käsklused. Märkide vahel olevate sõnadega antakse teada, mis nüüd tulemas on. Esimese elemendi nimeks ongi html, ehk siis lehitsejale teadmiseks, et tulemas htmli dokument. Juuresolev atribuut xmlns (xml namespace) näitab, millise nimeruumiga elemendid seotud on. XHTML 1.0 Transitionali puhul siis järgnev nimi: www.w3.org/1999/xhtml. Näeb välja väga hüperlingi moodi. Aga selline kuju võeti nimeruumide nimetuste puhul ette vaid selleks, et kogemata ei satuks mitmel eri firmal ette samanimelist nimeruumi. Kas vastavale lehele ka selgitav tekst andmete kohta pannakse – see on juba vajaduse ja viisakuse küsimus.
Veebilehe kood koosneb kahest suhteliselt iseseisvast osast. Ühe nimeks head (päis) ning teiseks body (sisu). Esimesse neist pannakse pealkiri (title) ning soovi korral lisaks igasugu muud andmed lehe kohta, mida otse näidata ei soovita. Näiteks lehe autor, märksõnad, kooditabel jm.
Minu esimene leht
Sisu osa lehel on kõigile nähtav. Lihtsamal juhul ongi siin paljas tervitav tekst, aga eks hiljem saab kujundust keerukamaks hakata muutma.
Tere maailm
Nagu näha, siis kõik alustavad elemendid peavad kusagil ka lõppema. Lehe sisuosa tähistav element body lõpeb lõpetava tähisega ning dokumendi enese .
Et suurem lehekülg võib ülesehituselt päris keerukaks minna, siis on vaja abivahendeid kontrollimaks, kas kõik ikka reeglitele vastab. Enamik lehitsejaid suudab küll mõningad (trüki)vead ka ise ära aimata ning siiski lehe viisakalt välja näidata. Kuid sealjuures võib hakata tekkima probleeme. Näiteks, et kas tekstid olid mõeldud üksteise kõrvale või üksteise alla. Kui veebilehe looja on oma lehe validaatoris järgi kontrollinud, siis võib loota , et lehitsejad saavad sellest enamvähem sarnaselt aru. Ametlikuks veebilehe tehnilise korrektsuse kontrolliks on loodud teenus aadressil http://validator.w3.org . Seal võimalik kontrollida kas juba ülesriputatud lehe korrektsust, laadida üles fail või kopeerida olemasolev HTMLi kood otse tekstiaknasse. Lihtsa väikese koodi puhul, nagu siinne alustus, on viimatine võimalus ehk mugavaim. Kui mõni viga juhtub, antakse sellest teada. Muul juhul aga teatatakse uhkesti rohelisel kirjal, et sisestatud kood on reeglipärane.
Ülesandeid

• Tee näide läbi. Vaata tulemust.
  
• Lisa tervitusele hüüumärk. Salvesta ja vaata veebilehitsejas tulemust.
  
• Veendu, et kood valideerub.
  
• Tekita HTML-koodi sisse viga (nt. eemalda üks
• Paranda kood taas õigeks. Kopeeri validaatori antud „kvaliteedimärgi“ lõik oma koodi sisse lehe lõppu (enne ). Veendu, et pilt tuli nähtavale.
  

Visual Web Developer Expressi install

Tasuta kasutatavate Express -toodete jaoks tarviliku leiab aadressilt www.microsoft.com/express . Veebi jaoks mõeldud toodete installimiseks on võimalik kasutada Web Platform Installerit, kus saab „linnukestega“ ära märkida soovitud komponendid.
Veebiosas Install-nupule vajutades saab vastava programmi kätte.
Tasub programm omale alla laadida
ja siis käima panna. Üldjuhul küsitakse, kas oled nõus laetud programmi käivitama. Vastavalt operatsioonisüsteemile võib küsimine erinev välja näha, aga administraatoriõigusi ja käivitusluba on igal pool vaja. Edasi kulub mõningane aeg vajalike täienduste laadimisele ning siis saab asuda paigaldatavaid komponente valima .
Veebilehestiku loomiseks vajalikud üksused peaksid üldjuhul olema vaikimisi juba valitud.
Tahtes aga seda üle kontrollida ja soovi järgi täiendusi lisada, saab menüüdes liikuda ja valikuid täiendada. Peab hoolitsema, et vähemasti Web Developer 2010 Express ning SQL Server peale saaksid.
Edasi on masinal hulk tegemist- kümnekonnast minutist mõne tunnini sõltuvalt veebi ühenduskiirusest ning masina enese jõudlusest. Pärast .NET 4 raamistiku installi lõppu palutakse arvuti taaskäivitada. Samuti tuleb taaskäivitus ette ülejäänud komponentide paigalduse järel. Seadistuse juures rohelistest ribadest ülemine näitab, kui palju failidest on kohale tõmmatud, kui palju veel. Alumisest näeb, mida parajasti paigaldatakse.
Pärast paigalduse lõppu on kasulik tarkvara registreerida – siis saab temaga töötada kauem kui prooviajaks ette nähtud 30 päeva. Help-menüüst Register Product – selle peale võimalik oma MSNi tunnusega sisse logida ning vajalik võti saada. Kui tunnust pole, saab selle samas luua.

Esimene veebileht Visual Studio abil

Nagu näha, võib lehti luua igasuguse tekstiredaktori abil. Piisab teksti kirjutamisest, salvestamisest ning veebilehitseja mõistab lehel olevate HTMLi käskude ning nende vahel oleva sisu põhjal tulemuse välja näidata.
HTMLi käske on aga palju ning kõik neist ei pruugi sugugi kohe tuttavad olla. Samas aga enamik meist on kujundanud tekste mõne redaktori abil, kus saab valida värve, suurust jm. Seetõttu võib esmane lehtede loomine minna libedamalt mõne selleks tarbeks mõeldud vahendi abil. Et siin materjalis tutvustatakse Microsofti veebivahendeid, jääb paratamatult ette Visual Web Developer, mil ka veebilehtede koostamiseks omaette nurk olemas.
Uue veebilehestiku loomiseks tasub valida failimenüüst „New Web Site“. Ning et liialt palju lehti silmade kirjuks muutmiseks ette valmis ei genereeritaks, siis sobib valikust Empty Web Site. Allpool tasub märkida/luua kataloog , kuhu sisse loodav lehestik tuleb.
Toimetuse tulemusena tekkis masinasse vastav kataloog vaid web.config-nimelise failiga. Sellest ei tasu end segada lasta. Web Developeri paremas servas võiks olla nähtaval Solution Explorer . Või kui seda mingil põhjusel seal ei paista, siis võiks aidata View menüüst valitud Solution Explorer. Selles parem hiireklõps rakenduse kataloogi nime peal ning võib valida enesele veebilehestiku uue elemendi.
Sealt omakorda HTML-lehe ning lehe nimeks näiteks peokuulutus.html.
Tulemusena tekib HTMLi kest, mille sisse saab sobivaid teateid lisama hakata.
Üles ja vahele on hea siin sobiv teade panna – hiljem kipub see kergesti ununema. Edasi võib aga vaadete alt valida „Design“ ning saab lehte kujundada juba küllalt „tavalist“ redaktorit kasutades. Pealkirja tarbeks võib stiilide alt valida „Heading 1“ – selle tulemusena mõistetakse too rida juba ise nähtavamaks vormida.
Vahepeal võib huvi pärast lähtekoodi ehk Source vaatest piiluda, mis siis lehele pealkirja märkimise tulemusena tehti. Nagu näha, pandi sõna „Koolipidu“ h1-nimeliste käskluste vahele. Samuti pandi lõigumärk p (paragraph) ümber tavalisele nähtavale tekstile. Kui lõike oleks rohkem, siis saab nad lihtsalt nõnda üksteise järgi kirjutada, igaühele alustuseks ning
lõpetuseks.

Koolipidu

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende
ristimise pidu. Kogu koolirahvas oodatud!
Lehe vaatamiseks tasub Web Developeris vajutada nupule, mille kirjelduseks „View in Browser“. Tulemuseks pannakse kohalikus masinas tööle veebiserver ning veebilehitseja ja loodud serveri kaudu saab nimetatud lehte vaadata. Iseenesest poleks palja HTML-lehe tarbeks serveri käivitamine hädavajalik – seda saab vaadata ka lihtsalt failina kohalikust kataloogist. Aga kuna Web Developer pigem mõeldud siiski iga kord serveris uuesti genereeritavate lehtede loomise tarbeks, siis on talle vastav võimalus sisse ehitatud. Nii võibki lehte rahumeeli imetleda aadressilt, mis hakkab tähekombinatsiooniga http – HyperText Transfer Protocol , järgneb masina nimi, kust lehte vaadatakse. Nimi localhost tähistab kohalikku masinat. Edasi pordi ehk värati number mis vajalik, et samas masinas olevad mitmed veebiühendust pakkuvad programmid omavahel tülli ei läheks. Siis juba rakenduse nimi ja sealt seest rakenduse sees oleva faili nimi.
Kui tahta loodud kuulutus teistele üle võrgu ka kättesaadavaks teha, tuleb see laadida lihtsalt kohta, kus see kõigile näha. Olgu selleks õpilasele koolivõrgus eraldatud veebiruum või ka mõnes avalikus serveris asuv koht. Eestis näiteks on levinud hot.ee nimeline veebikeskkond, kus rahumeeli igaüks saab omi HTML-faile hoida ja teistele näidata. Kel konto olemas, võib Kodulehe sektsiooni vastava faili laadida.
Edasi piisab juba veebilehitsejasse aadressi kirjutamisest ning igaüks võib üle võrgu vastavat teadet vaadata. Koolis saab viite panna nt. avalehele või siis huvilistele kirja teel kohale saata.
Tahtes hiljem ASP.NETi lisavõimalusi kasutada, võib püüda valida koha, kus vastavat majutusteenust pakutakse. Konspekti kirjutamise ajal jäi ühe mõistliku paigana silma aspspider.com - .NET 4.0 toega veebimajutuskeskkond. Algul tuleb end kasutajaks teha nagu ikka. Muidukatsetajate eemalhoidmiseks tuleb lehestikule koostada mõningane kirjeldus. Samuti tuleb registreerumissoov oma elektronpostiaadressilt kinnitada ning eraldi veel viis minutit oodata näitamaks, et keskkonna kasutamise huvi tõsine on.
Kui need sammud läbitud, siis lubatakse Control Panel-i ning File Manageri juurde, mille abil vajalikke faile serverisse laadida. Veebifailid tuleb panna kausta webroot. Praegusel juhul piisab vaid peokuulutus.html-ist.
Ning tuttav leht kaugeski serveris üleval .

Piltide kasutamine veebilehel

Veebileht võib piirduda ainult tekstilise teabega. Tahtes seda aga ilusamaks muuta, on pildid igati omal kohal. Kes autoriõigustega ei karda pahuksisse minna, saab omale veebist igasuguseid vahvaid kujutisi muretseda. Kui aga joonis ise kokku pandud, siis ei saa kellelgi muret olla, et seda üles panna ei tohiks. Siin kuulutuse juures joonistati kokku rebase moodi kujutis. Ning et seda oleks mugav veebilehestiku juures pruukida, siis salvestati olemasoleva HTML-failiga samasse kausta. Veebis enamvähem kindlapeale näidatavad vormingud on gif, jpg ja png. Esimene neist jooniste tarbeks, teine fotodele ning viimatine saab enamvähem kõigega viisakalt hakkama. Igasugu muude vormingute nagu näiteks bmp näitamine sõltub rohkem konkreetse veebilehitseja oskustest ja seadistustest. Siin salvestati siis peokuulutus.html-iga samasse kausta pilt nimega rebane .png.
Pärast pildi salvestamist ei ilmu see veel automaatselt failide juures nähtavale. Aga kui Solution Exploreris vajutada refresh-nuppu , siis peaks pildifaili nimi failide loetellu ilmuma.
Edasi võib pildi lihtsalt lehe teksti sees sobivasse kohta – näiteks lõppu – lohistada. Keskkond võib küsida alternatiivteksti – nende jaoks, kes mingil põhjusel pilte ei saa vaadata. Näiteks, kui tegemist mobiiliekraani kaudu veebi lehitsemisega ning kiiruse ja odavuse huvides on pildid välja lülitatud.
Kui lähtekoodi piiluda, siis on näha, et tekkis uus lõik (element nimega p). Lõigu sees pilt (element nimega img) ning viimasel küljes atribuutidena mõned andmed. Tähtsam neist pildifaili nimi, siin näites rebane.png . Teiseks kohustuslikuks väljaks pildi juures on toosama alternatiivtekst, mis sisestusaknast küsituna vastavasse kohta kirjutati. Kes veebilehte koodina kirjutab, mõistab selle sobivasse alt-kohta ka ise paigutada. Ning võibki pilti vaadata.<<<

This is header 1

This is header 2

This is header 3

Edasi tuleb nuputada, kuidas näitest omale kasulik rida ära näpata. Siin paistavad laadid olema kirjas lehe päiseosas (head). Kui praegu aga katsetame vaid ühele lõigule omaduste andmist, siis on meil vaja vaid sobiv käsklus õigesse kohta tõsta. Siin on märgitud kolme taseme pealkirjad. Ning ülal on igaühele neist määratud, kus ta paikneb. Teksti paremale joondamise käsuks on siis järelikult text-align:right. Tahtes näiteks tööjaotuse ja ilmateate lõigu paremale joondada, kopeerime vastava käsu sinna lõigu juurde.
Peo osaliste tööjaotus
Vaata ilmateadet ja vali enesele sobiv riietus!
ning pärast salvestamist võibki alumist teksti nõnda paremale joondatult vaadata.

Elementide omaduste määramine päises

Elementide omadused aga saab määrata ka lehe päiseosas – samuti nagu w3schools.com näite juures tehti. Selleks head osa sisse element style, sinna määratava kujundusega HTMLi käskude loetelu ning iga elemendi taha looksulgudes ja semikoolonitega eraldatult need käsud, mis vastava elemendi külge tahetakse panna. <<
teatab siis, et lehe sisu (body) on kollase taustaga. Esimese taseme pealkiri (h1) asetseb keskel ning on punast värvi.
Ning selguse huvides ka kogu avalehe kood: <<

Koolipidu

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende ristimise pidu. Kogu koolirahvas oodatud!
Peo osaliste tööjaotus
Vaata ilmateadet ja vali enesele sobiv riietus!

Laadileht eraldi failis

Lihtsa teksti puhul piisab kujunduse määramisest lõigu või sõna juures. Pikemal lehel tasub vähemasti korduvate elementide sõnad panna päisesse. Kui aga tahta sarnast kujundust kasutada mitme lehe juures, siis on viisakas kujunduskäsud tõsta eraldi faili ning need siis igal lehel sisse lugeda. Nii mõjuvad kujundusfaili käsud kogu lehestikule ning näiteks kõigi lehtede taust on kerge asendada sobivaga. Viimatises näites on määratud lehe taust ning esimese taseme pealkirja andmed. <<
Nende jaoks tekitamegi eraldi faili. Solution Explorer -> paremklõps rakenduse nimel -> Add New Item -> Style Sheet ning nimeks näiteks kujundus.css. Viimasesse on juba „seemneks“ pandud body-elemendi nimi. Kopeerin aga julgesti kogu olemasolevad kaks kujundusrida sinna faili ning algsest kustutan ära.
Nõnda läheb ülal määratud kujundus esimese hooga veebilehelt kaduma. Nii et veebilehitsejas paistab endine valge taustaga kuulutus, kus pealkiri on vasakul.
Edasi aga aitab käsklus
kujunduse eraldi failist sisse lugeda.
Tulemuseks siis taas kujundatud leht.
Kui nüüd soovida sama kollase tausta ja punase pealkirjaga kujundus panna ka tööjaotuse lehele, pole muud, kui sama link -käsklus ka sinna lisada.
Peo vastutajad

Peo korralduse eest vastutajad

10. klass
Rebased
11. klass
Võistluste ja katsumuste läbiviijad
12. klass
Muusika eest hoolitsejad
Avalehele

Kujundusklass

Kujundusomadusi saab määrata elemenditüüpide kaupa nagu eelnenud näitest näha: kõik esimese taseme pealkirjad paigutati keskele ja värviti punaseks. Mõningaid omadusi aga soovitakse panna ainult mõnede vastavate elementide juurde või siis sootuks erisuguste elementide külge. Näiteks soovitakse kõik uued teated lehel eraldi ära märkida sõltumata sellest, kas teated on tabeli, loetelu, lõigu või mõne muu tehnilise vahendi abil lehele kuvatud. Siinses väljamõeldud näites sobib eraldi rõhutada vastavast klassist osalejate roll. 10. klassi rahvas on rebased, 11. klassi omad peo võistluste läbiviijad. Kujundusfailis võib defineerida rolli klassi, edasi juba määrata, milline sõna või lõik selle klassi järgi kujundatakse. Ning kui juhtub, et kujundusklass tahetakse kinnitada osa külge, mis pole eraldi elemendiga piiritletud , siis piiritlemiseks sobib element nimega span . Element ise ei tee midagi, küll aga saab sinna külge kujunduskäsklusi ja – klasse kinnitada. Lisan kujundusfaili rea<
ning vastutajate loetelu juures märgin ära, millised kohad tähistavad rolli.
10. klass
Rebased
11. klass
Võistluste ja katsumuste
läbiviijad
12. klass
Muusika eest hoolitsejad
Nagu näha, mõistab arenduskeskkond olemasoleva(d) klassi(d) ise välja pakkuda.
Ning ongi rolli tähistavad kohad alla joonitud.
Ülesandeid

• Loo oma korvpallimeeskonna lehestikust koopia või koosta ise väike lihtne lehestik.
  
• Värvi mõni lõik ja mõne lõigu taust, katseta teksti suuruse ja paigutusega.
  
• Tutvu www.w3schools.com css-i näidetega. Katsu sealt vähemasti kümmekond enesele üle võtta (nt borderi abil jooned koos värvi ja laiusega, joondus, rasvasus (font- weight )).
  
• Määra lehe taust ja vaba serva laius ( margin -left) päises. Katseta.
  
• Tõsta need määrangud eraldi laadifaili. Veendu, et algsest lehest on kujundus kadunud.
  
• Ühenda veebileht ja laadifaili @ import käsu abil
  
• Ühenda sama laadifail ka teise veebilehega ning veendu, et kujundus tuli mõlemasse üle.
  
• Muuda laadifailis lehe tausta ja veendu, et see mõjub mõlemale lehele.
  
• Loo klass nt. noortemeeskondade tähistamiseks. Sealne tekst rohelise värviga. Tähista noortemeeskondade nimed vastava klassiga. Veendu, et kõikidel lehtedel on nende nimed rohelised. Muuda noortemeeskondade klassi nõnda, et roheline pole mitte tekstivärv vaid taustavärv. Veendu muutuse toimumises.
  
• Koosta täiesti uus lehestik näiteks kavandatava matka kohta. Märgi paberile üles teemad, mis võiksid lehestikus olla. Koosta paberile struktuur, kust lehelt kuhu võiks liikuda, mõtle lehtedele sobivad pealkirjad ning failinimed. Joonista valmis eskiisid, millised võiksid lehed välja näha – st. kas kõik lehed ühesuguse plaaniga või nt. avaleht ja menüülehed teistest erinevad. Koosta iga lehetüübi jaoks blankett . Stiilikäsklused koonda eraldi kujundusfaili, mis igasse blanketti imporditakse. Tee blankettidest iga lehe jaoks koopia, kuhu ainult märgitakse teema, näiteks „siia tuleb matka teise päeva söögikoha kirjeldus“. Seo lehed omavahel viidetega. Joonista matka marsruut kaardile ning pane ka see leht lehestikku. Palu naabril otsida üles soovitud leht ning vaata, kui kergesti ta selle menüüde kaudu leidis. Vajadusel lisa selgitusi või keerukamal juhul muuda oma lehestiku struktuuri. Mängi kujundusfailiga, et lehestik võimalikult meeldiv välja näeks. Täida lehed võimalikult meeldivalt ja usutavalt. Ning lõpetuseks – kui lehestik võimalikult hea ja nii omale kui ka sõpradele huvitav, siis tasub see matk võimaluse korral ka teoks teha :-)
  

Programmeeritavad veebilehed

Eelnevas peatükis kokku pandud veebilehti nimetatakse staatilisteks. See tähendab, et ükskõik kes või millal seda lehte vaatab – leht on ikka sama sisuga. Ning alles siis, kui autor midagi muudab võib lehe peal uut sisu nägema hakata. Nagu näha, nii peokuulutuse kui matkalehe kannatab sellisena täiesti kokku panna ning sageli polegi teabe edastamiseks rohkemat vaja. Selline veeb oli aga küllalt viisakal tasemel juba 1997ndaks aastaks olemas, edasi on jõudsalt mitmesuguseid lisavõimalusi arendatud, et just konkreetsele kasutajale meelepärane olla, või siis kasutajate sisestatud andmeid töödelda nõnda, et sellest midagi suurt ja ilusat sünniks. Kogu ASP.NET on taoliste võimaluste tarbeks loodud. Staatilisi lehti võiks südamerahus kirjutada ükskõik millega ja panna üles ükskõik kuhu. Visual Web Developeri juures on „ hariliku “ lehe kujundusvahendid lihtsalt üks killuke paljude programmeerimisvahendite hulgas.
Programmeeritaval veebilehel e. aspx lehel on samuti võimalik kasutada staatilisi HTML elemente, kuid lisaks neile avaneb võimalus kasutada programmelt kontrollitavaid ja hallatavaid ASP.NET elemente e. ServerControl’e

Kellaaeg

Programmeerimisvahendite katsetamiseks loon uue tühja veebiprojekti (failimenüü  New Web Site  Empty Web Site, nimeks programmeerimine ). Solution Explorerist taas New Item, aga sedakorda Web Form. Nimeks kellaaeg.aspx. Keeleks siinse konspekti edasise järgimise huvides Visual C# ning hoolitsen, et „ Place code in separate file“ juures ei oleks linnukest – sedaviisi ei teki esialgu tarbetut lisafaili.
Keeleks C#!
Tekkis ilus lehe blankett, kuhu saab tasapisi omi andmeid kirjutama hakata.
Lähemal uurimisel paistab, et sealne kood nagu oleks HTML ja nagu ei oleks ka. !DOCTYPE on täiesti olemas. Samuti oma alguse ja lõpuga . Ja ja . Aga üles on ilmunud salapärane rida
Ning päris mitmel pool on juures runat=“server“. Nende järgi võib aimata, et tõenäoliselt on tegemist ASP.NETi lehega . Ehk pea kõik, mis on HTMLina, saadetakse otse veebilehitsejasse. Kus aga juures kirjas runat=“server“, selle osaga võib lehe serveerimise käigus midagi juhtuda – sinna võidakse miskit programmikoodi abil juurde kirjutada või seal midagi muuta. Samuti on võimalik otse HTMLi koodi programmi kaudu midagi juurde kirjutada. Viimast võimalust ei peeta küll kuigi viisakaks. Aga kuna vanem ASP just nõndaviisi käis ning nii on lihtsaid asju kerge näidata, siis vastav alustusnäide ka siia. DateTime.Now annab praeguse kellaaja, Kell on abil trükitakse see just sinna kohta lehele. Nii et siinne lihtne lehe kood
Kell on
annab kokku lehe, kus nähtaval praegune kellaaeg.
Tegemist siis kõige ehtsama dünaamilise veebilehega – iga kord kui avad, on sisu uus.

Arvutav veebileht

Inimeselt andmete kättesaamiseks tuleb luua sisestuskoht. Üsna lihtne vahend selleks on tekstiväli. Sisestus - ja muid elemente saab valida tööriistakastist ( Toolbox ). Kui seda pole parajasti näha, siis View-menüüst saab selle esile kutsuda. Lohistades tekstikasti lehel sobivasse kohta, ilmub sinna tekst, mille abil ASP.NET teab veebilehe avamisel tekstikasti HTML-käskluse kuvada.
Automaatselt pannakse elementidele ka id-d. Nende järgi on hiljem programmikoodis võimalik nende poole pöörduda. Ning runat=“server“ jällegi iga elemendi külge, et server sellega midagi peale hakata tohiks. Kui unikaalne id ei taha tekkida, siis tasub tekstikast lehele lohistada disainivaates.
Tollide arv:
Sentimeetrites oleva tulemuse vaatamiseks piisab kohast, kuhu programmiga pääseb kirjutama. Tekstiväli lubab üldjuhul ka inimesel andmeid sisestada. Paljalt andmete näitamiseks on aga loodud element nimega Label. Selle siis lehele lohistamegi ning tulemuseks on järgnev koodilõik:
Tollide arv:
Sentimeetrite arv:
Et millegi peale oleks võimalik arvutama hakata, selleks tasub lehele lisada nupp – element tüübist Button . Ning et vastusesildile ei jääks sõna „Label“ vaid midagi selgitavamat, siis määrasin sinna teksti „Teadmata“, samuti nupule teksti „Arvuta“.
Tollide arv:
Sentimeetrite arv:
Nagu aimata, ei juhtu nupuvajutuse peale veel midagi – arvutile tuleb enne kõik asjad ette öelda. Saab küll tekstivälja kirjutada ning nupule vajutada, aga vastust ekraanile ei ilmu.
Vastuse leidmiseks tuleb nupu külge programmikoodi lõik siduda. Lihtsaimaks mooduseks on minna disainivaatesse ning vajutada nupule topeltklõps.
Tulemuse peale tehti koodis mõningad automaatsed täiendused.
protected void Button1_Click( object sender, EventArgs e)
Tollide arv:
Sentimeetrite arv:
Kui teraselt algse versiooniga erisusi piiluda, siis paistab, et ülesse script -ossa on tekkinud alamprogramm nimega Button1_Click. Ning veebilehe sisuosas on nupu külge tekkinud juurde sündmuse kirjeldus ="Button1_Click" . Viimane tähendab, et kui nupule hiirega vajutatakse, siis käivitub märgitud nimega käsklus. Erinevalt mõnest muust programmeerimiskeelest ei ole siin kohustuslikku seost käskluse (funktsiooni) nime ning vajutatava nupu (või muu elemendi) nime vahel. Mõnikord võib panna ka mitmed elemendid sama käsklust välja kutsuma ning funktsiooni parameetrite (nime järel sulgudes olevate andmete) kaudu saab teada, millisele nupule tegelikult vajutati. Aga kuna praegu meil ainult üks nupp, siis pole mõtet lugu segaseks ajada.
Nupuvajutuse juurde siis programmikood, mis sammu kaupa teeb kõik vajalikud toimingud , et tähtedena (tekstina, stringina) sisestatud tollide arvust saaks vastusesse ka tähtedena sentimeetrite arv. Aga vahepealsete arvutuste juures on vaja andmetüüpi muuta, sest tekstidega ei saa C# keeles matemaatilisi tehteid ette võtta. Küll aga on arvude jaoks loodud omaette andmetüübid. Komadega hakkama saavaks arvutüübiks on double , ainult täisarve tunnistavaks tüübiks int. Levinumate andmetüüpide (nagu näiteks string ja int ja double) omavaheliseks tüübiteisenduseks sobivad klassi Convert käsklused. Rida
double TollidArvuna = Convert.ToDouble(TollidTekstina);
võtab tekstina olevad tollid , teisendab nad arvutimälus ümber reaalarvuna kirjutatavateks andmeteks ning jätab tulemuse meelde muutuja (märksõna) TollidArvuna alla. Viimase saab juba koefitsiendiga läbi korrutada, tulemuse tekstiks muundada ning vastusesildi peal näidata.
protected void Button1_Click(object sender, EventArgs e)
string TollidTekstina = TextBox1.Text;
double TollidArvuna = Convert.ToDouble(TollidTekstina);
double koefitsient = 2.54;
double SentimeetridArvuna = TollidArvuna * koefitsient;
string SentimeetridTekstina = Convert.ToString(SentimeetridArvuna);
Label1.Text = SentimeetridTekstina;
Kes Excelis või mujal valemeid kirjutanud, teab, et sarnased arvutused saab mõnikord ka lühemalt kirja panna. Siinsel puhul siis näiteks annaks sama tulemuse rida
Label1.Text=Convert.ToString(Convert.ToDouble(TextBox1.Text)*2.54);
Mõnikord on ühte rida isegi kergem lugeda kui pikemat programmilõiku. Kui aga kood nagunii nõnda pikk, et ühe pilguga ei haara, siis pärastise kontrolli ja arusaamise huvides on vahel kasulik toimetused sammude kaupa välja kirjutada.
Mõningast tähelepanu võivad vajada komad ja punktid. Nagu näha, programmikoodi sees on tollide ja sentimeetrite vaheline kordaja murdosa eraldaja kirjutatud punktina – 2.54. Veebilehitseja akna ekraanil aga vastus 25,4 kirjas komaga . C# keeles tuleb koodi sees eraldaja kirjutada alati punktiga – nii nagu keele sünnimaal tavaks. Kui aga arvutil seadeteks valitud Eestimaa, siis mõistetakse andmed sisse lugeda ja väljastada kasutades murdosa eraldajaks koma.

Tehtevalikuga kalkulaator

Eelnev kalkulaator suudab vaid tolle sentimeetriteks teha. Kui on tegemist ühe teisendusega, siis piisab taolisest alusest täiesti. Võib kindla kursi alusel arvutada kroone eurodeks või untse grammideks. Samuti kannatab mõningase mõtlemise peale eelneva näite põhjalt ehitada võimaluse, kus kahe või enama sisendandme põhjal vastus arvutatakse. Olgu näiteks sisendiks kauba kilode hind ja kilode arv ning väljundiks makstav summa. Lihtsalt tekstikaste tuleb rohkem ning igal neist peab olema oma, teistest erinev ID, mille kaudu vastavat väärtust küsida. Arvutamiseks tuleb andmetüüp doubleks muuta ning pärast näitamise tarvis jälle tagasi.
Kui aga ei soovita, et kõik tuleks kasutajal ise sisse kirjutada, vaid osa andmeid saaks ka mugavamalt ja veakindlamalt valida – siis aitab rippmenüü, DropDownList. Üksikud valikud selle sees saab ListItemite abil ära märkida. Ning programmikoodis saab rippmenüüst valitud väärtust kasutada sarnaselt kui igast muust sisestuselemendist tulnut.
Järgnev kood siis kõigepealt lehe kujunduseks, kus andmete sisestamiseks kaks tekstivälja, nende vahele rippmenüü. Ning teise tekstivälja järele nupp arvutuse alustamiseks ja nupu taha silt tulemuse näitamiseks.
protected void Button1_Click(object sender, EventArgs e)
Tehtevalikuga kalkulaator
x
Nupu peal tekstiks võrdusmärk, sildi peal esiotsa tühjus . Et arendusvahendi disainivaates sildi olemasolu arusaadav oleks, selleks näidatakse seal kantsulgude vahel selle sildi nime. Veebilehel aga on vastaval kohal tühjus. Ning nupu külge siis taas seotud disainivaate topeltklõpsu kaudu onclick-sündmus, mille abil saab enesele vajaliku funktsiooni käima panna.
Funktsioonis nagu näha võetakse kõigepealt tekstikastidest välja väärtused ning teisendatakse need arvutamiseks sobivasse tüüpi. Millise tehte on inimene valinud, selle kindlakstegemiseks on üheks võimaluseks rippmenüü omandus SelectedIndex, mis annab valitud rea järjekorranumbri alates nullist. Iseenesest oleks võimalik ka rea väärtus SelectedValue abil kätte saada, aga järjekorranumber on kindlam. Näiteks rakenduse tõlkimise puhul võib nähtav jutt keelest sõltuda, kui aga järjekord samaks jätta, sama valiku peale saab ikka sama toimetuse teha.
Vastuse leidmiseks tuleb Vastuse muutuja kõigepealt deklareerida. Ning funktsiooni sees on kohustus sellele muutujale ka miski algväärtus anda. Ehkki me praegu teame, et tegemist on ühega neljast kindlaksmääratud valikust, tahetakse programmeerimiskeeles end kaitsta ka sellise võimaluse vastu, kus mõni valik on jäetud märkimata ning näitamiseks pole Vastusele kusagilt väärtust võtta. if-valikulausete abil tehakse sobiv tehe ning lõpuks näidatakse Vastus tekstiks (stringiks) muundatuna sildile Label1.
protected void Button1_Click(object sender, EventArgs e)
double Arv1 = Convert.ToDouble(TextBox1.Text);
double Arv2 = Convert.ToDouble(TextBox2.Text);
int Tehtenr = DropDownList1.SelectedIndex;
double Vastus = -1;
if (Tehtenr == 0)
if (Tehtenr == 1)
if (Tehtenr == 2)
if (Tehtenr == 3)
Label1.Text = Convert.ToString(Vastus);
Edasi võibki juba imetleda, kuidas me armas väike kalkulaator töötab.
Ülesandeid

• Võta aluseks tolle sentimeetriteks teisendav näide ning koosta selle põhjal leht, kus arvutatakse tunde ümber minutiteks.
  
• Paiguta lehele kaks nuppu: ühe abil saab arvutada tunde minutiteks, teise kaudu minuteid tundideks.
  
• Vali rippmenüüst kauba nimetus, kõrvale tekstivälja kirjuta kogus. Tulemusena väljasta makstav summa.
  
• Selliseid rippmenüü ja koguse komplekte on lehel mitu. Rippmenüüs on esimeseks valikuks „kaup valimata“ väärtusega null krooni. Leia kokku vajalik makstav summa.
  
• Tekstiväljadesse kirjutatakse auto kütusekulu liitrites saja kilomeetri kohta ning läbitavate kilomeetrite arv. Rippmenüüst valitakse bensiini mark millele vastavalt on programmiskoodis kirjas selle bensiini liitrihind. Arvutuse tulemusena väljastatakse sõidu maksumus.
  

Kood kahes failis

Lühikeste näidete puhul on mugav kood samasse faili kirjutada – kõik korraga silma all ja ka veebi on faili mugav kopeerida. Kui aga leht läheb veidigi suuremaks , siis on hea kasutada ASP.NETi pakutud võimalust, kus programmikood paigutatakse eraldi samanimelisse cs-laiendiga faili ning aspx-leht jääb elementide paigutamise ja sündmuste välja kutsumise tarbeks. Selleks tuleb veebivormi loomisel jälgida, et oleks sees „linnuke“, mille taga kirjas „Place code in separate file“.
Nõnda tekkis meile fail tervitaja.aspx ning tema kõrvale abifailiks tervitaja.aspx.cs. Alustuseks lisan kujunduselehele tekstivälja, nupu ja sildi.
Kui kujundusvaates vajutada nupule topeltklõps, siis luuakse – nagu ennegi – automaatselt alamprogramm nupuvajutuse alla käiva töö kirjeldamiseks. Ning nupule lisatakse onclick-sündmus selle alamprogrammi käivitamiseks. Lihtsa tervituse jaoks võtame tekstiväljast inimese nime ning kirjutame ta koos tervitusega sildi peale.
Järgnevalt lähtekoodid.
tervitaja.aspx
Palun eesnimi:
i
Ning tervitaja.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class tervitaja : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
protected void Button1_Click(object sender, EventArgs e)
Label1.Text = "Tere, " + TextBox1.Text;

Ülesandeid

• Pane eraldi kujundus- ja koodilehe abil tööle kahe arvu korrutamine .
  
• Koosta valuutakalkulaator – Määra algsumma ja sihtvaluuta ning arvuta nende põhjal lõppsumma.
  
• Võrreldes eelmisega saab valida ka algvaluutat.
  

Andmebaasipõhise veebirakenduse loomine

Eelnevalt näidatud kalkulaatoreid saab luua ka ilma veebipoolse programmeerimiseta – olgu siis Javaskripti, Flashi, Silverlighti või mõne muu kliendipoolse tehnoloogia abil. Kui aga soov otsida suurest andmehulgast serveris või sinna omapoolseid lisandusi teha – sellisel juhul on veebiserveripoolne programmeerimine vajalikum. Ning ASP.NETi juures on päris mitmekülgsed ja mugavad vahendid andmetabelitega ümberkäimiseks loodud.

Andmetabeli loomine

Alustame lihtsamast, ehk siis serveris tabelis olevate andmete vaatamisest Interneti kaudu. Nagu ikka, tuleb algul veebirakendus luua. Sedakorda saab talle nimeks loomalehestik. ASP.NETi rakendustele on välja mõeldud standardne struktuur. Kui andmebaasifail käib rakenduse juurde, siis ta paigutatakse kausta nimega App_Data. Tühjal rakendusel see puudub – järelikult tuleb luua. Rakenduse nime juurest valik Add ASP.NET folder pakub sobiva nimega kausta välja.
Edasi siis tasub loodud kausta sisse andmebaasifail istutada. SQL Serveri andmebaasile võib jätta vaikimisi nime – Database.mdf.
Loodud andmebaasifail paistab ilusti rakenduse puus :
Andmebaasiga lähemaks suhtlemiseks aitab Database Exploreri nimeline abivahend . Sealtkaudu saab öelda, et soovin luua oma andmebaasi uue tabeli andmete hoidmiseks. Relatsiooniline andmebaas nagu SQL Server hoiabki kõiki andmeid tabelites .
Esimeses ja lihtsamas lähenduses on andmebaas andmetabelite komplekt, igas tabelis olemas read ja veerud . Kõigepealt luuakse veerud, märkides neile ära nime ja tüübi. Siinses võimalikult lihtsas näites püüame veebilehel näidata koeri , igaühel koeranimi ja sünniaasta. Lisaks on andmebaasitabelite juures poolkohustuslikuks tulbaks identifikaatortulp, näiteks nimega id. Miks see vajalik? Kes näiteks Exceli tabeleid loob, sel tulevad reanumbrid automaatselt. Saab alati selgelt öelda, et vastav tekst on millises reas ja millises veerus . Andmebaasitabelites aga sellisel kujul reanumbreid ei hoita. Isiku identifitseerijaks võib olla näiteks isikukood . Need aga ei lähe sugugi mitte järjest. Küll aga on andmetabelite juures igati kasulik, kui on võimalik mingi kindla tunnuse järgi rida eristada. Muidu võib kergesti juhtuda, et näiteks sisestamisel tekib kaks korduvat rida ning tavavahenditega ei saagi naljalt öelda, et kustuta üks rida ära ja jäta teine alles. Siin siis on eristajaks tulp nimega „id“, tüübist int ehk täisarv. Nime ette tasub hiire parema klahviga valida primaarvõtmemärk.
Et andmebaasiprogramm taipaks automaatselt id- numbreid välja mõelda, selleks tasub alt veeru omaduste seast valida, et tulba omadus „ identity “ on sisse lülitatud. Ning siis asutakse automaatselt alates ühest ühe kaupa reanumbreid panema .
Andmetüüp int tähendab täisarve, sobib nii id kui sünniaasta puhul. Koera nimeks sai nvarchar(50) ehk siis national (lubab täpitähti) varchar ehk muutuva pikkusega, kuni 50 sümboli pikkune tekst. Omadus allow Nulls kipub vahel esmakordsel tutvusel segadust tekitama. Kõige lihtsam on sealne kast võimalusel märkimata jätta. Sel juhul tühiväärtused, ehk nullid (sõnaga) ei ole lubatud. Kui sisestame koera, peame sisestama ka tema sünniaasta. Kui aastat ei tea, saame aasta väärtuseks panna ka näiteks 0 või -1. Aga ei saa aastat panemata jätta.
Salvestusnupule või Ctrl+S vajutades küsitakse loodavale tabelile nimi – eks see tule siis anda.
Edasi juba koerte eneste sisestamine . Selleks tuleb avada Database Explorer. Sealt valida tabelite alt koertetabel ning selle pealt parema hiireklahviga Show Table Data. Nimi ja sünniaasta tuleb kirjutada, id-number tuleb automaatselt juhul, kui Identity Specificationi juurde on ennist yes kirjutatud.
Nende toimetuste tulemusena on andmebaas ja andmetabel olemas. Edasi siis juba tasub vaadata, kuidas andmed veebilehele nähtavaks saab.

Ülesandeid

• Tee näide läbi
  
• Koosta kõrvale sarnane tabel veiste tarbeks. Tulpadeks id, loomanimi, vanus ning mass
  
• Koosta uus veebirakendus ning sinna andmetabel autode tarbeks. Tulpadeks registrinumber (võtmeks), omanik ning aasta.
  

Andmetabeli näitamine veebilehel

Nagu Microsoftil kombeks, on siiagi sisse ehitatud kiire ja lihtne võimalus. Piisab, kui andmetabelist Database Exploreri aknas hiirega kinni võtta ja lohistada olemasoleva veebilehe disainivaatesse.
Selle peale luuakse vajalikud ühendused ning andmeid võibki veebilehel vaatama hakata.
Soovite andmeid sorteerida ja parandada – palun väga. Disainivaates GridView peale minnes tekib paremasse ülanurka väike kolmnurk . Sellele vajutades hüppab välja menüü soovitud toimetuste tarbeks. Vaid „ linnukesed “ sisse ja soovitu toimib. Nagu muinasjutus :-)
Koeranimele vajutades järjestatakse andmed kõigepealt nimede järgi tähestikulisse järjekorda. Ning vasakult edit-käskluse valides kannatab andmeid muuta ka.
Ja salvestada.
Ning hüüumärgi peale vajutades uuendatakse andmebaasivaade – võib veenduda, et ka seal on Mukist Muri saanud.

Ülesandeid

• Tee näide läbi.
  
• Näita sarnaselt välja ka oma andmetabelites olevad andmed.
  
• Tutvu disainivaates tabeli kujundamise võimalustega (GridView ülal nurgas väike kolmnurk, sealt AutoFormat )
  

Andmete lisamine

Andmetabeli lehele lohistamisega automaatselt tekkinud GridView kaudu saab küll andmeid järjestada, muuta ja kustutada , ent mitte lisada. Lisamiseks üks mugav abiline on DetailsView.
Ta tuleb lehele sobivasse kohta lohistada, andmeallikaks määrata juba lehele tekkinud SqlDataSource1 ning lubada andmete lisamine.
Omaduste juurest tasub määrata, et lisamine ongi selle komponendi vaikimisi omadus: DefaultMode: Insert .
Nii on lehel kohe olemas lisamise jaoks vajalikud lahtrid – ainult kirjuta ja lisa.
... ja veendu, et lisatud andmed ka nähtavad on.

Ülesandeid

• Tee näide läbi
  
• Loo sarnane lisamisvõimalus ka oma andmetabelite tarbeks.
  

Lehe kohendamine

Andmeid lisada, kustutada ja muuta saab küll kergesti. Edasi kipub aga tekkima tahtmine või vajadus lehte ilusamaks või ümbritsevate lehtedega sobivamalt koos toimivamaks kujundada. Vaatame siin järgnevalt mõned võimalused.
Igasugu muutmiste tarbeks on kasulik hoida olemasolevast alles koopia – siis võimalik eelmise meeldiva seisu juurde tagasi minna muretsemata, et millestki tarvilikust ollakse ilma jäänud. ASP.NET rakendus iseenesest talletatakse tekstifailidena, ülejäänud graafiline pool pannakse nende põhjal kokku.
Kui leht koosneb vaid ühest failist, sel juhul saab sellest mugavasti enesele koopia teha. Nagu ikka – hiire parema klahviga „kopeeri/ copy “ ning edasi „ kleebi / paste “. Kleepimiseks tuleb minna rakenduse kataloogi peale – siin näites E:\...\loomalehestik\
Ning Rename abil tasub lehele Copy of ... asemel ka viisakas nimi anda. Siin lehel sai selleks nimeks kiirkoerad2.aspx.
Veendumaks et kopeerimine ning ümber nimetamine õnnestus, tasub leht käivitada ja avada. Andmed peaksid samast andmetabelist ilusti nähtavale ilmuma.
Vihjeks: kui leht koosneb mitmest failist, siis ühe lehe kopeerimine nõnda lihtsalt ei õnnestu. Küll aga võiks saada kopeerida üht kataloogi rakenduses või siis keerukamal juhul tervet rakendust.
Et veebilehestik lõpuks siiski kirjas tekstifailina ning mitmeid asju saab vaid siit suhteliselt mugavamalt jälgida või muuta, siis teeme ka selle poolega tutuvust. Esiteks pilk võlurite abil kokku pandud lehe koodile .
Seletused
ASP.NET lehe päis. Lihtsamal juhul teatatakse vaid lehel kasutatav programmikoodi keel, kuid hiljem võib sinna hulgem parameetreid juurde tulla.
Järgneb HTMLi päis, mis otse veebilehitsejasse näidatakse ning millise standardi järgi võiks siis ka ülejäänud leht vormindatud olla.
Koht skriptide jaoks. Põhjalikuma rakenduse puhul paigutatakse skriptid eraldi faili, kuid lihtsamal juhul on siin koht käskluste käivitamiseks. Nõnda koodi ühes failis hoides säilib ka lehe mugav kopeerimisvõimalus. Äramärkimist väärib runat=“server“ parameeter skripti juures. ASP.NET tegeleb vaid nende märgenditega, mil vastav atribuut juures. Muul juhul oleks teemist kliendipoolse Javaskripti lõiguga.
HTMLi osa algus. Atribuut runat head-i juures võimaldab sealset sisu(näiteks pealkirja) programmikoodi abil muuta. Samas aga jätab koha ka pealkirja otse koodi sisse kirjutamiseks.
ASP.NET lehel on vaid üks runat=“server“-atribuudiga vorm. Ning kogu lehe programmiline tegevus käib selle sees. Enamasti pole põhjust vormi vaikimisi id-d muuta.
Järgnevad juba lehe töö seisukohalt vajalikud elemendid. GridView siinjuhul andmete tabeli kujul näitamiseks ning nende parandamiseks. Kõige lihtsamal juhul suudab GridView ka siis andmeid näidata, kui on loodud vastav element ning määratud, kust andmeid võtta. Siin on aga parameeter AutoGenerateColumns väärtusega „ False “, mis tähendab, et veerud tuleb (ja saab) ise kirjeldada ning nende omadusi sättida.
Andmeallika kaudu käib suhtlus andmeelementide ning andmebaasi vahel. Siinsel juhul on näha SQL- laused põhioperatsioonide jaoks ning seade, kus tegelikku andmebaasi asukohta määrav ConnectionString võetakse konfiguratsioonifailist loetelu ConnectionStrings kaudu.
Siinses rakenduses lisamiseks mõeldud DetailsView võtab tänu DefaultMode=“Insert“-ile ka vastava kuju kohe ette. Ning kasutajapoolne lisamiskäsklus kantakse üle SqlDataSource1 vastavaks Insert-käskluseks koos tekstiväljadest kaasa tulevate parameetritega.
Järgnevalt mõned täiendused, mida saab teha ka seadete alt valikuid otsides , kuid mis koodi sisse kirjutatuna õnnestub küllalt hõlpsalt ette võtta.
Nagu pildilt näha, muudeti pealkirjad lugemiseks mugavamaks ning tõlgiti käsklused. Samuti sai lehe pealkirjaks „ Koerad “. Viimatine siis HTMLi title-elemendi sisse. Tõlkimine vastavate elementide juurde. GridView puhul EditText, UpdateText ja CancelText parameetrid , DetailsView juures InsertText ja CancelText. Veergude nimede jaoks tulpadel omadus HeaderText.

Koerte loetelu

Ülesandeid

• Tee näide läbi
  
• Muuda oma tabelite veebiliidese juures tulpade ning käsunuppude nimesid .
  
• Määra lehele omapoolne pealkiri ning CSSi abil taustavärv.
  

Järjestamine

Kõigepealt taas esialgsest rakendusest koopia, et oleks koht, mille juures julgesti katsetada.
Disainivaates andmeallika peale minnes ilmub selle paremasse ülanurka väike kolmnurk. Sealt Configure Data Source võimaldab andmepäringuga seonduvat täpsemini seadistada .
Kõigepealt küsitakse üle, kust soovitakse andmeid võtta. Koht võib samaks jääda, ehk siis sobib pakutud DatabaseConnectionString1.
Ka koertetabel koos kõigi oma tulpadega võib samaks jääda.
Lehelt aga tasub vajutada nuppu ORDER BY..., mis võimaldab päringust tulevaid andmeid sobivalt järjestada.
Lihtsamal juhul sorteerime ühe tulba, näiteks koera nime kaudu.
Nagu näha, tekib andmete küsimiseks siis vastav SQL päringulause, kus võrreldes eelnevaga on juures ORDER BY järjestusosa.
SELECT [id], [koeranimi], [synniaasta] FROM [koertetabel] ORDER BY [koeranimi]
Pärast päringu muutmist küsitakse mõlema andmenäitamiskomponendi kohta üle, kas soovitakse nende sisu uuendada. Põhjuseks, et päringus võisid tulbad muutuda ning pakutakse võimalust, et komponendid hakkaksid näitama uut seisu. Samas – uuendamise käigus lähevad kaduma kõik vahepealsed konfigureerimistoimetused nende komponentide juures. Nii et tasub mõelda, milline valik parajasti kasulikum on. Siin näites tegelikult vahet ei ole kumb võimalus valida, sest esimesest näitest tehtud koopial pole veel elementide küljes mingeid tõlkeid ega seadistusi.
Pärast sorteerimiskäsu lisamist võib jälgida, et koerad vaikimisi näidatakse tähestikulises järjekorras.
Vastav SQL-lause siis ka andmeallika koodis nähtav.
SelectCommand="SELECT [id], [koeranimi], [synniaasta] FROM [koertetabel] ORDER BY [koeranimi]"

Ülesandeid

• Tee näide läbi
  
• Järjesta veised massi järgi
  
• Järjesta veised vanuse ja massi järgi
  

Otsimine

Suurema andmehulga puhul aitab otsimine kasutajal sobivat leida. Lihtsamal juhul otsitakse ühe tulba järgi, kuid vajadusel saab ka keerukamaid otsinguid kokku panna. Igatahes tasub luua otsimiskast koos sisestusnupuga.
Andmeallika konfigureerimisosas saab päringule lisada WHERE-tingimuse.
Otsimisvõimalusi on hulgem. Kui allikaks soovitakse lehel olevat sisestuselementi, siis tuleb Source-valikusse võtta Control. Edasi juba järgneb võimalus valida, millise sisestuselemendi järgi otsitakse. Kui operaatoriks valida võrdusmärgi asemel LIKE, sellisel juhul otsitakse teksti ükskõik kust vastava tulba seest – ei pea tervet nime täpselt välja kirjutama.
Pärast päringu valmimist tuleb vajutada Add-nupule ja seejärel OK-le.
Kui midagi pole sisestatud, siis tuleb teade, et ühtki vastet ei leitud. Selle teate saab vajadusel koodi sees ka maakeelseks tõlkida nagu ülal näites tehtud.
Kui aga kasvõi üks täht sisse kirjutatakse, siis otsitakse välja seda tähte sisaldavad nimed.
Koodis veidi uurimistööd tehes selgub , et otsimisega seonduv on pandud SelectParameters-sektsiooni. Samuti üks parameeter SQL-lause sisse.
SelectParameters all oleva asp:ControlParameter-i juures saab määrata, et ConvertEmptyStringToNull=“false“. Sellisel juhul andmete puudumisel ei loeta seda tühiväärtuseks (null), vaid lihtsalt tühjaks tekstiks.
Ning väljastatakse kõik read, sest LIKE käsklus saab aru, et tühi tekst leidub igas lauses .
Ülisuurte andmehulkade puhul peab sellise lubamisega ettevaatlik olema. Aga väiksemate koguste puhul on nii päris mugav otsida, et vaikimisi näeb kõike (või üht lehekülge sellest) ning otsingu abil saab näidatavat piirata.
Otsingulehe andmeallika kood ka eraldi, et oleks näha, mis kuhu paigutati.

Ülesandeid

• Tee näide läbi
  
• Koosta sarnane otsing veistele loomanime järgi
  
• Muuda otsingut nõnda, et otsitaks korraga mitme tulba andmete järgi.
  

Konfiguratsioonifail web.config

Alates ASP.NET versioonist 4.0 on konfiguratsioonifail vaikimisi kujul taas suhteliselt lihtne ja kergesti hallatav . Ning tema sisu on kasulik tunda. Sest erinevalt nt. PHP-st, kus vastavale failile pääseb enamasti ligi vaid süsteemiadministraator, on siin igal programmeerijal võimalus rakenduste ja kataloogide kaupa sättida, mis ta kusagil arvab vajalik olema.
Praegusel juhul paistab, et konfiguratsioonifaili on kirjutatud andmebaasiühenduseks vajalik ConnectionString. Ning sealtkaudu määratakse, et andmebaasi asukohaks on |DataDirectory|\Database.mdf, ehk siis rakenduse alamkaustas App_Data olev Database.mdf-nimeline fail. Rakenduse ülesseadmisel teise serverisse võib vajalik olla selle asukoha muutmine või sootuks teistmoodi andmebaasiühenduse kättesaadavaks tegemine ConnectionString-i kaudu. Kui juhtub, et ülespanekul vastav juhis antakse, siis siinne lõik on julgustamaks konfiguratsioonifaili täiendama.
Teise lõiguna on näha käsklus compilation debug=“false“. Nagu aimata võib, siis veateadete lähemaks lugemiseks võib olla põhjust see „false“ „true“-ks keerata. Esmanäitena aga mahub fail vähem kui poolele leheküljele ära. Siitkaudu konfigureerimise võimalused iseenesest päris laiad . Määrata tasub aga ainult väärtusi, mis vaikeseadetest erinevad.
Arenduskeskkonna näidisrakendus
Juba aastakümneid pannakse keskkondadega kaasa näitrakendusi, mille abil võiks mugav olla pakutavate võimalustega tutvuda. Nõnda ka Visual Web Developer Express pakub kohe esimese valikuna välja ASP.NET Web Site, kus pealtnäha kõige hädapärasem on veebilehestiku loomiseks täiesti olemas. Vaja vaid kohandada oma vajadustele ja võimalustele.
Nimeks sai talle naidisrakendus. Ning eelnevalt eelmisest tühjast näitest on siinses rakenduspuus faile hulgem. Iseenesest tegemist failidega, mis vähegi suurema veebirakenduse puhul ka ise tuleb sinna paika sättida.
Account -nimeline kataloog paistab olema kasutajate loomise ja sisenemiskontrolli jaoks. App_Data-s hoitakse vajalikud andmed. Skriptide alla paigutatakse vajalikud Javaskripti-täiendused. Sedakorda on siia „nuusutamiseks“ pandud paar JQuery -nimelise abiraamistiku teeki. CSS-faili(de) jaoks omaette kaust. Otse nähtavaid faile on vaid kaks: Default.aspx ja About.aspx. Ning nendegi kogu sisu pole failide eneste sees: Site.master hoolitseb lehestiku üldise kujunduse eest.
Juures veel kaks „tehnilisemat“ faili: Global .asax võimaldab mitmesuguste sündmuste peale koodijuppe käivitada. Web.config sisaldab rakenduse sätteid.
Iga rakenduse puhul tasub proovida, kas ta ikka käima ka läheb. Siin paistab avaleht käivitamisel selgesti avanema.
Ja sarnase kujundusega avaneb ka tutvustav About-leht. Tuleviku huvides tasub uurida, kuidas need kujundused nõnda sarnased on. Ning kust ja kuidas saab omale tarvilikke asju sättida.
About.aspx-lehe kood paistab üllatavalt lühike olema – puuduvad tavapärased HTMLi osad. Vaid päiserida, HeaderContent ja BodyContent, millest veel esimene on tühi.

About

Put content here .
Katseks muudan sisuteksti ja vaatan tulemust lehel.

Koerte leht

Siinne lehestik kogub koertega seotud lugusid .
Nagu näha võib, siis maakeelne tekst ilmus täiesti nähtavale. Samas osa lehest tuleb hoopis kaugemalt. Lehe päist uurides leiab sealt atribuudi MasterPageFile="~/Site.master" Selle järgi teab sisu otsida Site.master-nimelisest failist, mille küljest About.aspx omale kujunduse külge haagib.
Master lehel tasub tähelepanu pöörata reale
Sinna tuleb konkreetse lehe sisu nagu About.aspx-i puhul näha oli.
Muu master-lehe sisu võetakse igale lehele kaasa. Selline lähenemine annab võrreldes nt. PHP-keeles tavaks olevale päise ja jaluse sisselugemisele võimalus kujundus ühe tervikuna külge võtta.
Veel mõned lõigud, millele tasub master-failis tähelepanu pöörata. Kui head-plokile on määratud atribuut runat=“server“, siis saab selle elementide väärtusi serveris koodi abil muuta. Näiteks võimaldab master-lehte kasutaval alamlehel panna näidatavale lehele pealkirja – ehkki otsest ligipääsu vastavale HTML-koodi jupile pole.
Päiseosas asuv ContentPlaceHolder võimaldab alamlehtedel sinna vajalikke täiendusi saata – enamasti Javaskripti koodi või CSSi käsklusi.
Lehel olev LoginView näitab sisu vastavalt sellele, kas kasutaja on sisse logitud või mitte. Nagu siit näha – anonüümse kasutaja jaoks on viide logimislehele ~/Account/ Login .aspx, sisenenud kasutajat tervitatakse tema kasutajanimega (element asp:LoginName). Kapsaraud/tilde aadressi ees tähistab vastava veebirakenduse juurkataloogi.
[ Log In ]
Welcome !
Menüüvalikud kirjeldatakse ASP.NETi menüüelemendiga. Hilisemat kujundust saab parameetrite ja CSSiga seadistada.
Järgnevalt näidisrakenduse kujundust määrav master-leht tervikuna.

My ASP.NET Application

[ Log In ]
Welcome !
Võõrad lehed saab ikka tuttavaks neid enese järgi kohandades – siis näha millised muutused kuhu mõjuvad. Ülal koostasime koerte lehe, siin siis täiendused, et ka ülejäänu lehest temaatiline välja paistaks.

Koertelehestik

[ Sisene ]
Tere tulemast , !
Et lehe päis maakeelseks saaks, selleks tuleb vastav täendus ka About.aspx koodi sisse panna, lehe Title-omadusele uus väärtus anda.
Näitlehestikus pakutakse lahkesti sisselogimisvõimalust. Uurimiseks proovime järele.
Et omal kasutajat veel loodud pole, siis tuleb see registreerida nagu viite alt pakutakse.
Pakkusime nimeks juku, valisime parooli ning koos kasutaja loomisega on ta ka sisse logitud.
Edasi tasub uurida, et mis rakenduses siis tegelikult selle peale juhtus. Solution Exploreris kahe rohelise noolega uuesti laadmise nuppu vajutase ilmus App_Data kausta nähtavale andmebaasifail ASPNETDB.MDF.
Tegemist failiga, kuhu ASP:NET suudab kasutajahalduse automaatselt genereeritud tabelid panna. Database Exploreri kaudu vaadates näeb, et tabeleid selleks tarbeks päris hulgem tehtud.
Andmebaas ei pruugi vaid nende tabelitega piirduda. Soovides omapoolseid andmeid salvestada, teeme selle jaoks eraldi tabeli. Üheks lihtsaks mooduseks on kirja panna näiteks veebilehe külastused – kes ja millal käis. Põhimõtteliselt võimalik administraatoril neid ka logifailist vaadata, aga tavainimesel mugavam veebist tulemusi uurida.
Tabeli nimeks sai kylastused ning tulpadeks id, kasutaja ja aeg.
Et aeg automaatselt sisse pandaks, saab sellele seada “Default Value ”. Hetke aja annab funktsioon getdate()
Katsetuseks lisame uue kirje. (Database Explorer – Show table data) Kasutajanimeks test. Esialgu jäävad id ning aja kohale tühiväärtused (NULL).
Hüüumärgile
vajutades aga luuakse baasiühendus ning kohale paigutatakse väljade automaatselt genereeritud väärtused.
Andmete salvestus veebilehelt LINQ abil
Uus LINQ-nimeline tehnoloogia annab muuhulgas mugava võimaluse programmikoodi abil andmebaasi andmeid lisada ja muidki toimetusi teha. Selleks ettevalmistuseks tuleb aga eelnevalt luua uus element
tüübist LINQ to SQL Classes . Vaikimisi pakutakse selle nimeks DataClasses.dbml, mis võib ka jääda.
Lisaks küsitakse kas loodav klass panna App_Code kausta – ka sellega tasub nõustuda.
Ilmub valge ala, kuhu saab need andmetabelid lohistada, milledega LINQ kaudu suhelda tahetakse.
Et meil vaid üks külastuste tabel, siis tasub ta andmetabelite loetelust suurde aknasse kohale lohistada.
Edasiseks toimetuseks vaja projekt ära kompileerida. Siin osutus vajalikuks ka korra sulgeda ja uuesti avada. LINQ to SQL tekitab automaatselt tabelite nimelised klassid. Koodi uurides: DataClassesDataContext tüüpi dc on objekt, mille kaudu andmebaasiga suhelda. Külastuste klassist luuakse uus eksemplar nimega k. Sinna kasutajanimeks pannakse sisseloginud kasutaja nimi, ehk siis HttpContext. Current . User .Identity.Name. Ajaks saab praegune aeg.
Inglise grammatika järgi paistab tabelisse lisamine lisamisena kollektsiooni „kylastuseds“. Lõpuks „submit“ ning andmed ongi kohal.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class About : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
DataClassesDataContext dc = new DataClassesDataContext();
kylastused k = new kylastused();
k.kasutaja = HttpContext.Current.User.Identity.Name;
k.aeg = DateTime.Now;
dc.kylastuseds.InsertOnSubmit(k);
dc.SubmitChanges();
Piisab vaid sisselogitud jukuna lehe avamisest ning tema andmed ongi tabelis kirjas.
Andmebaasi administraator saab otse vaadata, teistele on avalikuks nägemiseks parem veebiliides teha. Lihtsamal juhul taas hiirega andmetabelist kinni ja võib selle disainivaatesse lohistada nagu eelnenud näites. Et viimaseid külastusi eest mugavam vaadata oleks, selleks tasub andmeallika juures teated aja järgi kahanevas järjekorras sortida – siis uuemad külastused kõigepealt.
Lehte piiludes võibki näha, kes ja millal seda külastanud on. Kui tegemist registreeritud kasutajaga, siis näha kasutajanimi. Kui anonüümse kasutajaga, siis siinsel puhul näidatakse tühja lahtrit. Aga eks rakenduse kirjutaja saab seda vabalt oma soovide järgi muuta.
Rakenduses tehtud ja tekkinud konfiguratsioonist saab aimu web.config-i nimelise faili kaudu. Veidi pikem kui tühja rakenduse juures, aga ei veel midagi lootusetult keerulist. Mõned tähelepanu väärivad lõigud.
Andmebaasi ühendavate ConnectionString’ide juures paistab, et tegelikult ühendatakse mõlema ühendusteksti kaudu sama baasiga. Lihtsalt LINQ ühenduse loomise automaatika arvas , et tal on vajalik omale lisakirje luua. Eks vajadusel saa need ka ühe nime alla kokku tõsta, aga siis rohkem koodis sättimist.
Märgend assemblies näitab, et Linq tarbeks on vastav teek juurde sisse võetud. Autentimise juures on moodiks määratud Forms . See võimaldab veebirakenduse siseselt kasutajaid hoida ja tuvastada.
Märgendi membership sees määratakse provaider (teenusepakkuja) uute kasutajate loomise tingimuste sättimiseks. ASP.NET võimaldab päris palju omadusi sättida just olemasolevate klasside parameetrite või omaloodud teenusepakkujaklasside abil.
Edasine rakenduse sättimine on juba suurelt jaolt kasutaja oma teha – arenduskeskkonnaga kaasa tulnud näite põhjal saab täiesti viisaka lehestiku kokku panna.
Esmapilgul võõrkehana võib tunduda skriptikaustas peituv jQuery-failide kogum. Uurimisjulguse tõstmiseks toome siia väikese näite, mida vastav teek Javaskripti abil teha aitab. Kui väike lõik oma „valgete näppudega“ tööle saadud, siis ehk julgem ka juba pikemaid ja keerulisemaid õpetusi lugeda.
Katsetamiseks lihtne HTML-fail – ehkki vajadusel saab seda ka aspx-lehe osana kasutada. Skripti omaduste kasutamiseks tuleb too kõigepealt sisse lugeda – sedakorda Scripts-nimelisest kaustast.
Lehe elementide peale võimaldab jQuery pöörduda dollarimärgi ja sellele järgnevates sulgudes oleva määratlusega. $( document ). ready ()-käsklusele antakse ette kohapeal loodud funktsioon, mis käivitatakse pärast kogu dokumendi kohale jõudmist. $(„li[class=’suur’]“) märgib kõiki li-elemente, millel küljes class-atribuut väärtusega suur – sarnaselt nagu XMLi XPathis elementide poole pöördutakse, kes sellega kokku puutunud. Sinna külge sündmus click paneb testiks käima Auh-tervituse.
$(document).ready( function ()

Muri

• Pauka

Reks

Vaid suurte koerte peale vajutades tuleb nüüd ette Auh!
Ülesandeid

• Tee näide läbi
  
• Lisa andmetabelisse tulp, kus kirjas vaadatava lehe aadress. Salvesta see lehe külastamisel.
  
• Lisa teisele veebilehele ka külastuste logimine .
  
• Näita igal lehel ainult selle lehe külastusi.
  
• Eraldi lehel on võimalik näha kõiki külastusi ning sealt kasutaja või lehe järgi otsida.
  

Ajaveeb
... ehk peaaegu et reaalelus kasutatav näitrakendus. Kasutaja saab ise omale kandeid päevikusse kirja panna ning muu rahvas vaid olemasolevat vaadata.
Toimuva täpsemaks jälgimiseks tasub taas tega tühi veebilehestik.
Haldamisega seonduva koodndame selle jaoks loodud eraldi kataloogi.
Rakenduse õiguse graafiliseks seadistamiseks sobib Website -menüüst avanev ASP.NET Configuration.
Sealsete valikute alt tasub valida Security – seal kasutajate haldamisega seonduvad valikud.
Select Authentication Type alt võimalik valida, et ei soovi mitte Windowsi sisevõrgu kasutajatunnustega toimetada, vaid üle veebi suhtlemiseks on eraldi kasutajad ja paroolid.
Edasi võib juba luua rolle, õigusi ja kasutajaid.
Uueks rolliks haldur
Ning õiguste juurde kirja, et halduskausta muud ühendusevõtjad ei pääse
Haldur aga pääseb
Tähtsamad rollid tuleb liigutada ülespoole, sest vaatama hakatakse algusest ning esimese leitud vastuse peale tehakse otsus.
Kui halduri lubav õigus kõigepealt ning ülejäänute keelav õigus selle järel, siis ongi soovitud olukord saavutatud.
Paljalt rollidest ei piisa – sisenemiseks peab olema ka vastava rolliga kasutaja. Siin näites juhan parooliga juhan1! – sest nõutakse ka numbrilist ja märgilist sümbolit parooli sisse. Nende piirangute muutmise näide on ülalpool kirjeldatud Visual Web Developeri enese näitrakenduse juures.
Kui väljad sobivalt täidetud, võib lugeda rõõmusõnumit kasutaja registreerimise kohta.
Koodi poolt paistab, et juurde tekkis App_Data kaust seal sees oleva ASPNETDB.MDF-failiga. Täiendati juurkataloogis olevat konfiguratsioonifaili ning halduskataloogi loodi oma ja uus.
web.config
Rollihaldur sees ning autentimimoodus lülitatud vaikimisi „ Windows “-i pealt „Forms“ peale.
haldus/web.config
Halduskaustas olevas konfiguratsioonifailis on kirjas, et halduri rolliga kasutajad pääsevad sisse, teised mitte.
Esialgsed turvatoimetused tehtud, võib edasi andmete juurde minna. Aluseks ajaveebile andmetabel tulpadega id, pealkiri, teade ja aeg. Viimasele võib taas vaikeväärtuseks määrata getdate(). Ning id-le omaduseks identity, et loendur automaatselt töötaks.
Sedakorda ei lohista me andmetabelit otse lehele, vaid käime etapid sammude kaupa läbi ning kõigepealt toome andmekomponentide juurest lehele andmeallika. SQL Serveri jaoks on loodud SqlDataSource.
. Alustuseks tuleb Toolboxist andmeallikas oma lehele vedada. Tulemusena ilmub ta Visual Web Developeri lehele omaette elemendina. Veebilehe tarvis on aga tegemist nähtamatu elemendiga, st. lehitsejas avades andmeallikat eraldi näha pole.
j
Graafilise osa juurest saab allikat ka edasi konfigureerida. Allika peale hiirega minnes ilmub nähtavale väike kolmnurk. Sealt tasub valida „Configure Data Source“.
Praegu ainukeseks andmefailiks ongi App_Data kaustas olevas andmebaasifailis ASPNETDB.MDF. Selle valimegi.
Edasi pakutakse andmeühenduse seadistuste salvestuse võimalust. Et oleks võimalik edasi rakendust hiirevalikute abil koostada, tuleb nad salvestada. Samuti on võimalik nõnda sama ühendust tulevikus mujal kasutada ilma, et peaks taas valima ja sättima hakkama. Siin näites on tegemist ühe failiga rakenduse kataloogis ning seetõttu ligipääs lihtne.
Mõnikord võib aga andmetele ligipääsuks olla vaja läbida õiguste ja võrgupõhine rägastik. Sel juhul ühenduse andmete korduvkasutus eriti vajalik. Samuti annab ühenduse andmete salvestamine võimaluse hiljem muuta andmebaasi asukohta ilma, et peaks selleks kõiki rakenduses leiduvaid andmebaasiga suhtlevaid lehti eraldi ümber tegema. Nimeks pakutakse praegu lihtsalt ConnectionString. No las ta olla – ehkki keerulisemate rakenduste puhul on vahel kasulik nimi määrata selle järgi, kuhu parajasti ühenduda tahetakse.
Järgmise sammuna uuritakse, et milliseid andmeid soovitakse vaadata. Et baasis on esialgu ainult üks tabel, pole valida kuigi paljude kohtade vahel. Ning kui tulbanimede alt valida tärn, siis tähendab see, et soovime näha kõikide tulpade andmeid.
Tahtes andmeid lisada, muuta ja kustutada, tuleb vastav linnuke advanced -sektsioonist sisse lülitada.
Andmetega ümber käimiseks kasutame siin lehel ListView-d. See võimaldab täpselt HTMLi järgi paika sättida, et mida ja kuidas näidatakse. Saab ta nagu ikka tööriistade juurest Data-sektsioonist.
Ülalt avanevast kolmnurkast saab omadusi sättida. Kõigepealt ListView juurde kuuluvaks andmeallikaks toosama SqlDataSource1.
Configure alt tuleb määrata, et millisel kujul andmeid näha soovitakse – vastavalt sellele koostatakse HTMLi põhi. Kasutame sedakorda tabelit ehk Grid -i. Nii genereeritakse kood andmete nägemiseks ja sisestamiseks.
Lehe vaatamisel tuleb hoiatus , et puudub järgnev fail:
Requested URL: /ajaveeb/login.aspx
Kuna halduskaust sai parooliga kaitstud, siis ligipääsu puudumisel saadetakse automaatselt juurkausta login.aspx-nimelist faili otsima. See tasub siis tekitada. Ning sinna sisse element nimega Login. Üheskoos eelnevalt genereeritud ASPNETDB.MDF-iga suudab see element automaatselt kasutajaid tuvastada.
Kui nüüd andmete sisestusleht käivitada, siis küsitakse automaatselt kasutajanime ja parooli ning alles edasi suunatakse halduslehele. Seal nõutakse esialgu pealkirja, teate ning aja sisestamist.
Nupule vajutamise järel võib veenduda, et andmed ka kohale jõudsid.
Et aga aeg võiks automaatselt kohale jõuda nagu andmetabeli loomisel tellitud, siis tasub lehe ülesehitust lähemalt uurida.
ListView puhul saab üksikute mallide ehk Templatedega ära määrata, kuidas midagi veebilehel paistab. Vaatamiseks mõeldud ItemTemplate. Üle rea värvimiseks AlternatingItemTemplate. Lisamiseks InsertItemTemplate. LayoutTemplate annab andmestiku näitamise üldise kuju – näiteks selle, et tabel algab ja lõpeb. Ka muudest elementidest võiks nime järgi aru saada, millega tegemist. Edit seondub muutmisega, Empty andmete puudumisega. SelectedItemTemplate võimaldab ühe kirje andmeid lähemalt vaadata.
Andmeallika juures on näha, et SQL-lauses sisestatakse andmed tabelisse teated tulpadesse pealkiri, teade ning aeg. Viimast aga vaikeväärtuse tõttu poleks vaja sisestada.
Kuna aega pole enam parameetrina vaja, võib selle lahtri andmed sidumata jätta.
Praegune aeg
Samuti saab aja välja lükata SQL-lausest.
InsertCommand="INSERT INTO [teated] ([pealkiri], [teade]) VALUES (@pealkiri, @teade)"
ning parameetritest.
Sellise muutuse peale kaob sisestusvormist aja lahter .
Ning pärast sisestamist võib näha kellaaega salvestununa.
Andmete vaatamine
ListView võimaldab ka vaatamise oma soovide järgi kohandada. Kui muid toimetusi ei soovita, piisab andmete näitamisest ItemTemplate-st. Siinsel juhul pealkiri vahele ning teate sisu div-elemendi sisse.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Teadete loetelu
Võib imetleda tekkinud tulemust.
Ka HTML on meeldivalt loetav . Vaid ViewState on ASP.NETi siseseks andmete ülekandeks, muu koodi sisu pääseb täiesti vabalt sättima ja kujundama.
Teadete loetelu

Tervitus

Tere tulemast

Teine tervitus

Ahoi!
Andmed mitmes tabelis.
Andmebaasipõhise lehe koostamisel tasub eri tüüpi andmed eraldi tabelites hoida. Kui tabelid pole omavahel seotud, siis saab ka andmeid rahumeeli eraldi lisada-näidata-muuta. Võib toimetada nagu eelnenud näidetes, vaid erisuguseid lehti ja tabeleid tuleb juurde.
Põhjalikumates kohtades hakatakse aga tabeleid siduma. Lihtsamal juhul kaks tabelit omavahel kokku, kuid juba küllalt tavalise igapäevaelus ette tuleva andmestiku puhul võib parvena koos olevaid tabeleid olla mituteist või mitukümmend. Siin aga teeme kahe tabeliga tutvust – eks hiljem saab neid vajadusel juurde lisada.
Lisame ajaveebi teadetele tüübid. Tabel tyybid, tulpadeks id, nimetus ja ikoon ehk vastava tüübi pildifaili nimi.
Mõned andmed sisse ka.
Pildid ise omaette kausta, et mugavam rakenduse sees asju korras hoida oleks.
Tabelite sidumiseks peab neil olema ühine väli. Siinsel juhul lisame teadete tabelisse tulba nimega tyybi_id milles oleva numbri järgi saab vaadata vastava teate tüüpi tüüpide tabelist. Vaikimisi väärtuseks sai siin arv 1, mis tähendab, et teade on tervitus juhul, kui midagi muud määratud ei ole.
Nõnda on olemasolevatel teadetel kohe tüübid küljes.
Andmetabelite vahelised seosed on viisakas kirja ka panna. Nõnda, et poleks võimalik vigaseid seoseid tekitada, vaid, et andmebaasimootor kontrollib, kas viidatav rida ka tabelis kindlasti olemas on. Siin keskkonnas on seoseid mugav luua diagrammide abil. Esmakordsel juhul küsitakse, kas vastav tükk sisse lülitada.
Edasi luua diagramm
Valida sobivad tabelid
Kui tabelid nähtaval, siis lohistame teadete tabeli tyybi_id tüüpide tabeli id peale.
Selle peale küsitakse, et kas soovime luua seost, kus teadete tabeli tyybi_id on võõrvõtmeks ning tüüpide tabeli id primaarvõtmeks. Paistab, et mõistlik on nõustuda.
Küsitakse veel üle, et kas seoste vastavust kontrollitakse – ka sellega tasub nõustuda. Tulemusena võiks näha olla üks- mitmele seos, kus tüübile võib vastata määramata arv teateid. Igal teatel on aga üks kindel tüüp.
Teate lisamisel oleks nüüd tüüp kasulik olemasolevate hulgast valida. Et need tüübid kätte saada, tasub luua uus anmeallikas vastava päringuga.
ListView InsertItemTemplate’t tasub sobivalt kohandada. Näitest paistab, et pealkirja ja teate sisestamiseks on tekstikastid, mille Text-nimeline omadus on Bind-käsuga sobiva SQLi parameetri külge seatud. Kuna aja saab vaikimisi väärtuse abil automaatselt lisatavaks, siis võib selle parameetrite hulgast maha võtta. Ning tüübi valimiseks sobib DropDownList. Andmeallikana kasutatakse selleks otstarbeks loodud SqlDataSource2-elementi. Kasutajale näidatakse tüüpide tabelist nimetust, tegelikult serverisse saadetakse aga id-tulba väärtus, mis teadete tabelisse tyybi_id alla kirja pannakse.
 
Praegune aeg
Et vastav väärtus ka tabelisse jõuaks, peab see olema SqlDataSource lisamisparameetrite hulgas.
Ning loomulikult ka Insert-lause enese sees.
InsertCommand="INSERT INTO [teated] ([pealkiri], [teade], [tyybi_id]) VALUES (@pealkiri, @teade, @tyybi_id)"
Muutmiseks tuleb hoolitseda, et vanad väärtused lehe vaatajale näha oleksid. Tekstiväljadesse kirjutatakse need otse Bind-i abil. Kuid õnneks suudab ka rippmenüü SelectedValue kaudu sobiva väärtuse enesele ette kerida.
Teate tüübile vastava pildi ekraanile saamiseks tuleb viimase failinimi tüüpide tabelist küsida ning pildi näitamiseks kataloogitee sinna ette panna.
Ikooni failinime näitamiseks tuleb see ka Select-lausega küsida.
SelectCommand="SELECT teated.id, pealkiri, teade, aeg, tyybi_id, nimetus, ikoon FROM teated, tyybid
WHERE teated.tyybi_id=tyybid.id"
Edasi halduslehe toimimine piltkirjas.
Andmete sisestus
Kohale jõudnud andmed
Muutmine
Muutmise salvestus.
Ning lehe kood tervikuna
Teadete haldus
Andmed puuduvad
 
Praegune aeg
id
pealkiri
teade
aeg
tüüp
Ülesandeid

• Tee näide läbi
  
• Lisa juurkataloogi kasutaja jaoks teadete vaatamise leht
  

Edasijõudnutele

Veebi kopeerimine

ASP.NET veebirakendused on lihtsalt teisaldatavad. Nende liigutamiseks uude serverisse on vaja kopeerida kõik veebi jaoks vajalikud failid uude asukohta ning ongi veeb uues kohas.
Selle lihtsa tegevuse veelgi lihtsamaks muutmiseks on Visual Sudiosse lisatud veebi kopeerimise vahend, mille leiate menüüst „Website/Copy Web Site…“
Veebi kopeerimise vahend võimaldab teil veebi kopeerida nelja erinevat tüüpi sihtkohta . Ühenduse loomiseks oma veebi sihtkohaga vajutage nupule Connect ning valige veebi sihtkoht :

• File System – veebi asukoht on ligipääsetav failisüsteemi kaudu (nagu teeks windowsis copy/paste teise kausta)
  
• Local IIS – sama arvuti IIS Serveris1 paiknev veebisait
  
• FTP Site – FTP2 ligipääsuga veebisait.
  
• Remote Site – HTTP3 või HTTPS4 abil ligipääsetav veeb. Ligipääs toimub üle tavalise veebikanali nagu ka veebi vaatamine, kuid lisaks peab teil olema veebi kirjutamise õigus. Üheks heaks näiteks selles vallas on oma veebi kopeerimine SharePoint5 portaali.
  

Programmi koodi paigutamine eraldi faili

Kuigi veebirakendus lubab kirjutada koodi ja lehekülje märgistuse samasse faili, on enamasti mõistlik need kaks eraldada. Põhjus seisneb selles, et üldjuhul ei ole programmeerijad head disainerid ja ka vastupidi: hea disainer ei ole hea programmeerija . Jagades rakenduses lehekülje disaini ja koodi eraldi, saavad mõlemad tegelda just sellega, mis kõige paremini välja tuleb.
Seega kui teeme lihtsat veebirakendust, tuleks luua tegelikult kaks faili: default.aspx ja default.aspx.cs.
Faili default.aspx sisu võiks olla järgmine:
Minu esimene leht
Tere maailm
Võrreldes esimese näitega on Page elemendile lisandunud kaks atribuuti.

• CodeFile atribuut – ütleb kompilaatorile, millisesse faili on salvestatud lehega seotud kood.
  
• Inherits atribuut – ütleb, millisesse klassi koodifailis on kood paigutatud
  

Lisaks .aspx failile tuleb nüüd luua ka page elemendis kirjeldatud koodifail (kuna kirjutame C# keeles peaks see olema .cs laiendiga), koos vastava klassiga. Kuna hetkel, meie lehel mingit erilist dünaamikat ei ole sisaldab loodav default.cs fail vaid klassi kirjeldust:<
Nagu ülal olevast näites näha pärinevad kõik ASP.NET lehed System.Web.UI.Page klassist, kus on realiseeritud raamistik , mis vajalik lehe genereerimiseks ning kontrollide kasutamiseks.
Tegelikult on üsna uskumatu, kui palju on võimalik ära teha deklaratiivselt ilma koodi e. .cs faili poole pöördumata. Samas on enam kui selge, et kui funktsionaalsus läheb natukenegi keerukamaks, tuleb ka programselt üht-teist korda saata.
Näiteks sellel samal lihtsal lehel on võimalik kirjutada kogu tekst dünaamiliselt koodi abil. Selleks eemaldame teksti .aspx failist:
Ning lisame selle koodi abil:
using System;
public partial class _Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
Page.Title = "Minu esimene leht";
lblTere.Text = "Tere maailm!";
Page_Load on sündmus, mis tekib iga kord lehekülje laadimisel . Selleks, et uurida genereeritava asp.net lehe omadusi saame ära kasutada Page objekti.
Staatilise teksti kirjutamiseks on kõige mugavam kasutada lipikuid (asp:Label). See võimaldab hiljem lihtsa vaevaga teksti kujundada. Iga objekt, mille poole soovite koodis pöörduda peab omama unikaalset ID’ d! Teksti saab lipikule lisada läbi Text atribuudi. Lipikud genereeruvad enamasti SPAN html tagideks.
Läbi kontrollide teksti kirjutamisel on üks oluline eelis võrreldes staatilise tekstiga – kontrollidel olevat teksti on lihtne koodis kasutada ning seda on võimalik lihtsa vaevaga lokaliseerida! Seega on alati soovitav kirjutada teksti veebilehele kas asp:label või mõne muu serveri kontrolli kaudu.
Ülesandeid
* Installeeri Visual Web Developer või leia enesele ligipääs IIS serverile
* Koosta ja käivita tervitav leht
* Määra lehel olev tervitus programmijupi abil.
* Küsi inimeselt nimi ja nupuvajutuse peale tervita teda, kopeerides tekst tekstiväljast sildile

Seadistamine (Web.config)

Igal veebirakendusel peaks olema ka oma seadistuste fail. ASP.NET rakenduse seadistust on võimalik seadistada üsna mitmest kohast. Alustades raamistiku üldseadistustest machine.config (paikneb .NET raamistiku programmifailide hulgas), seejärel veebisaidi seadistus e. web.config fail juurveebis ning lõpetades veebsaidi juurkataloogis oleva web.config failiga. Lisaks on võimalik erinevatele alamkaustadele eriseadistuse andmiseks võimalik lisada igasse kausta oma web.config fail.
Lõpuks jäävad kehtima need määrangud, mis on leheküljele kõige lähemal! Kuna masina seadistusele ja veebisaidi seadistusele meil enamasti ligipääsu ei ole siis püüame kogu vajaliku seadistuse ära teha veebirakenduse juurkataloogis oleva web.config faili abil.
.config failid on XML failid, milles antakse lisainformatsiooni nii rakendusele endale kui ka .NET raamistikule ja kompilaatorile.
Kõik väärtused/muutujad, mida soovite, et programmi kasutaja/administraator saaks hiljem lihtsalt muuta tuleks sisestada web.config faili!
Esialgu võiks web.config fail näha välja järgmine:
Selle seadistusega ütleme, et meil on kõik nii nagu serveris ikka, kuid me soovime oma rakenduse juures näha lisainfot silumiseks. Kui programm saab valmis, peaks panema debug atribuudi väärtuseks ”false”. Silumisinfo olemasolul kuvatakse teile vigade tekkimisel konkreetsed koodiread.
ASP.NET veebi seadistus on mitmekihiline ning esmased seadistused teie veebisaidile võetakse masina ( veebiserveri ) seadistustest. Seejärel lisandub juurveebi seadistus ning alles seejärel jõutakse teie veebi seadistusteni.
Lisaks oma veebi juurkataloogis olevale seadistusele võite teatud seadeid muuta ka alamkaustades. Selleks on teil kaks võimalust:

• Lisada alamkasuta eraldi web.confog fail, kus on vastavad seaded ümber tehtud
  
• Lisada veebi juurkataloogis olevasse web.config faili location element, ning näidata ära, mida soovite ümber teha. Sellekohast näidet saad vaadata leheküljel 164.
  

Rakenduse jälgimine (Trace)

Nii ASPi kui ka PHP suur puudus on see, et programmi silumiseks või vea leidmiseks vajaliku metainfo kuvamine on väga keeruline. Enamasti lõppeb see metainfo kirjutamisega otse lehele, rikkudes sellega ära lehekülje üldise väljanägemise.
ASP.NETil on selle tarbeks märksa mugavam vahend – Trace. Selleks, et jälgida ühel lehel toimuvat on kõige lihtsam Page elemendis sisse lülitada Trace atribuut.
Selle ühe väikse atribuudi lisamisega lisatakse lehekülje lõppu terve hulk informatsiooni alustades sellest, mis moodi seda lehekülge küsiti ning kirjeldades ära kogu lehekülje loomise protseduuri (koos lehekülje struktuuriga) ning lõpetades loeteludega erinevatest muutujatest ( sessioon , programm, server jne).
Loomulikult on võimalik sinna abiinfosse lisada ka oma märkuseid. Jälitusinfo kuvamiseks ja uurimiseks on Trace klass. Jälitus infot kirjutada saab kahe meetodiga:

• Trace.Write – lihtsalt jutt jälitusinfosse
  
• Trace.Warn – hoiatus (kuvatakse jälitusinfot vaadates punasena)
  

Lisame näiteks pisut jälitusinfot oma default.cs faili:
using System;
public partial class _Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
Trace.Write("Alustan Page_Load meetodiga ...");
Page.Title = "Minu esimene leht";
lblTere.Text = "Tere maailm!";
Trace.Warn("Meetod lõpetatud");
Tulemuseks on kaks uut rida Traces, Begin Load ja End Load sündmuste vahel:
Kui soovite mingi sündmuse ilmnemisel natukene põhjalikumat analüüsi teha siis on kasulik enne analüüsi alustamist kontrollida, kas jälitus on üldse sisse lülitatud. Selleks saame uurida Trace objekti IsEnabled omadust. Väga kasulik nt Try ... Catch konstruktsioonides:
protected void Page_Load(object sender, EventArgs e)
try
object o = null;
Trace.Write("Alustan Page_Load meetodiga ...");
Trace.Warn("Tekitan vea", o.ToString());
Page.Title = "Minu esimene leht";
lblTere.Text = "Tere maailm!";
catch (Exception ex)
if (Trace.IsEnabled)
Trace.Warn(" error ", "Tekkis tõrge", ex);
// TODO: Siia tuleks teha analüüs, miks viga tekkis
Tulemuseks trükitakse detailne vea kirjeldus jälitusinfo sisse:
Lisaks lehekülje põhisele sisse-välja lülitamisele on võimalik jälitusinfot kontrollida ka keskselt. Selleks tuleb vastav viide panna web.config faili system.web elemendi alamelemendiga trace:
Nüüd ei kuvata enam infot mitte iga lehekülje lõpus vaid virtuaalse veebilehe trce.axd abil veebirakenduse juurkataloogis:
Klõpsates iga päringu järel oleval View Details lingil kuvatakse meile info, mis varem oli lisatud lehekülje lõppu.
Trace elemendil on lisaks enable atribuudile veel teisigi mis võimaldavad selle info kogumist paremini korraldada. Näiteks võime öelda, et

• jälitusinfo on nähtav ainult konsoolil (localhost) ja üle veebi seda ei serveerita localOnly = „true” (default)
  
• nähtavale jäävad kõige viimased päringud mostRecent = „true”. Vaikimisi näidatakse esimest x päringut!
  
• Sorteerime päringud ajalisse järjekorda traceMode=”SortByTime”
  
• Jätame meelde 100 päringut (10 asemel) requestLimit=”100”
  
• Korjame jälitusinfo trace.axd sisse mitte ei pane lehekülgede lõppu pageOutput=”false”
  

PS! Jälitusinfot hoitakse mälus ning see kustub koos rakenduse mälust eemaldamisega.
Ülesandeid
* Lülita lehel sisse Trace, tutvu saada oleva teabega
* Trüki lehe koodis trace-teateid, loe neid.
* Vaata trace-infot nii lehe alt kui eraldi lehelt.

Vigade haldamine

Ükskõik kui väga me ka ei püüaks ikkagi esineb programmis vigu, olgu nad siis tingitud asjaolude kokkusattumusest, programmeerijapoolsest lohakusest või kasutaja pahatahtlikkusest.
.NET raamistik koos ASP.NETiga pakub vigade haldamiseks üsna mitmekihilist süsteemi. Loomulikult tuleks vead kõrvaldada nii vara kui võimalik, kuid alati tuleb arvestada asjaoludega, et kõike pole võimalik ette ennustada ja midagi võib jääda kahe silma vahele! Seega tuleks igal kihil pakkuda mingit lahendust vigade haldamiseks.
Kui Te jätate mõne vea kinni püüdmata siis teeb seda lõpuks ASP.NET ise, kuid nagu arvata võite, ei pruugi sealt tulevad veateated kasutajatele meeldida.

Rakenduse veebist eemaldamine

Kui rakenduses ilmnevad suuremad tõrked või on vaja teha hooldustöid on kasulik veebirakendus ajutiselt „maha võtta” e. muuta kasutajatele kättesaamatuks. ASPi ajal oli ainukeseks arvestatavaks meetodiks , kas rakenduse ümbernimetamine või veebiteenuse peatamine. ASP.NET pakub aga väga mugavat alternatiivi – nimelt tuleb rakenduse maha võtmiseks lisada veebirakenduse juurkataloogi fail app_offline.htm. Fail peab kindlasti olema htm mitte html laiendiga! Faili sisse kirjutage teade, mida soovite saidi külastajatele anda.
Näiteks võiks kirjutada midagi järgmist:
Teenus ajutiselt suletud

Teenus ajutiselt suletud!

Vabandame, seoses hooldustöödega ei ole veebirakendus hetkel kättesaadav.
Püüame probleemi kõrvaldada nii kiiresti kui võimalik.
Ootame teid peatselt tagasi!
Kui soovite rakenduse taas käima panna siis võib selle app_offline.htm faili ära kustutada või ümber nimetada.
Failide veebist väljaarvamiseks võib neile kirjutada .exclude laiendi . Sellise laiendiga faile veebi ei serveerita. Tulemuseks on HTTP error 403 (Page not served).

Globaalne veakontroll

Globaalne veakontroll on viimane kontrollliin enne raamistikku ning võimaldab reageerida vigadele vastavalt HTTP veakoodidele. Veakontrolli sisselülitamiseks tuleb web.configi system.web sektsiooni lisada customErrors element. Kõige lihtsama lahenduse jaoks on vaja moodustada üks lehekülg, mis hakkab kas viga programselt haldama või kuvab kasutajale mingi viisaka teate.
customErrors elemendil on kaks atribuuti:

• mode näita, kuidas vea puhul käituda (On – näidata kõigile oma veateadet, Off – näidata kõigile süsteemset veateadet, RemoteOnly - näidata konsoolilt pöördujatele süsteemset veateadet ja teistele kohandatud veateadet6.
  
• defaultRedirect näitab, kuhu kasutaja suunata, kui midagi konkreetsemat pole öeldud
  

Nt järgnev rida web.configis ütleb, et kui tekib mingi tõrge tuleb kasutaja suunata lehele error.html.
Kui soovite teatud HTTP vigade puhul anda mingi konkreetsema teate siis saate lisada customErrors elemendi alla täiendavad error elemendid.
Näiteks järgmise seadistusega ütleme, et kui tuleb HTTP viga 404 suuname kasutaja lehele error404.html, kui tuleb HTTP error 500 suuname kasutaja lehele error500.html, kui tuleb mingi muu viga suuname kasutaja lehele error.html.

Keskne veakontroll

Globaalsetele sündmustele saab reageerida globaalses koodifailis global.asax. Veakontrolli tarbeks on seal meetod Application_Error, mille sisse võite kirjutada oma vea haldamise protseduuri.
Application_Error meetod käivitatakse, kui programmis tekib viga, mida leheküljel ära ei lahendata. Tegemist on viimase programse võimalusega tekkinud vea viisakaks lahendamiseks.
Vea haldamiseks tuleb ära kasutada Server objekt. Server.GetLastError() annab tagasi Exception tüüpi objekti viimase veaga. Sealt saate teada missuguse veaga oli tegemist.
Peale seda kui olete pakkunud veale mingi viisaka lahenduse saate öelda, et viga on lahendatud kutsudes välja Server.ClearError() meetodi.
Nt moodustame järgmise global.asax faili:
void Application_Error(object sender, EventArgs e)
Response.Write("Tekkis viga
");
Response.Write(Server.GetLastError(). Message );
Server.ClearError();
Response.Write("Lahendasin ära ...");
Kui nüüd mõni leht tekitab vea, mida kohapeal ära ei lahendata (nt all olev protseduur ) siis käivitub keskne veakontroll ning ASP.NETi süsteemset veateadet kasutajale ei näidata.
using System;
public partial class Default6 : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
object o = null;
Page.Title = "Globaalse veakontrolli test";
lblTere.Text = o.ToString();

Veakontroll lehel

ASP.NET leheküljele leheküljekeskse veakontrolli paigaldamiseks tuleb leheküljele lisada Page_Error meetod. Page_Error meetod on mõeldud olukordade jaoks kus viga ei ole võimalik meetodite siseselt kinni püüda ja lahendada või kui soovite pakkuda lehekülje lõikes keskset veakontrolli.
Vea uurimiseks on võimalik kasutada taas (nagu ka veakontrollis global.asax failis) Server objekti.
protected void Page_Error(object sender, EventArgs e)
Kui soovime, et meie default.aspx kasutaks seda pealehte, tuleb teha paar muudatust : lisada Page elemendi atribuutidesse MasterPageFile atribuut, nii et Page element näeb välja järgmine:
Viidates ASP.NET rakendustes teistele failidele, kasutatakse tihtipeale faili absoluutset aadressi rakenduse kausta suhtes. Rakenduse juurkaustale viitamiseks kasutatakse tildet „~” e. kui me vaatame ülal olevat näidet, siis paikneb fail tavaline.master rakenduse juurkataloogis.
Lisaks muudatusele lehekülje Page elemendi atribuutides, tuleb ära kustutada kõik, mis asub form elemendist väljaspool, kaasaarvatud form elemendi alustavad ja lõpetavad tagid. Selle asemele tulevad piirkonnad pealehelt. Seega näeb ülejäänud default.aspx välja järgmine:
Lehekülje koodis mingeid muudatusi teha ei tule.
Kui soovite kasutada mõnda pealehel olevat elementi või omadust aspx lehel, siis leiate lehe küljes oleva pealehe Page.Master omaduse alt. Samas pole see omadus otse kasutatav. See tähendab, kui näiteks teie pealehel on omadus jutt, siis ei ole võimalik seda muuta näiteks sellise lausega Page.Master.jutt = „mingi jutt”. Selleks, et saada ligi pealehe omadustele ja sealolevatele elementidele, tuleb Master all olev objekt teisendada õigesse tüüpi. Seega kui teie pealehe taga oleva klassi nimi on MinuPealeht, siis tuleks seal oleva omaduse jutt muutmiseks kirjutada järgnevalt:
((MinuPealeht)Master).jutt = ”mingi jutt”;

Elemendid lehel

Lehekülje loomisel on meil võimalus kogu töö teha ära kasutades ASPist tuntud Response.Write meetodit, genereerides rea kaupa kliendile mineva HTMLi, kuid saame kasutada ka erinevaid kontrolle.
Elemendid võimaldavad läheneda leheküljele objekt-orienteeritud põhimõtteid kasutades. Elemente, mida kasutada, on lugematul hulgal. Suur hulk neist on kaasas koos .NET raamistikuga, väga palju saab tõmmata Internetist (osad on tasuta, osad tasulised) ning loomulikult on neid võimalik ka ise kokku panna.
Loomulikult ei jõua me siinkohal vaadata kõiki võimalikke kontrolle väga detailselt, kuid püüame anda ülevaate olulisemast ning sellest, mida kus ja kuidas kasutada.

Standardsed serveri elemendid

Alustame standardsete ASP.NET elementidega. ASP.NET Server elemendid on põhilised abivahendid veebirakenduste loomisel. Serveri elementidel on loogiline ja lihtsalt kasutatav objektmudel ning lisaks sellele oskab raamistik neid sõltuvalt kliendi veebisirvija võimekusest renderdada erinevateks HTML tagideks.
Standardsed ASP.NET kontrollid tunnete ära sellejärgi, et nende nime eesliide on asp:. Kõigil kontrollidel peab kindlasti olema täidetud:

• runat=”server” atribuut, mis näitab, et kontroll tuleb renderdada serveris
  
• ID atribuut, mis on selle kontrolli unikaalne tunnus. ID kasutatakse kontrolli poole pöördumiseks nii märgistuses kui ka koodis. Kõik ID peavad lehekülje piires olema erinevad!
  

Järgnevalt standardsete serverielementidele lühikirjeldused koos näidetega:
AdRotator
Näitab ühe kaupa, juhuslikus järjekorras andmeballikast leitud pilte. Kasulik nt banneri loomisel
BulletedList
Täppidega loend andmebaasis olevatest andmetest
Button
Nupud on mingite kasutaja poolt algatatavate tegevuste tegemiseks. Nupuvajutusele reageerimiseks tuleb realiseerida OnClick sündmus.
Calendar
Tekitab kalendri, mille pealt saab kasutaja valida kuupäeva. Kuupäeva kasutamiseks tuleb pöörduda kalendri SelectedDate atribuudi juurde
CheckBox
Tekitab märkeruudu, mille väärtust saate edaspidi kasutada läbi Checked atribuudi.
CheckBoxList
Tekitab märkeloetelu ruutude loetelu, kust on kasutajal võimalik valida mitmeid. Esimese valiku leidmiseks saate kasutada SelectedIndex, SelectedItem või SelectedValue atribuute. Kõigi valikute leidmiseks tuleb läbi käia Items kollektsioon ning kontrollida iga valiku Checked atribuuti.
DropDownList
Ripploend andmeallikast leitud andmetest. Valitud väärtuse leidmiseks saab kasutada SelectedIndex, SelectedItem või SelectedValue atribuute.
FileUpload
Võimaldab faile ülesse laadida. Kasutaja poolt valitud faili leiate PostedFile atribuudi alt. Faili saab kätte andmevoona PostedFile.InputStream atribuudist.
HiddenField
Peidetud väli, kus on võimalik hoida teksti, mida kasutajale näidata ei soovi.
HyperLink
Hüperlink, kus lingina võib toimida nii tekst kui ka pilt.
Image
Pilt, mis renderdub HTMLi IMG tagiks.
ImageButton
Pilt, mis reageerib hiire klikile e. töötab nagu tavaline nupp.
ImageMap
ImageMap tekitab pildi, millel on erinevaid piirkondi, kuhu kasutaja saab klõpsata. Klõpsatavate piirkondade tekitamiseks tuleb ImageMap elemendi sisse panna HotSpot alamelemendid. CircleHotSpot tekitab ringi kujulise piirkonna, RectangleHotSpot tekitab ristkülikukujulise piirkonna, PolygonHotSpot tekitab hulknurgakujulise piirkonna.
Kui keegi klikib mingil piirkonnal siis on võimalik, kas suunata nii uuele aadressile kui ka programselt klikki hallata. Programse haldamise jaoks tuleb ära realiseerida Click sündmus, kus on võimalik vaadelda parameetriga kaasa antud PostBackValue omadust
Label
Label on konteiner lehele dünaamilise sisu tekitamiseks. Selliseid konteinereid on kokku neli: Label, Literal, Panel, PlaceHolder.
Labeli peale saab panna staatilist teksti ja ka lihtsamaid HTMLi tage kuid pole võimalik lisada dünaamiliselt serveri kontrolle.
Label renderdub veebisirvijas SPAN tagiks.
LinkButton
Hüperlink, mis töötab nupuna e. kui hiirega klõpsata ei minda mitte uuele lehel vaid tekitatakse Click sündmus.
ListBox
Loend väärtustest, kust sõltuvalt seadistusest on võimalik valida, kas üks või mitu väärtust e. sõltuvalt seadistusest käitub analoogselt RadioButtonList’iga või CheckBoxList’iga. Kõige olulisem erinevus seisneb selles, et pikk loetelu on võimalik kokku suruda väga väiksele alale .
Literal
Literal on konteiner lehele dünaamilise sisu tekitamiseks. Selliseid konteinereid on kokku neli: Label, Literal, Panel, PlaceHolder.
Literal erineb Label elemendist selle poolest, et ta ei lisa dünaamilise sisu ümber mingit lisamärgistust. Sellest tulenevalt ei ole võimalik sisu stiilidega kujundada.
Localize
Erinevalt Literal kontrollist võimaldab Localize kontroll reserveerida koha lokaliseeritud sisu tarbeks. Muus osas on need kaks kontrolli täiesti ühesugused.
Erinevalt Label kontrollist ei lisa Localize sisu ümber mingit märgistust ega võimalda ka sisu kujundamist.
MultiView
Mingid asjad, mida näidata esimeses vaates
Mingid teistsugused asjad teises vaates näitamiseks
MultiView võimaldab teha leheküljel oleva info vaatamiseks erinevaid vaateid. Vaateid saab vahetada saab valida nii märgistuses kui ka programselt ActiveViewIndex atribuudi abil. Sisuliselt võimaldab MultiView integreerida ühele ASP.NET lehele mitmeid analoogseid veebilehti.
Panel
Panel on konteiner lehele dünaamilise sisu tekitamiseks. Selliseid konteinereid on kokku neli: Label, Literal, Panel, PlaceHolder.
Erinevalt Label ja Literal kontrollidest on võimalik sinna sisse paigutada ka teisi serveri kontrolle.
Panel kontroll paneb kogu dünaamilise sisu kas div või table elemendi sisse.
PlaceHolder
PlaceHolder on konteiner lehele dünaamilise sisu tekitamiseks. Selliseid konteinereid on kokku neli: Label, Literal, Panel, PlaceHolder.
PlaceHolder võimaldab analoogselt Panel kontrolliga lisada dünaamilisi teisi serveri kontrolle kuid erinevalt Panel elemendist mingit lisamärgistust nende ümber ei lisata.
RadioButton
Raadionupp võimaldab teha ühe valiku ette antud loetelust. Kui lehel on mitmeid loetelusid mitu on võimalik raadionupud jagada gruppidesse .
RadioButtonList
RadioButtonList võimaldab andmebaasis olevatest andmetest tekitada raadionuppudega loendi, kust saab valida ühe valiku.
Substitution
Substitution kontroll märgistab ära koha, mida puhverdatud (cached) lehel dünaamiliselt uuendatakse. Dünaamilise sisu peab tekitama staatiline, meetod, mis tagastab stringi.
Table
A veerg
B veerg
Lahter A1
Lahter B1
Lahter A2
Lahter B2
Table kontroll võimaldab tekitada tabeli, mida on võimalik väga lihtsalt programselt hallata. Eriti kasulik on see struktuur juhul kui soovite tabelit moodustada koodi abil, mitte lehekülje märgistuses.
TextBox
TextBox on kast, kuhu kasutaja saab sisestada mingit teksti. Tekstikaste on võimalik teha nii ühe kui ka mitmerealisi ning peidetud tekstiga paroolikaste. Sisestatud teksti saab hiljem kätte Text atribuudi alt.
View
Mingid asjad, mida näidata esimeses vaates
View kontrolle saab lisada ainult MultiView kontrolli sisse. Tegemist on ühega paljudest vaadetest MultiView sees.
Wizard
Mingi esimese sammu sisu
mingi teise sammu sisu
Võlur on sarnane MultiView kontrolliga võimaldades luua samadest andmetest mitmeid vaateid. Erinevalt MultiView’st on võluris ette määratud liikumise loogika ning info paigutus .
Võlureid on võimalik kasutada nii töövoogude (WorkFlow) kui ka pikemate vormide juures, kus on võimalik infot jagada mitmele lehele.
Võlur on mõeldud suuremahuliste sisestuste haldamiseks, näiteks küsitlused. Selle asemel, et kõik väljad koondada ühele lehele, võimaldab võlur tekitada mitu lehekülge andmete sisestamiseks, mille vahel võib kasutaja liikuda vastavalt vajadusele, kas lehtede järjekorras või vabal valikul .
Xml
Xml kontroll võimaldab veebilehel kuvada XML andmeid ja seda nii toorel kujul kui ka teisendatud kujul.
Loe lisaks ka XMLi peatükki.
Dünaamiliselt sisu tekitamisel on soovitus eelistada Literal või Localize kontrolli Labelile ning PlaceHolder kontrolli Panel kontrollile.

Programselt hallatavad HTML elemendid

Kui HTML elemendile lisada atribuut runat=“server“ siis on HTML elemendid programmis kasutatavad analoogsed Serveri elementidega. Erinevus võrreldes serveri elementidega seisneb selles, et nende objektmudel on moodustatud DHTMLi baasil ning nende haldamine ei ole nii lihtne kui serveri elementide puhul. Samuti ei oska .NET neile pakkuda alternatiivseid renderdusi sõltuvalt veebisirvija võimekusest.

Sisendi kontrollimise elemendid (Validators)

Kõige rohkem tööajal tekkivatest vigadest ja ka rakenduses olevatest turvaaukudest on tingitud kasutajate poolt tehtavatest ootamatutest sisestustest. Validation kontrollid on mõeldud kasutaja poolt sisestatud info kontrollimiseks ning on väga olulised vormide ehitamisel .
Kontrollimine käib enamasti kahes etapis :

• Kontrollitakse, kliendi poolel ehk veebisirvijas, javascripti abil, kas andmed on korrektsed. See võimaldab anda kasutajale märksa kiiremaid vastuseid kui tehes sama kontrolli serveris.
  
• Kontrollitakse serveris, kas kõik on korrektne . Kaitseb teie veebirakendust vigaste sisestuste eest. Kui kasutaja väga tahab, siis võib ta JavaScripti välja lülitada ning sellisel juhul kliendipoolne kontroll ei toimi. Teile on aga oluline, et andmed oleksid korrektsed ennem kui Te hakkate neid edasi töötlema. Seega on serveri poole kontroll väga oluline. Enamgi veel - kliendi poolsest kontrollist on võimalik loobuda aga serveris tuleb alati kontrollida, muidu muutub loodav veebrakendus väga ebastabiilseks ning ohtlikuks.
  

Kõigil validaatoritel on mõned olulised omadused, mis peaks olema alati määratud:

• Display – kas kontrolli positsioonil reserveeritakse veateate jaoks ruum või mitte
  
• ControlToValidate – kontroll, mida validaatoriga valideerida
  
• ErrorMessage – täispikk veateade . Näidatakse juhul kui kontroll ebaõnnestub
  
• SetFocusOnError – kas vea puhul muudetakse vea põhjustanud kontroll aktiivseks
  
• Text – lühike veakirjeldus. Näidatakse juhul kui kontroll ebaõnnestub
  
• ValidationGrupp – juhul kui samal lehel on mitu iseseisvat andmekogumit on võimalik ka kontrollid jagada gruppidesse ning kontrollida iga gruppi eraldi.
  

RequiredFieldValidator
Kontrollib, et väli oleks täidetud.
RangeValidator
Tunneb erinevaid andmetüüpe ning kontrollib, et sisestatud väärtus oleks etteantud vahemikus.
RegularExpressionValidator
Kontrollib sisestuse sobivust regulaaravalisega
CompareValidator
Võrdleb sisestust teise kontrolli sisuga. Kasulik nt paroolivahetuse vormi juures, kus tuleb uut parooli sisestada kaks korda
CustomValidator
Ise tehtud validaator. Kontrollib täpselt nii nagu ise soovid.
Validaatorit ehitades tuleb kindlasti realiseerida ServerValidate sündmus ning kui soovite ka veebisirvijas kontrolli rakendada siis JavaScripti abil ka kliendi poolne kontroll. JavaScripti funktsiooni nime saate sisestada ClientValidationFunction atribuudile.
ValidationSummary
Kokkuvõte vigadest. Kui lehel on ValidationSummary kontroll siis validaatori positsioonil näidatakse lühikest veakirjeldust (Text atribuut) ning ValidationSummary näitab pikka vea kirjeldust (ErrorMessage atribuut).
Selgitavaks näiteks siia juurde ülalpool andmebaasipõhise rakendusena kasside lisamislehe juurde kuuluv kontroll, et kassinimi oleks olemas ning kassi mass kassile sobilikus vahemikus.
kassinimi:
kassimass:
Nagu näha, ei saa lisamata jätta kassi nime.
Samuti peab olema kassi mass mõistlikus vahemikus nagu ülalt koodist MinimumValue ja MaximumValue vahelised piirid määravad.
Ülesandeid

• Katseta mitmesuguseid kontrolle.
  
• Püüa nende väärtusi programmiga lugeda ja kätte saada.
  
• Kontrolli validaatori abil, et tekstiväli oleks täidetud
  

Navigeerimiselemendid

Navigeerimiseks mõeldud serveri kontrollid pakuvad mugavaid veebirakenduses navigeerimise võimalusi. Navigaatoreid on kokku kolm.
SiteMapPath
SiteMapPath näitab kasutajale loogilist paiknemist veebirakenduse struktuuris. Paiknemist näidatakse analoogselt URLile või failisüsteemis kataloogiteekonnale.
SiteMap kasutamiseks tuleb veebi juurkataloogi lisada web.sitemap fail, milles kirjeldate ära veebi loogilise struktuuri. Web.sitemap on XML fail, mis vastab SiteMap-File skeemile ( schema ). Faili sisu võiks siis välja näha midagi sellist:
Sitemap failis peab ära kirjeldama kõikide lehekülgede loogilise positsiooni, kuhu kasutaja võib sattuda. Vajadusel saab seal pakkuda isegi erinevaid lahendusi vastavalt URLis nähtavatele parameetritele.
Kuna veebisirvija Back nupu programne haldamine on väga keeruline siis kasutatakse tagasi liikumise võimaldamiseks enamasti SiteMapPath kontrollil baseeruvat struktuuri. Mõnikord kutsutakse sellist navigeerimisvahendit ka leivapuruks (kunstmuinasjutu järgi, kus leivapuru järgi püüti koju tagasi minna).
Menu
Menüü võimaldab kasutajal lihtsalt leida veebirakenduses olevat informatsiooni. Menüü sisu on võimalik sisestada nii staatiliselt (nagu on näha ülalolevast näitest), kui ka lugeda andmebaasist.
TreeView
TreeView võimaldab vaadelda hierarhilisi andmeid puu kujul. Puud on võimalik moodustada nii staatiliselt (nagu näha ülal olevast näitest) kui ka moodustada dünaamiliselt andmebaasis olevate andmete järgi.
Ülesandeid
* Koosta menüüga pealeht (master) ning sealt viited mitmele alamlehele
* Lisa lehestikus asukohta näitav SiteMap
* Paiguta lehestiku lehed mõttes puukujulisse struktuuri. Aita navigeerimisel kasutajat TreeView-ga

Omaloodud elemendid (UserControl)

Lisaks pealehtedele saab programmiloogikat jagada ka läbi isetehtud graafilise kasutajaliidese elementide (User Controls) e. kasutaja kontrollide (KK). KK on ASP.NET leht ASP.NET lehe sees. KK abil saab kapseldada mingite graafilise liidese elementide kooslust ning funktsionaalsust.
Näiteks lisame oma veebilehele lisaks sildile veel tekstikasti ja nupu ning ütleme, et me soovime reageerida sündmusele, kui keegi klikib sellel nupul. Peale seda väikest täiendust näeb default.aspx content elemendi sisu välja järgmine:
Nüüd tuleb teha ka väikesed täiendused lehekülje koodis default.aspx.cs. Esmalt muudame ära Page_Load sündmuse, kus ütleme, et kui sellele leheküljele tullakse 1. korda, siis tuleb labeli sisu ära kustutada. Kui sama sessiooni ajal tullakse lehele 2st, 3ndat jne korda, siis ei tehta midagi. Lehekülje objekti küljes olev omadus IsPostBack on true, kui ei olda lehel esimest korda.
protected void Page_Load(object sender, EventArgs e)
if (!Page.IsPostBack)
lblInf.Text = "";
Lisaks peame tekitama protseduuri nupu klikile reageerimiseks. Kui keegi klikib nupule, siis muudame ära labeli teksti vastavalt tekstikastis olevale jutule.
protected void bOK_Click(object sender, EventArgs e)
lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text;
Kui me nüüd avastame, et sellist tekstikasti, labeli ja nupu interaktiivset kooslust läheb meil ka mujal vaja, siis on mõistlik see funktsionaalsus realiseerida KK abil. KK lehed e. .ascx lehed on oma ülesehituselt väga sarnased .aspx lehtedega seega on üsna tavaline, et esmalt realiseeritakse mingi funktsionaalsus .aspx lehel ning seejärel teisendatakse see leht KK-ks.
KK-l on võrreldes .aspx lehega 4 erinevust:

• faililaiend on .ascx
  
• Page element on asendatud Control elemendiga, millel on peaaegu samad atribuudid.
  
• kuna tegemist on osaga lehest, siis ei saa seal kasutada ei form elemente ega content elemente
  
• KK taga olev klass päritakse System.Web.UI.UserControl klassist
  

Seega võiks meie kolme komponendiga kk.ascx näha välja järgmine:
Ning kood selle KK juures (failis kk.ascx.cs) näeks välja selline:
using System;
using System.Web.UI;
public partial class kk : System.Web.UI.UserControl
protected void Page_Load(object sender, EventArgs e)
if (!Page.IsPostBack)
lblInf.Text = "";
protected void bOK_Click(object sender, EventArgs e)
lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text;
Selleks, et oma värskelt loodud KK’d kasutada, peame selle paigutama mõnele aspx lehel. Kuna tegemist ei ole raamistikku kuuluva elemendiga, tuleb see esmalt registreerida. Selleks lisame lehekülje algusesse peale Page elementi ning enne igasuguseid teisi elemente Register elemendi, milles ütleme, millises failis meie KK paikneb, ning kuidas me soovime temale viidata.
Ning kohas, kus see KK peab paiknema, lisame vastava kirjeldusega elemendi:
Antud juhul võiks selleks kohaks olla Content element default.aspx lehel. Kuna kogu eelnev funktsionaalsus sai KK’sse üle viidud, siis võiks kogu ülejäänud sisu Content elemendi seest ära kustutada. Ühtlasi tuleks kustutada ka kogu kood default.aspx.cs seest e. alles jääb vaid tühi klass.<
Sama KK’d võib ühel ja samal lehel kasutada mitmes eksemplaris ning samuti võime selle KK registreerida nii mitmele lehele kui soovime.
Seega võiks kokkuvõtteks öelda, et läbi pealehtede MasterPage ühtlustame üldise elementide paigutuse aspx lehtedel. KK abil kapseldame kasutajaliidese elementide kooslust.
Ülesandeid
* Kasuta näites loodud kasutajakontrolli oma lehel
* Loo kontroll kahe arvu korrutamiseks. Katseta.

Veebilehtede kujundamine kasutades nägusid (Themes)

Üldiselt on tuntud tõde, et hea programmeerija ei ole tavaliselt hea disainer ning hea disainer ei ole enamasti hea programmeerija. Luues aga veebirakendust, on vaja, et hästi oleks tehtud nii disain kui ka funktsionaalsus. See tähendab aga seda, et ühe veebilehega tegelevad korraga kaks inimest. Juba ASP.NET esimeses versioonis oli võimalik kood ja kujundus üksteisest eraldada (aspx fail kujunduse ja paigutuse jaoks, .cs fail koodi jaoks), kuid sellel lähenemisel oli kaks nõrka kohta:

• Läbi aspx faili ei saa kujundada dünaamiliselt tekitatud objekte
  
• Ühtse kujunduse hoidmine on raske, kuna kujundust tuleb igas aspx failis iga kontrolli juures uuesti korrata.
  

Üks lahendus on kasutada vana head stiilifaili .css, kuid raamistiku poolt genereeritud HTML objektide stiiliga kujundamine on üsna raske. Raskeks teeb selle asjaolu, et genereeritud struktuurid võivad tulla väga keerulised ning aeg-ajalt on väga raske ennustada, milliseks HTML objektiks üks või teine kontroll renderdub.
Lahendusena neile probleemidele pakub ASP.NET 2.0 välja näod e. Theme ’d. Ühe näo alla koondatakse hulk kujundusi, mida on mugav tervele lehele peale panna. Nägu koosneb kahte liiki kujundustest:

• nahad ( skin ), on mõeldud serveri kontrollide kujundamiseks
  
• stiilid (css), on mõeldud HTML tagide kujundamiseks
  

Kõik näod tuleb paigutada veebi juurikas asuvasse App_Themes kausta. Sinna tuleb teha alamkaust iga vajaliku näo jaoks. Loodud alamkaustadesse saate hakata paigutama .skin ja .css faile.
Loome nt näo nimega DefKujundus ning selle alla naha nimega nahk.skin. Naha sisse saate kopeerida .aspx failist kogu kujunduse. Näiteks on meil vaja kujundust tabelivaatele ja kahele erinevale kalendrile. Sellisel juhul võiks nt nahk.skin näha välja järgmine:
Nagu näha, on nahas olevad serveri elemendid peaaegu samasugused kui .aspx lehel. Ainukeseks erinevuseks on see, et kogu funktsionaalne osa on eemaldatud , so igasugused meetodid sündmustele reageerimiseks jne. Kujundusi saame teha kahte moodi:

• peakujundus – serveri kontroll, millel puudub kujunduse ID
  
• spetsiaalkujundus – serveri kontroll, millele on lisatud atribuut SkinID. Vastavad SkinIDd peavad olema samad nii aspx failis kui ka .skin failis.
  

Kui me soovime seda nahka kasutada oma .aspx lehe kujundamisel, siis tuleb meil:

• lisada lehekülje päisesse (Page element) atribuut Theme=”DefKujundus”
  
• kustutada kõigilt serveri kontrollidelt kõik kujundusega seonduv
  
• kontrollidele, mis vajavad spetsiaalkujundust, lisame atribuudi SkinID
  

Tulemusena on ilus ja lihtne aspx fail, kus on ainult funktsionaalsust puudutavad määrangud.
Ülesandeid

• Lisa Themes kausta kujundus SinineKujundus, milles määratakse nupu (asp:Button) värv siniseks .
  
• Katseta seda oma lehel, määrates näo (Theme) lehe algul
  
• Lisa teine kujunduskaust PunaneKujundus, kus nupu värv määratakse punaseks
  
• Veendu, et kujunduse vahetamisel muutub nupu värv.
  
• Püüa kujundust muuta programmi abil (Page.Theme="PunaneKujundus"). Seda on võimalik teha lehe preInit meetodi juures.
  

Väärtuste tööaegne meelespidamine

Muutuvate väärtuste meeles pidamiseks on lugematul hulgal erinevaid võimalusi alustades lokaalsetest muutujatest ning lõpetades andmebaasiga. Järgnevalt vaatleme vahendeid, mida pakub ASP.NET

Veebi globaalsed muutujad (Application variables)

Läbi Application klassi on võimalik jagada infot kõikjale terves veebirakenduses: see info on saadaval kõigil lehtedel terves rakenduses sõltumata sellest, milline kasutaja neid vaatab.
Application klassi väärtuse salvestamine käib järgmiselt:
Application[”ProgrammiMuutujaNimi”] = ”Mingi väärtus”;
Lugemine käib loomulikult vastupidises omistamisega, kuid lugemisel tuleks alati arvestada asjaolu, et võib-olla ei ole seda muutujat veel tekitatud või ei ole sinna veel ühtegi väärtust salvestatud. Seega tuleks lugemisel esmalt kontrollida, kas üldse on midagi lugeda:
Object oAppVar = Application[”ProgrammiMuutujaNimi”];
if (oAppVar != null)
Label1.Text = (string)oAppVar;
Sellised globaalsed muutujad on kasulikud jooksva statistika nt aktiivsete külastajate arvu jms tarbeks.
PS! Kõiki globaalseid muutujaid hoitakse arvuti mälus e. nendes muutujates ei tohiks hoida suuri andmehulki nagu nt tabelid jms

Andmete puhverdamine ( Cache variable)

Application klass ei ole hea koht suurte andmehulkade hoidmiseks, kuna see raiskab palju arvuti mälu.
Cache klassi kaudu on samuti võimalik jagada infot kõikjale terves veebirakenduses: see info on saadaval kõigil lehtedel terves rakenduses sõltumata sellest, milline kasutaja neid vaatab. Info säilib Caches kuni arvutil jätkub ressurssi info hoidmiseks või kuni teie poolt määratud ajani.
Kõige lihtsam meetod Cache väärtuse salvestamiseks on järgmine:
Cache[”CacheMuutujaNimi”] = ”Mingi väärtus”;
Sellisel kujul salvestatud info säilib mälus kuni ressurssi jätkub, st kui arvuti vaba mälu hulk muutub kriitiliseks, visatakse vähem kasutatud andmed mälust välja. Kui soovite neid andmeid veel kasutada, tuleb andmed uuesti mällu laadida.
Mälust kustutamise aega saame ka ette määrata. Selleks on kaks võimalust: absoluutne aegumise aeg ja dünaamiliselt muutuv aeg.
Absoluutse aegumise aja kasutamiseks tuleb väärtuse Cache salvestamiseks kasutada Cache.Add või Cache.Insert meetodit.
Järgnevalt lisame info cache' i täpselt kümneks minutiks:
Cache.Insert("CacheMuutujaNimi", "Mingi väärtus", null,
DateTime.Now.AddMinutes(10),
System.Web.Caching.Cache.NoSlidingExpiration);
Selles näites salvestame infot cache' i nii, et info säilib 10 minutit viimasest kasutamisest: esmalt säilib info 10 minutiks salvestamisest, kui keegi selle aja jooksul infot kasutab, säilib see veel 10 min jne. Kui keegi pole 10 minuti jooksul infot kasutanud, info kustub.
Cache.Insert("CacheMuutujaNimi", "Mingi väärtus", null,
System.Web.Caching.Cache.NoAbsoluteExpiration,
TimeSpan.FromMinutes(10));
Lugemisel tuleb arvestada, et cache’ is olev info võib kaduda ning tuleks alati mõelda välja kaks sündmuste käiku: juhuks kui info on cache' is ja juhuks kui ei ole.
Object oCacheVar = Cache[”CacheMuutujaNimi”];
if (oCacheVar != null){
// info on Caches ning kasutame seda
Label1.Text = (string)oCacheVar;
}
public override bool EnablePasswordRetrieval<
public override MembershipUserCollection FindUsersByEmail(string emailToMatch, int pageIndex, int pageSize, out int totalRecords)
throw new Exception("The method or operation is not implemented.");
public override MembershipUserCollection FindUsersByName (string usernameToMatch, int pageIndex, int pageSize, out int totalRecords)
throw new Exception("The method or operation is not implemented.");
public override int MaxInvalidPasswordAttempts<
public override int MinRequiredNonAlphanumericCharacters<
public override int MinRequiredPasswordLength<
public override int PasswordAttemptWindow<
public override MembershipPasswordFormat PasswordFormat<
public override string PasswordStrengthRegularExpression<
public override bool RequiresQuestionAndAnswer<
public override bool RequiresUniqueEmail<
public override string ResetPassword(string username, string answer)
throw new Exception("The method or operation is not implemented.");
public override bool UnlockUser(string userName)
throw new Exception("The method or operation is not implemented.");
public override void UpdateUser(MembershipUser user)
throw new Exception("The method or operation is not implemented.");
public override bool ValidateUser(string username, string password)
SqlCommand cmd = new SqlCommand("TuvastaKasutaja_proc",
new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString));
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@username", SqlDbType.NVarChar, 50).Value = username;
cmd.Parameters.Add("@password", SqlDbType.NVarChar, 50).Value = password;
cmd.Parameters.Add("@KasutajaID", SqlDbType.Int).Direction = ParameterDirection.Output;
cmd.Connection.Open();
cmd.ExecuteNonQuery();
cmd.Connection.Close();
bool KasutajaOK = false;
if (cmd.Parameters["@KasutajaID"].Value != System.DBNull.Value)
HttpContext.Current.Session["ActiveInimeneID"] = cmd.Parameters["@KasutajaID"].Value.ToString();
KasutajaOK = true;
return KasutajaOK;
#endregion

Kasutajagruppide hoidmine andmebaasis – RoleProvider

using System;
using System.Collections;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.Security;
public class SqlRoleProvider : RoleProvider
public override void AddUsersToRoles(string[] usernames, string[] roleNames)
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "AddUserToRole_proc";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Parameters.Add("@UserName", SqlDbType.NVarChar, 50);
cmd.Parameters.Add("@RoleName", SqlDbType.VarChar, 50);
cmd.Connection.Open();
foreach (string user in usernames)
cmd.Parameters["@UserName"].Value = user;
foreach (string role in roleNames)
cmd.Parameters["@RoleName"].Value = role;
cmd.ExecuteNonQuery();
cmd.Connection.Close();
public override string ApplicationName
get
return "Tallinna Täiskasvanute Gümnaasiumi testimiskeskus";
set
throw new Exception("The method or operation is not implemented.");
public override bool IsUserInRole(string username, string roleName)
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "IsUserInRole_proc";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Parameters.AddWithValue("@UserName", username);
cmd.Parameters.AddWithValue("@RoleName", roleName);
cmd.Parameters.Add("@OK", SqlDbType.Bit).Direction = ParameterDirection.Output;
cmd.Connection.Open();
cmd.ExecuteNonQuery();
cmd.Connection.Close();
return Convert.ToBoolean(cmd.Parameters["@OK"].Value);
public override string[] GetRolesForUser(string username)<;
return rollid;
public override void CreateRole(string roleName)
if (HttpContext.Current.User.IsInRole("ADMINISTRATORS"))
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "CreateRole_proc";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Parameters.AddWithValue("@RoleName", roleName);
cmd.Connection.Open();
cmd.ExecuteNonQuery();
cmd.Connection.Close();
public override bool DeleteRole(string roleName, bool throwOnPopulatedRole)
bool tulemus = false;
if (HttpContext.Current.User.IsInRole("ADMINISTRATORS"))
SqlCommand cmd = new SqlCommand();
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Parameters.AddWithValue("@RoleName", roleName);
cmd.Connection.Open();
if (throwOnPopulatedRole)
cmd.CommandText = "RolePopulated_proc";
cmd.Parameters.AddWithValue("@Tulemus", throwOnPopulatedRole).Direction = ParameterDirection.Output;
cmd.ExecuteNonQuery();
if (Convert.ToBoolean(cmd.Parameters["@Tulemus"].Value))
throw new Exception("Ei saa kustutada rolli, kuhu kuuluvad kasutajad!");
else {
cmd.Parameters. Remove (cmd.Parameters["@Tulemus"]);
cmd.CommandText = "DeleteRole_proc";
cmd.ExecuteNonQuery();
tulemus = true;
else
cmd.Parameters.Remove(cmd.Parameters["@Tulemus"]);
cmd.CommandText = "DeleteRole_proc";
cmd.ExecuteNonQuery();
tulemus = true;
cmd.Connection.Close();
return tulemus;
public override bool RoleExists(string roleName)
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "RoleExists_proc";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Parameters.AddWithValue("@RoleName", roleName);
cmd.Parameters.Add("@Tulemus", SqlDbType.Bit).Direction = ParameterDirection.Output;
cmd.Connection.Open();
cmd.ExecuteNonQuery();
cmd.Connection.Close();
return Convert.ToBoolean(cmd.Parameters["@Tulemus"].Value);
public override void RemoveUsersFromRoles(string[] usernames, string[] roleNames)
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "RemoveUserFromRole_proc";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Parameters.Add("@UserName", SqlDbType.NVarChar, 50);
cmd.Parameters.Add("@RoleName", SqlDbType.VarChar, 50);
cmd.Connection.Open();
foreach (string user in usernames)
cmd.Parameters["@UserName"].Value = user;
foreach (string role in roleNames)
cmd.Parameters["@RoleName"].Value = role;
cmd.ExecuteNonQuery();
cmd.Connection.Close();
public override string[] GetUsersInRole(string roleName)
ArrayList kasutajad = new ArrayList();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "GetUsersInRole";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Parameters.AddWithValue("@RoleName", roleName);
cmd.Connection.Open();
SqlDataReader lugeja = cmd.ExecuteReader();
while (lugeja.Read()) {
kasutajad.Add(lugeja["KNimi"].ToString());
lugeja.Close();
cmd.Connection.Close();
return (string[])kasutajad.ToArray(typeof(string));
public override string[] GetAllRoles()
ArrayList rollid = new ArrayList();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "GetAllRoles";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Connection.Open();
SqlDataReader lugeja = cmd.ExecuteReader();
while (lugeja.Read())
rollid.Add(lugeja["Nimi"].ToString());
lugeja.Close();
cmd.Connection.Close();
return (string[])rollid.ToArray(typeof(string));
public override string[] FindUsersInRole(string roleName, string usernameToMatch)
ArrayList kasutajad = new ArrayList();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "FindUsersInRole_proc";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["yhendusTekst"].ConnectionString);
cmd.Parameters.AddWithValue("@RoleName", roleName);
cmd.Parameters.AddWithValue("@usernameToMatch", usernameToMatch);
cmd.Connection.Open();
SqlDataReader lugeja = cmd.ExecuteReader();
while (lugeja.Read())
kasutajad.Add(lugeja["KNimi"].ToString());
lugeja.Close();
cmd.Connection.Close();
return (string[])kasutajad.ToArray(typeof(string));
1 IIS – Internet Information Service so Windowsi teenus, mis võimaldab veebi serveerimist nii sisevõrku kui Internetti. Rohkem infot leheküljel 188
2 FTP – File Transferee Protocol
3 HTTP – Hyper Text Transfeere Protocol – standard veebilehtede edastamiseks üle Interneti
4 HTTPS – HTTP turvaline versioon, kus andmevahetus serveri ja kliendi (brauseri) vahel on krüpteeritud.
5 SharePoint – Microsoft Office SharePoint Server ja Microsoft Windows SharePoint Services on keskkonnad portaalide ehitamiseks. Neid kasutatakse enamasti intranetis töökorralduse ja failihalduse lahendamiseks. Rohkem infot veebist www.microsoft.com/sharepoint
6 Kui soovite veateateid väljastada vaid konkreetsele IP aadressile siis tuleb selle koha peal kasutada pisut kavalamat protseduuri. Täpsemad juhised leiate mitmetest foorumitest või MSDNist ( http://msdn2.microsoft.com/en-us/library/aa479319.aspx )