ASP.NET - Xml Viewer - Asked By Hamit YILDIRIM on 24-Mar-09 04:51 PM

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

Santhosh N replied to Hamit YILDIRIM on 24-Mar-09 10:56 PM
You can have an iframe embedded in one page and assign the source as this xml..
this is one way..
or else you can have a div and display this xml in that div...

check this link for more info..
http://blogs.msdn.com/kaevans/archive/2005/04/16/408813.aspx

Display XML files within HTML using javascript - Venkat K replied to Hamit YILDIRIM on 25-Mar-09 01:05 AM

The common usage of this script is documentation of some custom XML format when it's important to embed that XML into some WEB page

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.

var SourceCode ="
<" + '/' +"script> LoadXML('XMLHolder','test.xml'); <" + '/' +"script>"; function copy(text2copy) { // based on http://www.jeffothy.com/weblog/clipboard-copy/ if (window.clipboardData) { window.clipboardData.setData("Text",text2copy); } else { var flashcopier = 'flashcopier'; if(!document.getElementById(flashcopier)) { var divholder = document.createElement('div'); divholder.id = flashcopier; document.body.appendChild(divholder); } document.getElementById(flashcopier).innerHTML = ''; var divinfo = ''; document.getElementById(flashcopier).innerHTML = divinfo; } }

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

XML control - Sathish S replied to Hamit YILDIRIM on 25-Mar-09 01:35 AM

ok - Hamit YILDIRIM replied to Venkat K on 25-Mar-09 03:10 AM
thanks
TRY THIS EXAMPLE - C_A P replied to Hamit YILDIRIM on 25-Mar-09 05:47 AM

-<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>

 

 

 

TRY THIS - C_A P replied to Hamit YILDIRIM on 25-Mar-09 05:48 AM
<!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>
TRY THIS - C_A P replied to Hamit YILDIRIM on 25-Mar-09 05:49 AM
Reads an xml file using JavaScript from a web page. Files used: loadxml.js (main script), readxml.js (client script), and readxml.html. The code for loadxml.js was copied from the article http://www.devarticles.com/c/a/JavaScript/JavaScript-and-XML/ [devarticles.com]

file: loadxml.js
  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;
}
};


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

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


file: readxml.html
<!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>
Why didnt worked - Hamit YILDIRIM replied to C_A P on 25-Mar-09 06:59 PM

I try your code but it never work on

it has been doing something but result is nothing

Udayan replied to Hamit YILDIRIM on 02-Jul-10 01:24 PM

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).

Hamit YILDIRIM replied to Udayan on 02-Jul-10 08:41 PM

Hi Udayan,


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



Thanks again..