Binding a Menu Navigation Control to an XML sitemap file in ASP.NET 4.0

Download the menu Project Source

The following tutorial includes step by step instructions on how to bind a simple menu navigation control in ASP.NET 4.0 using visual web developer 2010 to an XML sitemap file.

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and their control panel, very easy to adapt to and their IT team is awesome!

1. Open Visual Web Developer 2010 and in the file menu select the new website option from the dropdown menu or on the start page.

2. When the new website dialogue box appears, select installed templates and select visual C# from the dropdown list to set the programing language.

3. Select (Empty ASP.NET) Website from the list in the center.  This will start your project without the default webpage.

4. In the Web location box, select the browse option and navigate to the folder location where you want to save the files to your project. 

- You can rename your file by deleting the default (…/website1) at the end of the file source and replacing it with a filename of your choice before saving.

5. Click OK and Visual Web developer will generate the project.

- Creating a navigation menu using a menu control will let you display an expandable navigation menu that lets users view a single level of nodes at a time as opposed to the TreeView control which is not collapsible.

- Before we create the pages to the Website we must first create a sitemap. A sitemap is generally an .xml file that contains the hierarchy of a website. Sitemaps are a way to describe how the pages in a website are laid out.  Each page is represented as a node.  The top node is a home page and each node following is a child node.

6. In the solution explorer, right click the website name and select Add New Item.

7. In the Add New Item Dialog box, select Site Map under the Visual Studio Installed Templates section and be sure the name of the file is web.sitemap. The file will not function properly if it is not given this name. Click Add.   

8. Copy and paste the following code into the source code into the new web.sitemap file overwriting the files default contents:

<siteMap>
  <siteMapNode title="Home" description="Home" url="~/home.aspx" >
    <siteMapNode title="Products" description="Our products"
         url="~/Products.aspx">
        <siteMapNode title="Hardware" 
             description="Hardware we offer" 
             url="~/Hardware.aspx" />
        <siteMapNode title="Software" 
             description="Software for sale" 
             url="~/Software.aspx" />
    siteMapNode>
    <siteMapNode title="Services" description="Services we offer" 
        url="~/Services.aspx">
        <siteMapNode title="Training" description="Training" 
            url="~/Training.aspx" />
        <siteMapNode title="Consulting" description="Consulting" 
            url="~/Consulting.aspx" />
        <siteMapNode title="Support" description="Support" 
            url="~/Support.aspx" />
      siteMapNode>
  siteMapNode>
siteMap>

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

- This code will create the sitemap for the website.  Note that there are nodes that are nested within three levels.

9. In the solution explorer, right click the name of the website and then click Add New Item from the dropdown list.

10. When the Add new item dialog box pops up, click the web form option.

11. In the name box, type Home and then click Add.

12. Switch to design view and type Home on the page, then switch back to the code and format the text as a heading 1. This will be so you can see the heading of the page displayed.

13. Repeat steps one through 4 to create 6 more pages: Products, Hardware, Software, Training, Consulting, Services and Support.

- Technically, you can name these pages anything, however be sure that the names match with the SiteMapNode titles or the navigation will not function. Now that we have the pages to the site created, we can start building the navigation menu using the menu control.

14. Open the Home.aspx page and switch to design view.

15. In the navigation group in the toolbox, click on the menu control and drag it to the page.

16. In the menu tasks menu, select the Choose data source box and click NewDataSource.

17. When the configure data source wizard opens select site map, and then click OK.

18. Repeat this step for the Products, Hardware, Software, Training, Consulting, and Support pages.

19. Save your changes to each page and then press CTRL+F5 to test the navigation in the browser.

- Notice that the file link in the browser changes every time you click on a link. 

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.