The World Before Master Pages

Before you can really understand how much time and effort Master Pages can save developers, you should know what it was like performing a similar task in ASP.NET 1.1. This section gives you information on the practical need for a consistent (and easily modifiable) GUI for your web applications and shows you how much effort was involved in creating such a GUI for an ASP.NET 1.1 application.

If you have a lot of experience with the frustration of creating common and consistent layouts for ASP.NET, you thoroughly understand the problems that Master Pages solve and you can probably skim some of this section and skip to the Master Pages introduction.

The Need for a Consistent GUI

Anyone who has had to do web design for more than five minutes will tell you that one of the most important aspects of good design is consistency. If your home page is extremely artistic and covered with all kinds of flashy artwork and the rest of your site is functional but bland, your users will be discouraged and put off by the lack of consistent look and feel. If your entire website has extremely professional graphics, but no two web pages have the same color scheme, your users will be just as disappointed with your application.

In most cases, designers prefer to have the entire site follow a consistent look and feel. This doesn't mean that the whole site needs to be one color, but each functional area of the site should contain pages that are visually similar. Users should be able to tell where they are and what they are doing as much from the "feel" of the page as from the text on it.

The problem is that professional-looking pages and consistent GUIs often involve a lot of redundant HTML, even with the use of style sheets. Almost every time you sit down to start work on a website, the first thing you need to do is come up with a way to standardize the pages for that site. Not only do developers need to be able to create a consistent look and feel, but they need to be able to make changes to the GUI that affect the entire site without having to manually edit every single page in the site.

Creating a Consistent GUI in ASP.NET 1.1

Although ASP.NET introduced the concept of reusable server-side controls and those controls drastically improved the development process, there is still nothing built directly into ASP.NET 1.1 that supports the notion of creating a standardized look and feel throughout an entire website or functional areas within that site.

The solution in ASP.NET 1.1 was to create a set of reusable controls (often User Controls for ease of use) that could be included on every page within a functional area to provide a common look and feel as well as some common functionality. This was done to add things like navigation strips on the left side of a page, headers on top, footers on the bottom, and often navigation or toolstrips on the right side of a page.

After you created the user controls, you then had to lay out each and every page within your site to include those controls in the right place. This was an extremely error-prone process because a typo or failed paste operation on a page could create an unintended gap in the consistent look and feel or even bugs. Figure 24.1 illustrates what a sample of the HTML required to lay out a consistent look and feel looks like. With graphics and styles added into the HTML, that layout code would have to be pasted into each new page.

Figure 24.1. A minimal layout design required for each page to have a consistent look and feel in ASP.NET 1.1.

As you can see, this process is cumbersome, repetitive, and extremely prone to errors. The rest of this chapter will show you how the use of Master Pages in ASP.NET 2.0 makes the process of creating a consistent look and feel for your web site smooth, elegant, reliable, and easy to maintain.