14. web- baserede apps i .net

14. Web-baserede Apps i .NET

2NOEA 2009C#-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

3NOEA 2009C#-kursus

Del 1

• Web-baserede applicationer…

4NOEA 2009C#-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 object

object

Business

Presentation Data Access Data

5NOEA 2009C#-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 obj

obj

browser

Web server

HTTP,

HTMLWebPage

objcustom FE

other App

SOAP,XML

6NOEA 2009C#-kursus

Typer af web sites

• Set i IIS's perspektiv, 2 typer:– statisk– dynamisk

7NOEA 2009C#-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å

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

8NOEA 2009C#-kursus

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>

9NOEA 2009C#-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.htm

– dynamisk request:

http://localhost/Workshop/default.asp

http://localhost/AAAPainting/default.htm

http://localhost/Workshop/default.asp

10NOEA 2009C#-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

clientASPengine

HTML


Eksempel

• lav en dynamisk side med deltagere– generer siden ved at læse navnene fra en database

IIS

ASPPage


ASP side — del 1, præsentation

• 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

default.asp


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("<li> " + firstName + " " + lastName) rs.MoveNext() Loop

rs.Close : dbConn.Close End Sub</SCRIPT>

default.asp


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)


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 classobject


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


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

http://localhost/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; }

. . .


#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 posted2. HTML rendering of page

3. same page is "posted-back" for event processing4. HTML rendering of page

ASP.NETengine


#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

14. web- baserede apps i .net

Documents