.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
david stephan
Gaurav Pal

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Loading XML data to HTML table using XML DSO object and JavaScript

Posted By:Dilip       Posted Date: April 04, 2010    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  

This article illustrates the process of fetching data from an XML file to be filled in an HTML table, using DSO and JavaScript

I found this article in code project. May be most of you know about it, but I came to know recently. Its an easy way to load an xml in html without much of hassle.


This article illustrates the process of fetching data from an XML file to be filled in an HTML table, using DSO and JavaScript.


DSO is an object that operates like a database on the client side. It will accept information that is organized in a certain way and will manipulate it with its own database engine. Like any object it has an interface with its own properties and methods, and you can manipulate the data stored in the object using these methods. The default behavior of XML DSO is to validate the document and to resolve external entities as the XML document is loaded.

Loading external files

The simple HTML code creates an XML DSO with a DOM object and loads it with the file equip.xml. At the same time this file is loaded, equip.xml is validated and all the external entities are expanded. The async="false" attribute is added to make sure all the XML data is loaded before any other HTML processing takes place.

XML File Format

Hard Disk 2800 SeaGate
Motherboard 10000 Intel
Monitor 8000 Samsung
Rajadurai Tuticorin Tamilnad

DSO allows data binding to HTML table elements. When a table element is bound there is no need to write out the code for individual rows for each record in the recordset. The DSO will automatically do this for each record.

To bind the XML data to an HTML table, add a datasrc attribute to the table element, and add the datafld attribute to the span elements inside the table data.

Here name, rate and manufacturer are used to bind the data to the HTML element. We can bind to the input textboxes and all other elements in the same way:

Equipment Details
name city state
Using JavaScript to load the XML file data to the HTML file using DSO

First we create a new DSO via code:

Next we make a DOM object. This is done using the XMLDocument property of the DSO.

var doc=nb_equip.XMLDocument;

Once a DOM object has been created use the load method of the DOM object to load a file:


The following JavaScript function is used to load the XML file to DSO objects. When the user calls this function it will load the XML file and bind the data to the HTML table based on datasrc and datafld attributes:

//Following function is used to load the "equip.xml" file..
 function ld_equip()
    var doc=nb_equip.XMLDocument;
                                  "Equipment Details "; 
 //Following function is used to load the "details.xml" file..
 function ld_eng()
    var doc_s=ds_staff.XMLDocument;
                                      "Staff Details "; 
The complete source code is given below:

      DSO Explanation
Engineer Details
name city state

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply

    Read also another Resources from the same Author

Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend