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

Chapter 2 5 Visual Studio.NET User Interface

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 the HTML editor writes 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,, or 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 January February March April May June July August September October November December

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 directive The TagPrefix property is used to identify the User Control’s namespace, like the ASP prefix with ASP controls

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

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 ( 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 Content goes here Example Welcome to Tara Store!

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 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; }

Chapter 2 24 Sample Embedded Style Rules Sample Embedded Style Sheet H1{ color=green; size=12" } Welcome to Tara Store!

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 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 Style Sheet 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 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 Sample Embedded Style Sheet Welcome to Tara Store!

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 Sample Embedded Style Sheet H1 {color:green}.SelCat {color:red}.BlueHead {color:blue} …

Chapter 2 32 Example Welcome to Tara Store! Product Listing: Gifts Jewelry China & Crystal … Books, Music, & Videos About Tara Store What’s New … Members Only

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