Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to Bind TreeView Control to SiteMap and XML files in ASP.NET

Author: Nikki Smith
Download Source Code : 1292_TreeViewControl.zip

In this article, I will show how you can bind a TreeView to SiteMap file and XML file by using SiteMapDataSource and XMLDataSource.

 
 
TreeView is an excellent control to show hierarchical data. It consist parent nodes and child nodes to show data with multiple levels. TreeView Control can be bound to SiteMapDataSource or XMLDataSource or we can programmatically create parent nodes and child nodes. Furthermore TreeView control has the ability to expand and collapse child nodes in parent nodes.

Source Code is available at the top. You can download it.

 

  1. Create a new Empty Web Site in Visual Studio 2010 either in Visual Basic or Visual C#.
  2. Add three Web Forms in the Web Site. No Need to change names of the Pages.
  3. Add a Site Map file in the Web Site with the name as Web.sitemap
  4. Add a XML file in the Web Site with the name as XMLFile.xml
  5. Open Web.sitemap and write code below

    <?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="">
            <siteMapNode title="Registered Users" description="" >
                  <siteMapNode url="Default2.aspx" title="Login" description="" />
                  </siteMapNode>
                  <siteMapNode title="Unregistered Users" description="" >
                  <siteMapNode url="Default3.aspx" title="Register" description="" />
                  </siteMapNode>
        </siteMapNode>
    </siteMap>

     
    Here we have a parent siteMapNode as “Home” then we have two child siteMapNodes and these Child nodes have their own child nodes with url attribute.
     
  6. Open Default.aspx page and Drag and drop a TreeView and SiteMapDataSource. Configure SiteMapDataSource from little arrow at the top and choose SiteMapDataSource for TreeView. Source Code in Default.aspx page will be like below.

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

     
  7. You can view website in browser or continue for XMLDataSource binding
  8. Open XMLFile.xml and write code below

    <?xml version="1.0" encoding="utf-8" ?>
    <Home>
           <RegisteredUser>
                  <Title>Login</Title>
           </RegisteredUser>
           <UnregisteredUser>
                  <Title>Register</Title>
           </UnregisteredUser>
    </Home>


    See, here we have a parent tag with two child tags and child tags have their own child tags as well.
     
  9. Open Default.aspx page again and this time drag and drop an XMLDataSource and a TreeView in the page. Write code below in Default.aspx page.

    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/XMLFile.xml">
       
    </asp:XmlDataSource>
       
    <br />
       
    <asp:TreeView ID="TreeView2" runat="server" DataSourceID="XmlDataSource1">
       
        <DataBindings>
       
            <asp:TreeNodeBinding DataMember="Title" TextField="#InnerText"/>
       
        </DataBindings>
       
    </asp:TreeView>


    In TreeView, we are getting the Inner Text of the Title tag written in XML file.
     
  10. Now you can view Web Site in browser and see data in two TreeView controls from different data sources. 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Programmatically bind data to GridView using server controls in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net