Page 1 of 1

Introduction To Master Pages in ASP.Net What are they? How are they used?

#1 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1632
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Post icon  Posted 14 September 2007 - 08:46 PM

Welcome to this tutorial on Introduction To Master Pages in ASP.Net 2.0. In this tutorial I will give an overview of
what Master Pages are, how they work, and how to use one in your web application. First, what is a Master Page, a Master Page is an ASP.NET file with the extension .master (for example, YourMaster.master) which holds the layout and standard behavior for your entire web application. A Master Page can contain static text, HTML elements and ASP: server controls.

Using a Master Page in your ASP.Net 2.0 web application allows you to create a consistant look and feel, and layout for your web application, all in a single page. When you create your Master Page create it as if you would a template for your site, like when you first start your site you work with a single "template" file until you get the layout, look and feel you want. Except with a Master Page, instead of adding all the content to a single page, you add a ContentPlaceHolder that will hold the content for that specified region in your application.

Lets say with your application you want a header across the top, then a nagvigation column, with the rest being the main content of your pages. Without Master Pages, you create the initial template for your site, then copy and paste that template for each and every page you want, changing the content in the main section, and possible the navigation.

With a Master Page, you define that same layout, except for the main content area you add a ContentPlaceHolder for that section, then when you add a new page and link it to your Master Page, all the layout is there, with the main content area empty for adding the content for that page.

When not using Master Pages, you create the layout you want, then copy that layout to each and every page, theres always going to be at least one page where something is a single pixel off no matter what you do, with Master Pages that is eliminated. Master Pages have revolutionized the way Web Applications and layout are done.

With Master Pages, you can create individual content pages that contain the content you want to on your page, then when users request that page, they merge with the master page to produce output that combines the layout of the master page with the content from the content page. It's really that simple. So lets take a look at adding a Master Page to your Web Application.

Open Visual Studio and create a new File System website (this is created on your local machine, no need to connect to a web server). Name this whatever you want, like maybe MasterPages_In_ASPNet. Once its loaded, right-click on the website name and select Add Folder. I always name this folder MasterPages, and it holds all my Master Pages for that web application. We'll get to why you might have more than one before this tutorial is over.

Now, right-click on the Masterpages folder and select Add New Item. When the Add New Item dialog opens select Master Page from the list, like this

Posted Image

When that Master Page is added, its basically a blank shell of a page, containing the following code

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="Master_Pages_MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>


Posted Image

Looks just like any old page doesnt it? Well theres one thing that makes it different, its this part

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>


If you did nothing more with this Master Page, you'd have a Master Page with a single content area. Like all other pages, you can customize this until you're happy with the layout. Do your look and feel, create your layout. Once you have it the way you want it, add a ContentPlaceHolder where you want different content on each page, like in my description above, the main content area of the page. This gives you a single file with all the navigation, headers, colors and styles for your entire site, the only thing that will change is what is inside the ContentPlaceHolders in the merging pages.

Now lets see how we add a page and merge it with our Master Page. Right-click the website name and select Add New Item. Once the Add New Item Dialog opens select Web Form from the list. When the next dialog appears, where you name the page, check the Select Master Page checkbox (also, off the topic of this tutorial, always make sure the Place code in seperate file checkbox is checked) and click Add.

Posted Image

After you click Add a new dialog will open asking you to select your Master Page, like the image below

Posted Image

Click on the Master Pages folder we made earlier in the left hand window, then in the right hand window all the Master Pages you have will show. Highlight the Master Page you want to use and click OK. Once it adds your new page, it will look different than other pages you have worked with before. There will be no <HTML> tag, no <BODY> tags, as those are all contained in your Master Page. All you will have is something that resembles this

<%@ Page Language="VB" MasterPageFile="~/Master_Pages/MasterPage.master" AutoEventWireup="false" 

CodeFile="Default.aspx.vb" Inherits="Master_Pages_Default" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>


Posted Image

There are 2 properties in this header line than in most ASP.Net pages, theres MasterPageFile="~/Master_Pages/MasterPage.master" which tells the page what Master Page to merge with, and title="Untitled Page" which is simply the title of your page that displays in the browser. Below that we have none of the normal HTML tags, just this

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"></asp:Content>
which is where the content for the page and site will lie.

Now when you use a Master Page in a real environment, more than likely there'll be more than just this one ContentPlaceHolder, this is just for demonstration purposes. In my last site I had 3 ContentPlaceHolder's for the content of the site. Master Pages are nice, Master Pages will greatly simplify your life when it comes to creating web applications, Master Pages will quickly become your new best friend when creating web applications, so use them.

Earlier in this tutorial I mentioned having more than 1 Master Page for a site, I've done this so the user can customize the look and feel & layout of the site, based on settings, they pick from a predefined set of "skins", this is saved in their user account, then each time they visit the Master Page is loaded dynamically based on the skin they chose, but this is a topic for a future tutorial.

Remember, Master Pages can also contain actual code, say for starting the session, setting the users session, setting cookies for the user, and so much more. That is the end of the Introduction To Master Pages in ASP.Net 2.0. Thank you for reading, and I hope you found this tutorial informative and useful.

Is This A Good Question/Topic? 2
  • +

Replies To: Introduction To Master Pages in ASP.Net

#2 dippy1  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 29-November 05

Posted 03 March 2008 - 08:25 AM

thanks that helped me a lot
Was This Post Helpful? 0
  • +
  • -

#3 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1632
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 03 March 2008 - 08:49 AM

No problem, glad it helped :)
Was This Post Helpful? 0
  • +
  • -

#4 b.ihde  Icon User is offline

  • D.I.C for life
  • member icon

Reputation: 43
  • View blog
  • Posts: 1,070
  • Joined: 29-September 08

Posted 22 December 2008 - 03:44 AM

Hi! I wrote the same tutorial at the same time like you, but i really have to say: of course, yours is better :)
So, thank you for this tutorial :P

regards

B.Ihde
Was This Post Helpful? 0
  • +
  • -

#5 J0K3R  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 13
  • View blog
  • Posts: 298
  • Joined: 19-December 08

Posted 04 May 2009 - 11:12 PM

Hi Thanks this was very helpfull.

I used to code in Classic ASP and I am going over to ASP.NET now but it is really confusing.

I am used to doing my programmign in Code and not with the GUI but this is greek to me.

Can you maybe create a tutorial on basic mssql db connection through code and adding them to a class for repeated use?

I am really in the dark and I have googled this but I find only explanations on how to do it via GUI, and that is easy.

Tx :)
Was This Post Helpful? 0
  • +
  • -

#6 versatile36  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-October 08

Posted 08 June 2009 - 10:50 PM

Thanks this was very helpful.
Was This Post Helpful? 0
  • +
  • -

#7 Daljit  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 08-July 09

Posted 08 July 2009 - 11:54 AM

U'R TUTORIAL REALLY HELPED ME A LOT. I GET VRY EASY UNDERSTANDING OF WEB PAGES. THANKS A LOT.
Was This Post Helpful? 0
  • +
  • -

#8 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1632
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 08 July 2009 - 02:36 PM

Thank you, I'm glad it was able to help :)
Was This Post Helpful? 0
  • +
  • -

#9 dcr2290  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 25-January 10

Posted 25 January 2010 - 07:36 PM

Thanks it was really very helpful................
Was This Post Helpful? 0
  • +
  • -

#10 Guest_priyanka*


Reputation:

Posted 22 March 2010 - 10:44 PM

View PostPsychoCoder, on 14 September 2007 - 07:46 PM, said:

Welcome to this tutorial on Introduction To Master Pages in ASP.Net 2.0. In this tutorial I will give an overview of
what Master Pages are, how they work, and how to use one in your web application. First, what is a Master Page, a Master Page is an ASP.NET file with the extension .master (for example, YourMaster.master) which holds the layout and standard behavior for your entire web application. A Master Page can contain static text, HTML elements and ASP: server controls.

Using a Master Page in your ASP.Net 2.0 web application allows you to create a consistant look and feel, and layout for your web application, all in a single page. When you create your Master Page create it as if you would a template for your site, like when you first start your site you work with a single "template" file until you get the layout, look and feel you want. Except with a Master Page, instead of adding all the content to a single page, you add a ContentPlaceHolder that will hold the content for that specified region in your application.

Lets say with your application you want a header across the top, then a nagvigation column, with the rest being the main content of your pages. Without Master Pages, you create the initial template for your site, then copy and paste that template for each and every page you want, changing the content in the main section, and possible the navigation.

With a Master Page, you define that same layout, except for the main content area you add a ContentPlaceHolder for that section, then when you add a new page and link it to your Master Page, all the layout is there, with the main content area empty for adding the content for that page.

When not using Master Pages, you create the layout you want, then copy that layout to each and every page, theres always going to be at least one page where something is a single pixel off no matter what you do, with Master Pages that is eliminated. Master Pages have revolutionized the way Web Applications and layout are done.

With Master Pages, you can create individual content pages that contain the content you want to on your page, then when users request that page, they merge with the master page to produce output that combines the layout of the master page with the content from the content page. It's really that simple. So lets take a look at adding a Master Page to your Web Application.

Open Visual Studio and create a new File System website (this is created on your local machine, no need to connect to a web server). Name this whatever you want, like maybe MasterPages_In_ASPNet. Once its loaded, right-click on the website name and select Add Folder. I always name this folder MasterPages, and it holds all my Master Pages for that web application. We'll get to why you might have more than one before this tutorial is over.

Now, right-click on the Masterpages folder and select Add New Item. When the Add New Item dialog opens select Master Page from the list, like this

Posted Image

When that Master Page is added, its basically a blank shell of a page, containing the following code

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="Master_Pages_MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>


Posted Image

Looks just like any old page doesnt it? Well theres one thing that makes it different, its this part

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>


If you did nothing more with this Master Page, you'd have a Master Page with a single content area. Like all other pages, you can customize this until you're happy with the layout. Do your look and feel, create your layout. Once you have it the way you want it, add a ContentPlaceHolder where you want different content on each page, like in my description above, the main content area of the page. This gives you a single file with all the navigation, headers, colors and styles for your entire site, the only thing that will change is what is inside the ContentPlaceHolders in the merging pages.

Now lets see how we add a page and merge it with our Master Page. Right-click the website name and select Add New Item. Once the Add New Item Dialog opens select Web Form from the list. When the next dialog appears, where you name the page, check the Select Master Page checkbox (also, off the topic of this tutorial, always make sure the Place code in seperate file checkbox is checked) and click Add.

Posted Image

After you click Add a new dialog will open asking you to select your Master Page, like the image below

Posted Image

Click on the Master Pages folder we made earlier in the left hand window, then in the right hand window all the Master Pages you have will show. Highlight the Master Page you want to use and click OK. Once it adds your new page, it will look different than other pages you have worked with before. There will be no <HTML> tag, no <BODY> tags, as those are all contained in your Master Page. All you will have is something that resembles this

<%@ Page Language="VB" MasterPageFile="~/Master_Pages/MasterPage.master" AutoEventWireup="false" 

CodeFile="Default.aspx.vb" Inherits="Master_Pages_Default" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>


Posted Image

There are 2 properties in this header line than in most ASP.Net pages, theres MasterPageFile="~/Master_Pages/MasterPage.master" which tells the page what Master Page to merge with, and title="Untitled Page" which is simply the title of your page that displays in the browser. Below that we have none of the normal HTML tags, just this

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"></asp:Content>
which is where the content for the page and site will lie.

Now when you use a Master Page in a real environment, more than likely there'll be more than just this one ContentPlaceHolder, this is just for demonstration purposes. In my last site I had 3 ContentPlaceHolder's for the content of the site. Master Pages are nice, Master Pages will greatly simplify your life when it comes to creating web applications, Master Pages will quickly become your new best friend when creating web applications, so use them.

Earlier in this tutorial I mentioned having more than 1 Master Page for a site, I've done this so the user can customize the look and feel & layout of the site, based on settings, they pick from a predefined set of "skins", this is saved in their user account, then each time they visit the Master Page is loaded dynamically based on the skin they chose, but this is a topic for a future tutorial.

Remember, Master Pages can also contain actual code, say for starting the session, setting the users session, setting cookies for the user, and so much more. That is the end of the Introduction To Master Pages in ASP.Net 2.0. Thank you for reading, and I hope you found this tutorial informative and useful.

Was This Post Helpful? 0

#11 sumit kothalikar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 27-February 10

Posted 14 May 2010 - 06:04 PM

it's great and easy to understand
looking for to dig into more basics of Asp.net
waiting for you next tutorial on Master pagge
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1