Using TreeView for navigating with Master Pages in C#

Categories

Advanced Technologies

User Interface and Themes

Navigator: Home - Tutorials - Website Navigation - Using TreeView for navigating with Master Pages in C#

Using TreeView for navigating with Master Pages in C#

ASP.NET Website Navigation Tutorial

This tutorial shows how to implement TreeView navigation system, which is very powerful yet easy to employ. C# version.

Especially for the larger sites, navigation can get a little messy at times. Fortunately, Visual Studio makes it easier for us to manage navigation and also construct a hierarchical navigation system that lets users transition freely between pages, especially when it comes to making changes to the web site.

Create an XML file containing the site hierarchy, page titles and URLs.
Web.sitemap:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>

<siteMapNode title="Links" description="Links to Other Sites"

url="~/Links.aspx">

<siteMapNode title="Links 1"

description="Links to sites 1" url="~/Links1.aspx" />

<siteMapNode title="Links 2"

description="Links to sites 2" url="~/Links2.aspx" />

</siteMapNode>
<siteMapNode title="Games" description="Games you can play"

url="~/Games.aspx">

<siteMapNode title="Game 1" description="Game number 1"

url="~/Game1.aspx" />

<siteMapNode title="Game 2" description="Game number 2"

url="~/Game2.aspx" />

<siteMapNode title="Game 3" description="Game number 3"

url="~/Game3.aspx" />

</siteMapNode>

</siteMap>

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

Add a SiteMapDataSource onto your Master Page. Default configuration is set to retrieve the data from Web.sitemap
Also add a TreeView control onto your Master Page, choosing the Data Source of the Site Map. To also add further navigation on each page, which displays where the current page is in the hierarcy, you can add a SiteMapPath control. Again, by default, the SiteMapPath uses the Web.sitemap file for its hierarchy data.

To add an expandable menu system onto the page also, add the Menu control and choose the Data Source.
The Master Page should look something like this:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Navigation.master.cs" Inherits="Navigation" %>

<!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>Untitled Page</title>

</head>
<body>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

<tr>

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:TreeView>
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>

</td>
<td style="width: 100px">

<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>

</td>

</tr>

</table>

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>

</div>
</form>

</body>
</html>

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

All content pages should have the ContentPlaceHolders for the Master Page, and look something like this:

<%@ Page Language="C#" MasterPageFile="~/Navigation.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" Title="Untitled Page" %>

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

</asp:Content>

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!

100% SPAM FREE! We will never sell or rent your email address!


Developer Resources