Edit XML Files Using ASP.NET TreeView Control
Published: 10 Aug 2009
Unedited - Community Contributed
The article will show how to edit an XML file using the ASP.NET TreeView control and the TextBox control. The article contains screen shots of the application and fully functional code. This application will be helpful for programmers who wish to implement administrative sections where the configurations of web applications are in XML files.
by Nishanth Nair
Average Rating: 
Views (Total / Last 10 Days): 42047/ 64


This article explains how to use the ASP.NET TreeView control to edit an XML file which resides on the same server. The origin of this article starts when there was a demand from the end users to create an Admin section to edit a configuration XML file for an internal ASP.NET application. The functionalities of the application were completely configurable and the configuration values were kept in this particular XML file. To edit this XML file, the admins had to login in to the server which hosted the application and edit the XML file using a text editor which was tedious.

After some research I developed a control panel for the application which uses TreeView Control and a TextBox control to edit the configuration XML File.

Application Functionality

Listing 1 – XML Editor View

Steps for editing XML File

Even though the functionality of the page is evident from the screenshot, the process of editing the XML file is described below.

The path of the XML file is provided in the XML File Path TextBox. (In the source code, the path ~/App_Data/Book.xml is hardcoded. This file is available in the same directory with the source code.)

Clicking the Load File button will load the TreeView Control with the XML file via an XmlDataSource object.

When the user clicks on a particular node of the TreeView Control, the InnerXML of the node is loaded in the TextBox on the right side.

Now the user can edit the XML as required.

Clicking on the Save Button will save the XML file.

Explanation of Source Code

Most of the source code is self explanatory, however let's dive into some details:


Listing 2 – TreeView Control

<asp:TreeView ID="xmlTreeView" runat="server"   
     <asp:TreeNodeBinding DataMember="Book" ValueField="Id" ImageUrl="~/Images/add.png" />
    <LeafNodeStyle ImageUrl="~/Images/leaf.png" />
    <RootNodeStyle ImageUrl="~/Images/add.png" />
    <ParentNodeStyle ImageUrl="~/Images/action_forward.gif" />

AutoGenerateDataBindings property of the TreeView is enabled. This tells the control to generate the tree node bindings automatically from the DataSource.

DataBindings Section defines how the fields of hierarchical data items are mapped to TreeNode properties. Here I have bound the Node "Book" using TreeNodeBinding. The ValueField is given as the "Id" attribute of the Book Node. This is very important as this ValueField is used to generate the DataPath of the SelectedNode and helps to uniquely identify each node.

You can also change the appearance of the Tree Node by providing Images to the ImageUrl property.

Other properties like LeafNodeStyle, RootNodeStyle, ParentNodeStyle etc are pretty self explanatory.

Code Behind(C#)

   protected void xmlTreeView_SelectedNodeChanged(object sender, EventArgs e)
        XmlDocument doc = new XmlDocument();
        XmlNode node = doc.SelectSingleNode(xmlTreeView.SelectedNode.DataPath);        
        txtEditXML.Text = node.InnerXml;
        Session["CurrentEditXpath"= xmlTreeView.SelectedNode.DataPath;

In the SelectedNodeChanged event, we load an XmlDocument using the same XML file and identify the node using the SelectedNode.DataPath property of the TreeView Control. The InnerXml is loaded to the Text box for editing. The DataPath is preserved in the Session state to use when the node is saved.


A restriction of this approach is that in the XML file, each node must be uniquely identifiable. Otherwise the Xpath approach won't work.

Source Code

[Download Source Code]

The source code is written using .NET 3.5 and Visual Studio 2008. There are no other dependencies. It can be easily downgraded to .NET 2.0.


This piece of code can be used for editing XML files which are used for configuration or storing data within an ASP.NET application without physically logging in to the server machine in which the application is hosted. The Default.aspx page in the source code can be easily added to an existing application to be used as an Edit Section for XML files, provided correct TreeNodeBinding is provided as per your XML file.

Happy Coding!!

User Comments

Title: Nice one   
Name: Kishor
Date: 2012-11-22 4:52:27 AM
Hi Nishanth Nair,
The article is very great.I am very thank full to you.I had search a lot but never got such a help.It is really great.
its really help one keep it up.....
Title: asd   
Name: asdas
Date: 2012-07-19 10:06:50 AM
Title: Nice and concise!   
Name: Antoine
Date: 2012-02-01 10:02:50 AM
Just the example I needed to get me going!
Title: tree view example   
Name: reddaiah
Date: 2011-12-05 1:34:56 PM
Respected sir,
am creating treeview in defafult.aspx page. am binding data in using on datavase
Title: Many Thanks   
Name: Alexander
Date: 2011-11-03 9:00:35 PM
Great Article!!
Title: Application in Windows   
Name: Sagar
Date: 2011-06-21 5:37:23 AM
Hi Nishanth Nair,
This is a very good article.
can we have the same application in windows?
Title: XML Webpad   
Name: David
Date: 2010-07-13 11:20:26 AM
XML Webpad - http://xmlwebpad.codeplex.com/
This is a framework that allows you to integrate and xml editor into your asp.net application
Title: add nodes   
Name: jayz
Date: 2010-06-01 4:08:27 AM
great article, it will be even better if it's able to add xml node easily thru ur code
Title: TreeView xml structure   
Name: Gopal Awaghate
Date: 2010-02-01 9:16:49 AM
Hi Nishanth Nair,
The article is very great.I am very thank full to you.I had search a lot but never got such a help.It is really great.
Title: Re:TreeView xml structure   
Name: Nishanth Nair(Author)
Date: 2010-01-08 12:23:41 PM

Moving nodes using the UI is not possible. While you are editing the nodes in the textbox on the rightside, if you move nodes from one place to another and save it, the tre view on the UI will reflect the same and will move the node to the new position.
Basically it shows the same position of the node in the XML document.
Title: TreeView xml structure   
Name: Chetan
Date: 2010-01-08 9:24:52 AM
Hi Nishanth,

The article is great! I had the question about the nodes moving up and down in the tree structure. if its possible like moving node bk102 to position 1 ans bk101 to position 2. Please let me know the answer ASAP. This is a great article, I love it..
Title: Re: Good example but need little change.   
Name: Nishanth Nair(Author)
Date: 2009-08-11 10:56:04 PM
Since we are editing the XML file, the file must be within the virtual directory. Otherwise the asp.net worker process will not have permission to edit files outside the virtual directory. In this example, the XML file is a data/config file of the web application which is inside the Virtual directory.

One thing you can do is to upload the XML file from the client, download it in a temp directory, edit it and then make it available for the user to download. Feel free to modify my code and implement in a more user friendly way!!
Title: Good example but need little change.   
Name: Nirdesh Puri
Date: 2009-08-11 6:11:59 PM
This is very good example. But its required little change. 1) It have to take files from outside the project.
2) It should be browse the files also and select.

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-12-02 11:31:18 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search