Building Web-based Applications with .NET

14. Web-baseredeApps i .NET

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

Del 1 • Web-baserede applicationer…

object object object 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 Presentation Business Data Access Data

obj 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 HTTP, HTML browser Web server Web Page obj obj custom FE SOAP,XML obj other App

Typer af web sites • Set i IIS's perspektiv, 2 typer: • statisk • dynamisk

Statiske web sites • Et statisk web site har følgende egenskaber: • alle websider er oprettet på forhånd og ligger i filer på harddisken • webserver returnerer siderne uden nogen behandling <title>Welcome to AAA Painting</title> <html> <h3>Welcome to AAA Painting</h3> <HR> <ol> <li> <A HREF="history.htm">History of our company</A> <li> <A HREF="prices.htm">Pricing</A> <li> <A HREF="contact-info.htm">How to contact us</A> </ol> <HR> </html>

HTML • Statiske web sites er typisk ren HTML • siden kan også indeholde script kode som kører på klient-siden <title>Welcome to AAA Painting</title> <html> <h3>Welcome to AAA Painting</h3> <HR> <ol> <li> <A HREF="history.htm">History of our company</A> <li> <A HREF="prices.htm">Pricing</A> <li> <A HREF="contact-info.htm">How to contact us</A> </ol> <HR> </html>

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.htm • dynamisk request: http://localhost/Workshop/default.asp

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

Eksempel • lav en dynamisk side med deltagere • generer siden ved at læse navnene fra en database IIS ASP Page

ASP side — del 1, præsentation default.asp • ASP page = HTML + code… <title>RWWP.NET, July 2002</title> <html> <h3>RWWP.NET, July 2002</h3> <HR> List of attendees: <ol> <% Call OutputAttendees( ) %> </ol> <HR> </html> <SCRIPT LANGUAGE="VBScript" RunAt="Server"> Sub OutputAttendees() . . . inlinecodeblock

ASP page — del 2, logik default.asp 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("<li> " + firstName + " " + lastName) rs.MoveNext() Loop rs.Close : dbConn.Close End Sub </SCRIPT>

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

Del 2 • WebForms…

Traditionel form-baseret web apps • HTML understøtter allerede form-baserede apps <HTML> <HEAD> <title>Login</title> </HEAD> <BODY> <h2>Please login:</h2> <form method="get" action="Main.htm" id="Login"> Username: <INPUT type="text" id="Name"> <BR> Password: <INPUT type="text" id="pwd"> <BR> <BR> <INPUT type="submit" value="Login"> </form> </BODY> </HTML>

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)

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

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

Eksempel • En simpel WebForms app til at vise attendee info fra DB

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

(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…

(3) Design WebForm • Ligesom en WinForm • drag-and-drop fra toolbox…

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

(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(); . . .

(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"

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

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

#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

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; } . . .

IIS client 1. initial request is posted ASP.NET engine 2. HTML rendering of page 3. same page is "posted- back" for event processing 4. HTML rendering of page #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

#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)

#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 .

#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

Building Web-based Applications with .NET