It may be geeky to refer to anything programming-related as “kick butt.” If it is, you can call me a geek.
And you can quote me, too, because Master Pages in ASP.NET 2.0 are soooo kick butt.
Before I entice you any more, it’s important to know the system requirements. The .NET framework needs Windows 2000, XP, or 2003. Microsoft has plenty more information about the .NET Framework 2.0.
And if you’d rather use PHP, you can read Get Smarty, an article about PHP’s templating engine right here on Webmonkey.
Back to Master Pages. Master Pages let you templatize your website, separating content from design. Some reasons you might want to use a template:
- Make global changes whenever you want across your entire site.
- Never edit every page of your site just to change the logo.
- Maintain a consistent look and feel without going nuts.
Let’s get started on Master Page mastery. I can’t promise a black belt, but you’ll surely make it to orange. And, as my seven year old nephew could tell you, orange is definitely kick butt.
All you need is to not be afraid of basic HTML. That’s your white belt.
Ready? Ki-yai! Let’s get started with ASP.NET 2.0 Master Pages.
First things first, check out this simple template we’ll be using:
<%@ Master %> <!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>Karate Chop</title> </head> <body> <p> <b>This will show up on every page</b> </p> <asp:contentplaceholder id="mainstuff" runat="server"> </asp:contentplaceholder> <p> © Copyright notice, which shows up on every page. </p> </body> </html>
Save this as
This should look a lot like a basic web page. It is! There are a few unfamiliar elements:
<%@ Master %>
This first line tells the server that this is a Master page.
This is a normal HTML tag, but the
runat="server" part is thrown in there so the server will look at the stuff inside of it first. In particular, this will allow you to change the title on each page. But more about that later.
The final new element is a special ASP tag:
<asp:contentplaceholder id="mainstuff" runat="server"> </asp:contentplaceholder>
This tag is at the heart of Master Pages. It says, “Content goes here and I’m going to call it ‘mainstuff.’”
This page is useless without actual content. The Master Page is like a Karate uniform — It holds the basic structure, but it needs help to do anything. Time to give it that help by adding some content. And since you’re a yellow belt now, we’ll move a little faster. Let’s do it.
Contain your content
Now that we have a Master Page, let’s give it some content. Here’s an example content page:
<%@ Page MasterPageFile="Master.master" Title="Why are Karate belts colored?" %> <asp:Content ID="Content1" ContentPlaceHolderID="mainstuff" runat="Server"> Karate belts are colored the way they are because the same belt used to be used over and over. Every time you moved up a level, you dyed your belt a darker color. </asp:Content>
Save this as
Very simple. Not even one line of HTML and only two elements:
<%@ Page MasterPageFile="Master.master" Title="Why are Karate belts colored?" %>
This line tells the server where to find the current page’s Master Page. It also passes along the title of the page. That
runat="server" in the
<head> tag of our Master Page does the trick here. Without it, the title would still be “Karate Chop.”
The rest is the content, contained inside this tag:
<asp:Content ID="Content1" ContentPlaceHolderID="mainstuff" runat="server">
The ID is a unique identifier which can be just about anything.
ContentPlaceHolderID matches the
asp:contentplaceholder ID in our Master Page.
Together, they give us this page. View source on that HTML file to see the meat of our Master Page.
Go ahead and try editing the text. Changes to the content show up in the end result. Copy
Content.aspx to a new file,
MoreContent.aspx, and change its content. Both pages inherit from the single Master page.
If you make some changes to the Master page (such as the copyright notice), those changes come through in both content pages. This is was templating is all about. Pretty nifty, eh?
You can add additional content sections, such as a sidebar. To do this, you’ll just want to place this line in your
<asp:contentplaceholder id="sidestuff" runat="server"> </asp:contentplaceholder>
And this in your
<asp:Content ID="Content2" ContentPlaceHolderID="sidestuff" runat="server"> Here is some sidebar content <asp:Content>
Of course, to do tricky things like make the sidebar float to the side, you’ll need to dig into CSS a little bit.
And, naturally, there is more to learn about Master Pages, but you’ve begun your long journey toward mastery. You’ve earned your orange belt, just like I promised. You aren’t chopping boards in half with your bare hands yet, but you’re on your way.
And, at least you won’t have to change a logo across a couple hundred static pages.