Solved

xml expand/collapse list elements

Posted on 2002-05-13
14
679 Views
Last Modified: 2013-11-19
TO B1XML2:

in regards to the prior post (http://www.experts-exchange.com/jsp/qManageQuestion.jsp?ta=xml&qid=20300061)

i would like XSLT code that would do the following:

1. display the same data in a table as before - excluding the alternating colors
2. just display the title and date initially (same format as before)
3. title will be hyperlinked
4. when user clicks on title, it will expand and below it will display the Location data italicized, followed by Content
5. when click title again, the content will collapse
6. i also want ability to put html code inside the Content tag that will display when page loads (e.g. img tags, bolding etc.)
7. and ability to place this inside a current html document i have - so it will be like a module of that html page inside an already-present table (if this is possible?)

also, if possible, to have the xslt code have the ability to work with other xml documents that have same structure, but more/less columns with possibly different names... so to act as an xslt template usable on other xml documents.

thanks again!
0
Comment
Question by:loyaliser
  • 11
  • 3
14 Comments
 
LVL 23

Accepted Solution

by:
b1xml2 earned 200 total points
ID: 7007739
XML Document
============
<?xml version="1.0" encoding="iso-8859-1"?>
<News>
 <NewsItem>
   <Date>2002-05-06</Date>
   <LocationCity>Los Angeles</LocationCity>
   <LocationState>California</LocationState>
   <LocationCountry>Unites States Of America</LocationCountry>
   <Author id="ml012">Mark Lee</Author>
   <Title id="1234">My Old Log Cabin II</Title>
   <Content>A fictionalised <u>story</u> of a runaway slave with modern motifs.</Content>
 </NewsItem>
 <NewsItem>
   <Date>2002-05-07</Date>
   <LocationCity>Miami</LocationCity>
   <LocationState>Florida</LocationState>
   <LocationCountry>Unites States Of America</LocationCountry>
   <Author id="sl234">Sheryl Loius</Author>
   <Title id="3456">The Next Generation Of Nintendo</Title>
   <Content>Nintendo <b>2002</b> will soon be released. <a href="http://test.html">Click Me!</a></Content>
 </NewsItem>
</News>

XSLT Document
==============
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" indent="yes"/>

<xsl:attribute-set name="subheader" use-attribute-sets="nowrap">
 <xsl:attribute name="class">subheader</xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set name="nowrap">
 <xsl:attribute name="nowrap">nowrap</xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set name="full">
 <xsl:attribute name="colspan">2</xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set name="mainheader" use-attribute-sets="full nowrap" />

<xsl:attribute-set name="table">
 <xsl:attribute name="cellpadding">4</xsl:attribute>
 <xsl:attribute name="cellspacing">0</xsl:attribute>
 <xsl:attribute name="width">100%</xsl:attribute>
</xsl:attribute-set>

<xsl:template match="/">
<html>
<head>
<title>News Items</title>
<style>
<![CDATA[
body, td {font-size:9pt;font-family:Verdana;background:#ffffff;}
table td {vertical-align:top;}
table {border:1px solid #cccccc;}
a {color:#0000ff;text-decoration:none;}
a:hover {text-decoration:underline;}
.header {font-size:9pt;letter-spacing:0.1mm;}
.subheader {font-size:8pt;letter-spacing:0.1mm;padding-top:0px;width:50%;font-style:italic;}
]]>
</style>
<script language="javascript" defer="defer">
<![CDATA[
      function toggleDisplay(szId) {
            var eTarget = document.getElementById ? document.getElementById(szId) : document.all ? document.all[szId] : null;
            if (! eTarget) return;
            eTarget.style.display = eTarget.style.display == "none" ? "inline" : "none";
      }
]]>
</script>
</head>
<body>
<table xsl:use-attribute-sets="table">
<xsl:apply-templates select="News/NewsItem">
<!--sorting news items presenting the latest first-->
<xsl:sort select="translate(Date,'-','')" data-type="number" order="descending" />
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>

<xsl:template match="NewsItem">
<tr>
 <td xsl:use-attribute-sets="mainheader">
   <xsl:apply-templates select="Title" /><xsl:value-of select="concat(' by ',Author)" />
 </td>
</tr>
<tbody id="{generate-id()}" style="display:none;">
<tr>
 <td xsl:use-attribute-sets="subheader">
   <xsl:apply-templates select="Date" />
 </td>
 <td xsl:use-attribute-sets="subheader">
   <xsl:value-of select="concat(LocationCity,', ',LocationState,' ',LocationCountry)" />
 </td>
</tr>
<tr>
 <td xsl:use-attribute-sets="full">
   <xsl:copy-of select="Content/node()" />
 </td>
</tr>
</tbody>
</xsl:template>

<xsl:template match="Title">
<a href="#" onclick="toggleDisplay('{generate-id(..)}'); return false;" class="header"><xsl:value-of select="." /></a>
</xsl:template>


<xsl:template match="Date">
<xsl:variable name="year" select="substring(.,1,4)" />
<xsl:variable name="month">
 <xsl:call-template name="months">
   <xsl:with-param name="month" select="number(substring(.,6,2))" />
 </xsl:call-template>
</xsl:variable>
<xsl:variable name="date" select="number(substring(.,9,2))" />
<xsl:variable name="ordinal">
 <xsl:call-template name="ordinal">
   <xsl:with-param name="ordinal" select="$date" />
 </xsl:call-template>
</xsl:variable>
<xsl:value-of select="concat($month,' ',$date,$ordinal,', ',$year)" />
</xsl:template>

<!--general template to provide ordinal value for dates-->
<xsl:template name="ordinal">
<xsl:param name="day" />
<xsl:choose>
<xsl:when test="$day &gt; 11 and $day &lt; 20">th</xsl:when>
<xsl:when test="$day mod 10 = 1">st</xsl:when>
<xsl:when test="$day mod 10 = 2">nd</xsl:when>
<xsl:when test="$day mod 10 = 3">rd</xsl:when>
<xsl:otherwise>th</xsl:otherwise>
</xsl:choose>
</xsl:template>

<!--general template to provide month name-->
<xsl:template name="months">
<xsl:param name="month" />
<xsl:choose>
<xsl:when test="$month = 1">January</xsl:when>
<xsl:when test="$month = 2">February</xsl:when>
<xsl:when test="$month = 3">March</xsl:when>
<xsl:when test="$month = 4">April</xsl:when>
<xsl:when test="$month = 5">May</xsl:when>
<xsl:when test="$month = 6">June</xsl:when>
<xsl:when test="$month = 7">July</xsl:when>
<xsl:when test="$month = 8">August</xsl:when>
<xsl:when test="$month = 9">September</xsl:when>
<xsl:when test="$month = 10">October</xsl:when>
<xsl:when test="$month = 11">November</xsl:when>
<xsl:when test="$month = 12">December</xsl:when>
</xsl:choose>
</xsl:template>
 
</xsl:stylesheet>


ASP Code (Server-Side Transformation)
=====================================
<%@language="JScript"%>
<object id="oXML" progid="Msxml2.DOMDocument.4.0" runat="server"></object>
<object id="oXSLT" progid="Msxml2.DOMDocument.4.0" runat="server"></object>
<%
try {
      oXML.async = oXSLT.async = false;
      oXML.load(Server.MapPath("xml/data.xml"));
      oXSLT.load(Server.MapPath("xslt/data.xsl"));
      oXML.transformNodeToObject(oXSLT,Response);
      
} catch (e) {
      Response.Write(e.message);
}
%>

HTML Output
=============
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>News Items</title>
<style>
body, td {font-size:9pt;font-family:Verdana;background:#ffffff;}
table td {vertical-align:top;}
table {border:1px solid #cccccc;}
a {color:#0000ff;text-decoration:none;}
a:hover {text-decoration:underline;}
.header {font-size:9pt;letter-spacing:0.1mm;}
.subheader {font-size:8pt;letter-spacing:0.1mm;padding-top:0px;width:50%;font-style:italic;}
 </style>
<script language="javascript" defer>
      function toggleDisplay(szId) {
            var eTarget = document.getElementById ? document.getElementById(szId) : document.all ? document.all[szId] : null;
            if (! eTarget) return;
            eTarget.style.display = eTarget.style.display == "none" ? "inline" : "none";
      }
 </script>
</head>
<body>
<table cellpadding="4" cellspacing="0" width="100%">
<tr>
<td colspan="2" nowrap><a href="#" onclick="toggleDisplay('IDAWIULD'); return false;" class="header">The Next Generation Of Nintendo</a> by Sheryl Loius</td>
</tr>
<tbody id="IDAWIULD" style="display:none;">
<tr>
<td nowrap class="subheader">May 7th, 2002</td>
<td nowrap class="subheader">Miami, Florida Unites States Of America</td>
</tr>
<tr>
<td colspan="2">Nintendo <b>2002</b> will soon be released. <a href="http://test.html">Click Me!</a></td>
</tr>
</tbody>
<tr>
<td colspan="2" nowrap><a href="#" onclick="toggleDisplay('IDAHIULD'); return false;" class="header">My Old Log Cabin II</a> by Mark Lee</td>
</tr>
<tbody id="IDAHIULD" style="display:none;">
<tr>
<td nowrap class="subheader">May 6th, 2002</td>
<td nowrap class="subheader">Los Angeles, California Unites States Of America</td>
</tr>
<tr>
<td colspan="2">A fictionalised <u>story</u> of a runaway slave with modern motifs.</td>
</tr>
</tbody>
</table>
</body>
</html>
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7007751
Notes
======
1. In the case of collapsing and expanding table rows, we use the tbody to group rows and apply a similar properties on the tbody that flow down to the rows and columns.

2. We use the function generate-id() which generates a unique ID for any one particular node throughout the document.

3. generate-id(..) is short-hand for generate-id(parent::node()) which in short is to get the generated id for the parent element.

4. generate-id() is short-hand for generate-id(.) which is to get the unique id for the current context.

::TIP::
If the ids are to be referenced within the document, then it is a good idea to use the generate-id. However, you will find in most cases, elements having a unique and identifying attribute like id, SKU which can be used externally and will always point to the same thing. If that is the case, it would be better to use an existing id rather than generate one. e.g.
<member id="1234" />

0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7007757
Element Transformation
======================

Introduction
------------
1. This deals with the Content element which ostensibly contains HTML syntax.
2. There are two ways of porting the syntax from one format to another.

Main
----
1. If you do not wish to manipulate any node inside the Content element, then a simple <xsl:copy-of select="Content/node()" /> would suffice. Please note that the node() syntax refers both to text nodes and element nodes. The fuller syntax would be
<xsl:copy-of select="Content/text() | Context/*" />
xsl:copy-of element performs a deep copy. It is the opposite of xsl:copy

From the MSXML4 SDK
--------------------
>>
The <xsl:copy> element creates a node in the output with the same name, namespace, and type as the current node. Attributes and children are not copied automatically. This element makes identity transformation possible.
<<

2. Using the element transformation technique and xsl:copy when you wish to manipulate the XHTML inside the Content Tag.
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7007759
Could you elaborate on #7:
>>
7. and ability to place this inside a current html document i have - so it will be like a module of
that html page inside an already-present table (if this is possible?)
<<

Client-Side transformation ??
0
 
LVL 1

Author Comment

by:loyaliser
ID: 7009029
ok... responses:

1. you stated: "...If that is the case, it would
be better to use an existing id rather than generate one. e.g. <member id="1234" />" - how do i adjust the code so it does not generate an ID and just uses the one already inside the TITLE tag?
2. i am assuming that the element transformation example/notes you gave above would work with another xml document looking something like this:

<?xml version="1.0" encoding="iso-8859-1"?>
<Products>
<ProductItem>
  <Name></Name>
  <Descirption></Description>
  <Logo></Logo>
</ProductItem>
<ProductItem>
  <Name></Name>
  <Descirption></Description>
  <Logo></Logo>
</ProductItem>
...
</Products>

because that is what i want... to be able to have an XSLT document that can read these different XML files and create the same EFFECT... unless i need to have one XSLT document per XML document that contains a unique structure?

3. what i meant by question (7) is:

what is the code i can use inside an html/asp page to be able to drop this XSLT table inside?
so assuming i already have an asp page with a whole bunch of information, and somewhere there i just want to display this XSLT data/table... so it is part of another html/asp file.
4. finally, i should have asked before... but is there a visual development tool that can build these XSLT documents on-the-fly? (does visual studio .net have this somewhere i am not seeing?)

thanks for your help...
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7010947
1. In the case of ids, if you application is database-driven, it is of no moment to add an identity field to your table and use this. However, if the content is only going to be referenced within the document, there is no need to use a static id, you can auto-generate the id and it will be unique within the document for the purposes of expanding and contracting items.

0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7010965
2. It is generally not a good idea to mix different XML Structures and apply one single XSLT Document. This is so for a number of reasons, some technical, other developmental. Typically, as applications grow and expand, XML Structures may change and you would be forced to write additional code which
a. would never be used by the other structure and thus is wasteful.
b. confusing for debugging purposes. Yes, 90% of cost of any application comes from debugging and maintaining. You need to know that when you make a change to a portion of an XSLT Document that it doesn't impact the other XML Structures that use it. If you have say 50 different structures, can you imagine the toggling between windows and the tests involved. It makes no sense whatsoever.

Element Transformation has nothing to do with handling different XML Structures. It has to do with handling structures and it goes thru the nodes of an XML Tree.

::TIP::
As a newbie with XSLT, stick to conventions.

 
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 23

Expert Comment

by:b1xml2
ID: 7010986
Code Showing How Code Can Be Re-used via XSLT
==============================================

File Structure
==============
news.asp
products.asp
----css
----------global.css
----script
----------global.js
----xml
----------products.xml
----------news.xml
----xslt
----------attributes.xsl
----------dates.xsl
----------global.xsl
----------news.xsl
----------products.xsl


global.css
==========
body, td {font-size:9pt;font-family:Verdana;background:#ffffff;}
table td {vertical-align:top;}
table {border:1px solid #cccccc;}
a {color:#0000ff;text-decoration:none;}
a:hover {text-decoration:underline;}
.header {font-size:9pt;letter-spacing:0.1mm;}
.subheader {font-size:8pt;letter-spacing:0.1mm;padding-top:0px;width:50%;font-style:italic;}

global.js
==========
function toggleDisplay(szId) {
  var eTarget = document.getElementById ? document.getElementById(szId) : document.all ? document.all[szId] : null;
  if (! eTarget) return;
  eTarget.style.display = eTarget.style.display == "none" ? "inline" : "none";
}

attributes.xsl
==============
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" indent="yes"/>
<xsl:attribute-set name="subheader" use-attribute-sets="nowrap">
<xsl:attribute name="class">subheader</xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set name="nowrap">
<xsl:attribute name="nowrap">nowrap</xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set name="full">
<xsl:attribute name="colspan">2</xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set name="mainheader" use-attribute-sets="full nowrap" />

<xsl:attribute-set name="table">
<xsl:attribute name="cellpadding">4</xsl:attribute>
<xsl:attribute name="cellspacing">0</xsl:attribute>
<xsl:attribute name="width">100%</xsl:attribute>
</xsl:attribute-set>
</xsl:stylesheet>

dates.xsl
=========
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" indent="yes"/>

<xsl:template match="Date">
<xsl:variable name="year" select="substring(.,1,4)" />
<xsl:variable name="month">
<xsl:call-template name="months">
  <xsl:with-param name="month" select="number(substring(.,6,2))" />
</xsl:call-template>
</xsl:variable>
<xsl:variable name="date" select="number(substring(.,9,2))" />
<xsl:variable name="ordinal">
<xsl:call-template name="ordinal">
  <xsl:with-param name="ordinal" select="$date" />
</xsl:call-template>
</xsl:variable>
<xsl:value-of select="concat($month,' ',$date,$ordinal,', ',$year)" />
</xsl:template>

<!--general template to provide ordinal value for dates-->
<xsl:template name="ordinal">
<xsl:param name="day" />
<xsl:choose>
<xsl:when test="$day &gt; 11 and $day &lt; 20">th</xsl:when>
<xsl:when test="$day mod 10 = 1">st</xsl:when>
<xsl:when test="$day mod 10 = 2">nd</xsl:when>
<xsl:when test="$day mod 10 = 3">rd</xsl:when>
<xsl:otherwise>th</xsl:otherwise>
</xsl:choose>
</xsl:template>

<!--general template to provide month name-->
<xsl:template name="months">
<xsl:param name="month" />
<xsl:choose>
<xsl:when test="$month = 1">January</xsl:when>
<xsl:when test="$month = 2">February</xsl:when>
<xsl:when test="$month = 3">March</xsl:when>
<xsl:when test="$month = 4">April</xsl:when>
<xsl:when test="$month = 5">May</xsl:when>
<xsl:when test="$month = 6">June</xsl:when>
<xsl:when test="$month = 7">July</xsl:when>
<xsl:when test="$month = 8">August</xsl:when>
<xsl:when test="$month = 9">September</xsl:when>
<xsl:when test="$month = 10">October</xsl:when>
<xsl:when test="$month = 11">November</xsl:when>
<xsl:when test="$month = 12">December</xsl:when>
</xsl:choose>
</xsl:template>
 
</xsl:stylesheet>

products.xsl
============
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" indent="yes"/>
<xsl:include href="global.xsl" />
<xsl:include href="attributes.xsl" />
<xsl:include href="dates.xsl" />

<xsl:template match="/">
<html>
<head>
<title>Product Items</title>
<xsl:call-template name="global" />
</head>
<body>
<table xsl:use-attribute-sets="table">
<xsl:apply-templates select="Products/ProductItem">
<!--sorting news items presenting the latest first-->
<xsl:sort select="translate(Date,'-','')" data-type="number" order="descending" />
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>

<xsl:template match="ProductItem">
<tr>
<td xsl:use-attribute-sets="mainheader">
  <img src="images/{Logo}" hspace="5" /><xsl:apply-templates select="Name" />
</td>
</tr>
<tbody id="{generate-id()}" style="display:none;">
<tr>
<td xsl:use-attribute-sets="subheader full">
  <xsl:apply-templates select="Date" />
</td>
</tr>
<tr>
<td xsl:use-attribute-sets="full">
  <xsl:copy-of select="Description/node()" />
</td>
</tr>
</tbody>
</xsl:template>

<xsl:template match="Name">
<a href="#" onclick="toggleDisplay('{generate-id(..)}'); return false;" class="header"><xsl:value-of select="." /></a>
</xsl:template>

</xsl:stylesheet>

news.xsl
========
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" indent="yes"/>
<xsl:include href="global.xsl" />
<xsl:include href="attributes.xsl" />
<xsl:include href="dates.xsl" />

<xsl:template match="/">
<html>
<head>
<title>News Items</title>
<xsl:call-template name="global" />
</head>
<body>
<table xsl:use-attribute-sets="table">
<xsl:apply-templates select="News/NewsItem">
<!--sorting news items presenting the latest first-->
<xsl:sort select="translate(Date,'-','')" data-type="number" order="descending" />
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>

<xsl:template match="NewsItem">
<tr>
<td xsl:use-attribute-sets="mainheader">
  <xsl:apply-templates select="Title" /><xsl:value-of select="concat(' by ',Author)" />
</td>
</tr>
<tbody id="{generate-id()}" style="display:none;">
<tr>
<td xsl:use-attribute-sets="subheader">
  <xsl:apply-templates select="Date" />
</td>
<td xsl:use-attribute-sets="subheader">
  <xsl:value-of select="concat(LocationCity,', ',LocationState,' ',LocationCountry)" />
</td>
</tr>
<tr>
<td xsl:use-attribute-sets="full">
  <xsl:copy-of select="Content/node()" />
</td>
</tr>
</tbody>
</xsl:template>

<xsl:template match="Title">
<a href="#" onclick="toggleDisplay('{generate-id(..)}'); return false;" class="header"><xsl:value-of select="." /></a>
</xsl:template>

</xsl:stylesheet>

products.xml
============
<?xml version="1.0" encoding="iso-8859-1"?>
<Products>
  <ProductItem>
    <Name>Microsoft .Net Server</Name>
    <Date>2002-06-07</Date>
    <Description>This is the latest initiative by Microsoft</Description>
    <Logo>msnet.jpg</Logo>
  </ProductItem>
  <ProductItem>
    <Name>Microsoft SQL Server 2002</Name>
    <Date>2002-06-08</Date>
    <Description>This is the latest SQL Server built with native support for XML Document</Description>
    <Logo>sql2002.jpg</Logo>
  </ProductItem>
</Products>

news.xml
========
<?xml version="1.0" encoding="iso-8859-1"?>
<News>
  <NewsItem>
    <Date>2002-05-06</Date>
    <LocationCity>Los Angeles</LocationCity>
    <LocationState>California</LocationState>
    <LocationCountry>Unites States Of America</LocationCountry>
    <Author id="ml012">Mark Lee</Author>
    <Title id="1234">My Old Log Cabin II</Title>
    <Content>A fictionalised story of a runaway slave with modern motifs.</Content>
  </NewsItem>
  <NewsItem>
    <Date>2002-05-07</Date>
    <LocationCity>Miami</LocationCity>
    <LocationState>Florida</LocationState>
    <LocationCountry>Unites States Of America</LocationCountry>
    <Author id="sl234">Sheryl Loius</Author>
    <Title id="3456">The Next Generation Of Nintendo</Title>
    <Content>Nintendo 2002 will soon be released.</Content>
  </NewsItem>
</News>

news.asp (HTML Output)
=======================
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>News Items</title>
<link rel="stylesheet" href="css/global.css"><script language="javascript" src="script/global.js"></script></head>
<body>
<table cellpadding="4" cellspacing="0" width="100%">
<tr>
<td colspan="2" nowrap><a href="#" onclick="toggleDisplay('IDAHVUMB'); return false;" class="header">The Next Generation Of Nintendo</a> by Sheryl Loius</td>
</tr>
<tbody id="IDAHVUMB" style="display:none;">
<tr>
<td nowrap class="subheader">May 7th, 2002</td>
<td nowrap class="subheader">Miami, Florida Unites States Of America</td>
</tr>
<tr>
<td colspan="2">Nintendo 2002 will soon be released.</td>
</tr>
</tbody>
<tr>
<td colspan="2" nowrap><a href="#" onclick="toggleDisplay('IDA1UUMB'); return false;" class="header">My Old Log Cabin II</a> by Mark Lee</td>
</tr>
<tbody id="IDA1UUMB" style="display:none;">
<tr>
<td nowrap class="subheader">May 6th, 2002</td>
<td nowrap class="subheader">Los Angeles, California Unites States Of America</td>
</tr>
<tr>
<td colspan="2">A fictionalised story of a runaway slave with modern motifs.</td>
</tr>
</tbody>
</table>
</body>
</html>


products.asp (HTML Output)
==========================
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Product Items</title>
<link rel="stylesheet" href="css/global.css"><script language="javascript" src="script/global.js"></script></head>
<body>
<table cellpadding="4" cellspacing="0" width="100%">
<tr>
<td colspan="2" nowrap><img src="images/sql2002.jpg" hspace="5"><a href="#" onclick="toggleDisplay('IDA3VUMB'); return false;" class="header">Microsoft SQL Server 2002</a></td>
</tr>
<tbody id="IDA3VUMB" style="display:none;">
<tr>
<td nowrap class="subheader" colspan="2">June 8th, 2002</td>
</tr>
<tr>
<td colspan="2">This is the latest SQL Server built with native support for XML Document</td>
</tr>
</tbody>
<tr>
<td colspan="2" nowrap><img src="images/msnet.jpg" hspace="5"><a href="#" onclick="toggleDisplay('IDAYVUMB'); return false;" class="header">Microsoft .Net Server</a></td>
</tr>
<tbody id="IDAYVUMB" style="display:none;">
<tr>
<td nowrap class="subheader" colspan="2">June 7th, 2002</td>
</tr>
<tr>
<td colspan="2">This is the latest initiative by Microsoft</td>
</tr>
</tbody>
</table>
</body>
</html>



0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7010999
Notes
=====
1. By using the xsl:include (or the xsl:import), you basically can include other XSLT Documents and use them as though they were in the main XSLT Document itself. This allows you to group functionality into relevant XSLT Documents and concentrate on the core differences between each structure.
0
 
LVL 1

Author Comment

by:loyaliser
ID: 7011201
extensive and valuable information as always! thanks...
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7011230
wait not yet finished!

ASP.Net
=======
<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="newNet.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
     <HEAD>
          <title>WebForm2</title>
          <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
          <meta name="CODE_LANGUAGE" Content="C#">
          <meta name="vs_defaultClientScript" content="JavaScript">
          <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
     <LINK rel="stylesheet" type="text/css" href="http://localhost/newNet/css/global.css"></HEAD>
     <script language="javascript" type="text/Jscript" src="script/global.js"></script>
     <body MS_POSITIONING="GridLayout">
          <form id="WebForm2" method="post" runat="server">
               <asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 36px; POSITION: absolute; TOP: 27px" runat="server" Width="156px" Height="38px">Hello World!</asp:Label>
               <div style="position:absolute;top:100px;">
               <asp:Xml id="Xml1" runat="server" DocumentSource="xml/products.xml" TransformSource="xslt/products.xsl"></asp:Xml>
               </div>
          </form>
     </body>
</HTML>

changes to product.xsl
=======================
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" indent="yes"/>
<xsl:include href="attributes.xsl" />
<xsl:include href="dates.xsl" />

<xsl:template match="/">
<table xsl:use-attribute-sets="table">
<xsl:apply-templates select="Products/ProductItem">
<!--sorting news items presenting the latest first-->
<xsl:sort select="translate(Date,'-','')" data-type="number" order="descending" />
</xsl:apply-templates>
</table>
</xsl:template>

<xsl:template match="ProductItem">
<tr>
<td xsl:use-attribute-sets="mainheader">
  <img src="images/{Logo}" hspace="5" /><xsl:apply-templates select="Name" />
</td>
</tr>
<tbody id="{generate-id()}" style="display:none;">
<tr>
<td xsl:use-attribute-sets="subheader full">
  <xsl:apply-templates select="Date" />
</td>
</tr>
<tr>
<td xsl:use-attribute-sets="full">
  <xsl:copy-of select="Description/node()" />
</td>
</tr>
</tbody>
</xsl:template>

<xsl:template match="Name">
<a href="#" onclick="toggleDisplay('{generate-id(..)}'); return false;" class="header"><xsl:value-of select="." /></a>
</xsl:template>

</xsl:stylesheet>



webform2.aspx.cs
=================
private void Page_Load(object sender, System.EventArgs e)
          {
               // Put user code to initialize the page here
               Label1.Text = "Hello World! C#";
          }

0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7011235
The following code shows how to have an in-place XML Transform in ASP.Net with minimal code.
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7011269
Caution:
1. If you are using MS-Grid, you must fashion a div element that wraps round the asp:xml element because the other elements are using absolute positioning.
0
 
LVL 1

Author Comment

by:loyaliser
ID: 7011691
ok... thanks again.

i actually did something very similar using <asp:xml> prior to your post... usefull control.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now