XML formatting to HTML...beginner question

[acs974]

Hi, I apologize if I am posting this in the wrong forum. I am creating
a .net 2.0 website using vb.net. I have an XML file with the following
general format:

<LearningObjectives>
<lo number = '1'>
<Title>First Learning Objective. Click for more details</Title>
<details>These are the details for LO 1</details>
</lo>
<lo number = '2'>
<Title>Second Learning Objective. Click for more details</Title>
<details>These are the details for LO 2</details>
</lo>
<lo number = '3'>
<Title>Third Learning Objective. Click for more details</Title>
<details>These are the details for LO 3</details>
</lo>
</LearningObjectives>

I want to load in this xml file and create an HTML file built around
this data (but formatted) such that when the page first loads, only the
text in the title nodes are shown (will appear as headers), but after
each title there is some sort of link,button, or symbol that the user
can click so that after clicked, beneath the title the details for that
learning objective node expand/appear. I've been doing a lot of reading
about how in .net to serve the xml as formatted html, and am
overwhelmed. There seems to be tons of ways to do it, and I;m not sure
what is best for me. If it was just a matter of formatting the XML to
appear as HTML, I could use XSL, but since I need to be able to expand
the hidden details fields, I need to use some kind of function,
probably in javascript since it needs to be on the client side. It
doesnt seem like i can combine html/javascript in a XSL file, and there
probably is an even better way to do this in .net, but I'm confused at
this point.
Thank you to anyone who can point me in the right direction!

[Patrick.O.Ige]

Start from here..
http://jenitennison.com/xslt/grouping/index.xml
Hope that helps
Patrick

<ac****@hotmail.com> wrote in message
news:11*********************@g14g2000cwa.googlegro ups.com...

Hi, I apologize if I am posting this in the wrong forum. I am creating
a .net 2.0 website using vb.net. I have an XML file with the following
general format:

<LearningObjectives>
<lo number = '1'>
<Title>First Learning Objective. Click for more details</Title>
<details>These are the details for LO 1</details>
</lo>
<lo number = '2'>
<Title>Second Learning Objective. Click for more details</Title>
<details>These are the details for LO 2</details>
</lo>
<lo number = '3'>
<Title>Third Learning Objective. Click for more details</Title>
<details>These are the details for LO 3</details>
</lo>
</LearningObjectives>

I want to load in this xml file and create an HTML file built around
this data (but formatted) such that when the page first loads, only the
text in the title nodes are shown (will appear as headers), but after
each title there is some sort of link,button, or symbol that the user
can click so that after clicked, beneath the title the details for that
learning objective node expand/appear. I've been doing a lot of reading
about how in .net to serve the xml as formatted html, and am
overwhelmed. There seems to be tons of ways to do it, and I;m not sure
what is best for me. If it was just a matter of formatting the XML to
appear as HTML, I could use XSL, but since I need to be able to expand
the hidden details fields, I need to use some kind of function,
probably in javascript since it needs to be on the client side. It
doesnt seem like i can combine html/javascript in a XSL file, and there
probably is an even better way to do this in .net, but I'm confused at
this point.
Thank you to anyone who can point me in the right direction!

[Andy]

Hi Patrick,

Thanks for the reply. I don't think what they talk about on that page
applies to my situation,but I appreciate the help. They talk about
grouping transformations. I'm trying to read in a xml file, format the
data and to html, add in some client javascript functions, and send
that to the client.

[dickster]

In VB.NET WebForms do the following:

Drag an XML control onto the screen.
We'll assume the default name "Xml1"

I'm going to assume your XML is in a file called
"LearningObjectives.xml" & that you have an XSLT file called
"MyOutput.xslt"

Based on this you will need 2 properties assigned on the Xml1 control
..DocumentSource & .TransformSource

XML1.DocumentSource = <<path to LearningObjectives xml file>>
XML1.TransformSource = <<path to MyOutput xslt file>

And the code for the MyOutput.xslt is as follows:
===========================================
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:fn="http://www.w3.org/2005/02/xpath-functions"
xmlns:xdt="http://www.w3.org/2005/02/xpath-datatypes">

<xsl:output method="html" />

<xsl:template match="/">
<HTML>
<head>
<LINK href="Styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">

function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>
</head>

<BODY>
<h3>OUTPUT</h3>
<xsl:apply-templates select="LearningObjectives"/>
</BODY>

</HTML>
</xsl:template>

<xsl:template match="LearningObjectives">
<xsl:comment>
//
================================================== ====================================
// Match the lo nodes
//
================================================== ====================================
</xsl:comment>
<table border="1">
<xsl:for-each select="lo">

<tr>
<td><xsl:value-of select="Title"/></td>
<td>
<div >
<!--a onclick="switchMenu('id');">Switch it now</a-->

<a>
<xsl:attribute name="value"><xsl:value-of
select="@number"/></xsl:attribute>
<xsl:attribute name="onclick">switchMenu(value);</xsl:attribute>
+/-</a>
<div>
<xsl:attribute name="id"><xsl:value-of
select="@number"/></xsl:attribute>
<xsl:value-of select="details"/>
</div>
</div>
</td>

</tr>

</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
===========================================

[dickster]

Andy,

I havent quite addressed the issue of collapsing all the div areas On
Page Load.

This site may help:
http://www.dustindiaz.com/dhtml-expa...apse-div-menu/

Dickster

[Andy]

Hi Dickster,

Thanks a ton for your help...I'm still playing around and trying to
digest xsl in general, but I think this will do it it...Thanks!

Andy

[Andy]

Hi Dickster,

Everything's working great, only thing I'm stuck on is what you alluded
to, collapsing all the div areas on page load. I've tried following the
examples on your web page, but no luck, the one on the page has
statically named div tags, mine will be dynamic and I would like to be
able to close all div tags of a certain class, i.e. collapse all <div
class='details'> sections. I also tried to use display:none in the
style sheet, while this works, it stays permanently closed even when I
click the button to expand. Any advice? Thanks!