HTML Applications with Visual Studio .NET

92
HTML Applications with Visual Studio .NET ASP.NET

description

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 - PowerPoint PPT Presentation

Transcript of HTML Applications with Visual Studio .NET

Page 1: HTML Applications with Visual Studio .NET

HTML Applications with Visual Studio .NET

ASP.NET

Page 2: HTML Applications with Visual Studio .NET

Static and Dynamic Web ApplicationsStatic 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)

Page 3: HTML Applications with Visual Studio .NET

Processing a Request for a Web PageProcessing a Request for a Web Page

Page 4: HTML Applications with Visual Studio .NET

ASP.NETASP.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

Page 5: HTML Applications with Visual Studio .NET

Web Forms 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

Page 6: HTML Applications with Visual Studio .NET

Web ServicesWeb 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

Page 7: HTML Applications with Visual Studio .NET

HTML Server ControlsHTML 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 />

Page 8: HTML Applications with Visual Studio .NET

ASP.NET Server ControlsASP.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)

Page 9: HTML Applications with Visual Studio .NET

• 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 ControlsHTML Server vs. ASP.NET Server Controls

Page 10: HTML Applications with Visual Studio .NET

Server Controls within Visual Studio .NET

Server Controls within Visual Studio .NET

Page 11: HTML Applications with Visual Studio .NET

Browser Source CodeBrowser 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

Page 12: HTML Applications with Visual Studio .NET

The Code Behind the PageThe 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

Page 13: HTML Applications with Visual Studio .NET

The Code Behind the PageThe Code Behind the Page

Page 14: HTML Applications with Visual Studio .NET

Locating Your ASP.NET ApplicationLocating 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

Page 15: HTML Applications with Visual Studio .NET

The .NET FrameworkThe .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

Page 16: HTML Applications with Visual Studio .NET

The .NET FrameworkThe .NET Framework

Page 17: HTML Applications with Visual Studio .NET

NamespacesNamespaces

• 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)

Page 18: HTML Applications with Visual Studio .NET

The HTML Server controlsThe HTML Server controls

Page 19: HTML Applications with Visual Studio .NET

The ASP.NET Server controlsThe ASP.NET Server controls

Page 20: HTML Applications with Visual Studio .NET

Registering ASP.NET with IISRegistering 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

Page 21: HTML Applications with Visual Studio .NET

Visual Studio .NET User Interface (Page 1)

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

Page 22: HTML Applications with Visual Studio .NET
Page 23: HTML Applications with Visual Studio .NET

Visual Studio .NET User Interface (Page 2)

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

Page 24: HTML Applications with Visual Studio .NET

Creating a Web Application (Page 1)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

Page 25: HTML Applications with Visual Studio .NET

Creating a Web Application (Page 2)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/

Page 26: HTML Applications with Visual Studio .NET

Creating a Web Application (Page 3)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)

Page 27: HTML Applications with Visual Studio .NET

The Solution Explorer WindowThe 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"

Page 28: HTML Applications with Visual Studio .NET

The Solution Explorer WindowThe Solution Explorer Window

Page 29: HTML Applications with Visual Studio .NET

Adding an Existing ItemAdding 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 <Open> button; the item(s) is/are added to specified folder in Solution Explorer

Page 30: HTML Applications with Visual Studio .NET

Adding an Existing ItemAdding an Existing Item

Page 31: HTML Applications with Visual Studio .NET

Chapter2 ProjectChapter2 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

Page 32: HTML Applications with Visual Studio .NET

Adding a New ItemAdding a New Item

• Before starting, be certain folder where new item will be inserted into is selected in Solution Explorer1. 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

Page 33: HTML Applications with Visual Studio .NET

Adding a New ItemAdding a New Item

Page 34: HTML Applications with Visual Studio .NET

The ToolboxThe 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

Page 35: HTML Applications with Visual Studio .NET

Properties WindowProperties Window

• Set the properties for objects, controls, and classes• Properties can be updated:– At design time

– In the program code behind the page

Page 36: HTML Applications with Visual Studio .NET

Properties WindowProperties Window

Page 37: HTML Applications with Visual Studio .NET

HTML Controls (Page 1) 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 />

Page 38: HTML Applications with Visual Studio .NET

HTML Controls (Page 2)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

Page 39: HTML Applications with Visual Studio .NET

Turning Off Auto FormattingTurning 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"

Page 40: HTML Applications with Visual Studio .NET

IntelliSense (in HTML View)IntelliSense (in HTML View)

Page 41: HTML Applications with Visual Studio .NET

feedback.htmfeedback.htm

Return

Page 42: HTML Applications with Visual Studio .NET

feedback.htm (Page 1)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

Page 43: HTML Applications with Visual Studio .NET

feedback.htm (Page 2)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;

Page 44: HTML Applications with Visual Studio .NET

feedback.htm (Page 3)feedback.htm (Page 3)

• In Design view1. 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

Page 45: HTML Applications with Visual Studio .NET

feedback.htm (Page 4)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

Page 46: HTML Applications with Visual Studio .NET

feedback.htm (Page 5)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

Page 47: HTML Applications with Visual Studio .NET

feedback.htm (Page 6)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

Page 48: HTML Applications with Visual Studio .NET

feedback.htm (Page 7)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"

Page 49: HTML Applications with Visual Studio .NET

feedback.htm (Page 8)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

Page 50: HTML Applications with Visual Studio .NET

feedback.htm (Page 9)feedback.htm (Page 9)

• Type bulleted list (select from Formatting toolbar) into the last row of the Table as follows:

• 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

Page 51: HTML Applications with Visual Studio .NET

Previewing the HTML PagePreviewing 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

Page 52: HTML Applications with Visual Studio .NET

Creating Cascading Style Sheets (CSS)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)

Page 53: HTML Applications with Visual Studio .NET

CSS OverviewCSS 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

Page 54: HTML Applications with Visual Studio .NET

Inline Style SheetsInline 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>

Page 55: HTML Applications with Visual Studio .NET

Embedded Style Sheets (Page 1)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

Page 56: HTML Applications with Visual Studio .NET

Embedded Style Sheets (Page 2)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>

Page 57: HTML Applications with Visual Studio .NET

External Style Sheets (Page 1)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

Page 58: HTML Applications with Visual Studio .NET

External Style Sheets (Page 2)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">

Page 59: HTML Applications with Visual Studio .NET

External Style Sheets (Page 3)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

Page 60: HTML Applications with Visual Studio .NET

Comments in Cascading Style SheetsComments in Cascading Style Sheets

• The characters /* */ can be added to embedded or external stylesheets to insert internal documentation

• Example:/* Styles.CSSCreated By: Katie KalataStylesheet is used to format main menu *//* Corporate logo */H1 {color:green}/* Red heading */H2 {color:red}/* Blue heading */H3 {color:blue}

Page 61: HTML Applications with Visual Studio .NET

Cascading Style Sheet Rules and HierarchyCascading 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

Page 62: HTML Applications with Visual Studio .NET

Classes (Page 1)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>

Page 63: HTML Applications with Visual Studio .NET

Classes (Page 2)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>

Page 64: HTML Applications with Visual Studio .NET

Classes (Page 3)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>

Page 65: HTML Applications with Visual Studio .NET

CSS EditorCSS 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

Page 66: HTML Applications with Visual Studio .NET

Creating a Cascading Style SheetCreating a Cascading Style Sheet

Page 67: HTML Applications with Visual Studio .NET

Adding a Style RuleAdding 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

Page 68: HTML Applications with Visual Studio .NET

Creating a Cascading Style SheetCreating a Cascading Style Sheet

Page 69: HTML Applications with Visual Studio .NET

Build the Style RuleBuild 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 <OK> button and the rules are added to the style sheet for that element

Page 70: HTML Applications with Visual Studio .NET

Creating a Cascading Style SheetCreating a Cascading Style Sheet

Page 71: HTML Applications with Visual Studio .NET

Creating a Cascading Style SheetCreating a Cascading Style Sheet

Return

Page 72: HTML Applications with Visual Studio .NET

Styles.css (Page 1)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

Page 73: HTML Applications with Visual Studio .NET

Styles.css (Page 2)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"

Page 74: HTML Applications with Visual Studio .NET

Styles.css (Page 3)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

Page 75: HTML Applications with Visual Studio .NET

Styles.css (Page 4)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

Page 76: HTML Applications with Visual Studio .NET

Styles.css (Page 5)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

Page 77: HTML Applications with Visual Studio .NET

Styles.css (Page 6)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)

Page 78: HTML Applications with Visual Studio .NET

The CSS Specification—Version 1The CSS Specification—Version 1

• Located at www.htmlhelp.com/reference/css/all-properties.html

http://www.htmlhelp.com/reference/css/all-properties.html

Page 79: HTML Applications with Visual Studio .NET

User Controls (Page 1)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

Page 80: HTML Applications with Visual Studio .NET

User Controls (Page 2)User Controls (Page 2)

• 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 81: HTML Applications with Visual Studio .NET

Creating a Web User ControlCreating 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

Page 82: HTML Applications with Visual Studio .NET

header.ascxheader.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

Page 83: HTML Applications with Visual Studio .NET

Inserting VbScript into HTMLInserting 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>") %>

Page 84: HTML Applications with Visual Studio .NET

The Response.Write MethodThe 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>") %>

Page 85: HTML Applications with Visual Studio .NET

header.ascx—HTML Viewheader.ascx—HTML View

Page 86: HTML Applications with Visual Studio .NET

header.ascx.vb—Page_Loadheader.ascx.vb—Page_Load

Private Sub Page_Load( … ) Handles MyBase.Load

Label1.Text = Now.ToLongDateString

End Sub

Page 87: HTML Applications with Visual Studio .NET

Inserting User Control into a Web Page (Page 1)

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" %>

Page 88: HTML Applications with Visual Studio .NET

Inserting User Control into a Web Page (Page 2)

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

Page 89: HTML Applications with Visual Studio .NET

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

Page 90: HTML Applications with Visual Studio .NET

home.aspxhome.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

Page 91: HTML Applications with Visual Studio .NET

home.aspx--HTML Viewhome.aspx--HTML View

Page 92: HTML Applications with Visual Studio .NET