RCH1
2
(Thanks to Microsoft)
COMP3241
Exercise 2:
Creating and Using ASP.NET Master
Pages for controlling “look and feel”
The Different types of pages in a .net framework website
.aspx
pages: HTML and top level .net controls
. These pages
can
also include
programming code, but it is rapidly becoming convention that HTML and
programming code are kept in separate files.
.cs
, .vb
pages: Pages containing code in a programming language (.cs is
C#(sharp) and .
.
vb is VisualBASIC
). Also called “code b
ehind” pages.
.master
pages: HTML & controls code that can be applied to other pages
web.config:
Contains essential information for the .net framework
.inc pages:
contain programming code that can be made available to
other pages
Different pages are distinguished by a different first line (or
@
directive,
because it directs the .net environment to select the right compiler or
interpreter for the code)
.
Ordinary C# .aspx pages have the following use for the @ Page directive:
<%@ Ma
ster Language=
"C#"
%>
What are “Master Pages
”?
ASP.NET files with the extension .master (for example, MySite.master) instead of
.aspx. Their code can be shared with other files to control formatting and other
features across a whole website.
Master files
can be used with CSS files. Like CSS, .net master files provide a
predefined layout that can easily be applied to lots of files. However, .master files
take the concept a stage further by also including static text, HTML elements, and
server controls.
They
allow creation of a page layout for a template page and
separate pages containing content can be merged with the master page at run time.
The master page is identified by a special
@ Master
directive that replaces the
@
Page
directive. This can contain most of the same directives of an
@ Control
directive. For example, the following master
-
page directive includes the name of a
code
-
behind file, and assigns a class name to the master page.
<%@ Master Language=
"C#
"
CodeFile=
"MasterPage.master.cs"
Inherits=
"MasterPage"
%>
RCH1
2
(Thanks to Microsoft)
In addition to the
@
Master
directive, the master page also contains all of the top
-
level HTML elements for a page, such as
html
,
head
, and
form
.e.g a master page
might use an HTML table for the l
ayout, an
img
element for a company logo, static
text (e.g. copyright notice), and server controls to create standard navigation for the
site. HTML and any ASP.NET elements can also be used.
You created a master page last week
–
or rather the Visual Studi
o site creation
wizard set one up for you… This session illustrates how to create master pages and
content pages, and use them together. It includes:
Creating a master page in Microsoft Visual Web Developer.
Creating an ASP.NET page with content that you
want to display in the
master page.
Running master pages to show different content.
Selecting a master page at run time.
Exercise 2(a) Creating a Master Page
First of all, use Visual Studio to generate a master page…
1.
Open the website you created last
week (depending on whether you have the
same computer, you may need to access via “project”).
2.
In Solution Explorer, right
-
click the name of your Web site, and then
click
Add
New Item
.
3.
Under
Visual Studio installed templates
, click
Master Page
.
4.
In the
Name
box, type
master1
.
5.
In the
Language
list, click C# as before, and then click
Add
.
The new master page
master1.master
opens in Source view. Any code
associated with asp.net controls in the master will be added to a
master1.master.cs
file.
Note
that the top o
f the page has that
@ Master
declaration described earlier.
Also, the body of the page contains an
<asp:contentplaceholder>
control,
which is the area of the master page where replaceable content will be
merged from content pages at run time. You will work more with the content
placeholder later.
A page can contain more than one of these.
Laying Out the Master Page
…
You
wil
l now create
a table
and use it
to lay out a menu, a logo, and a footer that will
appear on each page of your site. You will also work with a content placeholder,
which is a region in the master page that can be replaced with information in a
content page.
1.
With the Master1.master file selected in Source view, use the drop
-
down list
on the toolbar set the
target schema for validation
(text window above
source code screen) to Microsoft Internet Explorer 6.0 toolbar
2.
Switch to Design view.
Note that the toolbar contents have changed.
RCH1
2
(Thanks to Microsoft)
3.
Right
-
click and select properties to bring up the
properties window
. From
the drop
-
down list at the top, select
DOCUMENT
, and then set
BgColor
to a
distinctive colour, such as blue.
The colour you select is not
important. Later you will create a second master
page without a colour to contrast with what you have selected here.
4.
Click the location on the page where you want to place the layout table.
(Note: Do not put the layout table inside the
ContentPlaceHolder
control)
5.
On the
Table
menu, click
Insert Table
.
6.
In the
Insert Table
dialog box, choose 3 rows and three columns, and then
click
OK
. You shoul
d have created a 3 x 3 table. Now, change the middle row
so it contains two cells, and not three (merge… then split in two)
7.
In the middle row, click the leftmost column, and then in the Properties
window, set its
Width
to 48
8.
Click the top row, and then se
t its
Height
to 48 in the Properties window
9.
Click the bottom row, and then set its
Height
to 48 in the Properties window.
Note: You can set the width and height by dragging the table cell borders or
by selecting the cell and setting values in the Propertie
s window.
10.
Select all cells in the table and set
BgColor
to a different colour than the
background colour, and set
VAlign
to
top
.
11.
Click on “source” to look at the code generated, and then save.
Exercise 2(b) Adding static content to the master page
You
can now add example content to the master page that will appear on all pages:
1.
Click the bottom left cell, and then type footer text such as
Copyright 2011
Contoso Inc.
2.
In the
Toolbox
, from the
Navigation
control group, drag a
Menu
control into
the top cell.
3.
Set the
Menu
control's
Orientation
prope
rty to
Horizontal
4.
Click the smart tag on the
Menu
control, and click
Edit Menu Items
in the
Menu Tasks
dialog box. You now have a menu…
5.
U
nder
Items
, click the
Add a root
icon twice to add two menu items:
a)
Click the first node, and then set
Text
to
Home
and
NavigateUrl
to
Home.aspx
.
b)
Click the second node, and then set
Text
to
About
and
NavigateUrl
to
About.aspx
.
c)
Click
OK
to close the
Menu
Item Editor
dialog box.
6.
View source again, and save.
7.
Find a graphics to use as a logo, and follow these steps to place it on the
master page:
a)
In Solution Explorer, right
-
click the name of your Web site, and then
click
Add Existing Item
.
b)
Navigate to your g
raphics file, select the graphic file, and then click
Add
.
c)
In the
Toolbox
, from the
Standard
group, drag an
Image
control to
the middle
left column of the
table.
RCH1
2
(Thanks to Microsoft)
d)
Set the
Image
control's
ImageUrl
property to the name of the graphics
file. The image should be displayed. You may wish to resize it…
8.
It
is now OK to specify where the master page can display content at run
time…
Position the content placeholder by dragging the
ContentPlaceHolder
control
into the middle right cell.
The control's
ID
property is
ContentPlaceholder1
. Leave or change the
name, but make a note
-
you will need to know it later.
Now Save the page.
Exercise 2(c) Creating Content for the Master Page
The content page is a specialized form of an ASP.NET page that contains only the
content to be merged with the master page. A content page does not have the usual
elements that make up an ASP.NET page, such as
html
,
body
, or
form
elements.
The intention is
that the content page adds the text and controls that you want to
display within the site template when users request that page.
In this exercise, you will add two pages with content for the previously saved master
page. The first is a home page and the s
econd is an about page:
1.
In Solution Explorer, right
-
click the name of your Web site, and click
Add New
Item
.
2.
Under
Visual Studio installed templates
, click
Web Form using Master
Page
.
3.
In the
Name
box, type
Home
.aspx
4.
Select the
Select master page
check box,
and then click
Add
.
The
Select a Master Page
dialog box appears.
5.
Click
Master1.master
, and then click
OK
.
A new .aspx file should be created. The page contains an
@ Page
direct
ive
that attaches the current page to the selected master page with the
MasterPageFile
attribute, as shown in the following code example:
<%@ Page Language=
"C#"
MasterPageFile=
"~/Master1.master"
... %>
Note that the page also contains an
<asp:Content>
el
ement. You will work
with this in the following exercises to create some “example” content pages
and combine them with the master.
RCH1
2
(Thanks to Microsoft)
Exercise 2(d) Adding content to the Home page
1.
Switch to Design view.
The region you created as a
ContentPlaceHolder
control in the master page
is displayed as a
Content
control in the new content page. The rest of the
master page content is displayed so you can see t
he layout, but it appears
dimmed because you cannot change it while editing a content page.
2.
From the drop
-
down list in the Properties window, click
DOCUMENT
, and
then set
Title
to
Contoso Home Page
.
The title of each content page can be set independently,
so that the correct
title is displayed in the browser when the content is merged with the master
page. The title information is stored in the content page's
@
Page
directive.
3.
In the
Content
control, type
Welcome to the Contoso Web Site
, select the
text, an
d then format the text as a
Heading 1
by selecting the text and
selecting
Heading 1
from the
Block Format
drop
-
down list above the
Toolbox
.
4.
Remove the highlight and press ENTER to create a new blank line in the
Content
control. Now type
Thank you for visit
ing our site.
The text you add here is not important; you can type any text that will help
you recognize this page as the home page.
5.
Save the page.
Exercise 2(e) Creating the “About” page & Testing the System
1.
Use the same steps that you used for the Home
page to add a new content
page named About.aspx.
Be sure to attach the new page to the Master1.master page as you did with
the Home page.
2.
Change the page's title to
Contoso About Page
.
3.
In the content region, type
About Contoso
, and then format the text as
a
Heading 1
as before
4.
Remove the highlight, and press ENTER as before to create a new line. This
time type
Since 1982, Contoso has provided high
-
quality software
services.
5.
Save the page.
6.
Now,
switch to the Home.aspx page
, and then press CTRL+F5…
ASP.NET m
erges the content in the Home.aspx page with the layout in the
Master1.master page into a single page and displays the resulting page in the
browser. Notice that the URL of the page is Home.aspx; there is no reference
in the browser to the master page.
RCH1
2
(Thanks to Microsoft)
7.
Click the
About
link, which should display the merged
about.aspx
page.
Repeat with the home link, to go back to the home page.
Exercise 2(f) Referencing Master Page Members
Code in the content pages can reference members on the master page, including
any public properties or methods and any controls on the master page. In this part of
the walkthrough, you will create a property on the master page, and then use the
value of the property in the content pages. The premise is that the company name for
the
Web site is stored as a property in the master page, and any reference to the
company name in the content pages is based on the master page property. The first
step is to add a property to the master page:
1.
Switch to or open the Master1.master page.
2.
In
Solution Explorer
, right
-
click
Master1.master,
and then click
View Code
to open the code editor.
3.
Inside the class definition, type the following code.
public
String CompanyName
{
get
{
return
(String) ViewState[
"companyName"
]; }
set
{ ViewState[
"
companyName"
] = value; }
}
The code creates a property named
CompanyName
for the master page. The
value is stored in view state so that it is persisted between postbacks.
4.
Inside the class definition (but not inside the property code), add the following
cod
e.
void
Page_Init(Object sender, EventArgs e)
{
this
.CompanyName =
"Contoso"
;
}
For this example, you will hard
-
code the value of the
CompanyName
property
into the page.
You can now modify the content page to use the master page's
CompanyName
property.
Exercise 2(g): referencing the CompanyName property in the content
page
1.
Switch to or open the Home.aspx page.
2.
Switch to Source view.
3.
At the top of the page, underneath the
@ P
age
directive, add the following
@
MasterType
directive:
RCH1
2
(Thanks to Microsoft)
<%@
MasterType
virtualpath="~/Master1.master"
%>
The directive binds the content page's
Master
property, which you will use
shortly, to the Master1.master page.
4.
Switch to Design view.
5.
In the
Content
control, change the text to
Welcome to the Web site of
.
6.
In the
Toolbox
, from the
Standard
group, drag a
Label
control onto the
Content
control, and place it after the static text so that the text reads:
Welcome to the Web site of [Label]
7.
Set the
Label
control'
s
ID
property to
CompanyName
.
8.
In Solution Explorer, right
-
click
Home.aspx
, and then click
View Code
to
open the code editor.
9.
Inside the class definition, add the
following code.
void
Page_Load(Object sender, EventArgs e)
{
CompanyName.Text = Master.CompanyName;
}
The content page's
Master
property returns a reference
to the master page as
defined in the
@ MasterType
directive you added in step 3.
You can now test
the content page to be sure it is referencing the master page's
CompanyName
property correctly…
10.
Switch to or open the Home.aspx page, and then press CTRL+F5 to run the
page. The page is displayed in the browser, with the text
Welcome to the
Web site of Contoso
11.
Close the browser. Switch to or open the Master1.master code
-
b
ehind page.
12.
Change the
Page_Init
handler to assign a different company name to the
property, as in the following code example.
void
Page_Init(Object sender, EventArgs e)
{
this
.CompanyName =
"New Company Name"
;
}
13.
Switch to the Home.aspx page,
and then press CTRL+F5 to run it again. This
time, the updated company name appears in the page.
Notes
Several other issues you should be aware of when working with a master page…
In a real
-
world application, you would probably store information such as th
e
company name in the configuration file and read it directly in the content
pages. However, the scenario outlined here provides a simple illustration of
how to reference master page members in content pages.
RCH1
2
(Thanks to Microsoft)
You can access members on the master page even
without including an
@
MasterType
directive. However, to do so, you must cast the
System.Web.UI.Page.Master
property to the appropriate master page type
(the
Master
property is
null
if a page has no master page). For more
information, see
Working with ASP.NET Master Pages Programmatically
.
You can reference controls on the master page by using the
Master.FindControls
method. For more information, see
Working with
ASP.NET Master Pages Programmatically
.
Exercise 2
(h) Changing Master Pages Dynamically
Under some circumsta
nces, it might be useful to change master pages dynamically;
that is, to use code to set the master page for a content page. For example, you
might want to let users select from several layouts and set the master page
according to their preferences.
You wi
ll now add a second master page to the Web site, and then create buttons that
allow the user to switch between one master page and another. Because the two
master pages will be very similar, you will make a copy of the first master page and
modify it to ac
t as the second master page.
1.
In Solution Explorer, right
-
click Master1.master, and then click
Copy
.
2.
Right
-
click the name of the Web site, and then click
Paste
.
A master page is added to the Web site with the name
Copy of
master1.master
.
3.
Right
-
click
Copy of
master1.master
, click
Rename
, and then name the new
master page
Master2.master
.
4.
Open Master2.master and, in the
@ Master
directive, change
Master1
to
Master2
.
The completed p
age directive will look like the following code example.
<%@ Master Language=
"C#"
CodeFile=
"Master2.master.cs"
Inherits=
"Master2"
%>
5.
Switch to Design view.
6.
In the Properties window, in the drop
-
down list at the top, click
DOCUMENT
.
7.
Clear the
BgColor
property.
The new master page will look and function like Master1.master, but will have
no background colour.
8.
Open the code file for Master2.master and change the class name in the
master page's code
-
behind file from
Master1
to
Master2
to match the value of
the
Inherits
attribute in the page's
<%@ Master %>
directive.
public
partial
class
Master2 : System.Web.UI.MasterPage
RCH1
2
(Thanks to Microsoft)
Exercise 2(i) Adding buttons to select an alternate master
page
You now need to add a button to each master page
that allows the user to select the
alternate master page.
1.
Switch to or open the Master2.master page.
2.
In the
Toolbox
, from the
Standard
node, drag a
LinkButton
control onto the
page and place it below the menu in the top table cell.
3.
Set the button's
Text
property to
Colorful
.
4.
Double
-
click th
e button to create a handler for its
Click
event, and then add
the following highlighted code.
void
LinkButton1_Click(Object sender, EventArgs
e)
{
Session[
"masterpage"
] =
"Master1.master"
;
Response.Redirect(Request.Url.ToString());
}
The code loads the file name of the alternate master page into a persistent
session variable, and then reloads the current page. (The
Url
property returns
a
Uri
object that references the current page.) Shortly, you will create code in
the content page that will use the name of the master page.
5.
Switch to or open the Master1.master page in Design view.
6.
Add a
LinkButton
control as you did in steps 1 and 2, and set its
Text
property to
Plain
.
7.
Double
-
click the
Plain
button to create a handler for its
Click
event, and then
add the following highlighted code.
void
LinkButton1_Click(Object sender, EventArgs e)
{
Session[
"masterpage"
] =
"Master2.master"
;
Response.Redirect(Request.Url.ToString());
}
This code is the
same as that for the button in the Master2.master page,
except that it loads an alternate master page.
RCH1
2
(Thanks to Microsoft)
Exercise 2(j) Writing code to dynamically select the master
page
Note that t
he
home.aspx
you have
previously
created contains an
@ MasterType
directive that effectively binds it to a single master page (Master1.master). Therefore,
you will not be able to assign
master pages dynamically to
this page. How
ever
, the
master switching
will work with about.aspx and
other pages you
may wish to create
.
1.
Switch to or open the About.aspx page.
2.
In Solution Explorer, right
-
click
About.aspx
, and then click
View Code
to
open the code editor.
3.
Inside the class definition, add
the following code.
void
Page_PreInit(Object sender, EventArgs e)
{
if
(Session[
"masterpage"
] !=
null
)
{
this
.MasterPageFile = (String) Session[
"masterpage"
];
}
}
4.
Now go to home.aspx, type CTRL
-
f5 and test it all out.
That’s quite enough
for this week!
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment