1. Joe Hummel, PhD Dept of Mathematics and Computer Science Lake Forest College hummel@lakeforest.edu hummel@lakeforest.edu Lecture 8: WebForms — Web-based GUIs using ASP.NET

2. 8-2 8. WebForms 8.1 WebForms Intro to WebForms and ASP.NET…

3. 8-3 8. 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

4. 8-4 8. 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

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

6. 8-6 8. 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 client browser Web Page get or post… response… cmdAdd_Click(…) {. } cmdAdd_Click(…) {. } "Click"

7. 8-7 8. WebForms 8.2 WebForms in VS 2005 Let's build a web app in Visual Studio…

8. 8-8 8. WebForms Example Let's build the web-based Calculator…

9. 8-9 8. WebForms (1) Create new web site File menu >> New >> Web Site… File System or HTTP?

10. 8-10 8. 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

11. 8-11 8. 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.

12. 8-12 8. 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.

13. 8-13 8. WebForms (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; } 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; }

14. 8-14 8. 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 cmdAdd_Click(…) {. } cmdAdd_Click(…) {. }

15. 8-15 8. 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!

16. 8-16 8. WebForms 8.3 ASP.NET Execution Revisited How do ASP.NET applications really execute? Publishing your web application

17. 8-17 8. 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 Extension Manager ASPNET_ISAPI.DLL ASP.NET ISAPI extension Browser http://server/page.aspx HTTP Request ASPNET_WP.EXE ASP.NET worker process CLR ASP.NET

18. 8-18 8. 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.EXE ASP.NET worker process CLR AppDomain ASP.NET Browser http://server/Calculator/Default.aspx HTTP Request AppDomain ASP.NET Browser http://server/Sales/Default.aspx HTTP Request

19. 8-19 8. 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 Client http://server/Calculator/Default.aspx Client...... http://server/Calculator/Default.aspx T1T2T3

20. 8-20 8. 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 http://localhost/WebCalculator ASPNET_WP.EXE CLR AppDomain ASP.NET App.dll

21. 8-21 8. 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"

22. 8-22 8. WebForms 8.4 Web Programming Web and ASP.NET programming can be subtle…

23. 8-23 8. 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

24. 8-24 8. WebForms 8.4 What's Next? Lab exercise #8…