14. Web-baserede Apps i.NET. 2 NOEA2009C#-kursus Objectives “Real-world applications are typically multi-tier, distributed designs involving many components.

Præsentationer af emnet: "14. Web-baserede Apps i.NET. 2 NOEA2009C#-kursus Objectives “Real-world applications are typically multi-tier, distributed designs involving many components."— Præsentationens transcript:

1 14. Web-baserede Apps i.NET

2 2 NOEA2009C#-kursus Objectives “Real-world applications are typically multi-tier, distributed designs involving many components — the web server being perhaps the most important component in today's applications...” Web-baserede applicationer IIS WebForms WebServices

3 3 NOEA2009C#-kursus Del 1 Web-baserede applicationer…

4 4 NOEA2009C#-kursus Husk applikationsdesign Mange applikationer er designet med N niveauer eller "tiers" –god adskillelse af områder –mulighed for genbrug af back-end tiers med forskellige FEs Front-end object BusinessPresentationData AccessData

5 5 NOEA2009C#-kursus Web-baserede applikationer Web-baserede apps giver mange fordele: –udvider rækkevidden af applikationen til bruger OG platform –baserede på åbne, ikke-leverandørafhængige teknologier To typer: –WebForms :GUI-baseret app vist i browser –WebServices :objekt-baseret app returnerer rå XML obj browser Web server HTTP, HTML Web Page obj custom FE other App SOAP, XML

6 6 NOEA2009C#-kursus Typer af web sites Set i IIS's perspektiv, 2 typer: –statisk –dynamisk

7 7 NOEA2009C#-kursus Statiske web sites Et statisk web site har følgende egenskaber: 1.alle websider er oprettet på forhånd og ligger i filer på harddisken 2.webserver returnerer siderne uden nogen behandling Welcome to AAA Painting Welcome to AAA Painting History of our company Pricing How to contact us

8 8 NOEA2009C#-kursus HTML Statiske web sites er typisk ren HTML –siden kan også indeholde script kode som kører på klient- siden Welcome to AAA Painting Welcome to AAA Painting History of our company Pricing How to contact us

9 9 NOEA2009C#-kursus Dynamiske web sites Et dynamisk web site involverer server-side processing Hvordan kan IIS se forskel? –baseret på fil extension af den fil, der requestes … Eksempel: –statisk request:http://localhost/AAAPainting/default.htmhttp://localhost/AAAPainting/default.htm –dynamisk request:http://localhost/Workshop/default.asphttp://localhost/Workshop/default.asp

10 10 NOEA2009C#-kursus ASP Active Server Pages Microsoft's server-side programeringsteknologi –ASP baseret på script sprog, fortolket –ASP.NET baseret på.NET sprog, oversat, hurtigere, … http://host/page.asp IIS client ASP engine HTML

11 11 NOEA2009C#-kursus Eksempel lav en dynamisk side med deltagere –generer siden ved at læse navnene fra en database IIS ASP Page

12 12 NOEA2009C#-kursus ASP side — del 1, præsentation ASP page = HTML + code… RWWP.NET, July 2002 RWWP.NET, July 2002 List of attendees: <% Call OutputAttendees( ) %> Sub OutputAttendees(). inline code block default.asp

13 13 NOEA2009C#-kursus ASP page — del 2, logik Sub OutputAttendees() Dim dbConn, rs, sql, firstName, lastName sql = "Select * From Attendees" Set dbConn = CreateObject("ADODB.Connection") Set rs = CreateObject("ADODB.RecordSet") dbConn.Open("Provider=Microsoft.Jet.OLEDB.4.0;" + _ "Data Source=C:\Inetpub\wwwroot\Databases\Attendees.mdb") rs.ActiveConnection = dbConn : rs.Source = sql : rs.Open Do While Not rs.EOF firstName = rs("FirstName") lastName = rs("LastName") Response.Write(" " + firstName + " " + lastName) rs.MoveNext() Loop rs.Close : dbConn.Close End Sub default.asp

14 14 NOEA2009C#-kursus Nøglen til web programmering… Det er en client-server relation –klient laver et request –server gør noget processering… –klient ser OUTPUT af server-side processering

15 15 NOEA2009C#-kursus Del 2 WebForms…

16 16 NOEA2009C#-kursus Traditionel form-baseret web apps HTML understøtter allerede form-baserede apps Login Please login: Username: Password:

17 17 NOEA2009C#-kursus WebForms Web-baseret, form-baseret.NET apps Baseret på mange teknologier: –IIS –ASP.NET (extension til IIS) –.NET Framework SDK (CLR, FCL, tools) –Visual Studio.NET (drag-and-drop creation)

18 18 NOEA2009C#-kursus Abstraktion Som WinForms, er WebForms baseret på klasser i FCL –adskiller WebForm app fra den underliggende platform System.Web.UI.Page CLR Windows OS instance of FCL class object

19 19 NOEA2009C#-kursus Oprette WebForm app Gode nyheder: næsten ligesom at oprette en WinForm app! 1.opret et passende projekt i Visual Studio 2.design form(s) via drag-and-drop af controls 3.programmer events

20 20 NOEA2009C#-kursus Eksempel En simpel WebForms app til at vise attendee info fra DB

21 21 NOEA2009C#-kursus (1) Opret ASP.NET Web App project Location = name of web site = "http://localhost/AttendeeApp"http://localhost/AttendeeApp –virtual directory:AttendeeApp –fysisk directory:C:\Inetpub\wwwroot\AttendeeApp

22 22 NOEA2009C#-kursus (2) Projekt layout VS.NET konfigurerer IIS for dig VS.NET opretter web sitet for dig –indeholder 1 form-baseret web side –kaldt WebForm1.aspx by default –ignorer andre filer lige nu…

23 23 NOEA2009C#-kursus (3) Design WebForm Ligesom en WinForm –drag-and-drop fra toolbox…

24 24 NOEA2009C#-kursus Web controls vs. HTML controls Toolbox indeholder 2 typer af controls: –dem under Web Forms –dem under HTML Begge genererer ren HTML på klienten –dog sommetider med JavaScript! Web controls: –virker ligesom tilsvarende WinForm HTML controls: –mimic standard HTML controls

25 25 NOEA2009C#-kursus (4) Implementer events WebForms er event-driven: –on Page_Load, indsæt i list box fra database –on cmdViewInfo_Click, vis info den valgte deltager I alle tilfælde, standard C# database programmering… private void Page_Load(...) { IDbConnection dbConn = null; try { dbConn = new OleDbConnection(sConnection); dbConn.Open();.

26 26 NOEA2009C#-kursus (5) Run! Du kan afvikle applikationen fra VS Du debugge fra VS Hvordan virker det? –starter en session af IE op –kobler debugger på IIS –viser.aspx siden markeret som "Start Page" i projektet højreklik på den.aspx side du vil starte med vælg "Set as Start Page"

27 27 NOEA2009C#-kursus (6) Reminder — client-server relationship! The server indeholder masser af kode –se fysisk directory… Men klient ser kun HTML! –"View Source" i browser…

28 28 NOEA2009C#-kursus ASP.NET programmerings model Påoverfladen ser WebForms ud som WinForms Men programmeringsmodellen er anderledes nedenunder –som følge af ASP.NET –som følge af client-server paradigme

29 29 NOEA2009C#-kursus #1: Traditionel dialog virker ikke For eksempel virker dette ikke: –MessageBox.Show( ) –form1.Show( ) Hvorfor ikke? –Hvor skal formen komme op?… Løsning: –Hvis du vil fortælle brugeren noget, brug en label på siden –Hvis du vil vise en anden side, redirect browser

30 30 NOEA2009C#-kursus Web-baseret dialoger Vis en meddelse til brugeren: private void cmdViewInfo_Click(...) { if (this.ListBox1.SelectedItem == null) { // nothing selected this.lblErrorMsg.Text = "Please select an attendee!"; return; }.

31 31 NOEA2009C#-kursus #2: Færre events Der er færre events at programmere i WebForms –primært kun Change og Click events hvorfor? –fordi hvert event giver en tur omkring serveren for at blive behandlet –og dermed er event processering en “dyr” aktivitet IIS client 1. initial request is posted 2. HTML rendering of page 3. same page is "posted- back" for event processing 4. HTML rendering of page ASP.NET engine

32 32 NOEA2009C#-kursus #3: AutoPostBack faktisk bliver nogle events ikke sendt med det samme… –istedet bliver event’et lagt i kø "queued" indtil siden alligevel skal sendes tilbage Gennemtvinge postback med det samme? –sæt control's AutoPostBack property (hvis den har en) Eksempel: –list box laver ikke postback når du klikker på et item –istedet venter event’et til senere (f.eks. tryk på en knap)

33 33 NOEA2009C#-kursus #4: Postbacks Der skelnes mellem: –det første request af side X fra klient C som sendes til server –efterføglende "postbacks" af side X til klient C Eksempel: –Page_Load event triggers hver gang –Men typisk kun for at initialisere form’en den første gang! private void Page_Load(...) { if (this.IsPostBack) // no need to reload list box! return;.. // first request, load list box from DB.

34 34 NOEA2009C#-kursus #5: Statelessness Web apps er stateless Hvert request af en side en selvstændig operation: forbindelse åbnes request sendes result returneres forbindelse lukkes Implikationer? By default: –ingen session tilstand(i.e. ingen data for klient C mellem sider) –ingen global tilstand (i.e. ingen data mellem alle klienter & sider) –postback tilstand *er* håndteret af.NET e.g. indholdet af list box