Unit – IV
Master Pages and Themes
Master Page –
Most web sites today have common elements used throughout the entire
application or the majority of the pages within the application.
[Link] Master pages allow you to create a consistent layout for the pages in
your application. A single master page defines the look and feel and standard behavior that
you want for all of the pages in your application.
In web site development with [Link], the master page is a feature that enables
you to define common structure and interface markup elements for your website including
header, footer, style definitions and navigation bars. The master page can be shared by any of
the pages in your web site called content pages. The content page that contains all the page
content except for the master pages elements. At runtime, the [Link] engine combines these
elements into a single page for the end user.
Master pages use a .master file extension whereas content page uses a .aspx file
extension. The following figure shows, how this process work and how to use master page and
content page.
Master Page Content Page
[Link] [Link]
Header
Menu
Content
Header
Menu
Content
Prof. Honrao Bhagyashri Prakash [ 1 ]
One of the nice thing about working with master page is that you can see
the template in the IDE when you are creating the content pages. Because you see the entire
page while you are working on it, developing content pages that use a template is much easier.
While you are working on the content page, all the template items are shaded gray and are not
editable. The only items that are alterable are clearly shown in the above template. These
workable areas called content areas, originally are defined in the master page itself. Within the
master page you specify the areas of the page that the content pages can use. You can have
more than one content area in your master page if you want.
Use of Master Page –
The master pages can be used to accomplish the following –
1) Creating a set of controls that are common across all the web pages and attaching them
to all the web pages.
2) A centralized way to change the above created set of controls which will effectively
change all the web pages.
3) Dynamically changing the common UI elements on master page from content pages
based on user preference.
Coding a Master Page –
Add master pages to your projects using following methods -
1) Right click on Web application.
2) Select Add New Item.
3) Choose Master Page from appear window and then click Add button.
Add New Item dialog enables you to choose from a master page using the
Inline coding model or master page that places its code in a separate file. Not placing your
server code in a separate file means that you use the inline coding model for the page you are
creating. This option creates a single .master page. Choosing the option to place your code in a
separate file that means you use the new code-behind model with the page you are creating,
Prof. Honrao Bhagyashri Prakash [ 2 ]
Select the “Place code in a separate file” check box creates a single .master page, along with an
associated .[Link] or .[Link] file.
A sample master page that uses the inline-coding model is as follows: -
[Link]
<%@ Master Language="C#" %>
<script runat="server">
</script>
<html>
<head runat="server">
<title>Master Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
This is simple master page. The great thing about creating master pages in
Visual Studio is that you can work with master page in code view, but you can also switch
over to Design View to create your master pages.
The start by reviewing the code for master page. The first line is the
directive.
<%@ Master Language="C#" %>
Instead of using the Page directive, as you would with typical .aspx page,
you can use Master directive for master page.
You can use server controls, raw HTML and text, images events, or
anything else on the master page. This means that your master page can have a Page_Load
event as well or other event.
Prof. Honrao Bhagyashri Prakash [ 3 ]
In master page use <asp:ContentPlaceHolder> to define the area of the
template where the content page can place its content.
Coding a Content Page –
Now you have a master page in your application you can use this new
template for any content pages in your application. Right-click the application in the Solution
Explorer and choose Add New Item to create a new content page within your application.
To create a content page or a page that uses this master page as its
template, you select a typical web form from the list of option in the Add New Item dialog .
Instead of creating a typical web form, however you select the Select
Master Page check box. This give you option of associated this web form later to some master
page.
Prof. Honrao Bhagyashri Prakash [ 4 ]
After you name your content page and click the Add button in Add New
Item dialog, the select a Master Page dialog appears
This dialog enables you to choose the master page from which you
want to build your content page. You choose from the available master pages that are
contained within your application.
The created page is a [Link] page with only a couple of lines
of code contained in the file as shown below,
[Link]
<%@ Page Language="C#" MasterPageFile="~/[Link]" AutoEventWireup="true"
CodeFile="[Link]" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
Prof. Honrao Bhagyashri Prakash [ 5 ]
This content page is not much different from the .aspx page. The big
difference is the Content page inclusion of MasterPageFile attribute within the page directive.
The use of this attribute indicates that this particular .aspx page constructs its controls based
on another page.
In content page not include <form> tag or any opening or closing HTML
tags. You can just use the MasterPageFile attribute in the Page directive, you are able to inherit
with .master file.
All the common areas defined in the Masterpage, whereas the content
areas that you specified in the master page using <asp:ContentPlaceHolder> server control.
You can add any content to these defined content areas as if you working with .aspx page.
[Link]
<%@ Page Language="C#" MasterPageFile="~/[Link]" AutoEventWireup="true"
CodeFile="[Link]" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Enter Your Name <asp:TextBox ID="txtname" runat="server"></asp:TextBox><br /><br />
<asp:Button ID="button1" runat="server" Text="Submit" OnClick="click"/><br /><br />
<asp:Label ID="l1" runat="server"></asp:Label>
</asp:Content>
[Link]
Using System;
protected void click(object sender, EventArgs e)
{
[Link] = "Your Name :" + [Link];
}
The <asp: Content> server control is defined content area that map to
specific <asp: ContentPlaceHolder> server control on the master page. In above example shows
that the <asp: Content> server control maps itself to the <asp: ContentPlaceHolder> server
control in the master page that has the ID of ContentPlaceHolder1. Within the content page,
Prof. Honrao Bhagyashri Prakash [ 6 ]
you don’t have to worry about location of content because it is already defined within the
master page.
Programmatically Assigning the Master Page –
In content page, you can easily assign the master page with the help of
@Page directive using MasterPageFile property but you can also easily assign Master page to
content page programmatically.
You can assign the master page to content page using the
[Link] property. You can use this property regardless of whether another
master page is already assigned in the @Page directive.
To assign a master page with [Link] property you can use
PreInit event. The PreInit event is the earliest point in which you can access the page life cycle.
For this reason, this event is where you need to assign any master page that is used by any
content pages.
On [Link]
<%@ Page Language="C#" MasterPageFile="~/[Link]" AutoEventWireup="true"
CodeFile="[Link]" Inherits="Default2" Title="Untitled Page" %>
Protected void Pre_Init(object sender, EventArgs e)
[Link]=”~/[Link]”;
In this case, when the page is dynamically being generated, the master
page is assigned to the content page in the beginning of the page construction process. Note
that the content page must have the expected content controls, otherwise an error is thrown.
Prof. Honrao Bhagyashri Prakash [ 7 ]
Nested Master Page –
Master pages are used to give a same look to overall web site. In [Link]
Provide nesting master pages. When one master page references with another master page,
then it is said to be nested master page. A number of nested masters can be componentized
into single master page. There is no architectural limitation to the number of child master that
can be created.
The advantage of the nested structure is that a number of child masters
can be created to be subordinated to the overall look and feel of the site defined by parent
master, while child master give the child pages some uniqueness.
Example: -
The Reuters is creating a master page to be used throughout the entire company internet such
as Reuters Europe and Ruters America each want their own unique master page –
Prof. Honrao Bhagyashri Prakash [ 8 ]
When you create nested master pages that time firstly you create a
Masterpage and this main master page is the globally used in all web pages.
You create a nested master page in the same manner as you would when
building any other master page. From Add New Item dialog select the Master Page option
and make sure you have the select Master page option selected and again select a Master Page
dialog appears in which you make a master page selection.
Example: -
Create Nested Master Page we need
1) 2 Master pages, mainmaster and submasterpage.
2) Add default pages and these are inherited from submasterpage.
[Link]
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="[Link]"
Inherits="Mainmaster" %>
<html>
<head runat="server">
<title>Main master page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1px" style="background-color:Teal;height:550px; width:100%">
<tr>
<td>
<h2 style="color:Black">Welcome to the Nested Master Page</h2>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Prof. Honrao Bhagyashri Prakash [ 9 ]
[Link]
<%@ Master Language="C#" MasterPageFile="~/[Link]" AutoEventWireup="false"
CodeFile="[Link]" Inherits="Secondmaster" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h3 style="color:White">Welcome to the Secondary Master Page.....</h3>
<table cellpadding="3" border="1px">
<tr>
<td>
<asp:ContentPlaceHolder ID="sub1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</asp:Content>
[Link]
<%@ Page Language="C#" MasterPageFile="~/[Link]" AutoEventWireup="true"
CodeFile="[Link]" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="sub1" Runat="Server">
<h4 style="color:Maroon">
Welcome in Content Page....</h4>
</asp:Content>
Prof. Honrao Bhagyashri Prakash [ 10 ]
Event ordering of master pages –
Master pages and content pages both are use the same event such as Load
Event. You are bringing two classes together to create a single page class & a specific order is
required. When an end user request a content page in browser, the event order is as follows –
1) Master page child controls initialization – All server controls contained within the
master page are first initialize (init event).
2) Content page child controls initialization – All server controls contained in the content
page are initialized.
3) Master page initialized – The master page itself is initialized-
4) Content page initialization – The content page is initialized.
5) Content page Load – The content page is loaded (Page_Load) event.
6) Master Page Load – The master page is loaded using Page_Load event.
7) Master Page child controls load – The server controls on the master page are loaded
onto the page.
8) Content page child controls load – The server controls on the content page are loaded
onto the page.
Basics of Themes and skins -
Themes are a way of providing a common look and feel to your site across
every page. You implement a theme by using a .skin file, css files and images used by the
server controls of your sites.
You can apply these common styles individually to each and every server
control or object on each page. Themes are the text-based style definitions in [Link].
Themes are similar to CSS in that they enable you to define visual styles
for your web pages. You can apply theme at the application, pages, or server control level.
Prof. Honrao Bhagyashri Prakash [ 11 ]
Creating a Themes : -
If you want to give your websites a consistent look, then you need to design themes for your
application. The App_Themes folder contains all such themes. An App_Themes folder can
contain two types of subfolders –
a) For a css files
b) For skin files
In css file we can define style sheet as well as design layout of the website. The css file
extension is .css In skin file contains property setting for individual control such as label,
textbox, button etc. control skin setting are like the control markup itself but contain only the
properties that you want to set as part of theme. A skin file extension is .skin
Note – Use Theme property in a @Page directive as a name of your theme folder. To add
theme folder use following steps –
Right click on website in solution explorer
Select Add [Link] folder
Click on App_Themes / Themes folder
When you add App_Themes folder a subfolder with name Theme1 automatically
crated. We can change the name of the theme folder as per user requirement.
After that right click on Theme1 folder and add css. Images, skin as needed.
1) css file: - css stands for Cascading Style Sheet. You can create css file in your
App_Theme folder by right click on that folder, then select Add New Item and choose .css file.
Example: -
body
background-color:Maroon;
color:White;
Prof. Honrao Bhagyashri Prakash [ 12 ]
2) skin file: - The skin file is used to apply style for web server control. To create a theme
to use in your [Link] application, you use just a single skin file in the theme folder. It has
.skin extension.
To add skin file, just right click on Theme folder and select Add New Item
and choose .skin file.
Example: -
<asp:Label runat=”server” ForeColor=”Black” Font-Size=”x-large” SkinID=”lal”/>
Images: - Many controls use images to create a better visual appearance. So you can add
images on App_Theme folder. To add folder right click on App_Theme folder and Add New
Item and give name Images, now add images to that folder, by right clicking on Images folder
and select add Existing Item and Images.
Example: -
In css file: -
body
background-image:url(Images/[Link]);
color:yellow;
Using a Themes: -
There are two ways to use theme within your application: -
1) Applying a Theme to a single [Link] page.
2) Applying a Theme to an entire application
1) Applying a Theme to a single [Link] page: -
The @Page directive, can used for applying theme to a single page. You
Prof. Honrao Bhagyashri Prakash [ 13 ]
simply apply [Link] theme that you have either built or downloaded from the Internet. In
@Page directive adding Theme attribute with theme name to change the appearance of
everything on the page that define in an theme file.
Example: -
<% @Page Language=”c#” Theme=”mytheme” %>
2) Applying a Theme to an entire application: -
In web. config file, to define theme them these theme are apply to all web
pages that include in your application. If you define theme in the web. config file, then you do
not need to define theme in Page directive.
Example: -
<configuration>
<[Link]>
<pages theme=”Mytheme”/>
</[Link]>
</configuration>
If you wanted to apply the theme to only a specific part of the application, then
you can write above code in same way, but use <location/> element to specify the areas of the
appliactions for which the theme should be applied.
Programmatically working with Themes: -
In addition to specifying theme and in page declarations and configuration files,
you can apply themes programmatically. You can set page themes programmatically;
however, the procedure for applying theme is as shown below: -.
Prof. Honrao Bhagyashri Prakash [ 14 ]
[Link]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="[Link]" Inherits="_Default"
%>
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="la" runat="server" Text="Welcome" ></asp:Label>
<br />
<br />
</div>
</form>
</body>
</html>
[Link]
body
{
background-color:Maroon;
color:White;
}
[Link]
using System;
protected void Page_PreInit(object sender, EventArgs e)
{
[Link] = "MyTheme";
Prof. Honrao Bhagyashri Prakash [ 15 ]
Defining multiple skins: -
[Link]
<%@ Page Language="C#" Theme="MyTheme" AutoEventWireup="true"
CodeFile="[Link]" Inherits="_Default" %>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Textbox ID="TextBox1" Runat="server"></asp:Textbox>
<br /><br />
<asp:Textbox ID="TextBox2" Runat="server"
SkinId="TextboxDotted">Textbox2</asp:Textbox>
<br /><br />
<asp:Textbox ID="TextBox3" Runat="server"
SkinId="TextboxDashed">Textbox3</asp:Textbox>
</div>
</form>
</body>
</html>
[Link]
<asp:Textbox Runat="server" ForeColor="#000000" Font-Names="Verdana"
Font-Size="X-Small" BorderStyle="Dotted" BorderWidth="5px"
BorderColor="#000000" Font-Bold="False" SkinID="TextboxDotted" />
<asp:Textbox Runat="server" ForeColor="#000000" Font-Names="Arial"
Font-Size="X-Large" BorderStyle="Dashed" BorderWidth="3px"
BorderColor="#000000" Font-Bold="False" SkinID="TextboxDashed" />
Prof. Honrao Bhagyashri Prakash [ 16 ]