MasterPages Demo Project Download (33.24 kb)
Demo Screen Shot (90.06 kb)

Master Pages (1^st of a Series)

Have you been searching for a decent sample project that implements Nested Master Pages? Hard to find ...huh! Now, you got one!

Here, nested MasterPages are implemented within a application framework of four panes: the first pane, the header holding the main menu, choices made from here load the side menu in the second pane, the choices here populate the content pane and of course, there is the footer pane to hold the copyright, app version and revision info, etc. (here - ASP.net)

Building the App: The approach taken was first create a page that looks like the screen-shot shown above. By doing this, you're able to setup up your cascading style sheet (css) and visually see the grouping of the panels within the html markup which will be replaced by your [ContentPlaceHolder] controls in the Master Pages. In order to get a grip on this and to keep it simple:

• no server-side coding was done
• no database connection
• no javascript
• and no sitemap

In a real world app, these would be a necessity, to validate user credentials, populating content, error checking, etc.

You might ask "Why wasn't a site-map used?" The first reason is so you can get a handle on how embedded links are handled, with master pages it is a little different. Second, if there is a need to create the menus dynamically, lets say, in the Page_Load(), the hard-coded links are there to show you what is needed to get things working.

Various sections of the app are put into different folders based on the main menu in the header pane. (The demo could have slapped all the files in the root but then, the demo would suck and not accomplish a thing...) Also, all the Master Pages are to be stuffed in the [MasterStuff] folder to mix things up a bit. So this is our demo layout:

The Master Page for the site (Site.Master) controls these sections: Header and Footer with a [ContentPlaceHolder] to populate both the side menu and content areas.

To populate the [ContentPlaceHolder] of the Site.Master, each menu item in the header calls the associated page which has its own Master Page and is a child of the site Master Page. Since these pages are children of the site Master, they only populate/update that defined area (with the help of the css):

As you go through the code of the Demo site and get familiar with what does what, you will see that the html markup is self-explanatory... Have Fun!

The key for embedded links is:

runat="server"

Demo Screen Shot (90.06 kb)

MasterPages Demo Project Download (33.24 kb)

the WebPepper team