Introduktion/Otto Knudsen 1 Overblik WebForms ASP.NET.

Præsentationer af emnet: "Introduktion/Otto Knudsen 1 Overblik WebForms ASP.NET."— Præsentationens transcript:

1 Introduktion/Otto Knudsen 1 Overblik WebForms ASP.NET

2 Introduktion/Otto Knudsen 2 WebForms I.NET kaldes GUI-baserede web-applikationer ”WebForms” i modsætning til ”WinForms”, som er GUI-baserede Windows applikationer Eksempel: en simpel web-baseret lommeregner

3 Introduktion/Otto Knudsen 3 ASP.NET WebForms dannes vha. ASP.NET teknologien ASP.NET = Active Server Pages.NET ASP.NET = Webkomponenten i.NET Framework Library Disse websider hedder ”.aspx” til efternavn … Default.aspx

4 Introduktion/Otto Knudsen 4 ASP.NET Programmeringsmodelen Den intuitive model kendt fra Visual Basic: drag-and-drop kontroller fra værktøjskassen hændelser opstår som svar på brugerinteraktion hændelser håndteres vha. code-behind programmering protected void btnAdd_Click(object sender, EventArgs e) { int i, j, k; i = int.Parse(this.tbxNumber1.Text); j = int.Parse(this.tbxNumber2.Text); k = i + j; this.lblResult.Text = string.Format("Sum = {0}", k); } protected void btnAdd_Click(object sender, EventArgs e) { int i, j, k; i = int.Parse(this.tbxNumber1.Text); j = int.Parse(this.tbxNumber2.Text); k = i + j; this.lblResult.Text = string.Format("Sum = {0}", k); }

5 Introduktion/Otto Knudsen 5 Platform-neutral teknologi ASP.NET genererer standard HTML til klienten klienten behøver ikke at anvende IE, Windows eller.NET! Eksempel: læg 2 tal sammen på lommeregneren og betragt klient-HTML’en! Web-server klient browser response… Default. aspx

6 Introduktion/Otto Knudsen 6 Eksempel Lav en web-applikation i Visual Studio …

7 Introduktion/Otto Knudsen 7 Eksempel En web-baseret lommeregner …

8 Introduktion/Otto Knudsen 8 (1) Lav en ny web site File >> New >> Web Site … File System eller HTTP?

9 Introduktion/Otto Knudsen 9 (2) UI-layout Indsæt 2 ledetekster, 2 indtastningsfelter og én knap Markér en kontrol og find Position i Layout menuen Vælg evt. ”Absolute”, og placér kontrollen på den ønskede position

10 Introduktion/Otto Knudsen 10 (3) Konfiguration af kontroller Sæt egenskaberne på kontrollen (ganske som du plejer): Text på knappen sættes til “Add” Title på siden sættes til “Calculator” Navnet på kontrollen (ID) osv.

11 Introduktion/Otto Knudsen 11 (4) Yderligere layout mv. Kontroller kan også modificeres ved direkte at ændre i HTML’en Efter sigende (?) arbejder de fleste ASP.NET programmører på denne måde … Kontrol-layout vha. HTML (fx tabeller), anvend CSS, tilføj JavaScript osv …

12 Introduktion/Otto Knudsen 12 (5) Hændelseshåndtering Code-behind håndterer hændelser koden adskilles fra web-siden protected void btnAdd_Click(object sender, EventArgs e) { int i, j, k; i = int.Parse(this.tbxNumber1.Text); j = int.Parse(this.tbxNumber2.Text); k = i + j; this.lblResult.Text = string.Format("Sum = {0}", k); } protected void btnAdd_Click(object sender, EventArgs e) { int i, j, k; i = int.Parse(this.tbxNumber1.Text); j = int.Parse(this.tbxNumber2.Text); k = i + j; this.lblResult.Text = string.Format("Sum = {0}", k); }

13 Introduktion/Otto Knudsen 13 (6) Afvikl og afprøv! Som sædvanlig: tryk F5 VS bygger applikationen, kompilerer kildekoden og henter det ind i en lokal web-server ( ASP.NET Development Server ikonet i task bar) VS starter dernæst en instans af IE og går til startsiden … http://localhost:3990/Calculator/Default.aspx ASP.NET Development Server Default. aspx btnAdd_Click(…) {. } btnAdd_Click(…) {. }

14 Introduktion/Otto Knudsen 14 (7) Debugging Hvad med debugging? fuld understøttelse af debugging indsæt breakpoints og afvikl …

15 Introduktion/Otto Knudsen 15 Observationer Visual Studio understøtter debugging ASP.NET applikationer er kompilerede i modsætning til ASP og de fleste andre web-teknologier, som er fortolkede ASP.NET er server-side teknologi betragt IE's progress bar, når der trykkes på en knap … ASP.NET kontroller skrives via HTML betragt klient-koden — den er ren HTML!

16 Introduktion/Otto Knudsen 16 Hvad så? Øvelse #1

17 Introduktion/Otto Knudsen 17 …