Store and Display Data Using ASP and XML/XSL

6. Two steps left! First, we'll append the created nodes to the parent node. This can be done with the function parentNode.appendChild("personNode");

   .  
   .  
   .  
   parentNode.appendChild(personNode);  
   personNode.appendChild(nameNode);  
   personNode.appendChild(ageNode);  
   personNode.appendChild(genderNode);  
   personNode.appendChild(pcodeNode);  
   .  
   .  
   .

7. And finally, we'll save the nodes to the XML file, using the function xmlDoc.save(Server.MapPath("Person.xml"));

   // 7) Now save the nodes to the file  
   xmlDoc.save(Server.MapPath("Person.xml"));

Display the Data Using XSL

So far, we've seen how to save the data our site users have submitted through our form. But how do we display it? We'll use ASP and XSL to display the data.

The first thing we'll need to do is load the XML file, and this can be easily achieved with an XML parser. The XML parser from Microsoft is available with Internet Explorer 5.0.

After you've loaded the XML file in the document object, you can retrieve the XML data with the help of a DOM object. First, we must load the XSL file:

     // This part is used to display the data  
     var objXMLDoc = Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");  
     objXMLDoc.async = false;  
     objXMLDoc.load(Server.MapPath("person.xml"));  
 
     var xsl=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");  
     xsl.async = false;  
     xsl.load(Server.MapPath("person.xsl"));

Now we've loaded both files, each into its own DOM object. Next, we need to create a query that will select the nodes for us. Of course, we could select specific nodes, but for now, we'll just select the root node, in which case, all other nodes will be selected automatically.

       var xmlQuery="//Person";  
       var docHeadlines=objXMLDoc.documentElement.selectNodes(xmlQuery);

Next we need simply to iterate through the nodes to display each stored item.

       var numNodes;  
numNodes=docHeadlines.length;  
 
       var nn;  
       for(var i=0;i<numNodes;i++){  
         nn = docHeadlines.nextNode();  
         Response.Write(nn.transformNode(xsl));  
       }

Now you know how to load the XSL file into the DOM object. But what does a XSL file look like? And what else can XSL do for you?

XSL is a language that transforms XML into HTML. Of course you can also use simple HTML and ASP to display the data, but to give the Web form a professional look, and a better structure, you'll need to use XSL.

However, XSL can offer you much more than we've explored here. For instance, it can provide features like sorting and filtering. In a simple ASP site, you can also use XSL to work with variables and conditions, as well as loops. Of course I can't cover this all in this article, but you should be aware of just what XSL has to offer.

Now, here's the XSL file we built:

     <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL  
/Transform" version="1.0">  
     <xsl:template match="Person">  
     <tr>  
     <td><font face="verdana" size="2">  
<xsl:value-of select="Name"/></font></td>  
     <td><font face="verdana" size="2">  
<xsl:value-of select="Age"/></font></td>  
     <td><font face="verdana" size="2">  
<xsl:value-of select="Gender"/></font></td>  
     <td><font face="verdana" size="2">  
<xsl:value-of select="PostalCode"/></font></td>  
     </tr>  
   </xsl:template>  
 </xsl:stylesheet>

In the first line, we use the <xsl:stylesheet> element to tell the document that it's an XSL stylesheet. Then, we tell XSL which element of the XML file it must start with, using <xsl:template match="Person">

We've selected the Person element, as this is the most important. All data below that will be selected automatically.

Finally, to display the value of the XML elements, we simply implement the <xsl:value-of-select="element name"/> tag, which retrieves the value of the element.

Conclusion

That's it ! Now you have created a fully functional system which can save, read and display data from a form. You have learned the advantages of ASP,XML and XSL. To practice a little bit more, I suggest you to modify the ASP page to create your own address book.

Download the example files used in this tutorial, and happy programming!