Adding and Displaying Data Easily via ASP and XML/XSL - The Article

(Page 2 of 3 )

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));
}

Next: Conclusion >>
 

More ASP Articles
More By Sonu Kapoor

Comments On: Adding and Displaying Data Easily via ASP and XML/XSL

>>> Be the FIRST to comment on this article!