Adding and displaying data easily via ASP and XML/XSL

Storing and displaying data is a common and essential task, if you are working with Applications. It doesn’t matter whether you are working with desktop Applications or WebApplications.

The saving and displaying process is nearly always required. In this article I will show you how you can easily use an ASP form to add data into a XML file and how you can retrieve this data to display it in a well formed table. We will create an example ASP page, in which the user will be able to enter his Name, Age, Gender and a Postalcode. This data will be stored in a XML file. To display the data we will use XSL. The example ASP page and the resulting table look like this:

Its has always been important for me to divide the ASP Page in two parts and I would suggest you to do the same. Some people are mixing the asp and html code, but I would not recommend it to you. But sometimes it isn`t possible to spilt the ASP Page in two parts, in this case you will need to find your own and best suitable way. But anyway, try it! Here an image of the structure how my ASP page always looks like:

The first part contains a simple Form, and the second part contains the ASP Code which will do the saving for us. For a better understanding we will start with the Form.

Part I the Form:

You can create any simple form, with any controls you like. In addition to the other controls, we also need a submit and a reset button.

In my example I have created a simple form called frmPerson, which contains three textfields and a drop down field.

This form will use the post method to process the entered data.

Here is the code of my form:

<form action="VerifyPerson.asp" method="post" name="frmPerson" id="frmPerson">
<INPUT name=Name>
<INPUT name=Age>
<SELECT style="WIDTH: 154px" name=Gender>
    <OPTION value=Male selected>Male</OPTION>
    <OPTION value=Female>Female</OPTION>
</SELECT>
<INPUT name=Postalcode>
<INPUT type=submit value=Submit name=submit><INPUT type=reset value=Reset name=reset>
</form>

It is very important to give each used TAG which will hold the data, a variable name.

For Example: The name textfield <INPUT name=Name> contains the variable Name. In order to retrieve the data from the form we will use this and other variables in the next ASP paragraph.

You dont need to write down this code, because the examples covered in this Article are available for download. To get familar with ASP and XML I suggest you download the examples and try to work with it. To give the form a better and professional look I have included a table with some effects, so dont get worried about the whole code. As you can see this was the first easy part of the ASP page and the second part will be even easier.

Part II the ASP code:

In this paragraph I will show you in 7 easy steps how you can retrieve the data from the form and how you can save the data to a XML
file.

1. The first step is to check whether the user has pressed the submit button or not! For this we will use the JScript function count.

var submit = Request.Form("submit").Count;
if( submit > 0 ){
  // The user has pressed the submit button
  // So the code to save the data will take place here.
}
else{
  // We could also place our form in this part of code, which must be then written in JScript. 
  //But I would not recommend that !!!
}

2. Now we need to retrieve the data from the form. This data will be stored in some variables. To retrieve the data we will use the Request.Form(“variable_name”);
function. So let us create 4 variables and retrieve the required data.

var name = Request.Form("Name");
var age = Request.Form("Age");
var gender	= Request.Form("Gender");
var pcode	= Request.Form("PostalCode");

3.The third step is to check whether the user has entered some data, or not. For this we can just check whether the variables in step 2 are still empty or not.

var error = "";
if ( name == "" )
  error = "Name ";
if ( age == "" )
  error += "Age ";
if ( pcode == "")
  error += "PostalCode ";

4. In step 3 we have saved the result in the var error. Now we need to check, if “error” consists some data or not. If yes, then we have found an error, and we will display it. If not, then we will start with the saving procedure.

if(error!=""){
  //We have found an error, so display this to the user!
  Response.Write("Please enter the following data:<br>");
  Response.Write(<b>);
  Response.Write(error);
  Response.Write("</b>");
}
else{
//Everything is fine, so let us start to save the data.

5. Now we have done the nessesary checks and can start with saving the data. For that we will load the Person.xml in a xmlDocument. Then we will load the current node list to get the current root node. To get the current root node, we will use the function xmlDoc.getElementsByTagName. After that we need to create the required nodes, this can be achived with the function xmlDoc.createElement(“AnyNodeName”). At last we only need to save the entered data from the form to the approriate xml variables. So here is the code, how it could look like:

.
.
.
else{
  // here we are loading the requried xml file
  var xmlDoc=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
  xmlDoc.async="false";
  xmlDoc.load(Server.MapPath("Person.xml"));
  // Get the current root
  var nodeList = xmlDoc.getElementsByTagName("PersonList");
  if(nodeList.length > 0){
    var parentNode = nodeList(0) ;
    // Create the required nodes
    var personNode = xmlDoc.createElement("Person");
    var nameNode   = xmlDoc.createElement("Name");
    var ageNode    = xmlDoc.createElement("Age");
    var genderNode = xmlDoc.createElement("Gender");
    var pcodeNode  = xmlDoc.createElement("PostalCode");
    // Assign the variables, which we have retrieved in step 2 to the xml variables.
    nameNode.text  = name;
    ageNode.text   = age;
    genderNode.text= gender;
    pcodeNode.text = pcode;
	.
	.
	.

6. We have done nearly everything to save the data, but there are still two steps left. In this step we will 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. Finally we only need to save the nodes to the xml file. For this you can use the function xmlDoc.save(Server.MapPath(“Person.xml”));.

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

XSL:

With this example you can save easily the data of any Person into a XML file. Right now we have only seen how to save the data, but how do we display it ? The answer is again easy. We will use ASP and XSL to display the data. The first thing you need to do is to load the XML file, this can be achieved with a XML Parser. The XML parser from Microsoft is available directly with Internet Explorer 5.0. After you have loaded the XML file in the document Object, you can retrieve the XML data with the help of a DOM Object. In the same way you 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 you have loaded both files, each one DOM Object. Now you only need to create a query which will select the nodes for us. Of course we could select some specific nodes, but for our needs we will just select the root node, so all other nodes will be selected automatically.

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

After that you only need 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));
   }

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. Once you have mastered and created your own ASP page you will understand much more.

Download examples

First published at SitePoint.com

Codefinger was founded 2000 by Sonu Kapoor. Sonu has studied E-Commerce in India and currently lives in Germany. After graduation he worked for several companies in Germany. He currently works as a Network Consultant and Software Developer. He has written many applications in various programming languages like VC++, ASP, ASP.NET, XML or XSL. Besides his passion for developing applications, Sonu writes articles for several major websites like Developer.com. He also works as a freelancer for CodeGuru.