Build Your Own ASP.NET 3.5 Website Using C# & VB (28 page)

containing the header, footer, and other elements that you expect to display in

multiple web forms within a web application.

Master page files have the
.master
extension, and, just like web forms and web user

controls, they support code-behind files. All master pages inherit from the class

System.Web.UI.MasterPage.

Designing a site structure using master pages and web user controls gives you the

power to modify and extend the site easily. If your site uses these features in a wellplanned way, it can be very easy to modify certain details of the layout or functionality of your site, because updating a master page or a web user control takes immediate effect on all the web forms that use the file. As we’ve already mentioned, a master page is built using HTML and controls, including the special ContentPlaceHolder control. As its name suggests, the ContentPlaceHolder is a placeholder that can be filled with content that’s relevant

to the needs of each web form that uses the master page. In creating a master page,

we include all of the basic structure of future pages in the master page itself, including the , , and tags, and let the web forms specify the content that appears in the placeholders.

Let’s see how this works with a simple example. Suppose we have a site with many

pages, all of which contain a standard header, footer, and navigation menu, laid out

as per the wireframe shown in Figure 4.12.

Licensed to [email protected]

144

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

Figure 4.12. A simple web site layout

If all the pages in the site have the same header, footer, and navigation menu, it

makes sense to include these components in a master page, and to build several

web forms that customize only the content areas on each page. We’ll begin to create

such a site in Chapter 5, but let
’s work through a quick example here. To keep this example simple, we won’t include a menu here: we’ll include just the

header, the footer, and the content placeholder. Add a new file to your project using

the
Master Page
template in Visual Web Developer. Name the file
FrontPages.master
, as shown in
Figure 4.13
, and select the appropriate language. You’ll notice that some tags have been created for you already, one in

the , and one in the page body. You can remove them and modify the page

like this:

Visual Basic

LearningASP\VB\FrontPages.master

<%@ Master Language="VB" %>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Licensed to [email protected]

Constructing ASP.NET Web Pages

145

Again, the C# version is identical except for the Master declaration at the top of the

page:

C#

LearningASP\CS\FrontPages.master
(excerpt)

<%@ Master Language="C#" %>

⋮

Figure 4.13. Creating a Master Page

Licensed to [email protected]

146

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

The master page looks almost like a web form, except for one important detail: it

has an empty ContentPlaceHolder control. If you want to build a web form based

on this master page, you just need to reference the master page using the Page directive in the web form, and add a Content control that includes the content you want to insert.

Let’s try it. Create a web form in Visual Web Developer called
FrontPage.aspx
, and

check the
Select master page
option. This option will allow you to choose a master

page for the form; Visual Web Developer will then use that master page to generate

the code for you. Edit it to match this code snippet:

Visual Basic

LearningASP\VB\FrontPage.aspx
(excerpt)

<%@ Page Language="VB" MasterPageFile="~/FrontPages.master"

Title="
Front Page
" %>

Runat="Server">

Welcome to our web site! We hope you'll enjoy your visit.

The VB and C# versions of this code are the same except for the Language attribute

on the Page declaration, but because Visual Web Developer generates all the code

for you automatically, you don’t need to worry about it—instead, you can focus on

the content.

You’re all set now! Executing
FrontPage.aspx
will generate the output shown in

Figure 4.14
.

Licensed to [email protected]

Constructing ASP.NET Web Pages

147

Figure 4.14. Using a master page to set the header and footer

Although the example is simplistic, it’s easy to see the possibilities: you can create

many web forms based on this template very easily. In our case, the master page

contains a single ContentPlaceHolder, but it could have more. Also, we can define

within the master page default content for display inside the ContentPlaceHolder

on pages whose web forms don’t provide a Content element for that placeholder.

We’ll explore Visual Web Developer’s capabilities in more depth in the following

chapters, but for now you can play around with it yourself, using
Design
mode to

visually edit web forms that are based on master pages. Looking at
Figure 4.15, you

can see that the content of the master page is read-only, and that you can edit only

the content areas of the page.

Figure 4.15.
Design
mode shows the editable areas of a form that uses a master page

Licensed to [email protected]

148

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

Using Cascading Style Sheets (CSS)

It’s clear that controls make it easy for us to reuse pieces of functionality in multiple

locations. For example, I can’t imagine an easier way to add calendars to many web

forms than to use the Calendar web server control.

However, controls don’t solve the problem of defining and managing the visual

elements of your web site. Modern web sites need constant updating to keep them

fresh, and it’s not much fun editing hundreds of pages by hand just to change a

border color, for example, and then having to check everything to ensure that your

changes are consistent. The process is even more painful if your client wants a more

serious update, like a rearrangement of the components on the pages.

The good news is that this maintenance work can be made a lot easier if you plan

ahead, correctly follow a few basic rules, and efficiently use the tools that HTML

and ASP.NET offer you.

An essential tool for building reusable visual styles is
Cascading Style Sheets (CSS)
. HTML was initially designed to deliver simple text content, and didn’t address the

specifics of how particular items appeared in the browser. HTML left it to the individual browsers to work out these intricacies, and tailor the output to the limitations and strengths of users’ machines. While we can change font styles, sizes, colors,

and so on using HTML tags, this practice can lead to verbose code and pages that

are very hard to restyle at a later date.