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

Step 5: Data-Building a Site Navigation Menu Structure

ASP.NET 2.0 introduces a new concept called “data source” controls – which are control objects that provide a standard way to expose data that UI controls can then bind against.  The data source model is extensible, so you can easily build your own Data Source controls to plug into the system (this blog post points to how to-do this).  One of the built-in data-source controls that ASP.NET 2.0 ships with is the <asp:sitemapdatasource> control – which makes it super easy to databind any UI controls against the Site Navigation data model.

ASP.NET 2.0 ships with built-in <asp:treeview> and <asp:menu> controls, which can be used to create menu and tree-view structures based on the site-map structure.  To add and then data-bind the <asp:menu> control to a <asp:sitemapdatasource> control on a page, I could simple add this markup to the Site.Master file (replacing the previous to-do menu comment):

Listing 5

<div id="navigation">
<asp:Menu ID="foo" DataSourceID="SiteMapDataSource1" runat="server">
</asp:Menu>
      <asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false" runat="server" />
</div>

I would then have a fly-out menu for navigating around the site.

Alternatively, if I want even greater control over the HTML generated, I could use more basic (but also more flexible) controls – like the ASP.NET Repeater control. 

For example, I could use the <asp:repeater> to create an html <ul></ul> list like so:

Listing 6

<div id="navigation">
    <ul>
        <li>
            <ahref="default.aspx">Home</a>
        </li>
    
        <asp:Repeater ID="foo" DataSourceID="SiteMapDataSource1" runat="server">
            <ItemTemplate>
                <li>
                    <a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>
 
<asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false"runat="server" />

With our Web.SiteMap file defined like it is above, this would then generate the below html at runtime:

Listing 7

<div id="navigation">
    <ul>
        <li>
             <a href="default.aspx">Home</a>
        </li>
        <li>
              <a href=
'/DALWalkthrough/Samples_Basic/BasicSamples.aspx'>Basic Data Samples</a>
        </li>
        <li>
             <a href=
'/DALWalkthrough/Samples_Advanced/AdvancedSamples.aspx'>Advanced Data Samples</a> 
        </li>
        <li>
             <a href='/DALWalkthrough/About.aspx'>About</a> 
        </li>
    </ul>
</div>

If I wanted to show the next level of hierarchy in the SiteMap as well, I could add another <asp:repeater> within the first one to also generate a sub-hierarchy of <ul><li><ul> elements.  For example:

Listing 8

<asp:Repeater ID="foo" DataSourceID="SiteMapDataSource1" runat="server" enableviewstate="false">
    <ItemTemplate>
        <li>
            <a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
            
            <ul>
                <asp:Repeater ID="bar" 
DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">
                    <ItemTemplate>
                        <li><a href='<%#Eval("url")%>'><%#Eval("Title")%></a></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
 
        </li>
    </ItemTemplate>
</asp:Repeater>

Note that VB allows me to write Container.DataItem.ChildNodes() as a direct data-bound expression.  In C# I would need to cast like so: ((SiteMapNode) Container.DataItem).ChildNodes()

This would then generate the below HTML markup:

Listing 9

<div id="navigation">
    <ul>
        <li><a href="default.aspx">Home</a></li>
        <li><a href='/DALWalkthrough/Samples_Basic/BasicSamples.aspx'>Basic DataSamples</a>
            <ul>
                <li><a href='/DALWalkthrough/Samples_Basic/Sample1.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough/Samples_Basic/Sample2.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough/Samples_Basic/Sample3.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough/Samples_Basic/Sample4.aspx'>Samples 1</a></li>
            </ul>
        </li>
        <li><a href='/DALWalkthrough/Samples_Advanced/AdvancedSamples.aspx'>Advanced Data Samples</a>
            <ul>
                <li><a href='/DALWalkthrough/Samples_Advanced/Sample1.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough/Samples_Advanced/Sample2.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough/Samples_Advanced/Sample3.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough/Samples_Advanced/Sample4.aspx'>Samples 1</a></li>
            </ul>
        </li>
        <li><a href='/DALWalkthrough/About.aspx'>About</a>
 
        </li> 
    </ul>
</div>

I can then use a standard CSS styling approach to customize the look and feel of this structure however I want.  Rachel Andrew has a great book that I use called “The CSS Anthology: 101 Essential Tips, Tricks & Hacks” that provides a really nice scenario based tutorial approach to using CSS.  I used a technique she came up with in chapter 4 to make the markup above look like this when I add some CSS to my StyleSheet.css file:

Figure 10

And now I have a nice looking menu for my site, data-bound to the Site Navigation system, which is in turn data-driven from my web.sitemap file.


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