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

Step 1: Adding a master page

Below is the basic site structure we were left with after building our data acess layer for the Northwinds database in my previous blog post.  It has a strongly typed DAL that goes against the Northwinds database:

Figure 2

What I want to-do now is add a Master Page to the site.  Master Pages is a new feature in ASP.NET 2.0 that enables me to define a common layout structure and look and feel that I can easily apply to multiple (or all) pages across a site/app. 

To add a Master Page, right click on the project and choose “Add New Item”.  Pick the Master Page Template from the “Add New Item” dialog and name it “Site.Master”:

Figure 3

 

I want my site to use a CSS based layout approach.  As such, I am using <div> elements to organize the structure (as opposed to <table> elements).  Here is the HTML I added:

Listing 1

<%@ Master Language="VB"CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Northwind Data Samples</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
    <div id="wrapper">
        <form id="Form1"runat="server">
              <div id="header">
                  <span class="title">Northwind Data Tutorials</span>
                  <span class="breadcrumb">Todo: Breadcrumb will go here...</span>
              </div>
              <div id="content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
              </div>
            <div id="navigation">
                Todo: Menu will go here...
            </div>      
        </form>
    </div>
    <div id="footer">
        <a href="http://weblogs.asp.net/scottgu">http://weblogs.asp.net/scottgu</a>
    </div>
</body>
</html>

Notice the <asp:contentplaceholder> control that is in the middle <div> element.  This is a new ASP.NET 2.0 control that I can use to define regions of the master template that can be “filled-in” or replaced by pages that use this master.  You can have any number of <asp:ContentPlaceHolder> controls you want within a master-page – all you need to-do is make sure that each has a unique “id” value.  For the sample above I’ve added one <asp:contentplaceholder> and named it “MainContent” (since it will be where pages on the site fill in their content).

I am also then using an external CSS stylesheet (“stylesheet.css”) to define the CSS for the page.  When in design-view the Master Page looks like this:

Figure 4


View Entire Article

User Comments

Title: Nice and Precise Article   
Name: 'Bode Bowoto
Date: 2010-02-01 9:57:19 AM
Comment:
thank u scott,u've really made my day,with these nice article.it 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
Comment:
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
Comment:
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
Comment:
Hi,
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
Comment:
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
Comment:
Hi, great tutorial.

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

Thanks,
JK
Title: SiteNavigation System   
Name: Srikanth
Date: 2006-12-19 3:46:05 AM
Comment:
Need more
Title: Comment   
Name: sasharus
Date: 2006-10-20 5:26:35 AM
Comment:
cool
Title: Data Tutorial 2: Building our Master Page and Site Navigation Structure   
Name: Sean Killeen (SeanKilleen@gmail.com)
Date: 2006-07-17 11:59:52 AM
Comment:
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-2021 ASPAlliance.com  |  Page Processed at 2021-12-08 11:48:08 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search