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

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">
</asp:Content>

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="http://weblogs.asp.net/scottgu">http://weblogs.asp.net/scottgu</a>
    to follow along as they are published.</p>
 
</asp:Content>

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
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-04 5:48:54 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search