ASP.NET - Xml Viewer

You have a xml file like below;

<catalog>
   <product description="Cardigan Sweater" product_image="cardigan.jpg">
      <catalog_item gender="Men's">
         <item_number>QWZ5671</item_number>
         <price>39.95</price>
         <size description="Medium">
            <color_swatch image="red_cardigan.jpg">Red</color_swatch>
            <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
         </size>
         <size description="Large">
            <color_swatch image="red_cardigan.jpg">Red</color_swatch>
            <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
         </size>
      </catalog_item>
      <catalog_item gender="Women's">
         <item_number>RRX9856</item_number>
         <price>42.50</price>
         <size description="Small">
            <color_swatch image="red_cardigan.jpg">Red</color_swatch>
            <color_swatch image="navy_cardigan.jpg">Navy</color_swatch>
            <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
         </size>
         <size description="Medium">
            <color_swatch image="red_cardigan.jpg">Red</color_swatch>
            <color_swatch image="navy_cardigan.jpg">Navy</color_swatch>
            <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
            <color_swatch image="black_cardigan.jpg">Black</color_swatch>
         </size>
         <size description="Large">
            <color_swatch image="navy_cardigan.jpg">Navy</color_swatch>
            <color_swatch image="black_cardigan.jpg">Black</color_swatch>
         </size>
         <size description="Extra Large">
            <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
            <color_swatch image="black_cardigan.jpg">Black</color_swatch>
         </size>
      </catalog_item>
   </product>
</catalog>

now; you double click this file it will showing in the Browser like a tree

I want to show this file like in the browser but instade in a control

With the following code, tracking and inspecting XML files or just their transmission to client and representation is as simple as linking your HTML to one JS and one CSS files! Just copy-paste four lines of code. Then, some section within your HTML page can automatically display arbitrary XML (be that fixed string, file or server response) and dynamically update it at any time.

<div id="XMLHolder"> </div>
<LINK href="XMLDisplay.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="XMLDisplay.js"> </script>
<script> LoadXML('XMLHolder','test.xml');</script>

The only things you may want to change are the pathes to the css and the js files and the name of the xml file in the call to the LoadXML method. Enjoy.

If you use this script for debugging AJAX application, you may manually call LoadXML, LoadXMLDom or LoadXMLString functions. As first parameter, each of them receives ID of the HTML element (usually, div) intended to contain the displayed XML. Alternatively, you may send the HTML element DOM object itself, not its ID.
The second parameter differs depending on the function: LoadXML receives request to the server which will be executed asynchronously. LoadXMLDom receives DOM object containing arbitrary XML. Finally, LoadXMLString receives the string of the XML to be displayed.
Each of these functions returns true if they were successfully executed

http://www.eggheadcafe.com/community/aspnet/7/10022259/the-xml-control-is-used-t.aspx

http://support.microsoft.com/kb/315906

-<catalog>

+<product description="Cardigan Sweater" product_image="cardigan.jpg"> </product>

-<product description="Cardigan Sweater" product_image="cardigan.jpg">

+<catalog_item gender="Men's"> </catalog_item>

-<catalog_item gender="Men's">

+<item_number> </item_number>

-<item_number>

QWZ5671

</item_number>

+<price> </price>

-<price>

39.95

</price>

+<size description="Medium"> </size>

-<size description="Medium">

+<color_swatch image="red_cardigan.jpg"> </color_swatch>

-<color_swatch image="red_cardigan.jpg">

Red

</color_swatch>

+<color_swatch image="burgundy_cardigan.jpg"> </color_swatch>

-<color_swatch image="burgundy_cardigan.jpg">

Burgundy

</color_swatch>

</size>

+<size description="Large"> </size>

-<size description="Large">

+<color_swatch image="red_cardigan.jpg"> </color_swatch>

-<color_swatch image="red_cardigan.jpg">

Red

</color_swatch>

+<color_swatch image="burgundy_cardigan.jpg"> </color_swatch>

-<color_swatch image="burgundy_cardigan.jpg">

Burgundy

</color_swatch>

</size>

</catalog_item>

+<catalog_item gender="Women's"> </catalog_item>

-<catalog_item gender="Women's">

+<item_number> </item_number>

-<item_number>

RRX9856

</item_number>

+<price> </price>

-<price>

42.50

</price>

+<size description="Large"> </size>

-<size description="Large">

+<color_swatch image="navy_cardigan.jpg"> </color_swatch>

-<color_swatch image="navy_cardigan.jpg">

Navy

</color_swatch>

+<color_swatch image="black_cardigan.jpg"> </color_swatch>

-<color_swatch image="black_cardigan.jpg">

Black

</color_swatch>

</size>

</catalog_item>

</product>

</catalog>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing 1 2</title>
    <script language="javascript">
			function TransF() 
				{
			       // create and load the XML document
			       var oXML = new ActiveXObject("Msxml2.DOMDocument");
			       oXML.async = false;
			       oXML.load("Dow_Stocks_Data.xml");
			       // create and load the XSL document
			       var oXSL = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
			       oXSL.async = false;
			       oXSL.load("Dow-Stocks.xsl");
			       // create the template processor
			       var oTmpl = new ActiveXObject("Msxml2.XSLTemplate");
         		 oTmpl.stylesheet = oXSL;
		         oProc = oTmpl.createProcessor();
		         oProc.input = oXML;
		         // make the transform
						 oProc.transform();
         		 var resHTM = oProc.output;
         		 // write the transformation result as the inner HTML of the div
         		 document.getElementById("RB").innerHTML = resHTM;
        }
		</script>
</head>
 
<body>
	<div>
		<button type="SUBMIT" name="Button1" value="Button1" onclick="TransF();">
			<img src= "button.gif"/>
		</button>
	</div>
	<div>
		<div id="RB"></div>
	<div>
</body>
</html>

  XML.load = function(url) {
    var xmldoc = XML.newDocument();
    xmldoc.async = false;  
    xmldoc.load(url);
    return xmldoc;  
  };


XML.newDocument = function(rootTagName, namespaceURL) {
    if (!rootTagName) rootTagName = "";
    if (!namespaceURL) namespaceURL = "";

    if (document.implementation && document.implementation.createDocument) {
        // This is the W3C standard way to do it
        return document.implementation.createDocument(namespaceURL, 
                       rootTagName, null);
    }
    else { // This is the IE way to do it
        // Create an empty document as an ActiveX object
        // If there is no root element, this is all we have to do
        var doc = new ActiveXObject("MSXML2.DOMDocument");

        // If there is a root tag, initialize the document
        if (rootTagName) {
            // Look for a namespace prefix
            var prefix = "";
            var tagname = rootTagName;
            var p = rootTagName.indexOf(':');
            if (p != -1) {
                prefix = rootTagName.substring(0, p);
                tagname = rootTagName.substring(p+1);
            }

            // If we have a namespace, we must have a namespace prefix
            // If we don't have a namespace, we discard any prefix
            if (namespaceURL) {
                if (!prefix) prefix = "a0"; // What Firefox uses
            }
            else prefix = "";

            // Create the root element (with optional namespace) as a
            // string of text
            var text = "<" + (prefix?(prefix+":"):"") + tagname +
                (namespaceURL
                 ?(" xmlns:" + prefix + '="' + namespaceURL +'"')
                 :"") +
                "/>";
            // And parse that text into the empty document
            doc.loadXML(text);
        }
        return doc;
    }
}; 

function readXmlFile() {
  url = 'http://rorbuilder.info/pl/test123';

  doc = XML.load(url);
  alert(doc.documentElement.firstChild.nextSibling.firstChild.nodeValue);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Read an XML file</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="js/loadxml.js"/>
    <script type="text/javascript" src="js/readxml.js"/>
  </head>

  <body>
    <h1>ReadXML</h1>
    <p>
       If all goes well you should see an alert box display the message 'testing 123'
   </p>
    <p>Press the 'go' button to read the xml file '<a href="test123">test123</a>' 
       from the web server. 
       <input type="button" onclick="readXmlFile()" value="go"/>
    </p>

    
  </body>
</html>

I try your code but it never work on

it has been doing something but result is nothing

Have you tried http://xmlwebpad.codeplex.com/ [http://xmlwebpad.codeplex.com/] - 

It is a open source effort to display and edit XML files residing on server in a web based environment (i.e. in a browser).

Hi Udayan,

Thak you for the share .. I have always worte a special library like yours in last year :)

Thanks again..