Chapter 2 1 Introduction to Visual Studio.NET Introduction to ASP.NET By Kathleen Kalata.

Chapter 2 1

Introduction to Visual Studio .NET

Introduction to ASP.NET

By Kathleen Kalata

Chapter 2 2

Objectives

• In this chapter, you will:

• Familiarize yourself with the Visual Studio .NET user interface

• Create Web pages using the Visual Studio .NET HTML editor

• Use Visual Studio .NET to create reusable User Controls

• Create Cascading Style Sheets with the Style Builder

• Customize the Toolbox

• Locate help resources within Visual Studio .NET

Chapter 2 3

Visual Studio .NET User Interface

• Start Page – used to locate help resources and configure the user preferences

• Solution Explorer – used to manage the files and resources within the Web project

• Main Window – working window where you enter code and design the Web pages

• Document Tab – allows you to easily switch between files

Chapter 2 4


• Server Explorer – identifies public components on the servers and data connections

• Task Window – manages a to do list

• Macros Explorer – manages macros which can be shared with other developers

Chapter 2 5


Chapter 2 6

The Solution Explorer Window

Chapter 2 7

The Solution Explorer Window

• Use the Solution Explorer window to create a folder and import files into your project

• All of the data folders are named after the chapter (i.e. Chapter02Data, Chapter03Data etc.)

• Add new items using the menu selections or shortcut menu

Chapter 2 8

The Toolbox

• The toolbox can be compared to a toolbox in a workroom

• The tabs represent the drawers that contain the actual tools

• There are several preconfigured tabs that are grouped by the type of tools that they contain

– The HTML tab contains the HTML controls

– The WebForms tab contains ASP.NET Server controls

Chapter 2 9

The Properties Window

• You can set some HTML properties in dialogue boxes

• Most controls use the Properties window to change the property settings

Chapter 2 10

HTML Controls

• HTML controls are client-side controls

– The runat property must be changed to server to make the control a server-side control

– When you create Web applications using Visual Studio .NET, the HTML controls create HTML that is XHTML compliant

• XHTML is the latest version of HTML.

– W3C maintains the standards

• XML requires that all tags contain a beginning and closing tag

– Tags that do not use a closing tag can be closed using a forward slash at the end of the beginning tag

– Minimized attributes must be written using a name and a value

Chapter 2 11

HTML Controls

• For example, instead of <hr noshade> the HTML editor writes <hr noshade="noshade"/>

• The HTML editor is also known as the HTML designer

– The two views are the Design View and the Code View

– In Design View, controls can be dragged and dropped onto the page

– The MS_POSITIONING property allows you to absolutely position elements in the Main Window

– In the HTML view, you can use IntelliSense which detects what you have typed, and tries to predict what you will type next

Chapter 2 12

Creating an HTML Page with Visual Studio .NET

• Create a basic HTML page named feedback.htm

• Modify properties using the Design view and HTML view

• Use the IntelliSense feature, and modify properties using the dialogue windows and the Properties Window

• In most browsers, the user can change the font size property

• Therefore, your final Web page may appear different

Chapter 2 13

Using a Dialogue Box to Change the Properties of an HTML Control

Chapter 2 14

User Controls

• User Controls are a form of compiled ASP.NET pages that can contain HTML, client-side scripts, and ASP.NET server code which allow you to separate content that can later be reused in other pages

• Suggested uses for User Controls

– heading images and banners

– lists of records returned from a database

– footers

– menus

– commonly used forms

Chapter 2 15

How to Create the User Control

• You cannot include the <html>, <head>, or <body> elements in the User Control

• The User Control file extension must have the file extension .ascx

• The first line of the User Control must identify the file as a User Control with the keyword Control

• Because the User Control can contain code, it also will contain a reference to its own code behind the page

– In Visual Studio .NET you can double click on the user control to open its code behind the page

Chapter 2 16

Sample Code for months.ascx

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

Chapter 2 17

Insert a User Control within an ASP.NET page

• You can insert the User Control into an ASP.NET page

• First, you must register the control

• Then, you can insert, and reuse the control within the same page

• In this exercise you will insert the date into the Web page

– In ASP.NET the date is an object, not a function as in VBScript

– The format of the date is selected based on the ToShortDateString preset format

Chapter 2 18

Register the User Control

• To register the control, the first line of the page must contain the @Register directive

• The TagPrefix property is used to identify the User Control’s namespace, like the ASP prefix with ASP controls

<%@ Register TagPrefix="Months" TagName="ListMonths" src="months.ascx" %>

Chapter 2 19

Insert the Control

• Once the TagPrefix has been registered, you can add an ASP.NET tag with the TagPrefix

– You can use the new tag anywhere in the Web page

– You can reuse any user control many times within the same page

– However, you must provide a unique ID name for each user control

<UC:Months id = "Month1" runat = "server"/>

Chapter 2 20

Create a User Control in a Web Page

• The User Control contains an image, and some basic ASP.NET code

• In the Web page, you will register the User Control and add the new tag to the Web page

• The prefix for the user control is named Chapter 2

– It’s useful to name the prefix using a standard name such as the name of the company or a generic name such as UC (user control)

Chapter 2 21

Creating Cascading Style Sheets

• The World Wide Web Consortium (www.w3c.org) is responsible for developing and maintaining the CSS standards

• You can create your cascading style sheet manually, or use a Style Builder graphical user interface to create your style sheet

• When you create an ASP.NET application, a default style sheet named styles.css is created

• A style rule is the information that is applied to a single HTML tag

Chapter 2 22

Inline Style Rules

• Inline style rules add the style information within the HTML tag

• The inline style rule would only be applied to the single tag

• The style property is used to identify the style rule<tagname "style:property1=value;property2=value2">

Content goes here

</tagname>

• Example

<H1 "style:color=green;size=12">Welcome to Tara Store!</H1>

Chapter 2 23

Embedded Style Rules

• Embedded style sheet rules are located in the heading section of the Web page

– A single pair of style tags <style></style> is used to identify the embedded style rules

– Because embedded style sheet rules are placed in the heading section, they can be applied to more than one tag within the HTML page

• For example, a paragraph tag that is formatted in the embedded style sheet would be reflected in all the paragraph tags within the Web page

ElementName {

PropertyName: value;

PropertyName: value;

}

Chapter 2 24

Sample Embedded Style Rules

<HTML><HEAD><TITLE>Sample Embedded Style Sheet</TITLE>

<STYLE>

H1{

color=green;

size=12"

}

</STYLE>

</HEAD>

<BODY>

<H1>Welcome to Tara Store!</H1>

</BODY></HTML>

Chapter 2 25

External Style Sheet Rules

• External style sheets are used to apply style rules across multiple Web pages

• Each Web page must include a reference to the external style sheet using a <LINK> tag

• When a paragraph tag is formatted in an external style sheet rule, all of the paragraphs within the Web pages will apply the new style rule

• The name of the file of the external style sheet ends with .css such as MyStyle.css

Chapter 2 26

Sample External StyleSheet named MyStyles.css

H1{

color=green;

size=12"

}

• Note:

– These three types of cascading style sheets can contain conflicting styles rules

– These conflicts are resolved through a series of cascading rules

– In most cases, inline style sheet rules take precedence over embedded style rules, and embedded style rules take precedence over external style rules

Chapter 2 27

Linking the Style Sheet to the Web Page

• The <LINK> tag is an HTML tag that is used to identify the location of the external style sheet

– The rel property indicates that the linked document contains a style sheet. In an external style sheet, the style tags are omitted because there the rel property indicates that the linked file is a style sheet

– The type property is used to indicate the MIME which identifies that the file is a style sheet

– The href property is used to indicate the location of the external style sheet

Link rel=stylesheet type=”text/css” href=”URL”

Chapter 2 28

Sample Web Page


<LINK REL="stylesheet" TYPE="text/css" HREF="MyStyle.css">

</HEAD>

<BODY>

<H1>Welcome to Tara Store!</H1>

</BODY></HTML>

Chapter 2 29

Comments

• /* */ for multi-line comments

• // for inline comments * Styles.CSS

Created By: Katie Kalata

Date Created: 9/5/2002

This style sheet is used to format the main menu

*/

H1 {color:green} // Green is the color of the corporate logo

H2 {color:red} // Red is the color of the heading

H3 {color:blue} // Blue is the color of the menu

Chapter 2 30

Classes

• A class can be used to format a group of

different tags or a subgroup of a specific

tag. Then, in the Web page, you could

format any element with the class

• In the following code, the selected item

would appear red, and the headings would

both be blue

Chapter 2 31

Example


<STYLE>

H1 {color:green}

.SelCat {color:red}

.BlueHead {color:blue}

</STYLE>

</HEAD>

<BODY>

…

</BODY></HTML>

Chapter 2 32

Example

<h1>Welcome to Tara Store!</h1>

<h2 class="BlueHead">Product Listing:</h2>

<ul>

<li>Gifts</li>

<li class="SelCat">Jewelry</li>

<li>China & Crystal</li>

…

<li>Books, Music, & Videos</li>

</ul>

<h3 class="BlueHead">About Tara Store</h3>

<ul>

<li>What’s New</li>

…

<li>Members Only</li>

</ul>

</BODY></HTML>

Chapter 2 33

Using the CSS Editor

• Visual Studio .NET comes with a complete CSS editor called the Style Builder

• Visual Studio .NET includes the IntelliSense feature within the CSS editor which is useful when you choose to enter your style rules manually

• You can navigate across these style properties using the menu located on the left side of the Style Builder window

Chapter 2 34

Using the CSS Editor

• There are four tabs in the Color Picker which identify how the colors are commonly used:

– The Web Colors tab provides 216 colors that are supported by the majority of computers and browsers

– The Named Colors tab provides the 16 Windows colors and the 122 other named colors

– The System Colors tab allows you to select a color that matches the colors used to create system graphical user interfaces such as windows, menus, scrollbars, and buttons

– The Custom Color tab allows you to use three slider controls to select the red, green, and blue (RGB) values

Chapter 2 35

Using the Style Builder and Color Picker

Chapter 2 36

Adding a Style Rule

Chapter 2 37

Previewing the Web Page in the Browser

Chapter 2 38

Customize the Toolbox

• The Clipboard Ring is a toolbox tool that stores the list of items that have previously been copied to the Clipboard

• The Clipboard is the area in memory that Windows uses to copy information that can be used in another part of a document or program

• You can add additional tabs within the toolbox to help organize your frequently used code

• Add a code fragment to the toolbox and rename the tab

Chapter 2 39

Using Visual Studio .NET Help Resources

• You can view the actual URL of the help files in the URL drop-down list box on the Web toolbar

• All help methods provide results in a ranked list

• You can double-click on the items in the list to view the documentation from within the user interface

– Dynamic help provides help for the currently selected item

– Search help provides a textbox to enter a search phrase

– Index help provides a dictionary index that you can search for a term alphabetically

– Contents help allows you navigate the help documentation using a table of contents

Chapter 2 1 Introduction to Visual Studio.NET Introduction to ASP.NET By Kathleen Kalata.

Documents