Transcript Document 7202588

HTML Applications with
Visual Studio .NET
ASP.NET
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)
Processing a Request for a Web Page
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
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
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
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 />
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)
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"
Server
Controls
within Visual
Studio .NET
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
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
The Code Behind the Page
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
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
The .NET Framework
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)
The HTML Server controls
The ASP.NET Server controls
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
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
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
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
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/
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/Chapter2
5. Click the <OK> button (may take a while to create)
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"
The Solution Explorer Window
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.
2.
3.
4.
5.
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
Adding an Existing Item
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
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 <Open> button; the new item(s) is/are added to
the selected folder in Solution Explorer
Adding a New Item
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
Properties Window
• Set the properties for objects, controls, and classes
• Properties can be updated:
– At design time
– In the program code behind the page
Properties Window
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 />
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
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.
2.
3.
4.
5.
6.
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"
IntelliSense (in HTML View)
feedback.htm
Return
feedback.htm
(Page 1)
• In HTML view, modify the following in the
Properties window:
– Title
– Keywords
Tara Store
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
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;
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
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
– Font
– Size
Heading 2
Verdana
4
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
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
ID
Size
Value
txtBox
Email
30
Enter your e-mail address
feedback.htm
•
•
From the HTML tab in the Toolbox, drag a Text
Area control into the fourth row of the Table
Set properties:
–
–
–
–
•
(Page 7)
Class
Cols
ID
Rows
txtBox
25
comments
5
In HTML view after (on the same line) the opening
<textarea …> tag, enter the following:
– "Enter your comments"
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
– ID
– Value
TSButton
btnSubmit
Send
feedback.htm
•
Type bulleted list (select from Formatting toolbar)
into the last row of the Table as follows:
•
•
•
(Page 9)
E-mail us at [email protected]
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
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
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)
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
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:
<tagname
style="property1:value1;property2:value2">
Content goes here
</tagname>
• Example
<h1 style="color:green">Welcome to Tara
Store!</h1>
Embedded Style Sheets
(Page 1)
• Placed in the <heading> section
– Style content placed within <style>…</style> 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 <body> of the web page
Embedded Style Sheets
(Page 2)
• Example:
<html><head><title>Embedded Styles</title>
<style>
h1 {color=green;
font-size=12
}
</style>
</head>
<body>
<h1>Welcome to Tara Store!</h1>
</body></html>
External Style Sheets
(Page 1)
• The style sheet is created as a separate document file
with the extension .css
• The <link> 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 <head> section of the page
• Promotes uniform style to an entire Web site
• Uses the same format found in the <style> block for
every element in each linked style sheet
External Style Sheets
(Page 2)
• The <link> tag attaches the style sheet to a web page
• Format:
<link rel="stylesheet" href="filename.css"
type="text/css">
–
–
–
–
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:
<link rel="stylesheet" type="text/css"
href="style.css">
External Style Sheets
(Page 3)
• In ASP.NET, the <link> tag inserted be dragging the
style sheet file from Solution Explorer into the Web
form, either in Design or HTML view
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}
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
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 (.)
<html><head><title>Sample Embedded Style
Sheet</title>
<style>
h1
{color:green}
.SelCat
{color:red}
.BlueHead {color:blue}
</style>
</head>
Classes
(Page 2)
• Apply the class with the keyword class and the class
name as per the following example:
<body>
<h1 class="BlueHead">Welcome to Tara
Store!</h1>
<h2>Product Listing:</h2>
<ul>
<li class="SelCat">Gifts</li>
<li>Jewelry</li>
<li>China & Crystal</li>
<li>Clothing</li>
<li>Books, Music, & Videos</li>
</ul>
Classes
(Page 3)
• Both headings would appear in blue:
<h3 class="BlueHead">About Tara Store</h3>
<ul>
<li>What’s New</li>
<li>Current Sales</li>
<li>Location</li>
<li>Contact Us</li>
<li>Members Only</li>
</ul>
</body></html>
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 <Open> button
•
Or double-click existing style sheet (i.e. "Styles.css")
in the Solution Explorer window to open it
Creating a Cascading Style Sheet
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
<OK> 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
Creating a Cascading Style Sheet
Build the Style Rule
•
To build the new style rule:
1.
2.
3.
4.
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
5. Modify all the desired formatting attributes
6. Click the <OK> button and the rules are added to the
style sheet for that element
Creating a Cascading Style Sheet
Creating a Cascading Style Sheet
Return
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
Styles.css
• Select style rule for UL LI
– Font tab
• Color—Green
• Family—Verdana
• Size—Specific—10
– Lists tab
• Custom Bullet—"images/bullet.gif"
(Page 2)
Styles.css
• Add style rule for Table
– Edges tab
• Style—Solid Line
• Color—Green
• Add style rule for TD
– Text tab
• Horizontal—Centered
(Page 3)
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
Styles.css
• 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
(Page 5)
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)
http://www.htmlhelp.com/reference/css/all-properties.html
The CSS Specification—Version 1
• Located at www.htmlhelp.com/reference/css/allproperties.html
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 <html>, <head>, <body> or <form> tags
User Controls
• Example:
<%@ Control %>
<select id=months>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
(Page 2)
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 <Open> button
header.ascx
• Drag "header.jpg" from images folder in Solution
Explorer to upper-left corner of Form
• Press <Enter> key after "header" image so the next
inserted element will be positioned below it
• In HTML view, enter the following script statement:
<% Response.Write("<h1 align =
'center'>Welcome to Tara Store</h1>") %>
• Drag a Label control from the "Web Forms" tab in the
Toolbox to below the "header" image
Inserting VbScript into HTML
• VbScript statements may be inserted into the HTML
between the tags "<%" and "%>"
• Format:
<% Visual Basic Statement %>
• Example:
<% Response.Write("<H1>A heading</H1>") %>
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:
<% Response.Write("ContentString") %>
• Example:
<% Response.Write("<H1>A heading</H1>") %>
header.ascx—HTML View
header.ascx.vb—Page_Load
Private Sub Page_Load( … ) Handles MyBase.Load
Label1.Text = Now.ToLongDateString
End Sub
Inserting User Control into a Web Page
(Page 1)
• Register it in a web page with "@ Register" directive
• Format:
<%@ Register TagPrefix="Namespace"
TagName="TagName" src="Ch2_Months.ascx" %>
– 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:
<%@ Register TagPrefix="Months"
TagName="ListMonths" src="Ch2_Months.ascx"
%>
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:
<TagPrefix:TagName id = "TagID" runat =
"server"/>
• Example:
<Months:ListMonths id = "ListMonths1"
runat = "server"/>
• Can be registered and inserted into Web document by
dragging the User Control file from Solution Explorer
“header.ascx” Inserted into
“feedback.htm”
home.aspx
• In HTML view, register the User Control in a new
"home.aspx" Web Form as follows:
<%@ Register TagPrefix="Chapter2"
TagName="MyHeading" src="header.ascx" %>
• Insert the User Control after the <form> tag as follows:
<Chapter2:MyHeading id="MyHeading1"
runat="server"></Chapter2:MyHeading>
• Or drag User Control file from Solution Explorer into
"home.aspx" in either Design or HTML view
home.aspx--HTML View