Scribd
Upload
9 views

masterpage chapter asp.net

The document explains the concept of master pages in ASP.NET, which allow for a consistent layout and behavior across web application pages by merging common elements with specific content. It also covers themes, which define the look and feel of a website through CSS and skin files, and caching, which enhances performance by storing output and data in memory. Additionally, it details the steps to create master pages, apply themes, and implement various caching strategies.

Uploaded by

ritenpanchasara
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

masterpage chapter asp.net

The document explains the concept of master pages in ASP.NET, which allow for a consistent layout and behavior across web application pages by merging common elements with specific content. It also covers themes, which define the look and feel of a website through CSS and skin files, and caching, which enhances performance by storing output and data in memory. Additionally, it details the steps to create master pages, apply themes, and implement various caching strategies.

Uploaded by

ritenpanchasara
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

 What is master page?

 Master page allows you to create a consistent look and behavior


across all pages in a web application.
 A master page contains common elements and controls, along
with content placeholders where individual pages can add
specific content. When a content page uses a master page, the
two are merged to produce the final output, combining the
master page layout with the specific content.
 Master pages help create a uniform user experience and make it
easier to update common elements sitewide.
 A master page is an ASP.NET file with the extension . master.
 Contentplaceholder control,which defines a region on the master
page,is where the content pages can plug in page specific
content.
 A master page enables user to share the same content aamong
multiple content pages in a website.
 ASP.NET master pages allow user to create a consistent layout for
the pages in a application.
 When users request the content pages,they merge with the
master page to produce output thet combines the layout of the
master page with the content from the content page.
 Master pages in ASP.NET web forms start with the
@Masterdirective.
 The directive looks like the following.
 %@MasterLanguage=”C#” CodeFile=”MasterPage.master.cs”
Inherits=”MasterPage”%
 @page directive that is used for ordinary .aspx pages.
 The directive looks like the following.
<%@PageLanguage=”C#”
MasterPageFile=”~/MasterPages/Master1.master “
Title=”Contentpage”%>
 To enable pages to insert content, the master page contains a
placeholder tag<asp:contentPlaceHolder> for individual content.
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Run
at="Server" >
Footer content.
</asp:content>

Content Pages

You define the content for the master page's placeholder controls
by creating individual content pages, which are ASP.NET pages
(.aspx files and, optionally, code-behind files) that are bound to a
specific master page. You can bind MasterPage to a content page
by adding MaserPageFile attribute in @ Page directive.This
attribute specifies a master page to be used. For example, a
content page might have the following @ Page directive, which
binds it to the Master1.master page.

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Mas


ter1.master" Title="Content Page"%>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat
="Server">
Main content.
</asp:Content>

 Steps to create master page in asp.net


Step 1 :- Create new project in Visual Studio 2015.Go to File->
New-> Web Site-> Visual C#->ASP.NET Empty Website-> Entry
Applica on Name-> OK.
Step 2: - Create Master Page Project name-> Add-> Add New Item-
>Visual C#-> Master Page->Write Master Page Name-> Add
HomePage.master master page is created.

Add HTML code in Homepage.master page, as shown below.


Here, we used contentplaceholder control.
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="HomePage.master.cs" Inherits="HomePage" %>
<!DOCTYPE html>
<html xmlns="h p://www.w3.org/1999/xhtml"> head
runat="server">
< tle></ tle>
</head>

<body>
<form id="form1" runat="server">
<div>
<table border="1">
<tr>
<td colspan="2" style="text-align: center">
<h1>Header</h1>
</td>
</tr>
<tr>
<td style="text-align: center; height: 480px; width:
250px">
<h1>Menu</h1>
</td>
<td style="text-align: center; height: 480px; width:
700px">
<asp:ContentPlaceHolder
ID="MainContentPlaceHolder1" runat="server">
<h1>you can change Content here</h1>
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<h1>Footer</h1>
</td>
</tr>
</table>
</div>
</form>
</body>

</html>

Go to the design mode and you will see the image, as shown below.
Step 3:-Adding the Content Pages to Master Page

Master Page -> Add Content Page.


write your code inside Content Placeholder.See the below code.
<%@ Page Title="" Language="C#"
MasterPageFile="~/HomePage.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %> < asp: Content ID
= "Content1"
ContentPlaceHolderID = "MainContentPlaceHolder1"
runat = "Server" > < table > < tr > < th > < h1 > Student Informa on <
/h1> < /th> < /tr> < tr > < td > < b > Name: Chetan Nargund < /b>
</td > < /tr> < tr > < td > < b > College: AIT < /b> </td > < /tr> < tr > <
td > < b > City: Bangalore < /b></td > < /tr> < /table> < /asp:Content>
 What is Theme?
A theme decides the look and feel of the website. It is a
collec on of files that define the looks of a page. It can include
skin files, CSS files & images.
We define themes in a special App_Themes folder. Inside this
folder is one or more subfolders named Theme1, Theme2 etc.
that define the actual themes. The theme property is applied
late in the page's life cycle, effec vely overriding any
customiza on you may have for individual controls on your
page.
A theme is a collec on of CSS property se ngs that allow you
to define the look of the pages and controls, and apply the
same look across pages in a web applica on or across all web
applica ons on a server.
Themes are the way to define the forma ng for various
controls and can be reused in mul ple pages. Later, by applying
minor changes on the themes, the complete appearance of
website can be changed.
Skin files in Themes
Skin files are those files in which we define the common
property se ng for asp.net controls like bu on, texbox, label
etc. The extension of skin files is .skin. It comes under the
themes.
Type of Skin
There are two type
of skin in asp.net and these are as follows:-
Default Skin
When we want to apply same property for all controls in the
page then we use default skin. This skin automa cally applies
to the control which defined in the skin. This type of skin does
not contain the SkinId property.
Named skin
A named skin is applied to those controls in which we pass skin
id. A named skin contains the SkinId.
How to apply themes

There are 3 different op ons to apply themes to our website:

Se ng the theme at the page level: the Theme a ribute is


added to the page direc ve of the page.
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="Default"
Theme="Theme1"%>
Se ng the theme at the site level: to set the theme for the
en re website you can set the theme in the web.config of the
website. Open the web.config file and locate the <pages>
element and add the theme a ribute to it:
<pages theme="Theme1">
....
....
</pages>
Se ng the theme programma cally at run me: here the
theme is set at run me through coding. It should be applied
earlier in the page's life cycle ie. Page_PreInit event should be
handled for se ng the theme. The be er op on is to apply
this to the Base page class of the site as every page in the site
inherits from this class.

Page.Theme = Theme1;

Uses of Themes :-

Since themes can contain CSS files, images and skins, you can
change colors, fonts, posi oning and images simply by applying
the desired themes.

You can have as many themes as you want and you can switch
between them by se ng a single a ribute in the web.config
file or an individual aspx page. Also you can switch between
themes programma cally.

Se ng the themes programma cally, you are offering your


users a quick and easy way to change the page to their likings.

Themes allow you to improve the usability of your site by


giving users with vision problems the op on to select a high
contrast theme with a large font size.
Example :-

Create 2 themes for the page – one with red background


(Theme1) and another with an image as a background
(Theme2). When the user selects a par cular theme from the
ListBox then that theme should be applied dynamically for the
page.

Answer

1. Solu on Explorer -> Right click -> Add ASP.NET folder ->
Themes.

2. A new folder App_Themes is added to the Solu on Explorer


and a new folder Theme1 is added inside it.

3. Theme1 -> Right click -> Add new item -> Stylesheet -> name
it as Theme1.css
Inside Theme1.css
body
{
background-color:Red;
}

4. Again add a new file.

App_Themes -> Right click -> Add ASP.NET folder -> Themes

A new folder Themes2 is created.

5. Themes2 -> Right click -> Add new item -> Stylesheet ->
name it as Theme2.css

6. Create an Images folder inside Theme2 and add a picture file


pic1.jpg inside this. File Theme2.css contains –
body
{
background-image:url(Images/pic1.jpg);
}

7. Now create a default.aspx as follows. Add a heading and a


list box having AutoPostBack to True.
<body>
<form id="form1" runat="server">
<div>
<h3>Select your page Theme : </h3>
<asp:ListBox ID="ListBox1" runat="server"
AutoPostBack="True" Height="41px" onselectedindexchanged=
"ListBox1_SelectedIndexChanged" Width="175px">
<asp:ListItem>Theme1</asp:ListItem>
<asp:ListItem>Theme2</asp:ListItem>
</asp:ListBox>
<br />
</div>
</form>
</body>
8. Inside the default.aspx.cs file a sta c variable themeValue is
defined which saves the value of current theme. In the
Page_PreInit event of the page, selected theme from the
ListBox is applied to the page and inside the constrctor of
the page this PreInit event is provided a EventHandler.
public par al class default : System.Web.UI.Page
{
sta c string themeValue;

public ThemeTest()
{
this.PreInit+=new EventHandler(Page_PreInit);
}

private void Page_PreInit(object sender, EventArgs e)


{
Page.Theme = themeValue;
}

protected void ListBox1_SelectedIndexChanged(object sender,


EventArgs e)
{
themeValue = ListBox1.SelectedItem.Value;
Response.Redirect(Request.Url.ToString());
}
}
9. Now run the page. When we select the Theme from the
ListBox, immediately the page is automa cally applied with
the theme.

 What is caching?
Caching is one of the most interes ng concepts and
opera ons in ASP.NET. If you can handle it, you can run any web
applica on by applying the caching concept depending on the
requirements. Currently, a majority of websites/portals (or I can say
simply web pages) are dynamic (if I do talk about a dynamic website,
then it doesn't mean all the pages of that website are dynamic or will
be. The probability of happening this is dependent on the user's
perspec ve and the requirements). In very common words I can define
dynamic pages as including the following:

Pages that directly interact with people


Any media content
Any type of graphic interac on
Why Caching
Caching is for providing solu ons or the results to the users depending
on their requested request, admin needs to recreate the pages o en
depending on user requests…STOP!!! The process The process is quite
bulky and me-consuming. So to overcome that problem some websites
have a page crea on engine that automa cally creates all the pages in
one ac on and directly saves those pages as a HTML structured page.
These HTML pages serve the user depending on their requirements.
What is a Cache?
What a cache does, in the most simple words I can say is: "A cache
simply stores the output generated by a page in the memory and this
saved output (cache) will serve us (users) in the future." That's it.

 Types of caching
Page Caching Let's explore the caching of an entire page, first.
To cache an entire page's output we need to specify a directive
at the top of our page, this directive is the @ OutputCache.
Let's figure out a simple demo of it.
<%@ OutputCache Duration = 5 VaryByParam = "ID" %>
Here, in that statement Duration and VarByParam are the two
attributes of the OutputCache directive. Now let's explore how
they work.
 Duration Attribute: This attribute represents the time in
seconds of how long the output cache should be stored in
memory. After the defined duration the content stored in
the memory will be cleared automatically.
 VarByParam Attribute: This is the most important
attribute; you can't afford to miss that in the
OutputCache directory statement. It generally defines the
query string parameters to vary the cache (in memory).

You can also multiple parameter names, but for that, you need
to separate them using a semicolon (;). You can also specify it
as "*". In this case, the cached content is varied for all the
parameters ed using the query string. For example.
<%@ OutputCache Duration = 5 VaryByParam = "*" %>
In the case of caching a page, some pages can generate
different content for different browsers. In that scenario, we
need to add an attribute to our statement to overcome the
preceding problem. For example.
<%@ OutputCache Duration = 5 VaryByParam = "ID"
VaryByCustom = "Browser" %>
Or
<%@ OutputCache Duration = 5 VaryByParam = "*"
VaryByCustom = "Browser" %>
Fragment caching
In some scenarios, we only need to cache only a segment of a
page. For example, a Contact Us page on the main page will
be the same for all the users and for that, there is no need to
cache the entire page.
So for that, we prefer to use the fragment caching option. For
example.
<%@ OutputCache Duration = 10 VaryByParam = "None" %>
Or
<%@ OutputCache Duration = 5 VaryByParam = "None"
VaryByCustom = "Browser" %>

Data Caching
Data caching is slightly different from the 2 other caching types.
It's much more interesting to see how data caching works. As we
know in C# everything is about classes and objects. So
ASP.NET supports data caching by treating them as small sets
of objects. We can store objects in memory very easily and use
them depending on our functionality and needs, anywhere
across the page. Now you must be thinking where is the class in
that entire scenario? This feature is implemented using the
Cache class and data is treated as its object. Let's see how it
works using a demo. I am inserting a string value in the cache
as.
Cache["Website"] = "CSharpCorner";
Now, for inserting the cache into the objects, the insert method
of the Cache class can be used. This insert method is used as
follows.
Cache.Insert("Website", strName,
new CacheDependency(Sever.MapPath("Website.txt"));
What we are missing is something We missed the Time for the
cache (don't forget to use it), let's provide it.
Cache.Insert("Website", strName,
new CacheDependency(Sever.MapPath("Website.txt")
DateTime.Now.Addminutes(5), TimeSpan.Zero);

You might also like