user control - People at Creighton University
Download
Report
Transcript user control - People at Creighton University
Introduction to Visual Studio .NET
Introduction to ASP.NET
By Kathleen Kalata
Chapter 2
1
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
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
3
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
4
Visual Studio .NET
User Interface
Chapter 2
5
The Solution Explorer Window
Chapter 2
6
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
7
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
8
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
9
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
10
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
11
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
12
Using a Dialogue Box to Change
the Properties of an HTML Control
Chapter 2
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
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
22
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
23
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
24
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
25
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
26
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
27
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
28
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}
H3 {color:blue}
// Red is the color of the heading
// Blue is the color of the menu
Chapter 2
29
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
30
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
31
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
32
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
33
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
34
Using the Style Builder
and Color Picker
Chapter 2
35
Adding a Style Rule
Chapter 2
36
Previewing the Web Page
in the Browser
Chapter 2
37
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
38
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
39