Master Pages in Asp.net 2.0

Introduction:

Master pages are a new cool feature that has been added to the Asp.net 2.0, known as "Whidbey". A Web application has to look consistent and for that every page must be like the every other page. In Asp.net 1.1 we used Cascading Style Sheets to make a common template for all the pages and than we simply copy and paste the html source of one page to the other to make it consistent.

Asp.net 2.0 introduces master pages that are used to make the pages of the website consistent. In this article we will see how to set up master pages and how we can use master pages in our .aspx pages.

Adding a Master page (Sample1.master):

Adding a master page to your web application is straight forward. Just right click on the project and select "Add New Item" and than select "Master Page". This will add the master page to your project. Now if you see your master page in the design window you will see something like this:

The master page already has the contentplaceholder control which is used to hold and display your contents. Let's delete that contentplaceholder and add it by our self. In this case we will create two content place holders. One will be on the left and other one on the right.

After you insert the contentplaceholder control inside your table your master page will look something like this:

Click on the area of the contentplaceholder and write some text.

Okay let's now make a page which can use this master page.

Using the master page in your aspx pages (Sample1.aspx):

Just add a new aspx page and name it as "Sample1.aspx". Now you want to use the Sample1.master file in your aspx page. Just go to the html view of your page and add a MasterPageFile attribute in the page directive and delete all the other html that is written in the aspx page. The MasterPageFile attribute denotes that the Page is inheriting from the master page.

<%@ Page MasterPageFile="~/Sample1.master" %>

After marking the attribute if you view your page it will look something like this:

Check to see if your content1 and content2 is inheriting from the master cause if they are not than it means that you are making custom contentplaceholder controls. Just right click on the Content and select smart tag and reference to the master so it will populate the boxes with the data extracted from the master pages.

Now if you run the Sample1.aspx page you will see the content will be coming from the master file.

NOTE: Don't forget to build your application after making changes in the master file.

In the above example I Introduced you to the master pages with displaying simple text in the content pages. Let's see what else we can do using the master pages.

Adding other controls in Master pages (Sample2.aspx):

We are not only limited to adding text in the master pages but we can easily add any other server or html control in it. Let's add some controls to the master page. In this example I have added some hyperlinks and a image control to the master page. Your master page will look something like this after adding controls.

Now the cool thing is that you don't have to do anything to make this appear on the aspx page since you have already made a reference to the master page in your aspx page using the "MasterPageFile" attribute in the page directive. So, once you run the page you will see hyperlinks and the image on your aspx page.

Setting content section to be custom section (Sample3.aspx and Sample3.master):

Sometimes we don't want to add all the information from the master pages. Consider a content section which is not same for all the pages. This can be the detail on the page like about the company or the contacts of the company. In this example we will see that how we can enter our own contents which are not same for all the pages. Up till now you might be pretty comfortable in making the master pages. Let's make the master page which looks something like this:

As you can see its pretty simple master page. The left content consists of the menu which contains the hyperlinks. The right content contains the calendar control and the middle content is left blank.

Once you reference this master page in your aspx page you will see something like this when you run the page (Don't forget to build the application first when running).

As you can see the middle section is black. Now go back to the aspx page design view and right click on the middle section and select show smart tag and select "create custom content". This will allow you to enter the information in the middle content place holder control.

Now, as you see in the above image that the content you entered in the custom content section are added to the page rather than the contents from the master file.

Nesting Master Pages (SiteMaster.master,SectionMaster.master,Sample4.aspx):

You can also nest one master to the other. We will have to switch to code for this feature since the visual designer does not give you the facility to nest master pages.

So, this means that we have to write code to achieve this so lets do it.

SiteMaster.master:

The Site master master page will only contain the ContentPlaceHolder control which will display a heading saying that it is a site master page and not a section page.

<asp:contentplaceholder id="SiteContentPlaceHolder" runat="server"><h1>Site Master Page</h1></asp:contentplaceholder>

SectionMaster.master:

Now, lets see the section master page which will inherit from the sitemaster page.

<%@ Master MasterPageFile="~/SiteMaster.master" Language="C#" CompileWith="SectionMaster.master.cs" ClassName="SectionMaster_master" %>

<asp:Content ID="MasterContent" ContentPlaceHolderID="SiteContentPlaceHolder" Runat="Server">

<tr>

<asp:ContentPlaceHolder ID="leftColumn" Runat="Server">

</asp:ContentPlaceHolder>

</tr>

</table>

See the first line, you will find it amazing but yes you can do like this. You can inherit or nest one master page inside the other. Now let's see the webform which uses all this nested master pages. In the next line we included the Content place holder control from the site master control.

Sample4.aspx:

Here is the code for the Sample4.aspx file:

<%@ Page MasterPageFile="~/SectionMaster.master" %>

<asp:Content ContentPlaceHolderID="LeftColumn" Runat="Server">

This is cool

</asp:Content>

Note that we inherited from the section master page and not from the site master. The reason is simple, section master already has the functionality of the site master since it has inherited from that master page. When you run this page you will see the web form which will have both the site master page and also the section master page.

Overriding HTML Header Attributes (SiteHeader.master, Sample5.aspx):

We can also change the Master HTML attributes from our aspx page.

<%@ Page Language="c#" MasterPageFile="~/SiteHeader.master" %>

void Page_Load()
{

Master.Page.Header.Title = "Content Title";

Master.Page.Header.Metadata.Add("Keywords", "blah,blah");

Master.Page.Header.Metadata.Add("Description", "blah,blah");

}

</script>

There are other tons of cool things that you can do for details visit msdn.microsoft.com .

I hope you enjoyed the article. Happy Programming !

Attachments:

Project Files: MasterPages.zip

About the Author:

Mohammad Azam is currently completing his bachelors in Computer Science from University of Houston. Apart from writing articles about Asp.net.

Mohammad Azam is always seeking freelance projects to work. Currently he is also seeking Summer 2005 Internship. If any one interested you can contact him at azamsharp@gmail.com.

If you have further questions please email Azam at azamsharp@gmail.com