TechTalk

Topics in the world of web development and other technologies we find interesting.

Introduction to ASP.NET Master Pages

ASP.NET has a built in website template system called Master Pages. The system offers a very flexible and easy to use solution for managing the portion of a website that will be re-used on more than one page of the site.

Most websites will use the same header, navigation and footer on almost every page of the site. Master Pages provide a simple to use, and simple to manage answer for this common problem. Master pages are not the only option for this problem. Some developers have taken the time to build their own templating system (usually when using another development language that does not already have one built-in like ASP.NET), and some web design software suites include a template system. For example, Dreamweaver includes a system called "Dreamweaver templates". ASP.NET Master pages work similar to the Editable Regions in Dreamweaver templates, but they offer a number of advantages.

  1. The master pages are integrated into the content pages at the time of the user request. This means that unlike client side based templates, you do not need to re-apply it to every content page each time you change the master page.
  2. The ASP.NET Master Pages are much more flexible than most other template systems. Among many other features, they allow for an unlimited number of nested template levels and allow for default content at each content region. While nesting is beyond the scope of this article, it is actually quite simple to implement. I will discuss how to specify default content below.

The template files in ASP.NET end with .master and are very similar to a standard .aspx page in that they can contain the same kind of page markup. The .master file will contain the code that you want to reuse on multiple pages.

In the example below you will see the Site.master default markup for a new Visual Studio Web Site. By default there are two Content Place Holders defined with the <asp:ContentPlaceHolder /> tags. The first one is titled HeadContent and contains a single line of default content. The second Content Place Holder is titled MainContent and uses the shorter close tag notation since we did not specify any default content for this region. Because the templates are actually merged by the web server at the time of the request, we need to include the runat="server" parameter as well.

Site.master ASP.Net Masterpage

In the sample Content Page below we tell the server that we want to use our Master Page by adding the MasterPageFile="~/Site.Master" parameter in the Page tag at the top. The Master Pages content will now automatically be used on this page of the website and all we need to do is optionally provide some custom content for our Content Place Holders. We do this by using a <asp:Content /> tag. The page below has supplied content for both of our Content Place Holders. Notice how the tags are matched to their proper corresponding Master Page tag by the ContenPlaceHolderId parameter.

Default.aspx ASP.Net Page inheriting from Site.master

If we request the page from the web server, below is the resulting HTML that is sent to the browser. The custom content was automatically merged with the template content contained in the Master Page, and then the ASP.Net Placeholder tags were stripped out and finally the server would process any other server side elements before sending the results to the client. Notice also that setting the Title parameter in our content page was still applied even though the title tag is actually outside of any of our Content Place Holders. Any code behind files (.cs or .vb) that are associated with the pages will get processed just fine. Another nice feature is that you can even specify a code behind file for your mast page that so that it can be used to insert server code that you want to get processed on every page.

Resulting generated page: Example 1

Now if we decided we did not need to change the default content that we have for the header in our HeadContent Place holder, we would just omit specifying a corresponding asp:Content tag in our content page. If you omit a placeholder region in your page the server will then just use the default content from the master page instead, like below.

Resulting generated page: Example 2

This is especially nice if you decide to adfd a new Content Region to a template after the site has already been published. You do not have to go back and add that region to every page the uses your template. Instead you would only need to update the pages where you want to specify custom content in your new content placeholder.

This article really just scratches the surface with what can be done with master pages. However many sites do not need any more complexity then this. Nested master page will come in handy when you want to build a section of subpages, say recipes for example, that will all have a very similar look, but still inherit from the Main Master Page to inherit the site's header, footer, etc.

Posted by Mark at 14:25
blog comments powered by Disqus

Authors

Recent Comments

Powered by Disqus Error loading MacroEngine script (file: uBlogsyListBlogRoll.cshtml)