Home arrow ASP arrow Page 2 - Adding and Displaying Data Easily via ASP and XML/XSL

Adding and Displaying Data Easily via ASP and XML/XSL

Sonu's article will help DevArticles readers learn how to simply add data to a XML document via an ASP form.

Author Info:
By: Sonu Kapoor
Rating: 4 stars4 stars4 stars4 stars4 stars / 86
June 02, 2003
  1. · Adding and Displaying Data Easily via ASP and XML/XSL
  2. · The Article
  3. · Conclusion

print this article

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>
<INPUT name=Postalcode>
<INPUT type=submit value=Submit name=submit><INPUT type=reset value=Reset name=reset>

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.
   // 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.

  //We have found an error, so display this to the user!
  Response.Write("Please enter the following data:<br>");
//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:

   // here we are loading the requried xml file
   var xmlDoc=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
   // 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");


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


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;
var xsl=Server.CreateObject("MICROSOFT.FreeThreadedXMLDOM");
xsl.async = false;

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;
var nn;
for(var i=0;i<numNodes;i++){
   nn = docHeadlines.nextNode();

blog comments powered by Disqus

- Central Scoreboard with Flash and ASP
- Calorie Counter Using WAP and ASP
- Creating PGP-Encrypted E-Mails Using ASP
- Be My Guest in ASP
- Session Replacement in ASP
- Securing ASP Data Access Credentials Using t...
- The Not So Ordinary Address Book
- Adding and Displaying Data Easily via ASP an...
- Sending Email From a Form in ASP
- Adding Member Services in ASP
- Removing Unconfirmed Members
- Trapping HTTP 500.100 - Internal Server Error
- So Many Rows, So Little Time! - Case Study
- XDO: An XML Engine Class for Classic ASP
- Credit Card Fraud Prevention Using ASP and C...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials