Lecture 8: WebForms — Web-based
GUIs using ASP.NET
Joe Hummel, PhD
Dept of Mathematics and Computer Science
Lake Forest College
hummel@lakeforest.edu
8.1 WebForms
• Intro to WebForms and ASP.NET…
8. WebForms
8-2
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. WebForms
8-3
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. WebForms
8-4
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. WebForms
8-5
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
"Click"
get or post…
client
browser
8. WebForms
Web
Page
response…
Web server
cmdAdd_Click(…)
{
.
.
.
}
8-6
8.2 WebForms in VS 2005
• Let's build a web app in Visual Studio…
8. WebForms
8-7
Example
• Let's build the web-based Calculator…
8. WebForms
8-8
(1) Create new web site
• File menu >> New >> Web Site…
File System or HTTP?
8. WebForms
8-9
(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. WebForms
8-10
(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. WebForms
8-11
(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. WebForms
8-12
(5) Handle Events
• Code-behind page to handle events
– in true code-behind fashion, code is separate
from web page
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. WebForms
8-13
(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
default.
aspx
ASP.NET
Development
Server
8. WebForms
cmdAdd_Click(…)
{
.
.
.
}
8-14
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. WebForms
8-15
8.3 ASP.NET Execution Revisited
• How do ASP.NET applications really execute?
• Publishing your web application
8. WebForms
8-16
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
http://server/page.aspx
Browser
HTTP Request
ISAPI Extension
Manager
ASPNET_ISAPI.DLL
ASP.NET ISAPI extension
IIS
(inetinfo.exe)
ASP.NET
CLR
ASPNET_WP.EXE
ASP.NET worker process
8. WebForms
8-17
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
http://server/Calculator/Default.aspx
Browser
HTTP Request
ASP.NET
AppDomain
http://server/Sales/Default.aspx
Browser
HTTP Request
ASP.NET
AppDomain
CLR
ASPNET_WP.EXE
ASP.NET worker process
8. WebForms
8-18
Multi-user
• AppDomains are multithreaded to handle multiple clients
– page requests are assigned to threads from CLR's thread pool
Client
Client
T1
http://server/Calculator/Default.aspx
T2
T3
ASP.NET
.
.
.
AppDomain
Client
CLR
ASPNET_WP.EXE
– Implication? ASP.NET applications are inherently multithreaded!
8. WebForms
8-19
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
ASP.NET
App.dll
AppDomain
CLR
ASPNET_WP.EXE
8. WebForms
8-20
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. WebForms
8-21
8.4 Web Programming
• Web and ASP.NET programming can be subtle…
8. WebForms
8-22
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. WebForms
8-23
8.4 What's Next?
• Lab exercise #8…
8. WebForms
8-24