joe hummel, phd dept of mathematics and computer science lake forest college [email protected]...

Joe Hummel, PhD

Dept of Mathematics and Computer ScienceLake Forest [email protected]

Lecture 8: WebForms — Web-based GUIs using ASP.NET

mailto:[email protected]

8-28. WebForms

8.1 WebForms

• Intro to WebForms and ASP.NET…

8-38. WebForms

WebForms

• In .NET, GUI-based web applications are called “WebForms”– vs. “WinForms”, which are GUI-based Windows desktop applications

• Example:– a simple web-based Calculator

8-48. WebForms

ASP.NET

• WebForms are built using ASP.NET technology– ASP.NET = Active Server Pages .NET

– ASP.NET = the web component of .NET

• Denoted by web sites with “.aspx” extension…

Default.aspx

8-58. WebForms

ASP.NET Programming Model

• Same intuitive model that we saw earlier with WinForms:– drag-and-drop controls from Toolbox

– controls raise events in response to user actions

– handle events using code-behind programming

protected void cmdAdd_Click(object sender, EventArgs e){ int i, j, k;

i = System.Convert.ToInt32( this.txtNumber1.Text ); j = System.Convert.ToInt32( this.txtNumber2.Text ); k = i + j;

this.lblResult.Text = "Sum = " + k;}




8-68. WebForms

ASP.NET Execution Model

• How does ASP.NET really work?– ASP.NET is a server-side technology

– all event processing / code execution happens on the server

– the client is a traditional browser using HTTP and HTML

Web server

clientbrowser

WebPage

get or post…

response…

cmdAdd_Click(…){ . . .}


"Click"

8-78. WebForms

8.2 WebForms in VS 2005

• Let's build a web app in Visual Studio…

8-88. WebForms

Example

• Let's build the web-based Calculator…

8-98. WebForms

(1) Create new web site

• File menu >> New >> Web Site…

File System or HTTP?

8-108. WebForms

(2) Layout the UI

• 2 labels, 2 text boxes, and a button– to position a control, select it, then use Position in Layout menu

– select “Absolute” and position control as desired

8-118. WebForms

(3) Configure Controls

• Set properties of each control to your liking– Text of button to “Add”– Title of page to “Calculator”

– name of controls via (ID) property

– etc.

8-128. WebForms

(4) Additional Layout & Configuration

• You can also control markup by directly editing source HTML – most ASP.NET programmers work this way

– control layout using HTML (e.g. tables), apply CSS, add JavaScript for client-side processing, etc.

8-138. WebForms

(5) Handle Events

• Code-behind page to handle events– in true code-behind fashion, code is separate

from web page







8-148. WebForms

(6) Run and Test!

• As usual, you can run at any time by pressing F5– VS builds app, compiling source code & loading into local web server

(look for ASP.NET Development Server icon in task bar)

– VS then runs app by starting an instance of IE & surfing to start page

http://localhost:3990/Calculator/Default.aspx

ASP.NET Development

Server

default.aspx



8-158. WebForms

Observations

• Visual Studio provides full support for debugging

• ASP.NET applications are compiled– versus ASP and most other web technologies, which are interpreted

• ASP.NET is a server-side technology– witness IE's progress bar when you click button…

• ASP.NET controls render themselves as HTML– view source on the client — it's pure HTML!

8-168. WebForms

8.3 ASP.NET Execution Revisited

• How do ASP.NET applications really execute?• Publishing your web application

8-178. WebForms

IIS(inetinfo.exe)

Internet Information Services (IIS)

• IIS is Microsoft's commercial web server• ASP.NET is a plug-in for IIS

– installed when you install Visual Studio .NET

– runs outside IIS for security and robustness reasons

ISAPI ExtensionManager

ASPNET_ISAPI.DLLASP.NET ISAPI extension

Browser

http://server/page.aspx

HTTP Request

ASPNET_WP.EXEASP.NET worker process

CLR

ASP.NET

8-188. WebForms

AppDomains

• Each ASP.NET application runs in a separate domain• An AppDomain is a protection boundary, similar to a process

– web apps are thus isolated from one another

ASPNET_WP.EXEASP.NET worker process

CLR

AppDomain

ASP.NETBrowser

http://server/Calculator/Default.aspx

HTTP Request

AppDomain

ASP.NETBrowser

http://server/Sales/Default.aspx

HTTP Request

8-198. WebForms

Multi-user

• AppDomains are multithreaded to handle multiple clients– page requests are assigned to threads from CLR's thread pool

– Implication? ASP.NET applications are inherently multithreaded!

ASPNET_WP.EXE

CLR

AppDomain

ASP.NET

Clienthttp://server/Calculator/Default.aspx

Client

.

.

.

Client

http://server

/Calculator/D

efault.aspx

http://server/Calculator/Default.aspx

T1 T2 T3

8-208. WebForms

ASP.NET Application?

• An ASP.NET application = set of web pages + .DLL– the web pages contain the HTML markup

– the .DLL contains the .NET code behind the web pages

• Example:– here's the Calculator web app configured in IIS under the URL http

://localhost/WebCalculator

ASPNET_WP.EXE

CLR

AppDomain

ASP.NET

App.dll

8-218. WebForms

Publishing your Web App

• Build menu >> Publish Web Site– you can publish to a local or remote instance of IIS– you can publish to the file system & copy the files yourself

– Due to a bug in VS 2005, URL must differ from project name — reason the example is published as "http://localhost/WebCalculator"

8-228. WebForms

8.4 Web Programming

• Web and ASP.NET programming can be subtle…

8-238. WebForms

Issues in Web Programming

• Web apps are stateless by default!– page object is recreated on each request

– ASP.NET maintains state of UI, but not the objects themselves

– however, you can maintain object state as well using ASP.NET

• Subsequent page requests are really "post-backs"– you may want to rethink how you implement Page_Load

• Events are expensive to process since round-trip to server– perform as much client-side processing as possible — e.g. validate

input on the client using ASP.NET's Validation controls (which render as JavaScript!)

– ASP.NET controls won't offer as many event as WinForms

– some events require you to set their AutoPostBack property to trigger immediate processing of event — e.g. ListBox SelectedIndexChanged

8-248. WebForms

8.4 What's Next?

• Lab exercise #8…

joe hummel, phd dept of mathematics and computer science lake forest college [email protected]...

Documents