Store and Display Data Using ASP and XML/XSL

Storing and displaying data is an essential task if you work with applications. Regardless of whether you work with desktop applications or Web applications, the save and display processes are nearly always required.

In this article, I'll show how you can easily use an ASP form to add data to a XML file, how to retrieve this data, and how to display it in a well-formed table.

We'll create an example ASP page, in which the user will be able to enter his name, age, gender and a postal code. This data will be stored in a XML file, and displayed using XSL. The example ASP page and the resulting table will look like this:

Some programmers like to mix their asp and html code, but I wouldn't recommend it. I've always found it helpful to divide the ASP page in two parts wherever possible, and I'd suggest you to do the same.

Here's the structure of my ASP page:

The first part contains a simple form, and the second part contains the ASP code that will do the saving for us. For a better understanding, let's start by looking at the form.

The Form

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

In this example, I've created a simple form called frmPerson, which contains three text fields and a drop down field. We'll use the post method to process the data entered into this 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's very important to give a variable name to each tag that which will hold data. For example, the name text field <INPUT name=Name> contains the variable Name. In order to retrieve the data from the form, we'll use this and other variables in the next ASP paragraph. To get familiar with ASP and XML, I suggest you download the examples and go over them.

Ok, that's first part of the ASP page done. The second part will be even easier!

The ASP Code

Now, I'll show you in 7 easy steps how to retrieve the data from the form, and save it data to a XML file.

1. The first step is, of course, 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 written in Jscript, though this isn't recommended.
}

2. Now we need to retrieve the data from the form, and store it in appropriate variables. To retrieve the data we'll use the Request.Form("variable_name"); function.

So let's 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 any data into the form. To do this, we simply check whether the variables in step 2 are empty.

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

4. In step 3, we saved the results in var error. Now we need to check, if "error" contains any data. If it does, then we know we've found an error, and we'll display it as such. If error is empty, then we'll move on to 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's start to save the data.
}

5. Now that we've performed the necessary checks, we can save the data.

For this, we'll load the Person.xml file into an XML document. Then, we'll load the current node list to get the current root node, using the function xmlDoc.getElementsByTagName.

Once this is done, we'll need to create the required nodes. This can be achieved with the function xmlDoc.createElement("AnyNodeName"). Finally, we'll need to save to the appropriate XML variables, the data that was entered into the form. Here's the code you'll need:

.
.
.
else{
 // Load the required 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;
   .
   .
   .