Data Tutorial 2 - Building our Master Page and Site Navigation Structure
page 3 of 9
by Scott Guthrie
Average Rating: 
Views (Total / Last 10 Days): 45717/ 46

Step 2: Create a Home Page based on the Master Page

Now that I have my Master Page defined, I can go ahead and build pages using it.  To build one, right click on the Project and choose “Add New Item”, and select the “Web Form” item:

Figure 5

Notice that I’ve selected the “Select master page” checkbox near the bottom of the dialog.  This tells Visual Web Developer that you want to have this new page use a Master Page.  When you click the “add” button it will then ask you to pick the Master Page to use:

Figure 6


When I select the “Site.Master” file we defined above, it will create a new Default.aspx file like so:

Listing 2

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb"
 Inherits="_Default" title="Untitled Page" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="MainContent" Runat="Server">

Visual Web Developer has automatically added an <asp:content> control for the “MainContent” contentplaceholder we defined earlier (note the “ContentPlaceHolderId attribute defines which contentplaceholder we want to override).  I can then fill this content region in with the unique content I want to add to the page:

Listing 3

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb"
 Inherits="_Default" title="Home" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="MainContent" Runat="Server">
    <h1>Welcome to the Northwind Data Samples Site</h1>
    <p>This site is being built as part of a set of tutorials that show off some of 
 the new data access and databinding features in ASP.NET 2.0 and Visual Web Developer.</p>
    <p>Overtime, it will include a host of samples that demonstrate: building a DAL (data access layer)
    using strongly typed TableAdapters and DataTables, master details, filtering, sorting, 
    paging, 2-way data-binding, editing, insertion, deletion, hierarchical data browsing, 
    hierarchical drill-down, optimistic concurrency, and more. </p>
    <p>Please subscribe to <a href=""></a>
    to follow along as they are published.</p>

Note that the page will automatically pick up the CSS stylesheet from the master-page (ASP.NET will also automatically “rebase” the CSS url when the .aspx page is in a sub-directory – so you don’t have to worry about fully qualifying the style-sheet or doing weird “../” hacks).

Note also that I have set the “Title” attribute on the <%@ Page %> directive to “Home”.  This attribute allows me to declaratively provide the page title, even though the <head> element is defined within our Master Page.

When I switch into design-view on the page, Visual Web Developer will automatically show me a merged view of the page that combines both the Master Page and deriving Page:

Figure 7

ASP.NET will also merge the content together at runtime – and send down a single html page when a browser requests this page.  The beauty of this model is that the Master Page layout is defined in one single place – so if I need to make a change I can update one file, and have every file that is based on it within the site immediately update.

View Entire Article

User Comments

Title: Nice and Precise Article   
Name: 'Bode Bowoto
Date: 2010-02-01 9:57:19 AM
thank u scott,u've really made my day,with these nice provides a clear and precise explanation of how to create a navigational bar in relation to the web app.
Title: Nice Article   
Name: Rick
Date: 2009-12-02 3:39:17 PM
I learned alot from you article. Thanks for taking the time to put it together
Title: Nice Moves   
Name: James.F
Date: 2009-09-18 1:28:55 AM
Scott -

Many thanks, this is exactly what I was looking for with the second level repeater nav structure. It would be nice if "the soft" would make their examples half this good!
Title: thank   
Name: Michele P.
Date: 2009-07-16 11:27:12 AM
great tutorial it was what i m looking for today!
just a things, you wrote:
"((SiteMapNode) Container.DataItem).ChildNodes()"
but the right way is without () like this
"((SiteMapNode) Container.DataItem).ChildNodes"

Sry fo my bad English.
Bye and thank for tutorial.
Title: Master Pages and Site Nav   
Name: Mahesh Wagh
Date: 2007-08-13 7:49:16 PM
Thanks Scott. This tutorial gives a good basic understanding of the navigation features. If you have written any detailed articles on the same, can you link them on this page?
Title: css   
Name: JK
Date: 2007-04-25 3:00:23 AM
Hi, great tutorial.

Can u include the stylesheet.css that u have created for your tutorial?

Title: SiteNavigation System   
Name: Srikanth
Date: 2006-12-19 3:46:05 AM
Need more
Title: Comment   
Name: sasharus
Date: 2006-10-20 5:26:35 AM
Title: Data Tutorial 2: Building our Master Page and Site Navigation Structure   
Name: Sean Killeen (
Date: 2006-07-17 11:59:52 AM
Scott Gives a great example of converting a sitemap datasource to a bulleted list in this article. However, a code substitution he provided for use in C# does not work. In Visual Studio 2005, I am given the error message, 'System.Web.SiteMapNode.ChildNodes' is a 'property' but is used like a 'method'. Is there a better way to do this?

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-06-15 10:41:59 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search