Introduction to Visual Studio .NET

1
Introduction to Visual Studio .NET

• Introduction to ASP.NET
• By Kathleen Kalata

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

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

4
Visual Studio .NET User Interface

• 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

5
Visual Studio .NET User Interface
6
The Solution Explorer Window
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

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

9
The Properties Window

• You can set some HTML properties in dialogue
  boxes
• Most controls use the Properties window to change
  the property settings

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

11
HTML Controls

• For example, instead of lthr noshadegt the HTML
  editor writes lthr noshade"noshade"/gt
• 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

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

13
Using a Dialogue Box to Change the Properties of
an HTML Control
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

15
How to Create the User Control

• You cannot include the lthtmlgt, ltheadgt, or ltbodygt
  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

16
Sample Code for months.ascx

• 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

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

18
Register the User Control

• To register the control, the first line of the
  page must contain the _at_Register directive
• The TagPrefix property is used to identify the
  User Controls namespace, like the ASP prefix
  with ASP controls
• lt_at_ Register TagPrefix"Months"
  TagName"ListMonths" src"months.ascx" gt

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
• ltUCMonths id "Month1" runat "server"/gt

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

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

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
• lttagname "styleproperty1valueproperty2value2"gt
  
• Content goes here
• lt/tagnamegt
• Example
• ltH1 "stylecolorgreensize12"gtWelcome to Tara
  Store!lt/H1gt

23
Embedded Style Rules

• Embedded style sheet rules are located in the
  heading section of the Web page
• A single pair of style tags ltstylegtlt/stylegt 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

24
Sample Embedded Style Rules

• ltHTMLgtltHEADgtltTITLEgtSample Embedded Style
  Sheetlt/TITLEgt
• ltSTYLEgt
• H1
• colorgreen
• size12"
• lt/STYLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtWelcome to Tara Store!lt/H1gt
• lt/BODYgtlt/HTMLgt

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 ltLINKgt 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

26
Sample External StyleSheet named MyStyles.css

• H1
• colorgreen
• size12"
• 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

27
Linking the Style Sheet to the Web Page

• The ltLINKgt 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 relstylesheet typetext/css hrefURL

28
Sample Web Page

• ltHTMLgtltHEADgtltTITLEgtSample Embedded Style
  Sheetlt/TITLEgt
• ltLINK REL"stylesheet" TYPE"text/css"
  HREF"MyStyle.css"gt
• lt/HEADgt
• ltBODYgt
• ltH1gtWelcome to Tara Store!lt/H1gt
• lt/BODYgtlt/HTMLgt

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 colorgreen // Green is the color of the
  corporate logo
• H2 colorred // Red is the color of the
  heading
• H3 colorblue // Blue is the color of the menu

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

31
Example

• ltHTMLgtltHEADgtltTITLEgtSample Embedded Style
  Sheetlt/TITLEgt
• ltSTYLEgt
• H1 colorgreen
• .SelCat colorred
• .BlueHead colorblue
• lt/STYLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgtlt/HTMLgt

32
Example

• lth1gtWelcome to Tara Store!lt/h1gt
• lth2 class"BlueHead"gtProduct Listinglt/h2gt
• ltulgt
• ltligtGiftslt/ligt
• ltli class"SelCat"gtJewelrylt/ligt
• ltligtChina Crystallt/ligt
• ltligtBooks, Music, Videoslt/ligt
• lt/ulgt
• lth3 class"BlueHead"gtAbout Tara Storelt/h3gt
• ltulgt
• ltligtWhats Newlt/ligt
• ltligtMembers Onlylt/ligt
• lt/ulgt
• lt/BODYgtlt/HTMLgt

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

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

35
Using the Style Builder and Color Picker
36
Adding a Style Rule
37
Previewing the Web Page in the Browser
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

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