This controls will enable us to provide easy navigation features like Sitemap, bread crumbs for our site with a minimal effort. This article gives you an overview and usage of Navigation controls in ASP.Net 2.0.

SiteMap with Navigation Control:

A sitemap is nothing but displaying the whole structure of our website for easy navigation. Below you can find the sitemap of eBay site.

Creation:

Similarly to provide a Sitemap in a better and interactive way, we first need to create a XML file that has information about the hierarchy of web pages called sitemap file.

Steps:

1) Right click your solution and click add new item.

2) Select Sitemap file and click Add.

We should specify the navigation hierarchy of our WebPages in XML format in this file. For example, take a site that has a page structure like,

Home.aspx

       -Products.aspx

                     - Apparels.aspx

                     - Cosmetics.aspx

                     - Hardware.aspx

                     - software.aspx

       -Books.aspx

                    - Computers.aspx

                    - Sciencefiction.aspx

                    - Space.aspx

The SiteMap XML data for this hierarchy will be,

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

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="Default.aspx" title="Home"  description="Home">

    <siteMapNode url="Products.aspx" title="Products"  description="Products Sale">

        <siteMapNode url="Apparels.aspx" title="Apparels"  description="Dress" />

        <siteMapNode url="Cosmetics.aspx" title="Cosmetics"  description="Cosmetics" />

       <siteMapNode url="Hardware.aspx" title="Hardware"  description="Hardware" />

       <siteMapNode url="Software.aspx" title="Software"  description="Software" />

    </siteMapNode>

    <siteMapNode url="Books.aspx" title="Libraries"  description="Libraries">

      <siteMapNode url="Computers.aspx" title="Computers"  description="Computers" />

      <siteMapNode url="Sciencefiction.aspx" title="Sciencefiction"  description="Sciencefiction" />

      <siteMapNode url="Space.aspx" title="Space"  description="Space" />     

    </siteMapNode>

  </siteMapNode>

</siteMap>

To display the sitemap we can use either Tree view control or Menu control in ASP.Net 2.0.

Using TreeView:

1) Drag a treeview control into the form.

2) To bind the XML SiteMap file to treeview we can use “SiteMapDatasource” which is in “Data” tab of Visual Studio. Drag it to the webform.

3) Sitemap data source control will automatically detect the Sitemap file in the project and it will read the file without any configuration settings. We can set the start page of the SiteMap here by setting the page for “StartNodeUrl”.

<asp:SiteMapDataSource ID="smDS" runat="server" StartingNodeUrl="~/Default.aspx" />

4) Set the DataSourceID property of Treeview to SiteMapDatasource ID.

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="smDS">

 </asp:TreeView>

5) Run the Application. The output will be like,

Using Menu:

Drag a menu control and set its DataSourceID similar to what we did for TreeView Control.

<asp:Menu ID="mnSite" runat="server" DataSourceID="smDS">

 </asp:Menu>

The output will be like..