How to view XML in WebBrowser control using the DocumentText property?

Hi,

(This is on .NET 2.0)

The only way I managed to show XML in the webbrowser control was to
write the xml contents to a file and then use "Navigate(...)" to open the
file. This is a bit awkward for me because I have the XML in a string
variable, and the most straightforward way to do it would be to
simply assign it to the "DocumentText" property. But that did not
work... (nothing is displayed, although using the context menu to
view the page source shows that my xml content is there).

Any tips on how to do this

Thanks
Rubens

Answer this question

How to view XML in WebBrowser control using the DocumentText property?

BENTL3Y
Hi Armoghan,

Lets assume the following:

You have followed your process and you now have to processed xml you would like to display. The process you want to replicate is displaying xml in the WebBrowser control just like in IE6 when you load an xml file.

To do so, you have to put the xml through ANOTHER transformation using the XSL file I indicated (the SAME one IE6 uses when it displays xml). You take the results of THAT transformation and display it in the WebBrowser control.

Do you understand the process now
Brian Kuhn
Just give a try to the XML and XSL I have pasted above.

using your method. It will not work unless you change the XSL

Whereas, drag and drop the XML in IE and it will work fine
abaran
Hi there,
I wanted to do the same thing as you are, and I managed to do it using the following XSLT. Its complex, and hard to customize. But if you are happy with the way of display in IE, then this is going to be the same.
Credits have been mentioned within the XSLT itself.

Hope that helps many others looking for this solution as well.
BTW, you have to use XsltCompiledTransform.

Cheers,
Vinayak

< xml version="1.0" >


<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:dt="urn:schemas-microsoft-com:datatypes"
xmlns:d2="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<xsl:template match="/">
<HTML>
<HEAD>
<STYLE>
BODY {font:x-small 'Verdana'; margin-right:1.5em}

.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}
</STYLE>

<SCRIPT language="javascript">
<xsl:comment>
<![CDATA[
// Detect and switch the display of CDATA and comments from an inline view
// to a block view if the comment or CDATA is multi-line.
function f(e)
{
// if this element is an inline comment, and contains more than a single
// line, turn it into a block comment.
if (e.className == "ci") {
if (e.children(0).innerText.indexOf("\n") > 0)
fix(e, "cb");
}

// if this element is an inline cdata, and contains more than a single
// line, turn it into a block cdata.
if (e.className == "di") {
if (e.children(0).innerText.indexOf("\n") > 0)
fix(e, "db");
}

// remove the id since we only used it for cleanup
e.id = "";
}

// Fix up the element as a "block" display and enable expand/collapse on it
function fix(e, cl)
{
// change the class name and display value
e.className = cl;
e.style.display = "block";

// mark the comment or cdata display as a expandable container
j = e.parentElement.children(0);
j.className = "c";

// find the +/- symbol and make it visible - the dummy link enables tabbing
k = j.children(0);
k.style.visibility = "visible";
k.href = "#";
}

// Change the +/- symbol and hide the children. This function workss on "element"
// displays
function ch(e)
{
// find the +/- symbol
mark = e.children(0).children(0);

// if it is already collapsed, expand it by showing the children
if (mark.innerText == "+")
{
mark.innerText = "-";
for (var i = 1; i < e.children.length; i++)
e.children(i).style.display = "block";
}

// if it is expanded, collapse it by hiding the children
else if (mark.innerText == "-")
{
mark.innerText = "+";
for (var i = 1; i < e.children.length; i++)
e.children(i).style.display="none";
}
}

// Change the +/- symbol and hide the children. This function work on "comment"
// and "cdata" displays
function ch2(e)
{
// find the +/- symbol, and the "PRE" element that contains the content
mark = e.children(0).children(0);
contents = e.children(1);

// if it is already collapsed, expand it by showing the children
if (mark.innerText == "+")
{
mark.innerText = "-";
// restore the correct "block"/"inline" display type to the PRE
if (contents.className == "db" || contents.className == "cb")
contents.style.display = "block";
else contents.style.display = "inline";
}

// if it is expanded, collapse it by hiding the children
else if (mark.innerText == "-")
{
mark.innerText = "+";
contents.style.display = "none";
}
}

// Handle a mouse click
function cl()
{
e = window.event.srcElement;

// make sure we are handling clicks upon expandable container elements
if (e.className != "c")
{
e = e.parentElement;
if (e.className != "c")
{
return;
}
}
e = e.parentElement;

// call the correct funtion to change the collapse/expand state and display
if (e.className == "e")
ch(e);
if (e.className == "k")
ch2(e);
}

// Dummy function for expand/collapse link navigation - trap onclick events instead
function ex()
{}

// Erase bogus link info from the status window
function h()
{
window.status=" ";
}

// Set the onclick handler
document.onclick = cl;

]]>
</xsl:comment>
</SCRIPT>
</HEAD>

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








<xsl:template match="processing-instruction()">
<DIV class="e">
<SPAN class="b"> </SPAN>
<SPAN class="m">< </SPAN>
<SPAN class="pi">
<xsl:value-of select="name()"/> <xsl:value-of select="."/>
</SPAN>
<SPAN class="m"> ></SPAN>
</DIV>
</xsl:template>





<xsl:template match="@*" xml:space="preserve"><SPAN><xsl:attribute
name="class"><xsl:if test="starts-with(name(),'xsl:')">x</xsl:if>t</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 class="b" onclick="return false" onfocus="h()" STYLE="visibility:hidden">-</A>
<SPAN class="m"></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"> </SPAN>
<SPAN class="m"><</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="starts-with(name(),'xsl:')">x</xsl:if>t
</xsl:attribute>
<xsl:value-of select="name()"/>
</SPAN>
<xsl:apply-templates select="@*"/>
<SPAN class="m">/></SPAN>
</DIV>
</DIV>
</xsl:template>


<xsl:template match="*[comment() | processing-instruction()]">
<DIV class="e">
<DIV class="c">
<A href="#" onclick="return false" onfocus="h()" class="b">-</A>
<SPAN class="m"><</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="starts-with(name(),'xsl:')">x</xsl:if>t
</xsl:attribute>
<xsl:value-of select="name()"/>
</SPAN>
<xsl:apply-templates select="@*"/>
<SPAN class="m">></SPAN>
</DIV>
<DIV>
<xsl:apply-templates/>
<DIV>
<SPAN class="b"> </SPAN>
<SPAN class="m"></</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="starts-with(name(),'xsl:')">x</xsl:if>t
</xsl:attribute>
<xsl:value-of select="name()"/>
</SPAN>
<SPAN class="m">></SPAN>
</DIV>
</DIV>
</DIV>
</xsl:template>


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


<xsl:template match="*
">
<DIV class="e">
<DIV class="c" STYLE="margin-left:1em;text-indent:-2em">
<A href="#" onclick="return false" onfocus="h()" class="b">-</A>
<SPAN class="m"><</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="starts-with(name(),'xsl:')">x</xsl:if>t
</xsl:attribute>
<xsl:value-of select="name()"/>
</SPAN>
<xsl:apply-templates select="@*"/>
<SPAN class="m">></SPAN>
</DIV>
<DIV>
<xsl:apply-templates/>
<DIV>
<SPAN class="b"> </SPAN>
<SPAN class="m"></</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="starts-with(name(),'xsl:')">x</xsl:if>t
</xsl:attribute>
<xsl:value-of select="name()"/>
</SPAN>
<SPAN class="m">></SPAN>
</DIV>
</DIV>
</DIV>
</xsl:template>

</xsl:stylesheet>

ELM

Hi everyone,

I managed to do this using the following strategy:

1. Download an HTML 1.0 compliant version of defaultss.xsl

2. Create an XMLCompiledTransform object and load the "defaultss.xsl" stylesheet. I actually embedded it is a resource in my assembly and read it from there.

3. Transform your XML stream using the XMLCompiledTransform into an HTML stream.

4. Set the WebBrowser.DocumentStream = HTML stream

Remember to "AllowNavigation" otherwise the thing doesn't work.

Hope this helps,

myhome

Hi .. i have implemented the same bit. ie. showing PDF/ HTML/ TEXT file in the webbrowser.

I implemented that as i was saving all my files in the database as byte array ... once i retrieve all the bytes on the client. I converted them into physical file and use the webbrowser navigate and pass the entire path of any newly created file.

Thanks

jmw

following is the code for XSL which is not working

NOTE: I do not want to remove comments and variable

<!--

Version # :: 3.0.1.00

-->

< xml version="1.0" encoding="ISO-8859-1" >

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<head>

<xsl:variable name="display_path" select="substring-before(TOP_LEVEL/XSL_SERVER_PATH, ',')" />

<xsl:variable name="color" select="TOP_LEVEL/XSL_COLOR"/>

</head>

<body>

<xsl:text>Display Path ::</xsl:text>

<xsl:value-of select="$display_path"/>

<br/>

<xsl:text>Color Name ::</xsl:text>

<xsl:value-of select="$color"/>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

XML is

< xml version="1.0" standalone="yes" >

< xml-stylesheet type="text/xsl" href="a.xsl" >

<TOP_LEVEL num="1">

<XSL_SERVER_PATH>C:\Documents and Settings\aasif,C:\\Documents and Settings\\aasif</XSL_SERVER_PATH>

<XSL_COLOR>Cyan</XSL_COLOR>

</TOP_LEVEL>

AloneSword

You cant view XML 'as is' as it has no displayable value. The best way to display it would be to create an XSLT stylesheet to convert it to html in the format you want, with something like a XslCompiledTransform, write the output to a stream and write that stream to the DocumentText instead.

WebZ

Please see my comment

>>>NOTE: I do not want to remove comments and variable

and I want to use my own Xsl file which is working fine with IE otherwise

Matthijs Krempel

I want to do the exact same thing anyone know how

Cheers

Pieter Coetzer - South Africa

I dont think it is possible looking at the architecture of Web Browser.

http://msdn.microsoft.com/library/default.asp url=/workshop/browser/overview/ie_arch.asp

If any one has done it .. please share

RBrown1375

Hi Armoghan,

This is a display transformation process. Your XML output would be the input to the transformation and the output is a html like IE produces which you display.

Kuntal Loya - MSFT

Offcourse, i have an XSLT attached to it like

< xml-stylesheet type="text/xsl" href="a.xsl" >

on the 2nd line of XML

i have tried transforming via two methods

////////////////////////////////

Private Function getHTML1() As String

Dim fxml As New IO.FileStream("C:\a.xml", IO.FileMode.Open)

Dim myXPathDocument As New Xml.XPath.XPathDocument(fxml)

Dim myXslTransform As New Xml.Xsl.XslCompiledTransform

Dim resultDoc As New IO.MemoryStream

Dim writer As New Xml.XmlTextWriter(resultDoc, Nothing)

myXslTransform.Load("C:\a.xsl")

myXslTransform.Transform(myXPathDocument, Nothing, writer)

writer.Close()

Dim stream As New IO.StreamReader(resultDoc)

Return stream.ReadToEnd

End Function

/////////////////////////and MSXML old way///////////////

Private Function getHTML2() As String

Dim xmlDoc As New MSXML2.DOMDocument40Class

xmlDoc.load("C:\a.xml")

Dim xsl As New MSXML2.FreeThreadedDOMDocument40Class

Dim xslt As New MSXML2.XSLTemplate40Class

xsl.load("C:\a.xsl")

xslt.stylesheet = xsl

xslt.createProcessor()

Dim xslProc As MSXML2.IXSLProcessor = xslt.createProcessor

xslProc.input = xmlDoc

xslProc.transform()

Return xslProc.output.ToString

End Function

/////////////////

But both fail to transform XSL file which is transformed by IE easily.

At least two problems i have noted.

If XSL starts with comments

It will not work

And Secondly

Such tags are not working

<xsl:variable name="js_path" select="substring-after(TOP_LEVEL/XSL_SERVER_PATH, ',')" />

while they were working in IE

WayneTanner

I want to do the same thing, except I want to show a .pdf. I am rendering a report through report server in a .pdf format. I can export this .pdf to a file and then use the .Navigate to view the .pdf.

My next step was to render the report to .pdf but then store it in a database. I've done that and now I can only get it to work by loading the pdf from the database, saving it to a file location, and then navigating to that directly. I don't understand how to take the byte array and load the browser control with it.

Please post you solution if you find it and I will do the same.

Smartguy

Probably I am unable to convery properly.

You are saying this

XML-->

Transform To HTML ---- Move the resultant to-------> IE

XSL -->

That is what I want to do and doing

But No transformer is like IE's transformer.
As I have a complex XML and XSL, for which XSL transformer object I have is not working properly.