Displaying XML just like Internet Explorer

This is everything you need to display XML in your webpage the same way IE displays it when you open an XML document in IE.

Html

Register the js and place a literal where you'd like the XML to appear. 

<script src="XMLControl.js" type="text/javascript"></script>

<asp:Literal runat="server" ID="MessageLiteral" />

Code Behind

Some dummy XML for this example 

String TransactionXML = "<xml><node></node></xml>";

The following applies an XSLt to your xml 

XmlDocument xmlDoc = new XmlDocument();
System.IO.Stream xmlStream;
System.Xml.Xsl.XslCompiledTransform xsl = new System.Xml.Xsl.XslCompiledTransform();
ASCIIEncoding enc = new ASCIIEncoding();
System.IO.StringWriter writer = new System.IO.StringWriter();

// Get Xsl
xsl.Load(HttpContext.Current.Server.MapPath("defaultss.xslt"));

// Remove the utf encoding as it causes problems with the XPathDocument
TransactionXML = TransactionXML.Replace("utf-32", "");
TransactionXML = TransactionXML.Replace("utf-16", "");
TransactionXML = TransactionXML.Replace("utf-8", "");
xmlDoc.LoadXml(TransactionXML);

// Get the bytes
xmlStream = new System.IO.MemoryStream(enc.GetBytes(xmlDoc.OuterXml), true);

            // Load Xpath document
            System.Xml.XPath.XPathDocument xp = new System.Xml.XPath.XPathDocument(xmlStream);

            // Perform Transform
            xsl.Transform(xp, null, writer);
            this.TransactionHTML = writer.ToString();

XSLt

The XSLt required for the transformation 

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output indent="no" method="html"/>

   <xsl:template match="/">

         <div class="st">
            <xsl:apply-templates/>
         </div>
   </xsl:template>

   <xsl:template match="processing-instruction()">
      <DIV class="e">
         <SPAN class="b">
            <xsl:call-template name="entity-ref">
               <xsl:with-param name="name">nbsp</xsl:with-param>
            </xsl:call-template>
         </SPAN>
         <SPAN class="m">
            <xsl:text>&lt;?</xsl:text>
         </SPAN>
         <SPAN class="pi">
            <xsl:value-of select="name(.)"/>
            <xsl:value-of select="."/>
         </SPAN>
         <SPAN class="m">
            <xsl:text>?></xsl:text>
         </SPAN>
      </DIV>
   </xsl:template>

   <xsl:template match="processing-instruction('xml')">
      <DIV class="e">
         <SPAN class="b">
            <xsl:call-template name="entity-ref">
               <xsl:with-param name="name">nbsp</xsl:with-param>
            </xsl:call-template>
         </SPAN>
         <SPAN class="m">
            <xsl:text>&lt;?</xsl:text>
         </SPAN>
         <SPAN class="pi">
            <xsl:text>xml </xsl:text>
            <xsl:for-each select="@*">
               <xsl:value-of select="name(.)"/>
               <xsl:text>="</xsl:text>
               <xsl:value-of select="."/>
               <xsl:text>" </xsl:text>
            </xsl:for-each>
         </SPAN>
         <SPAN class="m">
            <xsl:text>?></xsl:text>
         </SPAN>
      </DIV>
   </xsl:template>

   <xsl:template match="@*">
      <SPAN>
         <xsl:attribute name="class">
            <xsl:if test="xsl:*/@*">
              <xsl:text>x</xsl:text>
            </xsl:if>
            <xsl:text>t</xsl:text>
         </xsl:attribute>
         <xsl:value-of select="name(.)"/>
      </SPAN>
      <SPAN class="m">="</SPAN>
      <B>
         <xsl:value-of select="."/>
      </B>
      <SPAN class="m">"</SPAN>
   </xsl:template>

   <xsl:template match="text()">
      <DIV class="e">
         <SPAN class="b"> </SPAN>
         <SPAN class="tx">
            <xsl:value-of select="."/>
         </SPAN>
      </DIV>
   </xsl:template>

   <xsl:template match="comment()">
      <DIV class="k">
         <SPAN>
            <A STYLE="visibility:hidden" class="b" onclick="return false" 
               onfocus="h()">-</A>
            <SPAN class="m">
               <xsl:text>&lt;!--</xsl:text>
            </SPAN>
         </SPAN>
         <SPAN class="ci" id="clean">
            <PRE>
               <xsl:value-of select="."/>
            </PRE>
         </SPAN>
         <SPAN class="b">
            <xsl:call-template name="entity-ref">
               <xsl:with-param name="name">nbsp</xsl:with-param>
            </xsl:call-template>
         </SPAN>
         <SPAN class="m">
            <xsl:text>--></xsl:text>
         </SPAN>
         <SCRIPT>f(clean);</SCRIPT>
      </DIV>
   </xsl:template>

   <xsl:template match="*">
      <DIV class="e">
         <DIV STYLE="margin-left:1em;text-indent:-2em">
            <SPAN class="b">
               <xsl:call-template name="entity-ref">
                  <xsl:with-param name="name">nbsp</xsl:with-param>
               </xsl:call-template>
            </SPAN>
            <SPAN class="m">&lt;</SPAN>
            <SPAN>
               <xsl:attribute name="class">
                  <xsl:if test="xsl:*">
                     <xsl:text>x</xsl:text>
                  </xsl:if>
                  <xsl:text>t</xsl:text>
               </xsl:attribute>
               <xsl:value-of select="name(.)"/>
               <xsl:if test="@*">
                  <xsl:text> </xsl:text>
               </xsl:if>
            </SPAN>
            <xsl:apply-templates select="@*"/>
            <SPAN class="m">
               <xsl:text>/></xsl:text>
            </SPAN>
         </DIV>
      </DIV>
   </xsl:template>

   <xsl:template match="*[node()]">
      <DIV class="e">
         <DIV class="c">
            <A class="b" href="#" onclick="return false" onfocus="h()">-</A>
            <SPAN class="m">&lt;</SPAN>
            <SPAN>
               <xsl:attribute name="class">
                  <xsl:if test="xsl:*">
                     <xsl:text>x</xsl:text>
                  </xsl:if>
                  <xsl:text>t</xsl:text>
               </xsl:attribute>
               <xsl:value-of select="name(.)"/>
               <xsl:if test="@*">
                  <xsl:text> </xsl:text>
               </xsl:if>
            </SPAN>
            <xsl:apply-templates select="@*"/>
            <SPAN class="m">
               <xsl:text>></xsl:text>
            </SPAN>
         </DIV>
         <DIV>
            <xsl:apply-templates/>
            <DIV>
               <SPAN class="b">
                  <xsl:call-template name="entity-ref">
                     <xsl:with-param name="name">nbsp</xsl:with-param>
                  </xsl:call-template>
               </SPAN>
               <SPAN class="m">
                  <xsl:text>&lt;/</xsl:text>
               </SPAN>
               <SPAN>
                  <xsl:attribute name="class">
                     <xsl:if test="xsl:*">
                        <xsl:text>x</xsl:text>
                     </xsl:if>
                     <xsl:text>t</xsl:text>
                  </xsl:attribute>
                  <xsl:value-of select="name(.)"/>
               </SPAN>
               <SPAN class="m">
                  <xsl:text>></xsl:text>
               </SPAN>
            </DIV>
         </DIV>
      </DIV>
   </xsl:template>

   <xsl:template match="*[text() and not (comment() or processing-instruction())]">
      <DIV class="e">
         <DIV STYLE="margin-left:1em;text-indent:-2em">
            <SPAN class="b">
               <xsl:call-template name="entity-ref">
                  <xsl:with-param name="name">nbsp</xsl:with-param>
               </xsl:call-template>
            </SPAN>
            <SPAN class="m">
               <xsl:text>&lt;</xsl:text>
            </SPAN>
            <SPAN>
               <xsl:attribute name="class">
                  <xsl:if test="xsl:*">
                     <xsl:text>x</xsl:text>
                  </xsl:if>
                  <xsl:text>t</xsl:text>
               </xsl:attribute>
               <xsl:value-of select="name(.)"/>
               <xsl:if test="@*">
                  <xsl:text> </xsl:text>
               </xsl:if>
            </SPAN>
            <xsl:apply-templates select="@*"/>
            <SPAN class="m">
               <xsl:text>></xsl:text>
            </SPAN>
            <SPAN class="tx">
               <xsl:value-of select="."/>
            </SPAN>
            <SPAN class="m">&lt;/</SPAN>
            <SPAN>
               <xsl:attribute name="class">
                  <xsl:if test="xsl:*">
                     <xsl:text>x</xsl:text>
                  </xsl:if>
                  <xsl:text>t</xsl:text>
               </xsl:attribute>
               <xsl:value-of select="name(.)"/>
            </SPAN>
            <SPAN class="m">
               <xsl:text>></xsl:text>
            </SPAN>
         </DIV>
      </DIV>
   </xsl:template>

   <xsl:template match="*[*]" priority="20">
      <DIV class="e">
         <DIV STYLE="margin-left:1em;text-indent:-2em" class="c">
            <A class="b" href="#" onclick="return false" onfocus="h()">-</A>
            <SPAN class="m">&lt;</SPAN>
            <SPAN>
               <xsl:attribute name="class">
                  <xsl:if test="xsl:*">
                     <xsl:text>x</xsl:text>
                  </xsl:if>
                  <xsl:text>t</xsl:text>
               </xsl:attribute>
               <xsl:value-of select="name(.)"/>
               <xsl:if test="@*">
                  <xsl:text> </xsl:text>
               </xsl:if>
            </SPAN>
            <xsl:apply-templates select="@*"/>
            <SPAN class="m">
               <xsl:text>></xsl:text>
            </SPAN>
         </DIV>
         <DIV>
            <xsl:apply-templates/>
            <DIV>
               <SPAN class="b">
                  <xsl:call-template name="entity-ref">
                     <xsl:with-param name="name">nbsp</xsl:with-param>
                  </xsl:call-template>
               </SPAN>
               <SPAN class="m">
                  <xsl:text>&lt;/</xsl:text>
               </SPAN>
               <SPAN>
                  <xsl:attribute name="class">
                     <xsl:if test="xsl:*">
                        <xsl:text>x</xsl:text>
                     </xsl:if>
                     <xsl:text>t</xsl:text>
                  </xsl:attribute>
                  <xsl:value-of select="name(.)"/>
               </SPAN>
               <SPAN class="m">
                  <xsl:text>></xsl:text>
               </SPAN>
            </DIV>
         </DIV>
      </DIV>
   </xsl:template>

   <xsl:template name="entity-ref">
      <xsl:param name="name"/>
      <xsl:text disable-output-escaping="yes">&amp;</xsl:text>
      <xsl:value-of select="$name"/>
      <xsl:text>;</xsl:text>
   </xsl:template>

</xsl:stylesheet>

CSS 

.st 
{
    line-height:20px;    
}
.c  {cursor:hand}
.b  {color:red; font-family:'Courier New'; font-weight:bold;
     text-decoration:none}
.e  {margin-left:1em; text-indent:-1em; margin-right:1em}
.k  {margin-left:1em; text-indent:-1em; margin-right:1em}
.t  {color:#990000}
.xt {color:#990099}
.ns {color:red}
.dt {color:green}
.m  {color:blue}
.tx {font-weight:bold}
.db {text-indent:0px; margin-left:1em; margin-top:0px;
     margin-bottom:0px;padding-left:.3em;
     border-left:1px solid #CCCCCC; font:small Courier}
.di {font:small Courier}
.d  {color:blue}
.pi {color:blue}
.cb {text-indent:0px; margin-left:1em; margin-top:0px;
     margin-bottom:0px;padding-left:.3em; font:small Courier;
     color:#888888}
.ci {font:small Courier; color:#888888}
PRE {margin:0px; display:inline}

JS

The JavaScript required to expand and collapse the XML document nodes. 

// JScript File

function f(e){
 if (e.className=="ci") {
   if (e.children(0).innerText.indexOf("\n")>0) fix(e,"cb");
 }
 if (e.className=="di") {
   if (e.children(0).innerText.indexOf("\n")>0) fix(e,"db");
 } e.id="";
}
function fix(e,cl){
e.className=cl;
e.style.display="block";
j=e.parentElement.children(0);
j.className="c";
k=j.children(0);
k.style.visibility="visible";
k.href="#";
}
function ch(e) {
mark=e.children(0).children(0);
if (mark.innerText=="+") {
  mark.innerText="-";
  for (var i=1;i<e.children.length;i++) {
    e.children(i).style.display="block";
  }
}
else if (mark.innerText=="-") {
  mark.innerText="+";
  for (var i=1;i<e.children.length;i++) {
    e.children(i).style.display="none";
  }
}
}
function ch2(e) {
mark=e.children(0).children(0);
contents=e.children(1);
if (mark.innerText=="+") {
  mark.innerText="-";
  if (contents.className=="db"||contents.className=="cb") {
    contents.style.display="block";
  }
  else {
    contents.style.display="inline";
  }
}
else if (mark.innerText=="-") {
  mark.innerText="+";
  contents.style.display="none";
}
}
function cl() {
e=window.event.srcElement;
if (e.className!="c") {
  e=e.parentElement;
  if (e.className!="c") {
    return;
  }
}
e=e.parentElement;
if (e.className=="e") {
  ch(e);
}
if (e.className=="k") {
  ch2(e);
}
}
function ex(){}
function h(){window.status=" ";}
document.onclick=cl;
Author Paul Hayman

Paul is the COO of kwiboo ltd and has more than 20 years IT consultancy experience. He has consulted for a number of blue chip companies and has been exposed to the folowing sectors: Utilities, Telecommunications, Insurance, Media, Investment Banking, Leisure, Legal, CRM, Pharmaceuticals, Interactive Gaming, Mobile Communications, Online Services.

Paul is the COO and co-founder of kwiboo (http://www.kwiboo.com/) and is also the creator of GeekZilla.

Comments

Russell said:

Do you have an XSL/JS that will work in all browsers please? This contains errors in FF (3.5)

18/Feb/2010 04:14 AM

pmg said:

This is what I did to make the js work cross browser:

// JScript File

function f{

 if (e.className=="ci") {
   if (e.childNodes[0].innerText.indexOf("\n")>0) fix(e,"cb");
 }
 if (e.className=="di") {
   if (e.childNodes[0].innerText.indexOf("\n")>0) fix(e,"db");
 } e.id="";

}

function fix(e,cl){

e.className=cl;

e.style.display="block";

j=e.parentElement.childNodes[0];

j.className="c";

k=j.childNodes[0];

k.style.visibility="visible";

k.href="#";

}

function ch {

mark=e.childNodes[0].childNodes[0];

if (mark.innerText) {

        if (mark.innerText=="+") {
          mark.innerText="-";
          for (var i=1;i<e.childNodes.length;i++) {
                e.childNodes[i].style.display="block";
          }
        }
        else if (mark.innerText=="-") {
          mark.innerText="+";
          for (var i=1;i<e.childNodes.length;i++) {
                e.childNodes[i].style.display="none";
          }
        }

} else {

        if (mark.textContent=="+") {
            mark.textContent="-";
          for (var i=1;i<e.childNodes.length;i++) {
                e.childNodes[i].style.display="block";
          }
        }
        else if (mark.textContent=="-") {
          mark.textContent="+";
          for (var i=1;i<e.childNodes.length;i++) {
                e.childNodes[i].style.display="none";
          }
        }
  }

}

function ch2 {

mark=e.childNodes[0].childNodes[0];

contents=e.childNodes[1];

if (mark.innerText) {

        if (mark.innerText=="+") {
          mark.innerText="-";
          if (contents.className=="db"||contents.className=="cb") {
                contents.style.display="block";
          }
          else {
                contents.style.display="inline";
          }
        }
        else if (mark.innerText=="-") {
          mark.innerText="+";
          contents.style.display="none";
        }

} else {

        if (mark.textContent=="+") {
          mark.textContent="-";
          if (contents.className=="db"||contents.className=="cb") {
                contents.style.display="block";
          }
          else {
                contents.style.display="inline";
          }
        }
        else if (mark.textContent=="-") {
          mark.textContent="+";
          contents.style.display="none";
        }
  }

}

function cl(event) {

event = event || window.event;

var tgt = event.target || event.srcElement;

if (tgt.className!="c") {

  tgt=tgt.parentNode;
  if (tgt.className!="c") {
    return;
  }

}

tgt=tgt.parentNode;

if (tgt.className=="e") {

  ch(tgt);

}

if (tgt.className=="k") {

  ch2(tgt);

}

}

function ex(){}

function h(){window.status=" ";}

document.onclick=cl;

would probably be a lot simpler with jquery.

25/Mar/2011 16:02 PM

Raj said:

Hi

I could not able to understand as what is this.TransactionHTML? where can i find this method?

Regards

21/May/2012 21:09 PM

Add Comment

Name
Comment
 

Your comment has been received and will be shown once it passes moderation.