How to Create Master Pages with ASP.NET 4

How to Create Master Pages with ASP.NET 4

Beginning ASP.NET 4 bookMaster pages are added to the site using the Add New Item dialog box. They can be placed anywhere in the site, including the root folder, but from an organizational point of view, it’s often easier to store them in a separate folder. Just like normal ASPX pages, they support the inline code model as well as the Code Behind model. The master pages used in the Planet Wrox project use the Code Behind model exclusively. In the following exercise, you learn how to create a simple master page and add some HTML to it to define the general structure of the pages in your web site.

Creating a Master Page

1. Open the Planet Wrox project in VWD if it is not open already.

2. In Chapter 2 you created a folder called MasterPages to hold your master pages and then added a single master page to that folder. If you didn’t carry out that exercise, add the master page now. To do this, create the MasterPages folder, right-click the new folder, choose Add New Item, and select Master Page. Make sure that the master page uses Code Behind and that it is using your preferred programming language. Name the master page Frontend.master.

3. Add the following highlighted code between the <form> tags of the master page, replacing the <div> tags and the ContentPlaceHolder that VWD added for you when you created the master. Note that this is almost the same code you added to Default.aspx in Chapter 3, except for the <asp:ContentPlaceHolder> element and the <a> element within the Header <div>. The <a> element takes the user back to the home page, and will be styled later.

<form id="form1" runat="server">

  <div id="PageWrapper">

    <div id="Header"><a href="~/" runat="server">Header Goes Here</a></div>

    <div id="MenuWrapper">Menu Goes Here</div>

    <div id="MainContent">

      <asp:ContentPlaceHolder ID="cpMainContent" runat="server">

      </asp:ContentPlaceHolder>

    </div>

    <div id="Sidebar">Sidebar Goes Here</div>

    <div id="Footer">Footer Goes Here</div>

  </div>

</form>

Make sure that you have the ContentPlaceHolder within the MainContent <div> tags. You can drag one from the Toolbox onto the page or enter the code directly, using IntelliSense’s helpful hints. In both cases you should give the control an ID of cpMainContent.

4. Next, switch the master page into Design View and then drag Styles.css from the Styles folder in the Solution Explorer onto the master page. As soon as you drop the file, VWD updates the Design View and shows the layout for the site that you created in Chapter 3. If the design doesn’t change, switch to Markup View and ensure there’s a <link> tag in the head of the page pointing to your CSS file:

  <asp:ContentPlaceHolder ID="head" runat="server">

  </asp:ContentPlaceHolder>

  <link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />

</head>

The page should now look like Figure 6-2 in Design View.

Creating an ASP.NET 4 masterpage

Figure 6-2

Note the area with the purple border around it between the menu and the footer region in your Design View. This is the ContentPlaceHolder control that is used by the content pages. You see how to use it in the next exercise.

5. You can save and close the master page because you’re done with it for now.

How It Works

Within Visual Web Developer, master pages behave like normal pages. You can add HTML and server controls to them, and you can manage the page both in Markup and Design View. The big difference is, of course, that a master page isn’t a true page itself; it only serves as a template for other pages in your site.

In the next section you see how to use this master page as the template for a content page.

Creating Content Pages

A master page is useless without a content page that uses it. Generally, you’ll only have a few master pages, whereas you can have many content pages. To base a content page on a master page, you check the option Select Master Page at the bottom right of the Add New Item dialog box when you add a new Web Form to your site. Alternatively, you can set the MasterPageFile attribute on the page directly in the Markup View of the page. You saw this @ Page directive earlier in this chapter when master and content pages were introduced.

Content pages can only directly contain Content controls that each map to a ContentPlaceHolder control in the master page. These content controls in turn can contain standard markup like HTML and server control declarations. Because the entire markup in a content page needs to be wrapped by <asp:Content> tags, it’s not easy to turn an existing ASPX page into a content page. Usually the easiest thing to do is copy the content you want to keep to the clipboard, delete the old page, and then add a new page based on the master page to the web site. Once the page is added, you can paste the markup within the <asp:Content> tags. You see how this works in the following exercise.

Adding a Content Page

In this Try It Out you see how to add a content page to the site that is based on the master page you created earlier. Once the page is added you add content to the <asp:Content> regions.

1. In previous exercises you added standard ASPX pages to your project, which should now be “upgraded" to make use of the new master page. Because VWD has no built-in support to change a standard page into a content page, you need to manually copy the content from the old ASPX page into the new one. If you want to keep the welcome text you added to Default.aspx earlier, copy all the HTML between the MainContent <div> tags to the clipboard (that is, the <h1> and the two <p> elements that you created earlier) and then delete the Default.aspx page from the Solution Explorer. Next, right-click the web site in the Solution Explorer and choose Add New Item. Select the correct programming language, click Web Form, name the page Default.aspx, and then, at the bottom of the dialog box, select the check boxes for Place Code in Separate File and Select Master Page, as shown in Figure 6-3.

Figure 6-3

Finally, click the Add button.

2. In the Select a Master Page dialog box (see Figure 6-4), click the MasterPages folder in the left-hand pane, and then in the area at the right, click Frontend.master.

Click OK to add the page to your web site.

Select Master Page dialog box in ASP.NET

Figure 6-4

Instead of getting a full page with HTML as you got with standard ASPX pages, you now only get two <asp:Content> placeholders as shown in this VB.NET example:

<%@ Page Title="“ Language="VB" MasterPageFile="~/MasterPages/Frontend.master"

     AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">

</asp:Content>

3. Switch to Design View and note that everything is grayed out and read-only, except for the <asp:Content> region for cpMainContent. Figure 6-5 shows you how the page should look.

Figure 6-5

4. If you still have the old markup from the Default.aspx on the clipboard, click once inside the cpMainContent placeholder and press Ctrl+V. (Note: you can do this both in Design View and in Markup View). This adds the markup to the page, right between the <asp:Content> tags.

5. Save your changes by pressing Ctrl+S and press Ctrl+F5 to open the page in your browser. The browser should display the page very closely to what you saw in Design View (see Figure 6-5).

6. Now take a look at the HTML for the page in the browser. You can do this by right-clicking the page and choosing View Source or View Page Source. Note that the source of the final page in the browser is a combination of the source of the master page and the content page:

  <div id="PageWrapper">

    <div id="Header"><a href="./">Header Goes Here</a></div>

    <div id="MenuWrapper">Menu Goes Here</div>

    <div id="MainContent">

      <h1>Hi there visitor and welcome to Planet Wrox</h1>

      <p class="Introduction">We're glad you're paying a visit to

        <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>,

            the coolest music community site on the Internet.

      </p>

      …

The first four lines come from the master page and the highlighted lines of HTML code come from the content page.

7. Switch back to VWD and create a new page called Login.aspx in the root of the site based on the master page. Notice how VWD remembered your last settings with regard to the master page and Code Behind (make sure both are checked in case you unchecked them earlier). Switch to Markup View and create an <h1> element inside the cpMainContent placeholder with the text Log in to Planet Wrox. There’s no need to add any other controls to this page just yet, but it serves as the basis for the login functionality you’ll create in Chapter 16. Without any content in the MainContent element, the Sidebar will be moved to the left of the page.

8. Go back to Default.aspx and switch to Design View. Beneath the welcome text with the header and two <p> elements, create a new paragraph (press Enter in Design View) and type some text (for example, You can log in here). Notice how this new paragraph has a class attribute called Introduction as VWD applies the previous class to new paragraphs automatically. Remove this class using the Clear Styles option of the Apply Styles window, or manually remove it from the code in Markup View.

9. Highlight the words “log in" and choose Format Ø Convert to Hyperlink from the main menu. In the dialog box that follows, click the Browse button and select the Login.aspx page that you just created. Click OK twice.

10. Save all changes and press Ctrl+F5 again to view Default.aspx in the browser. Then click the link you created in the preceding step. You should now be taken to Login.aspx. Note that the general layout, like the header and the sidebar, is maintained. The only thing that changes when you go from page to page is the content in the main content area.

How It Works

When a page based on a master page is requested in the browser, the server reads in both the content page and the master page, merges the two, processes them, and then sends the final result to the browser. In step 6 of this exercise you saw that the HTML in the browser for the requested page contained the markup from both files. 

Master pages will save you from a lot of work when it comes to updating or radically changing the looks of your site. Because the entire design and layout of your site is defined in the master page, you only need to touch that single file when you want to make any changes. All content pages will pick up the changes automatically.

This article is excerpted from chapter 6 "Creating Consistent Looking Web Sites" of the book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars (ISBN: 978-0-470-50221-1, Wrox, 2010, Copyright Wiley Publishing Inc.)

Tags:

Comments

Leave a Reply

What is 12 + 5 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)