Binding to SiteMapDataSource in ASP.NET using VB.NET

In this article you will learn about SiteMapDataSource control and how you can use this control to bind a Menu to a SiteMap.
  • 3504
 

Introduction

The SiteMapDataSource control is a Data source to the Site Map data that is stored by the Sitemap Providers that are configured by your site. The SiteMapDataSource enables web server controls that are not specifically site navigation controls such as Menu, Treeview and Dropdown List controls, to bind to hierarchical site map data. You can use these web server controls to Display a site map as a table of contents or to actively navigate a site. Alternatively you can use the SiteMapPath control, which is designed specifically as a site navigation control and therefore does not need an instance of the SiteMapDataSource control. A site map is also a way to present all folder and pages of the website. The site map information can appear in many forms. By default this control takes root's Web. sitemap file as the source file to display site map.
 
Some Important Properties of SiteMapDataSource control

  • SiteMapProvider:- Gets or sets the name of the site map provider. this information is written in web.config file.
  • StartingUrlNode:- Used to set the URL in the site map that will be considered as root.
  • ShowStartingNode:- True or False means whether to show Starting Node or not.
Getting started with SiteMapDataSource
  • Here we are taking an example that how you can bind a Menu control with SiteMapDataSource  control. To implement this Firstly create a new ASP.NET web application using visual studio 2010. Then add the menu and SiteMapDataSource control on web page's Design mode. Now you web page look like the below given page.

    BindSiteMap1.gif
     
  • The source mode of the above page is look like below.

    <%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
        CodeBehind="Default.aspx.vb" Inherits="Binding_menu_with_sitemap._Default" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <
    asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <asp:Menu
            id="Menu1"
            DataSourceID="srcSiteMap"
            Runat="server" />
        <asp:SiteMapDataSource
            id="srcSiteMap"
            Runat="server" />
    </asp:Content>
     
  • Now right click on your project in solution explorer and click add new item. On templates, select Site Map template and click add. Now double click on your SiteMap file and add below code to Web.sitemap file.

    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
      <siteMapNode
        url="Default.aspx"
        title="Home"
        description="The Home Page">
        <siteMapNode
          url="Products/Default.aspx"
          title="Our Products"
          description="Products that we offer">
          <siteMapNode
            url="Products/FirstProduct.aspx"
            title="First Product"
            description="The description of the First Product" />
          <siteMapNode
            url="Products/SecondProduct.aspx"
            title="Second Product"
            description="The description of the Second Product" />
        </siteMapNode>
        <
    siteMapNode
          url="Services/Default.aspx"
          title="Our Services"
          description="Services that we offer">
          <siteMapNode
            url="Services/FirstService.aspx"
            title="First Service"
            description="The description of the First Service"
            metaDescription="The first service" />
          <siteMapNode
            url="Services/SecondService.aspx"
            title="Second Service"
            description="The description of the Second Service" />
        </siteMapNode>
      </
    siteMapNode>
    </
    siteMap>
     
  • Now again right click on your project in solution explorer and click add new folder. Now your new folder is created give name Product to the folder. 
  • Again create a folder like above and give it to name Services. 
  • Now right click on your project's Product folder in solution explorer and click add new item. On templates, select web form template and give name FirstProduct.aspx to it and click add. Double click on FirstProduct web form and add below code.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FirstProduct.aspx.vb" Inherits="Binding_menu_with_sitemap.FirstProduct1" %>
    <!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></title>
    </head>
    <
    body>
        <form id="form1" runat="server">
        <div>
        <h1>Software</h1>
        <h1>Websites</h1>
        </div>
        </form>
    </body>
    </
    html>
     
  • Create one more web form in Product folder like above and give it to name SecondProduct.aspx and add below code to SecondProduct.aspx.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SecondProduct.aspx.vb" Inherits="Binding_menu_with_sitemap.SecondProduct" %>
    <!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></title>
    </head>
    <
    body>
        <form id="form1" runat="server">
        <div>
        <h1>VB.NET Softwares</h1>
        <h1>VB.NET Websites</h1>
        </div>
        </form>
    </body>
    </
    html>
     
  • Now like above also create two web form named FirstService.aspx and SecondService.aspx in Services folder and add below code in both forms.

    FirstService.aspx

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FirstService.aspx.vb" Inherits="Binding_menu_with_sitemap.FirstService" %>
    <!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></title>
    </head>
    <
    body>
        <form id="form1" runat="server">
        <div>
        <h1>Developement</h1>
        <h1>Design</h1>
        </div>
        </form>
    </body>
    </
    html>

    SecondService

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SecondService.aspx.vb" Inherits="Binding_menu_with_sitemap.SecondService" %>
    <!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></title>
    </head>
    <
    body>
        <form id="form1" runat="server">
        <div>
        <h1>Software Developement</h1>
        <h1>WebSites Design</h1>
        </div>
        </form>
    </body>
    </
    html>
     
  • Now build and run your application.
Output

BindSiteMap2.gif

BindSiteMap3.gif

  BindSiteMap4.gif


BindSiteMap5.gif

BindSiteMap8.gif

BindSiteMap7.gif

Summary

In this article you learned how you can use a SiteMapDataSource control in ASP.NET to bind a sitemap file to a Menu control.

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.