News
IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. ***
  Feb 15 2016 8:25AM     Michael Ryan
  0 Comments    901 Views  
Here Michael Ryan provided a short tutorial with example, about Tree View in Asp.Net C# programming.
Tree View:
The topics in this The topics in this section describe how to work with the ASP.NET TreeView Web control to display hierarchical data (such as a table of contents) in a tree structure in a Web page. 

The TreeView control is made up of TreeNode objects. The TreeView control can be bound to data.
STEP: 1
Open Visual Studio and Create New application.
STEP: 2
Create a page TreeView.aspx.

STEP: 3

Include Web.Sitemap in your project.

Right Click the Project -> Select Add --> Click New Item ->> In the Add New Item PopUp window Select Web.Sitemap and Click OK.


STEP: 4

Include the Script file in design page.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

STEP: 5

HTML Code:
Copy the HTML code and paste it in your design page.
<!!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>Tree View</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeView1" runat="server" CssClass="TreeView" DataSourceID="SiteMapDataSource1">
        </asp:TreeView>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    </div>
    </form>
</body>
</html>

STEP: 6

CSS:

Copy the CSS code and paste it in your design page.
<style type="text/css">
        .TreeView
        {
            color: #333;
            font-family: sans-serif;
            font-size: 14px;
        }

        
        .TreeView a,span
        {
            color: #000;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
        }

        
        .TreeView a:hover
        {
            color: #81B411;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
        }

        
       
        .TreeView span:hover
        {
            color: #81B411;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
        }

    </style>


STEP: 7

Create the Sitemap view in web.sitemap.

web.Sitemap Code:

Copy the Xml code and paste it in your web.sitemap file.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="" title="The Developer Tips"  description="My Favorites">
    <siteMapNode title=".Net/ C#/ VB">      
      <siteMapNode title="C# Tutorial" description="C# Tutorial" url="http://www.thedevelopertips.com/DotNet/CSharpTutorial/CSharpTutorial.aspx" />

    <siteMapNode title="JavaScript" description="JavaScript">
      <siteMapNode title="JavaScript" description="JavaScript" url="http://www.thedevelopertips.com/JavaScript/JS/JavaScript.aspx" />
      <siteMapNode title="Ajax" description="Ajax" url="http://www.thedevelopertips.com/JavaScript/Ajax/Ajax.aspx" />      
    </siteMapNode>

    <siteMapNode title="jQuery" description="jQuery">
      <siteMapNode title="jQuery" description="jQuery" url="http://www.thedevelopertips.com/JQuery/JQuery/JQuery.aspx" />
      <siteMapNode title="Ajax" description="Ajax" url="http://www.thedevelopertips.com/JQuery/Ajax/Ajax.aspx" />
    </siteMapNode>

    <siteMapNode title="CSS" description="CSS" url="http://www.thedevelopertips.com/CSS/CSS.aspx">     
    </siteMapNode>

    <siteMapNode title="HTML5" description="HTML5" url="http://www.thedevelopertips.com/HTML/HTML.aspx">
    </siteMapNode>   
            
  </siteMapNode>
</siteMap>


STEP : 8

Execute the application.

Result:




I hope this page will helps to learn about Tree view in ASP.Net C#. Thanks.


BackToTop
Comments



 
Search
1&1 Hosting
Recent Posts
Bind Gridview from CSV file in Asp.Net C#
Jun 18 2016 11:38PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Feb 27 2016 11:51AM Posted By John
Gridview custom CSS in ASP.Net
Feb 25 2016 10:59AM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Feb 25 2016 10:20AM Posted By Micheal
Read excel file and convert to List in C#
Feb 25 2016 6:26AM Posted By Michael
Encryption and Decryption for Password in C#
Feb 17 2016 3:52AM Posted By Michael
How to create Chart in ASP.Net C#
Feb 16 2016 8:03AM Posted By Michael Ryan
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: