Joe Hummel, PhD Dept of Mathematics and Computer Science Lake Forest College Lecture 4: Introduction to ASP.NET and WebForms

Web Apps in.NET 4.1 Web-based Apps in.NET A quick intro to WebForms ASP.NET

Web Apps in.NET 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

Web Apps in.NET 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

Web Apps in.NET Commercial use of ASP.NET One of the largest sites on the web:

Web Apps in.NET 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; }

Web Apps in.NET Platform-neutral Technology ASP.NET yields standard HTML for viewing on the client –the client does *not* need to be running IE, Windows or.NET! –all.NET code executes on the server, yielding HTML for display on client Example: –add 2 numbers with the Calculator, and view source! Web server client browser response… Default. aspx cmdAdd_Click(…) { … } cmdAdd_Click(…) { … }

Web Apps in.NET 4.2 Quick Example Let's build a simple web app in Visual Studio…

Web Apps in.NET Example Let's build the web-based Calculator…

Web Apps in.NET (1) Create new web site File menu >> New >> Web Site… File System or HTTP?

Web Apps in.NET (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

Web Apps in.NET (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.

Web Apps in.NET (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.

Web Apps in.NET (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; }

Web Apps in.NET (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 ASP.NET Development Server Default. aspx cmdAdd_Click(…) {. } cmdAdd_Click(…) {. }

Web Apps in.NET Observations Visual Studio 2005 provides full support for debugging –set breakpoints, run, view contents of variables, step, etc. –no administrative / special permissions needed for this to work 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!

Web Apps in.NET 4.3 Web Programming The programming model is somewhat different…

Web Apps in.NET Programming Model Web programming = client-server programming –Client makes a request, waits for server to respond Some implications: –requests are expensive to process, since a round-trip to server –server is stateless, since it never knows if client is coming back –ASP.NET maintains UI state so user's input isn't lost across requests

Web Apps in.NET Example A web-based version of Census Data application –same code-behind programming style, but with a few twists…

Web Apps in.NET (1) Requests are Expensive Every request means a trip to the server In ASP.NET, requests are the result of event processing –each event must be handled on the server (where.NET code resides) –each event yields a trip to the server… Web server client browser Web Page cmdAdd_Click(…) {. } cmdAdd_Click(…) {. } "Click"

Web Apps in.NET Reducing the Cost One way to reduce the cost is to process fewer events –WebForms offer far fewer events than their WinForms counterparts –in some cases, you also have to turn the event processing on Example: –web-based Census Data application — set AutoPostBack of list box to true so that click event is processed immediately… protected void lstTopTenNames_SelectedIndexChanged(…) { int index = this.lstTopTenNames.SelectedIndex; this.txtNameInfo.Text = this.namesCollection[index].ToString(); } protected void lstTopTenNames_SelectedIndexChanged(…) { int index = this.lstTopTenNames.SelectedIndex; this.txtNameInfo.Text = this.namesCollection[index].ToString(); }

Web Apps in.NET Client-side Validation Another way to reduce cost is client-side processing –do as much processing on the client as possible Example: –input validation can be done using ASP.NET Validation controls… RequiredFieldValidator control, with ControlToValidate property set to text box and ErrorMessage to message you want user to see…

Web Apps in.NET (2) Server is Stateless By default, the server does not maintain state about the client Statelessness is a design trade-off for scalability: –stateless web apps use less memory –stateless web apps require more processing to recreate state Example: –Page object is recreated each time we visit server — so web-based Census Data application has to read input file over & over again! Collection of FamilyName objects is null every time! Breakpoint on Page_Load

Web Apps in.NET Maintaining State ASP.NET provides state management sub-system if you want –Session state is on a per-client basis –Application state is global for the entire application Example: –Census Data app can use Application state to read input file once… protected void Page_Load(…) { // First time in, read census data and store in App state: if (this.Application["Names"] == null) // first user! { string fn; fn = Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, Path.Combine("App_Data", "census.txt")); this.Application["Names"] = Program.ReadCensusData(fn); } // Otherwise retrieve collection from App state: this.namesCollection = (List ) this.Application["Names"]; protected void Page_Load(…) { // First time in, read census data and store in App state: if (this.Application["Names"] == null) // first user! { string fn; fn = Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, Path.Combine("App_Data", "census.txt")); this.Application["Names"] = Program.ReadCensusData(fn); } // Otherwise retrieve collection from App state: this.namesCollection = (List ) this.Application["Names"];

Web Apps in.NET (3) UI State ASP.NET maintains user's input in what is called View state –this way, input is not lost across page requests –state is sent back & forth as a hidden field (view source to see) Sometimes, View state can get in the way Example: –Census Data app needs to check before filling list box again! protected void Page_Load(…) {. if (this.IsPostBack) // View state contains list elements, don't fill! return; // else first page request for this client, so fill list box: for (int i=0; i<10; i++) this.lstTopTenNames.Items.Add( this.namesCollection[i].Name ); } protected void Page_Load(…) {. if (this.IsPostBack) // View state contains list elements, don't fill! return; // else first page request for this client, so fill list box: for (int i=0; i<10; i++) this.lstTopTenNames.Items.Add( this.namesCollection[i].Name ); }

Web Apps in.NET 4.4 What's Next? Lab exercise #4…