Kreiranje HTML dela ASP.NET stranice iz DESIGN-a
HTML deo ASP.NET stranice u sebi može da sadrži i statički HTML i web kontrole.
Web kontrole su delovi HTML-a kojima se programski može pristupiti i sa kojima se može raditi pomoću C# ili Visual Basic-a.
Zadatak: kreirati web sajt sa jednom stranicom u ASP.NET-u
Kako smo to radili na prethodnom času:
- File -> New -> Web Site ... -> ASP.NET Empty Web Site (u folderu učenika sačuvati pod nazivom mojSajt)
- U Solution Exploreru: Desni klik na naziv sajta -> Add New Item ... -> Web Form (ostaviti da se prva forma zove Default.aspx)
Kada se kreira nova ASP.NET stranica koja na početku nije prazna već ima neki sadržaj
Na vrhu se nalazi @Page direktiva u kojoj se nalaze nake informacije o stranici:
- Language za izbor jezika koji će se koristiti za source code (Visual Basic ili C#)
- CodeFile za ime fajla u kojem se nalazi programski kod koji će se izvršavati
*** O ostalim informacijama iz direktive će biti više reči onda kada nam zatrebaju ***
Nakon @Page direktive je postavljen podrazumevani HTML sadržaj koji se postavlja prilikom kreiranja ASP.NET stranice:
- <html> i u njemu <head> i <body>,
- unutar <body> elementa <form> element,
- a unutar <form> elementa je <div> element.
U ASP.NET stranici mogu da se nalaze "obični" HTML tagovi i malo drugačiji HTML tagovi koji imaju atribut runat="server". U početnoj stranici i <head> i <body> imaju atribut runat="server" - ovo nije standardni HTML atribut, jer ni ovo nisu standardni HTML elementi.
U ASP.NET stranicama, HTML tagovi koji sadrže atribut runat="server" su specijalni oblik web kontrola.
Bitno je da se ima na umu da kada web server treba da pošalje stranicu ka korisnikovom web browseru, tada sigurno ne šalje sav sadržaj ASP.NET fajla. (Između ostalog, sigurno se ne šalje @Page direktiva )
Nastavljamo zadatak:
- postaviti Split View - da se vidi i html deo i kako bi to izgledalo na stranici
Prvo postaviti naslov:
- Postaviti fokus u Design View tako da je kursor unutar <form> elementa
- kucati tekst naslova (moj web sajt)
- Selektovati taj tekst (i dalje u Design-u) i u meniju na vrhu, u padajućem izboru, odabrati redom da je : Heading 1, neki drugi font i veličinu slova (može i da je na sredini stranice)
Zatim ispod naslova dodati tabelu - ali ovaj put će da se koriste neke ugrađene opcije koje nam nudi okruženje:
- Postaviti fokus u Design View tako da je kursor unutar <form> elementa, ISPOD naslova (ispod zatvarajućeg taga za naslov)
- U meniju na vrhu potražiti Table -> Insert Table
Ovim izborom se pokreće odgovarajući dijalog u kojem se zadaje koliko će da ima redova i kolona, širina tabele i pozicija na ekranu:
- postaviti da tabela ima 3 reda i 2 kolone
- širinu postaviti ii na 300px ili 50% (visinu tabele ne treba postavljati)
- opciono postaviti da je na sredini ekrana, border, boje, ...
- Klikom na OK se tabela postavlja na stranicu
Nakon klika na OK može se u Source delu videti da su postavljeni HTML elementi <table>, <tr>, <td> za kreiranje tabele od 3 reda i 2 kolone. U Design delu se vidi tabela u fazonu WYSIWYG (What You See Is What You Get) - vizuelni deo.
Nastavljamo zadatak: popunjavanje tabele - rad u Design delu (ali ostavite da se vidi i Source)
U našu tabelu ćemo da unesemo nazive nekih web sajtova u kolonu sa leve strane, a slike ili logo tih sajtova u kolonu sa desne strane.
1. Unos naziva sajtova u prvu kolonu:
- pozicionirati se u odgovarajuću ćeliju tabele u kucati direktno tekst (Yahoo, Google, DuckDuckGo) koji može da se formatira po želji učenika
(Ako obratite pažnju u Source delu, tu se vidi da se opcije formatiranja teksta primenjuju pomoću CSS-a.)
Pre postavljanja slika, samo nešto o Toolbox-u:
- Toolbox sadrži i web kontrole i standardne, statičke HTML elemente. Svi oni mogu da se prevuku na stranicu - i u Design i u Source deo.
- Default podešavanje je da se Toolbox vidi sa leve strane.
- Ako se ne vidi, lako ga je dodati pomoću View -> Toolbox (ili, u nekim verzijama, View -> Other Windows -> Toolbox).
- Toolbox ima 10 celina (tabova) u kojima se nalaze neki elementi.
- Na početku je raširen tab Standard u kojem su elementi kao što su Button, Label, TextBox, ...
- "Obični" HTML elementi se u Toolboxu nalaze iza HTML taba, a svi ostali tabovi sadrže web kontrole.
2. Unos slika koje prikazuju logo sajta u drugu kolonu:
- Image kontrola je predviđena za slike - postražite je u Toolbox-u i prevucite u svaku od ćelija druge kolone tabele
Ova kontrola za svaku sliku ima ImageUrl property za definisanje URL-a slike
Pre nego što mogu da se dodaju slike na stranicu, potrebno je obezbediti slike za prikaz - ili ih nacrtati li preuzeti sa Interneta. U ovom slučaju treba pronaći sliku logoa sajtova i sačuvati ih u istom folderu u kojem je web sajt (desni klik na sliku - Save Picture As ...)
Nakon što su slike postavljene u folder, u Soluton Explorer-u je potrebno "osvežiti" prikaz (desni klik - Refresh Folder) da se vide postavljene slike
Nakon toga je za svaku od Image kontrola potrebno da se postavi ImageUrl kroz prozor za Properties:
- klik na Image kontrolu
- U prozoru za Properties pronaći ImageUrl i kliknuti tamo na tri tačke da bi se odabrala ispravna slika
- podesiti width slike kroz Property (a height nema potrebe dirati)
Rezultat dosadašnjeg rada
Do sada je kreiran HTML sadržaj u kojem je i statički HTML (<table>) i web kontrole (Image) bez nekog kucanja koda. Samo je vršeno "prevlačenje" iz Toolbox-a i biranje opcija iz menija.
Testirati ASP.NET stranicu:
Solution Explorer -> desni klik na Default.aspx -> View in Browser
Ovim će da se pokrene podrazumevani web browser i kojem će da se prikaže Default.aspx
(F5 ili Debug -> Start Debugging isto rade)
Web kontrole - ukratko
- Web kontrole imaju sintaksu koja liči na HTML: imaju otvarajući i zatvarajući tag ako ima neki sadržaj između, ili je samozatvarajući tag ako nema dodatnog sadržaja.
- ASP.NET web kontrole počinju sa asp:nazivKontrole. Nijedna od ASP.NET Web kontrola nije validan HTML element. Ovo nije problem zbog toga što ova sintaksa sa web kontrolama nije ono što se šalje ka web serveru. Umesto toga, web kontrole se transformišu u validan HTML onda kada to treba poslati ka web browseru. U tom slučaju, ASP.NET engine konvertuje npr. <asp:Image> u <img> element, koji jeste validan HTMl element.
- Da bi se videla ova konverzija u našem primeru, pogledajte Default.aspx u web browseru, pa u njemu pogledajte primljeni HTML surce code (desni klik na web stranicu -> View Page Source)
- Zapamtite sledeće: oznake i kod koji su prisutni na web serveru ne mora da znači da su iste kao oznake i kod koji su poslati ka web browseru.
- Kada se pošalje zahtev za ASP.NET stranicu, tada će ASP.NET engine da renderuje sintaksu sa web kontrolama u odgovarajući HTML. Štaviše, u ovaj proces je uključeno i izvršavanje koda od strane servera (server-side kod koji je napisan za stranicu).
- Proces renderovanja sa strane web servera se izvršava kada se traži bilo koja ASP.NET stranica, što u stvari znači da je ASP.NET dinamička web tehnologija.
- Rezultujući HTML koji se šalje ka web browseru može da se programski izmeni u zavisnosti od različitih uslova, kao što su unos podataka od strane korisnika, potreba za podacima iz neke baze ili neki drugi spoljašnji faktori.
Dodatak zadatka za učenike: