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: 1.Web Forms Used to process forms and develop cross-browser applications Uses.aspx file extension 2.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: HTML Server control: – 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. Types of ASP.NET Server Controls – ASP.NET Form Controls (Web controls) – Data Validation Controls – User Controls – Mobile Controls (run on mobile devices)

9. 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" HTML Server vs. ASP.NET Server Controls

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/ 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/http://localhost/ProjectName/http://localhost/Chapter2/

26. Creating a Web Application (Page 3) To create an ASP.NET project: 1.Select the File menu from the menu bar, the New command from the File menu and Project… from the submenu 2.Make sure to verify that Visual Basic Projects is selected in the "Project Types" pane 3.Select the ASP.NET Web Application template 4.Name the solution by completing the "Location:" following "localhost/", i.e. http://localhost/Chapter2http://localhost/Chapter2 5.Click the 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" 1.Select Project from the menu bar 2.Select Add Existing Item… from the Project menu 3.Browse to "Look in:" folder 4.Select "Files of type:" from drop-down list 5.Select files and click 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 button

32. Adding a New Item Before starting, be certain folder where new item will be inserted into is selected in Solution Explorer 1.Select Project from the menu bar 2.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… 3.Type filename (appropriate extension will be added) 4.Click 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 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 " ", i.e.

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 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: 1.Select Tools from menu bar 2.Select Options… from Tools menu 3.Click Text Editor in Options dialog window 4.Select HTML/XML in Text Editor folder 5.Select Format command from HTML/XML folder 6.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: – TitleTara Store – KeywordsIrish 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: – AltTara Store Banner

43. feedback.htm (Page 2) In HTML view, add the following tag after : – Modify the position of the 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 1.Select Table from the menu bar 2.Select Insert from the Table menu 3.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: – StyleHeading 2 – FontVerdana – Size4

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 + – "and click on the submit button" Set properties: – ClassTSHeading

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: – ClasstxtBox – IDEmail – Size30 – ValueEnter 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: – ClasstxtBox – Cols25 – IDcomments – Rows5 In HTML view after (on the same line) the opening 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: – ClassTSButton – IDbtnSubmit – ValueSend

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.cominfo@TaraStore.com Visit us at www.TaraStore.comwww.TaraStore.com In HTML view, one at a time select inside each of the tags within the last row and set properties: – ClassTSLinks

51. Previewing the HTML Page Preview page in both internal and external browsers – Right-click mouse on white space of Web Form while in "Design" view to see page in Visual Studio.NET's internal browser – Type the page's local URL to view in an external browser such as MS Internet Explorer, i.e. http://localhost/Chapter2/feedback.htm Note: If you preview page by starting the application, the default start page will appear in the browser. The start page can be changed Go to feedback.htm

52. Creating Cascading Style Sheets (CSS) Stores information on how to present the site Cascading style sheets allow content to be separated from formatting W3C also sets the standards for CSS – Inconsistency exists among the way various browsers and versions implement CSS ASP.NET's Style Builder is a graphical user interface for building CSS files Go to feedback.htm (w/Styles.css)

53. CSS Overview A style rule is the information that is applied to a single HTML tag, or a group of tags Name and value of the style is stored Syntax for the rules vary – Inline rules apply to a single tag – Embedded rules apply to all elements within a single web page – External rules apply to all elements within multiple web pages

54. Inline Style Sheets Placed inside the tag – Use the keyword style as an attribute with a tag – Join together each name and value pair with a colon; separate pairs with semicolons Format: Content goes here Example Welcome to Tara Store!

55. Embedded Style Sheets (Page 1) Placed in the section – Style content placed within … tags – Separate the name and value elements with the assignment operator (=) – Separate each style pair from other pairs with a semicolon (;) Style elements will apply to every matching tag in the of the web page

56. Embedded Style Sheets (Page 2) Example: Embedded Styles h1 {color=green; font-size=12 } Welcome to Tara Store!

57. External Style Sheets (Page 1) The style sheet is created as a separate document file with the extension.css The tag tells the browser to look to the style sheet for formatted elements – Placed into each Web page that will use the style sheet – This tag must be included in section of the page Promotes uniform style to an entire Web site Uses the same format found in the block for every element in each linked style sheet

58. External Style Sheets (Page 2) The tag attaches the style sheet to a web page Format: – rel—the file is a CSS style sheet – type—the file is a text/css MIME type – href—the location of the file (relative or absolute URL) – Placed in the heading section Example:

59. External Style Sheets (Page 3) In ASP.NET, the tag inserted be dragging the style sheet file from Solution Explorer into the Web form, either in Design or HTML view

60. Comments in Cascading Style Sheets The characters /* */ can be added to embedded or external stylesheets to insert internal documentation Example: /* Styles.CSS Created By: Katie Kalata Stylesheet is used to format main menu */ /* Corporate logo */ H1 {color:green} /* Red heading */ H2 {color:red} /* Blue heading */ H3 {color:blue}

61. Cascading Style Sheet Rules and Hierarchy CSS may contain conflicting styles when there are different rules for the same elements within inline, embedded and/or external style sheets This is "cascading" component in the name cascading style sheets In general: – Inline takes precedence over embedded – Embedded takes precedence over external

62. Classes (Page 1) A class name can be used to format a group of different tags or a subgroup of a specific tag Prefix the name of the class with a period (.) Sample Embedded Style Sheet h1 {color:green}.SelCat {color:red}.BlueHead {color:blue}

63. Classes (Page 2) Apply the class with the keyword class and the class name as per the following example: Welcome to Tara Store! Product Listing: Gifts Jewelry China & Crystal Clothing Books, Music, & Videos

64. Classes (Page 3) Both headings would appear in blue: About Tara Store What’s New Current Sales Location Contact Us Members Only

65. CSS Editor The VS.NET CSS editor implements Style Builder Includes the IntelliSense feature To create a new style sheet: 1.Select Project from the menu bar 2.Select Add New Item… from the Project menu 3.Scroll down in the Templates: window and select the "Style Sheet" icon 4.Type a Name: for the new file (".css" extension automatically added) and click the button Or double-click existing style sheet (i.e. "Styles.css") in the Solution Explorer window to open it

66. Creating a Cascading Style Sheet

67. Adding a Style Rule To add a new style rule to the Style Builder: 1.Select Styles from the menu bar 2.Select Add Style Rule… from the Styles menu 3.Select the Element: radio button, select the tag to be formatted from the drop-down list, and click the button (a new empty rule is added to end of the list) – (To combine elements is to create a hierarchy; select each item, then click the ">" button), i.e. UL LI

68. Creating a Cascading Style Sheet

69. Build the Style Rule To build the new style rule: 1.Click anywhere within an existing style rule 2.Select Styles from the menu bar 3.Select Build Style… from the Styles menu 4.The Style Builder window lists on tabs in left column various formatting types (based on which element(s) are being formatted); select the one to be edited 5.Modify all the desired formatting attributes 6.Click the button and the rules are added to the style sheet for that element

70. Creating a Cascading Style Sheet

71. Return

72. Styles.css (Page 1) Drag the "Styles.css" file from the Solution Explorer to the "feedback.htm" document Select (click anywhere inside) style rule for H2 – Font tab Color—Green Add style rule for HR – Font tab Color—Green

73. Styles.css (Page 2) Select style rule for UL LI – Font tab Color—Green Family—Verdana Size—Specific—10 – Lists tab Custom Bullet—"images/bullet.gif"

74. Styles.css (Page 3) Add style rule for Table – Edges tab Style—Solid Line Color—Green Add style rule for TD – Text tab Horizontal—Centered

75. Styles.css (Page 4) Add style rule for "Class name".TSHeading – Font tab Small caps—Small caps Size—Specific—12 Add style rule for "Class name".TSLinks – Font tab Color—Green Size—Specific—10

76. Styles.css (Page 5) Add style rule for "Class name".txtBox – Font tab Bold—Absolute—Bold Color—Green Family—Verdana Size—Specific—10 – Edges tab Color—Green Style—Solid Line

77. Styles.css (Page 6) Add style rule for "Class name".TSButtons – Font tab Bold—Absolute—Bold Color—White Family—Verdana Size—Specific—10 Small caps—Small caps – Background tab Color—Green – Edges tab Color—Yellow Style—Ridge Go to feedback.htm (w/Styles.css)

78. The CSS Specification—Version 1 Located at www.htmlhelp.com/reference/css/all- properties.html http://www.htmlhelp.com/reference/css/all-properties.html

79. User Controls (Page 1) User controls are separate content and programming code that can be reused within several web pages Easier to maintain since modifying the file will cause all web pages in which it is used to be updated Examples: – Heading, footers, menus – Lists of records returned from a database – Commonly used forms The file for a user control ends in ".ascx" – First line identifies the file using the keyword Control – May not have,, or tags

80. User Controls (Page 2) Example: January February March April May June July August September October November December

81. Creating a Web User Control 1.Select Project from the menu bar 2.Select Add Web User Control… from Project menu – The "Web User Control" icon will already be selected in Templates: frame of "New Item" dialog window 3.Type a Name: for the new file – The extension ".ascx" will be added automatically when the file is created 4.Click the button

82. header.ascx Drag "header.jpg" from images folder in Solution Explorer to upper-left corner of Form Press key after "header" image so the next inserted element will be positioned below it In HTML view, enter the following script statement: Welcome to Tara Store ") %> Drag a Label control from the "Web Forms" tab in the Toolbox to below the "header" image

83. Inserting VbScript into HTML VbScript statements may be inserted into the HTML between the tags " " Format: Example: A heading ") %>

84. The Response.Write Method A VbScript command that inserts HTML elements into the HTML code – Useful for inserting dynamic content The HTML code may be a combination of code and text elements Format: Example: A heading ") %>

85. header.ascx—HTML View

86. header.ascx.vb—Page_Load Private Sub Page_Load( … ) Handles MyBase.Load Label1.Text = Now.ToLongDateString End Sub

87. Inserting User Control into a Web Page (Page 1) Register it in a web page with "@ Register" directive Format: – TagPrefix is used to identify the user control’s namespace – TagName is the name of the control – src is the path and filename of the user control Example:

88. Inserting User Control into a Web Page (Page 2) Insert the control anywhere in the page – Can be reused any number of times within the page – Must provide a unique ID for each occurrence Format: Example: Can be registered and inserted into Web document by dragging the User Control file from Solution Explorer

89. “header.ascx” Inserted into “feedback.htm”

90. home.aspx In HTML view, register the User Control in a new "home.aspx" Web Form as follows: Insert the User Control after the tag as follows: Or drag User Control file from Solution Explorer into "home.aspx" in either Design or HTML view

91. home.aspx--HTML View