HTML Applications with Visual Studio .NET

1. HTML Applications with Visual Studio .NET ASP.NET

2. Static and Dynamic Web Applications • Static Web pages • Created with HTML controls—renders exactly the same every time the page is displayed • Dynamic Web pages • Allow users to interact with the Web page • Changes appearance or content • One tool for creating dynamic content is Microsoft’s Active Server Pages .NET (ASP.NET) • Used to build server-side Web applications (code statements that build the page run on the server)

3. Processing a Request for a Web Page

4. ASP.NET • Main ASP.NET applications: • Web Forms • Used to process forms and develop cross-browser applications • Uses .aspx file extension • Web Services • Other applications can interact with your program • Uses .asmx file extension

5. Web Forms • ASP.NET pages within an ASP.NET application • Identified with file extension .aspx • The Web Form consists of two (2) components: • The HTML template • The actual web page that contains the design layout, content and controls • A collection of code that commonly is located behind the Web Form • The code behind the page • Equivalent to a Form in Visual Basic .NET

6. Web Services • Exposes part of a program over the Internet • Web Service file has .asmx file extension • Uses open standards so it is supported across applications and platforms • Used to create business-to-business applications • Makes it possible to share data with other partners

7. HTML Server Controls • Similar to (and related to) HTML controls except that they are processed by the web server • The attribute and value runat="server" transforms an HTML control into an HTML Server control • HTML control: <input type="text"> • HTML Server control: <input type="text" runat="server" /> • Note: All XHTML controls must have a closing tag, if not, the tag must end with />

8. ASP.NET Server Controls • When they execute, they create HTML code • Similar to Visual Basic .NET controls • ASP.NET controls usually identified with prefix asp: followed by the name of the control, i.e. <asp:DropDownList> • Types of ASP.NET Server Controls • ASP.NET Form Controls (Web controls) • Data Validation Controls • User Controls • Mobile Controls (run on mobile devices)

9. HTML Server vs. ASP.NET Server Controls • ASP.NET form controls also have different properties than their HTML server control counterparts • HTML Server label control Message1.InnerHTML = "Product 1" • ASP server label control (properties are consistent with Visual Basic .NET controls) Message2.Text = "Product 2"

10. Server Controls within Visual Studio .NET

11. Browser Source Code • What is the Web server sending to the browser? (Look at the browser’s source code for an ASP.NET page): • ASP.NET code is never sent to the browser • Instead the ASP.NET code runs on the web server and builds an HTML document • Only HTML tags, along with client-side scripts (i.e. JavaScript statements), are sent to the browser

12. The Code Behind the Page • Written in an ASP.NET-compatible language • The file extension is .vb if the code is written in Visual Basic .NET • Compiled code behind the page is the class definition for the page • When the application is built, the code is compiled into an executable file stored in the bin directory

13. The Code Behind the Page

14. Locating Your ASP.NET Application • Web Server is called Internet Information Server • c:/Inetpub/wwwroot • This location maps to: • http://localhost/ • Applications are developed on a local Web server • The Web application is deployed to a production Web server on the Internet • Web application files can be transferred to a server using File Transfer Protocol (FTP) software

15. The .NET Framework • An architectural model for creating programs that interface with the operating system and base class libraries • Contains a hierarchical set of Base Class Libraries • Base class libraries are code libraries that provide general functions

16. The .NET Framework

17. Namespaces • Base class libraries are organized into namespaces • The top namespace for all .NET classes is System • All Web Forms inherit the "System.Web.UI" namespace • System.Web.UI contains classes for controls used on Web Forms: • HTML Server controls • ASP.NET Server controls (Web controls)

18. The HTML Server controls

19. The ASP.NET Server controls

20. Registering ASP.NET with IIS • To develop ASP.NET applications, a web server such as Internet Information Server (IIS) must be installed on the computer • Even if the web server has previously been installed, ASP.NET still may need to be registered with IIS • From the command prompt, enter the following or similar: windowsDirectory\Microsoft.NET\Framework\versionNumber\aspnet_regiis.exe -i

21. Visual Studio .NET User Interface (Page 1) • Integrated Development Environment (IDE)—the shared development environment • Document windows(Edit and view documents) • Resource Tools • Solution Explorer—manage project files and resources • Server Explorer—access server public components and manage connections to databases

23. Visual Studio .NET User Interface (Page 2) • Resource Tools (continued) • Properties window—for setting properties for objects, controls, and classes • Document Tab—allows switching easily between open documents • Toolbox—contains commonly used controls • Task window—contains a to do list, i.e. errors that must be corrected before the application runs successfully

24. Creating a Web Application (Page 1) • A solution may contain pointers to many projects • Solution files are stored in a folder in the Visual Studio Projects folder • Project name is also the folder (directory) name • By default, project name is the solution name (one or more projects make up a solution) • Project files are stored in the same folder

25. Creating a Web Application (Page 2) • Any of the following may be the Web server name: • Localhost • the machine name • IP address • 127.0.0.1 • Default Web site is http://localhost/ProjectName/ as in http://localhost/Chapter2/

26. Creating a Web Application (Page 3) • To create an ASP.NET project: • Select the File menu from the menu bar, the New command from the File menu and Project… from the submenu • Make sure to verify that Visual Basic Projects is selected in the "Project Types" pane • Select the ASP.NET Web Application template • Name the solution by completing the "Location:" following "localhost/", i.e. http://localhost/Chapter2 • Click the <OK> button (may take a while to create)

27. The Solution Explorer Window • Contains folders, project files, and hidden files • Contains Reference folder—listing of base class libraries and namespaces • Contains a bin directory—stores the compiled application • Compiled application is named after the project name with the file extension .dll, i.e. "Chapter2.dll"

28. The Solution Explorer Window

29. Adding an Existing Item • Existing items might include Web Forms, HTML Pages, Web User Controls, image files, etc. • Before starting, be certain folder that the item will be inserted into is selected in the "Solution Explorer" • Select Project from the menu bar • Select Add Existing Item… from the Project menu • Browse to "Look in:" folder • Select "Files of type:" from drop-down list • Select files and click <Open> button; the item(s) is/are added to specified folder in Solution Explorer

30. Adding an Existing Item

31. Chapter2 Project • Add all images from the Chapter02 download • Drill down to C:\Course Technology\????? \Chapter02\images • Select "All Files" from Files of type: dropdown list • Select all files and click <Open> button

32. Adding a New Item • Before starting, be certain folder where new item will be inserted into is selected in Solution Explorer • Select Project from the menu bar • Select the command from Project menu depending upon type of item to be added, i.e.: • Add Web Form… • Add Web User Control… • Add HTML Page… • Type filename (appropriate extension will be added) • Click <Open> button; the new item(s) is/are added to the selected folder in Solution Explorer

33. Adding a New Item

34. The Toolbox • Provides access to commonly used controls • Organized as tabs including: • HTML tab—contains the HTML controls • Web Forms tab—contains ASP.NET Server controls • Can be hidden and can slide out like several other windows—the Auto Hide feature • Default mode for the Toolbox • Click the Auto Hide icon (push pin) to turn off feature

35. Properties Window • Set the properties for objects, controls, and classes • Properties can be updated: • At design time • In the program code behind the page

36. Properties Window

37. HTML Controls (Page 1) • HTML is a markup language <hr noshade> • HTML standards are set by World Wide Web Consortium (W3C) • XHTML is the current version; it is "XML compliant" • Requires beginning and closing tags • If there is no closing tag, use "<tagName />" , i.e. <hr noshade />

38. HTML Controls (Page 2) • HTML Designer (two tabs near bottom of Web Form) • Design view—a graphical user interface (GUI) • HTML view—HTML code editor • The ms_positioning attribute of the <body> tag • GridLayout—absolute position objects on the page • FlowLayout—position elements in top-down format • IntelliSense—a drop-down list of commands related to the command that the developer is typing

39. Turning Off Auto Formatting • To keep ASP.NET from reformatting the HTML code every time an application is saved or when switching from Design to HTML view: • Select Tools from menu bar • Select Options… from Tools menu • Click Text Editor in Options dialog window • Select HTML/XML in Text Editor folder • Select Format command from HTML/XML folder • Apply Automatic Formatting—turn off both "When saving document" and "When switching from Design to HTML/XML view"

40. IntelliSense (in HTML View)

41. feedback.htm Return

42. feedback.htm (Page 1) • In HTML view, modify the following in the Properties window: • Title Tara Store • Keywords Irish Gifts, Ireland, Tara Store • In Design view, drag "header.jpg" file from "images" folder in Solution Explorer to upper-left corner of the Form and modify in the Properties window: • Alt Tara Store Banner

43. feedback.htm (Page 2) • In HTML view, add the following tag after <img … >: <hr> • Modify the position of the <hr> tag by updating the Style property (click Build (…) button in Properties window … • Position tab—Position Mode = Absolutely position; Top = 89; Left = 0;

44. feedback.htm (Page 3) • In Design view • Select Table from the menu bar • Select Insert from the Table menu • In the "Insert Table" dialog, set properties: • Rows=6; Columns=1 • Border=0 • Position=Absolute • Left=244; Top=132

45. feedback.htm (Page 4) • Enter into the first row of the Table "Tara Store Feedback Form" • Select entire phrase and on the Formatting toolbar: • Style Heading 2 • Font Verdana • Size 4

46. feedback.htm (Page 5) • From the HTML tab in the Toolbox, drag a Label control into the second row of the Table • Select the Label (click twice but slowly) and enter the following: • "Complete the form" • Then press <Shift> + <Enter> • "and click on the submit button" • Set properties: • Class TSHeading

47. feedback.htm (Page 6) • From the HTML tab in the Toolbox, drag a Text Field control into the third row of the Table • Set properties: • Class txtBox • ID Email • Size 30 • Value Enter your e-mail address

48. feedback.htm (Page 7) • From the HTML tab in the Toolbox, drag a Text Area control into the fourth row of the Table • Set properties: • Class txtBox • Cols 25 • ID comments • Rows 5 • In HTML view after (on the same line) the opening <textarea …> tag, enter the following: • "Enter your comments"

49. feedback.htm (Page 8) • In Design view from the HTML tab in the Toolbox, drag a Submit Button control into the fifth row of the Table • Set properties: • Class TSButton • ID btnSubmit • Value Send

50. feedback.htm (Page 9) • Type bulleted list (select from Formatting toolbar) into the last row of the Table as follows: • E-mail us at info@TaraStore.com • Visit us at www.TaraStore.com • In HTML view, one at a time select inside each of the <li> tags within the last row and set properties: • Class TSLinks