The Different types of pages in a .net framework website

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!