1 / 51

Chapter 5 Programming the Web Server-side Programming ASP .NET Web Forms

Chapter 5 Programming the Web Server-side Programming ASP .NET Web Forms. Yingcai Xiao. Programming the Internet. The Internet as a Computer Every computer on the Internet is a “ CPU ” Transmitting the data over the Internet is the Key Analogy of Internet Protocols:

devi
Télécharger la présentation

Chapter 5 Programming the Web Server-side Programming ASP .NET Web Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 5Programming the WebServer-side ProgrammingASP .NET Web Forms Yingcai Xiao

  2. Programming the Internet The Internet as a Computer Every computer on the Internet is a “CPU” Transmitting the data over the Internet is the Key • Analogy of Internet Protocols: IP => “Binary” (low-level Internet transmission protocol) HTTP => “Assembly”(high-level Internet transmission protocol) • HTML => High Level Language (for writing web-pages) • An international language everyone understand

  3. Internet Protocol • IP: Internet Protocol data transmission protocol (standard) for the Internet. • The Internet is a computer network based on the Internet Protocol. • Each computer on the Internet is identified by its Internet Address: 130.101.10.134 or wp.cs.uakron.edu • Data transmitted between computers on the Internet as packet. • Each packet has an IP header followed by data. • The first 2 entries in an IP header are the receiver’s address and the sender’s address. IP is similar to postal mailing (Packet Switching), not phoning (Circuit Switching). • IPv4 (32bit addressing, 4B), IPv6 (48bit addressing, 256T) • The headers are in the standard IP format, platform-independent. • Data (any type) is transmitted over the Internet bit-by-bit. No restrictions on what can be transmitted. • Binary data are platform-dependent.Binary data transmitted from one computer to another computer may not be readable by the receiver if it has a different binary data format than the sender.

  4. Hypertext Transfer Protocol • Can we make it platform-independent? • The World Wide Web is an application built on the Internet using the Hypertext Transfer Protocol in which only text data is permitted to be transmitted. • HTTP(Hypertext Transfer Protocol) • Tim Berners-Lee ("father of the Web") and RFC 2068 • (www.w3.org/Protocols/rfc2068/rfc2068). • Entirely text based: ASCII (8-bits) or Unicode (16-bits). • Platform independent • Defines how Web browsers and Web servers communicate. • 7 instructions defined in HTTP 1.1.: GET, POST, … • Transmitted over TCP/IP (Transport Control Protocol/Internet Protocol). • Web applications are implemented over the Internet using HTML and other Web languages.

  5. HTML • HTML (Hypertext Markup Language) • Defines syntax and semantics of the Web language. • Entirely text based (platform independent) • Hypertexts are tagged in < >, not to be displayed. They are metadata describing regular text. (http://www.w3schools.com/tags/) • Browsers are GUI-based HTML interpreters. • HTML 4.01 became XHTML 1.0 in 2000 simple.html: <html> <body> Hello, world </body> </html>

  6. Computing over the Internet • Client-Side: • Thin client • Only a browser is needed. • The browser renders a html page on the client computer. • HTML (static), DHTML (dynamic), HTML5 (dynamic and multi-medium). • Programming with embedded scripts: JavaScript, . Dynamic and computational. • Ajax (asynchronous JavaScript & XML): asynchronous. • Plugins: VRML (3D Web) • Java Applet: transmit the application to the client and run it there. Too much to transmit for large distribution lists.

  7. Computing over the Internet • Client-Side: • Thick client • Client program installed prior, no need to download at runtime. • Runs like any other program on the client, but can talk to the server when needed. • .NET Remoting, Windows Communication Foundation (WCF), • Java's Remote Method Invocation (RMI) • Common Object Request Broker Architecture (CORBA)

  8. Computing over the Internet • Server-Side: • Web pages are generated by server side programs at runtime. Dynamic contents and heavy-duty computing. • Server Scripts • Perl, PHP, …. • Does not scale well. (each client needs a process to service) • Server VMs • .NET ASP (Active Server Page), JSP (Java Server Page), • All clients are served by a single process. The process will create a thread to serve each client.

  9. Computing over the Internet • Server-Side: • CMS (Content Management Systems): web contents are managed at server side on demand. • Dejango CMS, Joomla. • Server-Client Communication: • Important for Internet based computing. • HTTP channel (slower, works for both thin and thick clients). • TCP/IP channel (faster, works only for thick clients). • HTTP next, TCP/IP later.

  10. http://www.wintellect.com/simple.html • Start a client (a browser). • Type in the URL (Unified Resource Locator). • Internet’s Domain Name System (DNS) converts www.wintellect.com into an IP address (66.45.26.25). • The browser opens a socket (IP) connection to the server using default port 80 (mailbox #). http://www.wintellect.com:80/simple.html What happens when browsing a web page on a server?

  11. • The browser transmits an HTTP request to the server. GET /simple.html HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-agent: Mozilla/4.0.(compatible; MSIE.6.0; Windows NT 5.1) Host: www.wintellect.com Connection: Keep-Alive [blank line] What happens when browsing a web page on a server?

  12. • The server transmits an HTTP response back. HTTP/1.1 200 OK Server: Microsoft-IIS/5.0 Date: Wed, 24 Oct 2001 14:12:37 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Wed, 24 Oct 2001 14:00:53 GMT ETag: "d02acf81975cc11:a78" Content-Length: 46 [blank line] <html> <body> Hello, world </body> </html> What happens when browsing a web page on a server?

  13. Upon receiving the response, the browser parses the HTML and displays the resulting Web page. • This is just a static page. • To compute, we need get the data from the client user. A client form is needed. HTML form serves the purpose. What happens when browsing a web page on a server?

  14. http://winserv1.cs.uakron.edu/xiaotest/Calc.html <html> <body> <form method=“post”> <input type="text" name="op1" /> + <input type="text" name="op2" /> <input type="submit" value=" = " /> </form> </body> </html> HTML Forms

  15. No action to send anything to the server when the user types values in the text fields. But when the submit button (<input type=“submit”>) is clicked, the browser submits the form along with any input in the form’s controls. POST /calc.html HTTP/1.1 … Content-Length: 11 [blank line] op1=2&op2=2 What’s happening?

  16. Deploying a Web Page on an IIS server. • IIS: Internet Information Services • Deploying Directory: C:\Inetpub\wwwroot • Access URL: http://localhost/ (case insensitive) • Server-Side Processing • Common Gateway Interface (CGI) • CGI applications write HTTP responses to standard output (stdout) on the server, which are then forwarded to the client browser by the web server. • Defines a low-level programmatic interface between Web servers and applications that run on Web servers. • CGI applications can be written in any programming language. • CGI applications read the input accompanying postbacks through server environment variables and standard input (stdin). • Slow, restarts a process on every request. Web Server

  17. ISAPI: Internet Server Application Programming Interface • ISAPI extensions are Windows DLLs hosted by IIS. • They’re referenced by URL just like HTML files (for example, http://www.wintellect.com/calc.dll). • IIS forwards HTTP requests to an ISAPI DLL by calling a special function exported from the DLL. • The DLL generates HTTP responses. • Faster than CGI (run in the same process as IIS). • Once loaded, they remain in memory. • They’re difficult to write. ISAPI

  18. Active Server Pages (ASP) • Introduced in 1996. • Dynamically generates HTML on Web servers. • Allows HTML and scripts / languages to be mixed. • The embedded script code are between the <% and %> tags. • When an Active Server Page is requested, ASP server parses the page and executes any scripts contained inside it. • Scripts access the input by using the Request object. • Scripts write HTML to the HTTP response using the Response object, which is sent to the client by the Web server along with the static HTML. • ASP integrates with ActiveX Data Objects (ADO). • Interpreted, slow. • Lacks encapsulation. Active Server Pages (ASP)

  19. <%@ Language="VBScript" %> <html> <body> <form> <input type="text" name="op1" value="<%= Request ("op1") %>"/> + <input type="text" name="op2" value="<%= Request ("op2") %>" /> <input type="submit" value=" = " /> <% If Request ("op1") <> "" And Request ("op2") <> "" Then a = CInt (Request ("op1")) b = CInt (Request ("op2")) Response.Write (CStr (a + b)) End If %> </form> </body> </html> Calc.asp

  20. ASP: Microfoft’s equivalent of JSP • Code on the server that dynamically generates HTML for the clients at runtime. • JSP: Java Server Page Java code on the server that generates HTML for the clients. HTML contents can be dynamically generated at runtime • ASP.NET: ASP based on the .NET framework, one of the most popular web programming techniques. Code on the server that dynamically generates HTML for the clients at runtime. APS.NET

  21. ASP.NET WEB S E R V E R IIS WEB C L I E N T Application 1 Application 2 Application 3 ASP.NET HTTP

  22. Web Forms • Web Forms are GUI-based EDP web pages built around controls and event handlers. • .NET web forms are processed on the server side. • Web forms use HTML, HTTP and IP to transmit and display GUI into a client web-browser.

  23. ASP.NET Web Forms • • GUI for Web applications • Object-oriented (encapsulation, inheritance, polymorphism) • Event driven (EDP) • • Server-side processing (dynamic generation of HTML) • Compiled code, faster • HTML embedding tag: <asp: \> (processed on the server side) • File extension: .aspx • To deploy on winserv1: copy Examples/c5/calc.aspx to C:\Inetpub\wwwroot\xiaotest • To access: http://winserv1.cs.uakron.edu/xiaotest/calc.aspx ASP.NET Web Forms

  24. Calc.aspx <html> <body> <form RunAt="server"> <asp:TextBox ID="op1" RunAt="server" /> + <asp:TextBox ID="op2" RunAt="server" /> <asp:Button Text=" = " OnClick="OnAdd" RunAt="server" /> <asp:Label ID="Sum" RunAt="server" /> </form> </body> </html> <script language="C#" RunAt="server"> void OnAdd (Object sender, EventArgs e) { int a = Convert.ToInt32 (op1.Text); int b = Convert.ToInt32 (op2.Text); Sum.Text = (a + b).ToString (); } </script>

  25. An ASP.NET server page contains two parts: static HTML code and dynamic embedded APS.NET code. • ASP.NET-enabled web server processes the ASP.NET code in the server page. (Tomcat does not support ASP.NET but Mono does) • It instantiates TextBox, Button, and Label objects (the classes are defined in System.Web.UI.WebControls). • Each object dynamically renders itself into HTML. • The dynamically generated HTML is merged into the static HTML. • The resulting HTML is returned to the client as an HTTP response. When Calc.aspx is accessed by a client

  26. <html> <body> <form name="_ctl0" method="post" action="calc.aspx" id="_ctl0"> <input type="hidden" name="__VIEWSTATE" value="dDwxOTE0NDY4ODE2Ozs+" /> <input name="op1" type="text" id="op1" /> + <input name="op2" type="text" id="op2" /> <input type="submit" name="_ctl1" value=” = " /> <span id="Sum"></span> </form> </body> </html> note: there are also “hidden” and “div” (section) tags. Calc.aspx as seen by the client

  27. • When the “ = “ button is clicked, the input from “op1” and “op2” are posted to the server and directed to calc.aspx (since action="calc.aspx"). • On the server side, ASP.NET notifies the Button object in calc.aspx and the Button responds by firing a Click event. • ASP.NET receives the event and subsequently invokes its handler: OnAdd ( ). • “Sum.Text = (a + b).ToString ();” renders the result into the “Sum” label in <span id="Sum"></span> as HTML. • The dynamically generated HTML is merged with the static HTML (parts not in server side tags). • The resulting HTML is sent to the client browser. Use the client browser’s View->Page Source menu to see the final HTML code received by the client. (Mac: Tools->Web Developer->Page Source) When Calc.aspx is accessed by a client

  28. Two types: Web Controls and HTML Controls • Web Controls • • Class names are prefixed with asp:. • • Classes are from System.Web.UI.WebControls. • • The name of the object is defined by the ID attribute. • • ASP Web controls are rendered into HTML. • • ASP Web controls are highly programmable. • They support methods, properties, events. • <asp:TextBox Text="2" ID="op1" runat="server" /> • This web control initializes the textbox to display 2. Any public property of a control can be used this way. ASP.NET Controls

  29. • Control properties can be accessed from server-side scripts (code between the <script> and </script> tags). Read a control property by scripts: int a = Convert.ToInt32 (op1.Text); Write a control property by scripts: Sum.Text = (a + b).ToString (); • Event-driven programming. Controls fire events when users click on them. Wiring an event to an event handler is accomplished by prefixing the event name with “On”. <asp:Button Text=" = " RunAt="server" OnClick="OnAdd" /> ASP.NET Controls

  30. • Exception handling can be added in the handlers. void OnAdd (Object sender, EventArgs e) { try { int a = Convert.ToInt32 (op1.Text); int b = Convert.ToInt32 (op2.Text); Sum.Text = (a + b).ToString (); } catch (FormatException) { Sum.Text = “Format Error"; } } ASP.NET Controls

  31. Three principles of the Web Forms programming model: • A Web form’s user interface is “declared” using a combination of HTML and server controls. • Server controls fire events that can be handled by server-side scripts. • Server-side scripts in ASP.NET are compiled to CIL and executed by the CLR on the server. RunAt=“server” must be used in every tag that ASP.NET is to process The Web Forms Programming Model

  32. Web Controls

  33. Web Controls

  34. Web Controls

  35. Web Controls

  36. ASP.NET HTML controls mimic the original HTML tags. (They are processed on the server side. They are not HTML tags which are processed by the client browser.) e.g. <input type="text" RunAt="server" /> • HTML controls are used like HTML tags. • An HTML control is an instance of System.Web.UI.HtmlControls.HtmlInputText. • ASP.NET sees the RunAt=“server” attribute and creates an HtmlInputText object. • The HtmlInputText object, in turn, emits an <input type=“text”> tag that’s ultimately returned to the browser. • HTML controls (server side) have properties and can generate events which make them more powerful than HTML tags (client side). • Without RunAt="server“, HTML controls become HTML tags. HTML Controls

  37. HTML Controls

  38. HTML Controls

  39. HTML Controls

  40. <html> <body> <form runat="server"> <input type="text" id="op1" runat="server" /> + <input type="text" id="op2" runat="server" /> <input type="submit" value=" = " OnServerClick="OnAdd" runat="server" /> <span id="Sum" runat="server" /> </form> </body> </html> <script language="C#" runat="server"> void OnAdd (Object sender, EventArgs e) { int a = Convert.ToInt32 (op1.Value); int b = Convert.ToInt32 (op2.Value); Sum.InnerText = (a + b).ToString (); } </script> The HTML controls version of Calc.aspx

  41. When ASP.NET processes the first HTTP request for an ASPX file: It creates class representing the dynamic code of the file. It compiles it, loads it, creates an object for it. The object initializes itself and processes page-level events. The object generates HTML output to be sent to the client. The object remains in the server memory to process further requests to the page. When the ASPX file is modify, ASP.NET automatically repeats steps 1-4. How does an ASP.NET enabled server process an ASPX file?

  42. When ASP.NET processes the first HTTP request for an ASPX file: 1. It creates a Page class deriving from class System.Web.UI.Page. 2. It copies the code in the ASPX file to the Page-derived class. 3. A method (e.g. OnAdd) in a <script> block becomes a member method of the derived class. 4. ASP.NET compiles the derived class and places the resulting DLL in a system folder and caches it there. C:\WINNT\Microsoft.NET\Framework\vn.n.nnnn\Temporary ASP.NET Files. 5. ASP.NET instantiates an object of the derived Page class and “executes” it by calling a series of methods on it. 6. The Page object instantiates any controls declared inside it and solicits their output. How does a ASP.NET enabled server process an ASPX file? (Details)

  43. As the Page object executes, it fires a series of events (page-level events) that can be processed by server-side scripts: • “Init”, which is fired when the page is first instantiated, and • “Load”, which is fired after the page’s controls are initialized but before the page renders any output. • Implicit wiring of Page events to handlers by defining handlers’ names as Page_EventName. <asp:DropDownList ID="MyList" RunAt="server" /> . . . <script language="C#" runat="server"> void Page_Load (Object sender, EventArgs e) { if (!IsPostBack) { // if it is not from the client for (int i=0; i<5; i++) {// list 5 days DateTime date = DateTime.Today + new TimeSpan (i, 0, 0, 0); MyList.Items.Add (date.ToString ("MMMM dd, yyyy")); } } } </script> Page-Level Events

  44. Must be positioned at the top of an ASPX file. ASP.NET Compilation Directives @ 

  45. ASPX files are in text files, anyone can read it. When a company sells its ASPX server programs, it does not want people to see their source code. How? Code-behind is designed to protect the source code. For the static code in HTML, we can’t do anything about it. Dynamic code in C# or other .NET languages can be separated out and compiled into DLLs. Only the static HTML code and the DLLs are delivered to the customs. Separating Static Code from Dynamic Code

  46. 1. Create a CS file (e.g. Examples/C5/Lander/Lander.cs) containing code that would normally appear between <script> and </script> tags. Make each of these source code elements members of a class (e.g. LanderPage) derived from System.Web.UI.Page. 2. In your Page-derived class, declare protected fields whose names mirror the IDs of the controls declared in the ASPX file (e.g. Lander.aspx). At run time, ASP.NET maps these fields to the controls of the same name. Compile the CS file into a DLL. In a Visual Studio Command Prompt window, run the following: csc /target:library Lander.cs Code-behind with C#

  47. 4. Place the HTML portion of the Web form—everything between the <html> and </html> tags—in an ASPX file (e.g. Lander.aspx). 5. Include in the ASPX file an @ Page directive containing an Inherits attribute that identifies the Page-derived class in the DLL. When a request arrives for that page at run-time, ASP.NET derives a child class from this class to create the form. e.g. <%@ Page Inherits="LanderPage%> 6. To use the source code without recompiling: <%@ Page Inherits="LanderPage" Src="Lander.cs" %> 7. Code embedded has to be in C#, VB .NET, or JScript. Code-behind can be in any other language supported by .NET. Code-behind in Web forms coded in C#

  48. To deploy the program: move the ASPX file to Inetpub/wwwroot/xiaotest/Lander and the DLL to Inetpub/wwwroot/xiaotest/Lander/bin. • The program can be accessed the same way as other ASP.NET programs: • http://winserv1.cs.uakron.edu/xiaotest/Lander/Lander.aspx • In order for • http://winserv1.cs.uakron.edu/xiaotest/Lander/Lander.aspx to work, the Lander directory has to be converted to a Web Application, which instructs ASP.NET to find Lander.dll under the application’s bin directory. Code-behind in Web forms coded in C#

  49. Create a Web Application in IIS • winserv1 -> Sites -> Default Web Site • Right-click->Add Application • Alias: xiaotestLander • Application pool: defualtAppPool • Physical path: C:\inetpub\wwwroot\xiaotest\Lander http://winserv1.cs.uakron.edu/xiaotestLander/Lander.aspx Existing directories can be converted to Web Applications • winserv1 -> Sites -> Default Web Site->xiaotest • Right-click on Lander • Convert to Application • Application pool: defualtAppPool • http://winserv1.cs.uakron.edu/xiaotest/Lander/Lander.aspx * You need to be an administrator to use IIS

  50. Development of Web forms using Visual Studio .NET • Create a Web Application project • Use forms designer to design forms by drag-and-drop controls from a palette onto the forms. • Edit the HTML. • Write event handlers by double-clicking controls and filling in empty method bodies. • Compile and run applications by executing simple menu commands. Web Forms and Visual Studio .NET

More Related