ASP.NET Architecture

1. ASP.NET Architecture

2. Halloween Store application

3. The Shopping Cart page of the Halloween Store application

4. Components of a web application Server computer Client computer Internet Web server Web browser • Web applications are a type of client/server application, where a user at a client computer accesses an application at a server computer. • Client and server computers are connected via the Internet.

5. Hardware and software components for web applications • At the client computer, the user works with a Web browser, such as Internet Explorer or FireFox, that provides the user interface for the application. • The application runs on the server computer under the control of Web server software. For ASP.NET web applications, the server must run Microsoft’s Web server, Internet InformationServices (IIS). • The server computer typically also runs a database management system, or DBMS, that provides access to information stored in a database. To improve performance, the DBMS can be run on a separate server computer.

6. Hardware and software components for Web applications (cont.) • The user interface for a Web application is implemented as a series of Web pages that are displayed in the web browser. • Each web page is defined by a Web form using HTML, or Hypertext MarkupLanguage, which is a standardized set of markup tags. • The Web browser and Web server exchange information using HTTP, or Hypertext Transfer Protocol.

7. How a Web server processes static web pages Client Server HTTP request HTML file HTML file Browser HTTP response • A static web page is an HTML document that is the same each time it’s viewed. It doesn’t change in response to user input. • Static web pages are usually simple HTML files that are stored on the Web server with a file extension of .htm or .html. • When a browser requests a static web page, the web server retrieves the file from disk and sends it back to the browser.

8. How static web pages work • A web browser requests a page from a web server by sending the server an HTTP request message. • The HTTP request includes, the name of the HTML file being requested and the Internet address of both the browser and the Web server. • A user working with a browser can initiate an HTTP request in several ways. One way is to type the address of a web page, called a URL, or Uniform Resource Locator, into the browser’s address area and press Enter. Another way is to click a link that refers to a web page. • A web server replies to an HTTP request by sending a message known as an HTTP response back to the browser. • The HTTP response contains the addresses of the browser and the server as well as the HTML document that’s being returned.

9. Processing dynamic pages Client Server HTTP request Application server Browser Web server HTTP response Web application

10. How dynamic web pages work • A dynamic web page is an HTML document generated by a web application. Often, the Web page changes according to information sent to the Web application by the browser. • When a Web server receives a request for a dynamic web page, the server passes the request to an application server. • The application server executes the Web application, which generates an HTML document. This document is returned to the application server, which passes it back to the web server. The Web server, in turn, sends the document back to the browser. • After the page is displayed, the user can interact with it using its controls. Some of those controls let the user post the page back to the server, so it’s processed again using the data the user entered.

11. Dynamic Web Pages • To determine what application server is used to process a request, the Web server looks up the extension of the requested file in a list of application mappings. • Each application mapping specifies which application should be run to process files with that extension. • If the file extension is aspx, the request is passed to ASP.NET. • If the file extension isn’t in the list of application mappings, the requested file is returned to the browser without any processing. • The process that begins with the user requesting a web page and ends with the server sending a response back to the client is called a round trip. • After a web application generates an HTML document, it ends. Then, unless the data the application contains is specifically saved, that data is lost.

12. Application state • State refers to the current status of the properties, variables, and other data maintained by an application for a single user. • The application must maintain a separate state for each user currently accessing the application. • HTTP is a stateless protocol • It doesn’t keep track of state between round trips • Once a browser makes a request and receives a response, the application terminates and its state is lost

13. Tracking state in web applications Client Server First HTTP request: The browser requests a page. Web server Browser First HTTP response: The server returns the requested page and the Web server application ends. Browser Next HTTP request: The browser requests another page. The server has no way to associate the browser with its previous request. Web server Browser

14. Features to maintain state • ASP.NET uses view state to maintain the value of form control properties that the application changes between executions of the application. View state is implemented by default. • When a user starts a new session, ASP.NET creates a session stateobject. It contains a session ID that’s passed from the server to the browser and back again so that the server can associate the browser with an existing session. To maintain session state, you can add program values to the session state object. Then, those values are maintained between executions of the application. • When an application begins, ASP.NET creates an application stateobject. To maintain application state, you can add program values to the application state object. These values are available to all users of the application and are maintained until the application ends.

15. The Costume page after an order is entered

16. The Confirmation page

17. A simple application • Accepts a costume order. • To enter an order, the user selects a costume from the drop-down list on the Costume page, enters a quantity, and clicks on the Order Costume button. Then, the order is written to a file and the Confirmation page is displayed. • The costume information is retrieved from a file and stored in a sorted list. The sorted list is used to load the drop-down list. Then, when the user selects a costume, the price of that costume is retrieved from the sorted list and displayed on the form. • This application uses view state to maintain the items in the drop-down list when the user posts the page to the server by selecting a costume. • This application uses session state to store the costume and order data between executions.

18. The aspx code for the Costume form <%@ Page Language=“C#" AutoEventWireup="false" Codebehind="Costume.aspx.cs" Inherits="CostumeStore.Costume"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>Costume</title> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:image id="Image1" style="Z-INDEX: 107; LEFT: 9px; POSITION: absolute; TOP: 9px" runat="server" ImageUrl="banner.jpg"></asp:image> <asp:label id="Label1" style="Z-INDEX: 101; LEFT: 10px; POSITION: absolute; TOP: 122px" runat="server"> Costume:</asp:label> <asp:dropdownlist id="ddlCostumes" style="Z-INDEX: 102; LEFT: 82px; POSITION: absolute; TOP: 124px" runat="server" Width="152px" AutoPostBack="True"> </asp:dropdownlist> <asp:label id="Label2" style="Z-INDEX: 109; LEFT: 10px; POSITION: absolute; TOP: 156px" runat="server"> Price:</asp:label> <asp:label id="lblPrice" style="Z-INDEX: 110; LEFT: 82px;

19. The aspx code for the Costume form (cont.) POSITION: absolute; TOP: 156px" runat="server"></asp:label> <asp:label id="Label3" style="Z-INDEX: 105; LEFT: 10px; POSITION: absolute; TOP: 189px" runat="server"> Quantity:</asp:label> <asp:textbox id="txtQuantity" style="Z-INDEX: 104; LEFT: 82px; POSITION: absolute; TOP: 189px" runat="server" Width="48px"></asp:textbox> <asp:requiredfieldvalidator id="RequiredFieldValidator2" style="Z-INDEX: 106; LEFT: 134px; POSITION: absolute; TOP: 192px" runat="server" ErrorMessage="You must enter a quantity." ControlToValidate="txtQuantity"> </asp:requiredfieldvalidator> <asp:comparevalidator id="CompareValidator1" style="Z-INDEX: 108; LEFT: 299px; POSITION: absolute; TOP: 192px" runat="server" ErrorMessage="Quantity must be greater than 0." ControlToValidate="txtQuantity" ValueToCompare="0" Type="Integer" Operator="GreaterThan"></asp:comparevalidator> <asp:button id="btnOrder" style="Z-INDEX: 103; LEFT: 10px; POSITION: absolute; TOP: 237px" runat="server" Text="Order Costume"></asp:button> </form> </body> </HTML>

20. The aspx code for the Confirmation form <%@ Page Language=“C#" AutoEventWireup="false"Codebehind="Confirmation.aspx.cs" Inherits="CostumeStore.Confirmation"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>Confirmation</title> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:Image id="Image1" style="Z-INDEX: 105; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" ImageUrl="banner.jpg"></asp:Image> <asp:Label id="lblCostume" style="Z-INDEX: 102; LEFT: 9px; POSITION: absolute; TOP: 128px" runat="server"></asp:Label> <asp:button id="btnReturn" style="Z-INDEX: 101; LEFT: 9px; POSITION: absolute; TOP: 214px" runat="server" Text="Return to Order Page"></asp:button> </form> </body> </HTML>

21. The aspx code for the web forms • An aspx file defines an HTML document. • The first line of the HTML document is a Page directive that specifies the ASP.NET options. • The Codebehind option names the file that contains the C# code for the page. This option is used by Visual Studio to associate the page with the class that contains the C# code for the page. • The Inherits option names the page class that the page inherits at runtime. This class is part of the DLL file that’s created when you compile the project. • The rest of the aspx file contains the HTML that determines how the page will appear in the browser. The HTML can include standard HTML tags and special ASP.NET tags. The ASP.NET tags begin with asp: and define ASP.NET Web Server controls.

22. The aspx code for the web forms (cont.) • The Web Server controls are implemented by classes that are defined by the .NET Framework. ASP.NET renders these controls to standard HTML so the controls can be displayed in the browser. • The runat="server" attribute that appears in the form and asp tags indicates that the form and its controls are to be processed at the server by ASP.NET.

23. The code for the Costume form public class Costume : System.Web.UI.Page { NameValueCollection costumes; void Page_Load(Object sender, System.EventArgs e) { GetCostumes(); if (!IsPostBack) { LoadCostumeDropDownList(); lblPrice.Text = costumes[ddlCostumes.SelectedIndex]; } } private void GetCostumes() { if (Session["Costumes“] == null) { costumes = OrdersDB.GetCostumes(); Session["Costumes“] = costumes; } else costumes = Session["Costumes“]; } }

24. The code for the Costume form (cont.) private void LoadCostumeDropDownList() { DictionaryEntry Costume; foreach (Costume c in Costumes) ddlCostumes.Items.Add(c.Key); } private void ddlCostumes_SelectedIndexChanged (Object sender, System.EventArgs e) { lblPrice.Text = Costumes[ddlCostumes.SelectedIndex]; } private btnOrder_Click(Object sender, System.EventArgs e) { Order order = new Order(ddlCostumes.SelectedItem.Text, txtQuantity.Text, lblPrice.Text); Session("Order") = order; OrdersDB.Write(order); Response.Redirect("Confirmation.aspx"); } }

25. The code for the Confirmation form public class Confirmation : System.Web.UI.Page { private void Page_Load(Object sender, System.EventArgs e) { Order order = Session["Order“]; lblConfirm.Text = "Thank you for your order of " + order.Quantity + " " + order.Product + " costume" + ((order.Quantity > 1 ? "s" : "") + " @ " + order.UnitPrice + ".<br><br>" + "It will be shipped on " + Now().Date.AddDays(1) + ".“; } private void btnReturn_Click(Object sender, System.EventArgs e) { Response.Redirect("Costume.aspx"); } }

26. The code for the Web forms • The code for a form is stored in a file called a code-behind file. This code includes event procedures that are called by ASP.NET when the user interacts with the controls on the page. • Each time a page is executed, ASP.NET executes the procedure for the Load event of the form. Within this event procedure, you can test the IsPostBack property of the page to determine if the page is being loaded for the first time or if it’s being posted back to the server. • You can use the Session property of the page to save items in and retrieve items from the session state object.

27. The code for the web forms (cont.) • You can use the Redirect method of the HttpResponse object associated with the page to display a form other than the one that’s currently displayed. To refer to this object, you use the Response property of the page. • A web form inherits the System.Web.UI.Page class defined by the .NET Framework. This class defines the basic functionality for all web pages. Note • Since the page is the default object within a code-behind file, you don’t need to refer to it explicitly to use its properties and methods.

28. Order and OrdersDB classes public class Order { public String Name; public String Product; public String Quantity; public int UnitPrice; } using System.IO; public class OrdersDB { public static string OrderFile = “orders.txt“; public static string CostumeFile = “costumes.dat“; public static NameValueCollection GetCostumes() { NameValueCollection costumes = new NameValueCollection(); FileStream costumeStream = new FileStream(costumeFile, FileMode.Open, FileAccess.Read); BinaryReader costumeReader = new BinaryReader(costumeStream); while (costumeReader.PeekChar()) { string sName = costumeReader.ReadString(); int dPrice = costumeReader.ReadDecimal(); costumes.Add(sName, dPrice); } costumeReader.Close(); return costumes; }

29. public static void Write(Order order) { FileStream orderStream = new FileStream(ordersFile, FileMode.Append, FileAccess.Write); StreamWriter OrderWriter = new StreamWriter(OrderStream); OrderWriter.WriteLine(order.Name + "," + order.Product + "," + order.Quantity + "," + order.UnitPrice); OrderWriter.Close(); } }

30. .aspx .aspx HTML file To web server HTML code .aspx.cs .dll Assembly C# compiler To web server C# code-behind files .cs Other classes

31. How an ASP.NET application is compiled .aspx HTML code Page class .dll .dll Assembly Compiled page Compiler

32. How the files of an ASP.NET application are stored and compiled • When you build an ASP.NET application, the VB.NET compiler compiles the files that contain C# code to create an assembly. The assembly is stored in a DLL file on the web server. • The aspx files that contain the HTML code are not compiled along with the C# code. Instead, those files are stored in their original format on the web server. • When the user requests an ASP.NET page, ASP.NET: • creates a class file from the aspx file for the page • compiles that class file and the code it inherits from the C# assembly into a single assembly that’s stored on disk in a DLL file • executes the DLL to generate the page

33. Components of an ASP.NET application Client Browser HTTP request HTTP response Server Web server (IIS) ASP.NET (aspnet_isapi.dll) Generated HTML page Compiled Page (dll) Instantiated page class

34. How ASP.NET applications work • When IIS receives an HTTP request for an ASP.NET page, it forwards the request to ASP.NET. ASP.NET then creates and executes a compiled page that combines the page class with the compiled C# code. • When the compiled page is executed, an instance of the ASP.NET page class is generated. Then, ASP.NET raises the appropriate events, which are processed by the event handlers in the page. Finally, the page generates the HTML that’s passed back to IIS. • The ASP.NET page is compiled only the first time it’s requested. After that, the page is run directly from the DLL file.

35. Elements of an ASP.NET application .aspx .ascx .css Presentation layer HTML pages User controls Style sheets .aspx.cs .ascx.cs .cs Business Rules layer Code behind Code behind for user Other classes for .aspx files controls .cs Database layer Database Database classes

36. Elements of an ASP.NET applications • Presentation layer • HTML pages (.aspx files) that define the layout of each web page • user controls (.ascx files) that define page elements such as banners, navigation menus, and data entry forms • style sheets (.css files) that control the overall appearance of the pages. • Business Rules layer • class files that provide the code-behind functions for each page (.aspx.cs) • user control (.ascx.cs) to implement the application’s processing requirements • other classes (.cs), such as classes that represent business entities or implement business rules. • Database layer • the database itself (such as Microsoft SQL Server) as well as classes that work directly with the database.