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 controlsrenders 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
  Microsofts 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
• ltinput type"text"gt
• HTML Server control
• ltinput type"text" runat"server" /gt
• Note All XHTML controls must have a closing
  tag, if not, the tag must end with /gt

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.
• ltaspDropDownListgt
• 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 browsers 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\versionNu
  mber\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 Explorermanage project files and
  resources
• Server Exploreraccess server public components
  and manage connections to databases

22
(No Transcript)
23
Visual Studio .NET User Interface (Page 2)

• Resource Tools (continued)
• Properties windowfor setting properties for
  objects, controls, and classes
• Document Taballows switching easily between open
  documents
• Toolboxcontains commonly used controls
• Task windowcontains 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/Chap
  ter2
• Click the ltOKgt button (may take a while to create)

27
The Solution Explorer Window

• Contains folders, project files, and hidden files
• Contains Reference folderlisting of base class
  libraries and namespaces
• Contains a bin directorystores 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 ltOpengt 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 ltOpengt 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 ltOpengt 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 tabcontains the HTML controls
• Web Forms tabcontains ASP.NET Server controls
• Can be hidden and can slide out like several
  other windowsthe 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
• lthr noshadegt
• 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 "lttagName /gt" ,
  i.e.
• lthr noshade /gt

38
HTML Controls (Page 2)

• HTML Designer (two tabs near bottom of Web Form)
• Design viewa graphical user interface (GUI)
• HTML viewHTML code editor
• The ms_positioning attribute of the ltbodygt tag
• GridLayoutabsolute position objects on the page
• FlowLayoutposition elements in top-down format
• IntelliSensea 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 Formattingturn 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 ltimg
  gt
• lthrgt
• Modify the position of the lthrgt tag by updating
  the Style property (click Build () button in
  Properties window
• Position tabPosition 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
• Rows6 Columns1
• Border0
• PositionAbsolute
• Left244 Top132

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 ltShiftgt ltEntergt
• "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
  lttextarea gt 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_at_TaraStore.com
• Visit us at www.TaraStore.com
• In HTML view, one at a time select inside each of
  the ltligt tags within the last row and set
  properties
• Class TSLinks

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
• lttagname style"property1value1property2value2"
  gt
• Content goes here
• lt/tagnamegt
• Example
• lth1 style"colorgreen"gtWelcome to Tara
  Store!lt/h1gt

55
Embedded Style Sheets (Page 1)

• Placed in the ltheadinggt section
• Style content placed within ltstylegtlt/stylegt 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 ltbodygt of the web page

56
Embedded Style Sheets (Page 2)

• Example
• lthtmlgtltheadgtlttitlegtEmbedded Styleslt/titlegt
• ltstylegt
• h1 colorgreen
• font-size12
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtWelcome to Tara Store!lt/h1gt
• lt/bodygtlt/htmlgt

57
External Style Sheets (Page 1)

• The style sheet is created as a separate document
  file with the extension .css
• The ltlinkgt 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 ltheadgt section of
  the page
• Promotes uniform style to an entire Web site
• Uses the same format found in the ltstylegt block
  for every element in each linked style sheet

58
External Style Sheets (Page 2)

• The ltlinkgt tag attaches the style sheet to a web
  page
• Format
• ltlink rel"stylesheet" href"filename.css"
  type"text/css"gt
• relthe file is a CSS style sheet
• typethe file is a text/css MIME type
• hrefthe location of the file (relative or
  absolute URL)
• Placed in the heading section
• Example
• ltlink rel"stylesheet" type"text/css"
  href"style.css"gt

59
External Style Sheets (Page 3)

• In ASP.NET, the ltlinkgt 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 colorgreen
• / Red heading /
• H2 colorred
• / Blue heading /
• H3 colorblue

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 (.)
• lthtmlgtltheadgtlttitlegtSample Embedded Style
  Sheetlt/titlegt
• ltstylegt
• h1 colorgreen
• .SelCat colorred
• .BlueHead colorblue
• lt/stylegt
• lt/headgt

63
Classes (Page 2)

• Apply the class with the keyword class and the
  class name as per the following example
• ltbodygt
• lth1 class"BlueHead"gtWelcome to Tara Store!lt/h1gt
• lth2gtProduct Listinglt/h2gt
• ltulgt
• ltli class"SelCat"gtGiftslt/ligt
• ltligtJewelrylt/ligt
• ltligtChina Crystallt/ligt
• ltligtClothinglt/ligt
• ltligtBooks, Music, Videoslt/ligt
• lt/ulgt

64
Classes (Page 3)

• Both headings would appear in blue
• lth3 class"BlueHead"gtAbout Tara Storelt/h3gt
• ltulgt
• ltligtWhats Newlt/ligt
• ltligtCurrent Saleslt/ligt
• ltligtLocationlt/ligt
• ltligtContact Uslt/ligt
• ltligtMembers Onlylt/ligt
• lt/ulgt
• lt/bodygtlt/htmlgt

65
CSS Editor

• The VS.NET CSS editor implements Style Builder
• Includes the IntelliSense feature
• To create a new style sheet
• Select Project from the menu bar
• Select Add New Item from the Project menu
• Scroll down in the Templates window and select
  the "Style Sheet" icon
• Type a Name for the new file (".css" extension
  automatically added) and click the ltOpengt 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
• Select Styles from the menu bar
• Select Add Style Rule from the Styles menu
• Select the Element radio button, select the tag
  to be formatted from the drop-down list, and
  click the ltOKgt 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 "gt" button),
  i.e.
• UL LI

68
Creating a Cascading Style Sheet
69
Build the Style Rule

• To build the new style rule
• Click anywhere within an existing style rule
• Select Styles from the menu bar
• Select Build Style from the Styles menu
• 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
• Modify all the desired formatting attributes
• Click the ltOKgt button and the rules are added to
  the style sheet for that element

70
Creating a Cascading Style Sheet
71
Creating a Cascading Style Sheet
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
• ColorGreen
• Add style rule for HR
• Font tab
• ColorGreen

73
Styles.css (Page 2)

• Select style rule for UL LI
• Font tab
• ColorGreen
• FamilyVerdana
• SizeSpecific10
• Lists tab
• Custom Bullet"images/bullet.gif"

74
Styles.css (Page 3)

• Add style rule for Table
• Edges tab
• StyleSolid Line
• ColorGreen
• Add style rule for TD
• Text tab
• HorizontalCentered

75
Styles.css (Page 4)

• Add style rule for "Class name" .TSHeading
• Font tab
• Small capsSmall caps
• SizeSpecific12
• Add style rule for "Class name" .TSLinks
• Font tab
• ColorGreen
• SizeSpecific10

76
Styles.css (Page 5)

• Add style rule for "Class name" .txtBox
• Font tab
• BoldAbsoluteBold
• ColorGreen
• FamilyVerdana
• SizeSpecific10
• Edges tab
• ColorGreen
• StyleSolid Line

77
Styles.css (Page 6)

• Add style rule for "Class name" .TSButtons
• Font tab
• BoldAbsoluteBold
• ColorWhite
• FamilyVerdana
• SizeSpecific10
• Small capsSmall caps
• Background tab
• ColorGreen
• Edges tab
• ColorYellow
• StyleRidge

Go to feedback.htm (w/Styles.css)
78
The CSS SpecificationVersion 1
http//www.htmlhelp.com/reference/css/all-properti
es.html

• Located at www.htmlhelp.com/reference/css/all-prop
  erties.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 lthtmlgt, ltheadgt, ltbodygt or ltformgt tags

80
User Controls (Page 2)

• Example
• lt_at_ Control gt
• ltselect idmonthsgt
• ltoptiongtJanuarylt/optiongt
• ltoptiongtFebruarylt/optiongt
• ltoptiongtMarchlt/optiongt
• ltoptiongtAprillt/optiongt
• ltoptiongtMaylt/optiongt
• ltoptiongtJunelt/optiongt
• ltoptiongtJulylt/optiongt
• ltoptiongtAugustlt/optiongt
• ltoptiongtSeptemberlt/optiongt
• ltoptiongtOctoberlt/optiongt
• ltoptiongtNovemberlt/optiongt
• ltoptiongtDecemberlt/optiongt
• lt/selectgt

81
Creating a Web User Control

• Select Project from the menu bar
• 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
• Type a Name for the new file
• The extension ".ascx" will be added automatically
  when the file is created
• Click the ltOpengt button

82
header.ascx

• Drag "header.jpg" from images folder in Solution
  Explorer to upper-left corner of Form
• Press ltEntergt key after "header" image so the
  next inserted element will be positioned below it
• In HTML view, enter the following script
  statement
• lt Response.Write("lth1 align 'center'gtWelcome
  to Tara Storelt/h1gt") gt
• 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 "lt" and "gt"
• Format
• lt Visual Basic Statement gt
• Example
• lt Response.Write("ltH1gtA headinglt/H1gt") gt

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
• lt Response.Write("ContentString") gt
• Example
• lt Response.Write("ltH1gtA headinglt/H1gt") gt

85
header.ascxHTML View
86
header.ascx.vbPage_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 "_at_ Register"
  directive
• Format
• lt_at_ Register TagPrefix"Namespace"
  TagName"TagName" src"Ch2_Months.ascx" gt
• TagPrefix is used to identify the user controls
  namespace
• TagName is the name of the control
• src is the path and filename of the user control
• Example
• lt_at_ Register TagPrefix"Months"
  TagName"ListMonths" src"Ch2_Months.ascx" gt

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
• ltTagPrefixTagName id "TagID" runat
  "server"/gt
• Example
• ltMonthsListMonths id "ListMonths1" runat
  "server"/gt
• 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
• lt_at_ Register TagPrefix"Chapter2"
  TagName"MyHeading" src"header.ascx" gt
• Insert the User Control after the ltformgt tag as
  follows
• ltChapter2MyHeading id"MyHeading1"
  runat"server"gtlt/Chapter2MyHeadinggt
• Or drag User Control file from Solution Explorer
  into "home.aspx" in either Design or HTML view

91
home.aspx--HTML View
92
(No Transcript)