390 likes | 664 Views
Introduction to Visual Studio .NET. Introduction to ASP.NET By Kathleen Kalata. 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
E N D
Introduction to Visual Studio .NET Introduction to ASP.NET By Kathleen Kalata Chapter 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
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
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
Visual Studio .NET User Interface Chapter 2
The Solution Explorer Window Chapter 2
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
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
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
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
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
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
Using a Dialogue Box to Change the Properties of an HTML Control Chapter 2
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Sample Web Page <HTML><HEAD><TITLE>Sample Embedded Style Sheet</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="MyStyle.css"> </HEAD> <BODY> <H1>Welcome to Tara Store!</H1> </BODY></HTML> Chapter 2
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
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
Example <HTML><HEAD><TITLE>Sample Embedded Style Sheet</TITLE> <STYLE> H1 {color:green} .SelCat {color:red} .BlueHead {color:blue} </STYLE> </HEAD> <BODY> … </BODY></HTML> Chapter 2
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
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
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
Using the Style Builder and Color Picker Chapter 2
Adding a Style Rule Chapter 2
Previewing the Web Page in the Browser Chapter 2
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
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