Click here to Skip to main content
11,409,922 members (61,305 online)
Click here to Skip to main content

ASP.NET, AJAX and XML: Creating a simple counter

, 21 Jul 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
This article is a simple demonstration of how to use asp.net and Ajax to interact with an XML file

Introduction

Create a simple counter which increases every time a page loads. This uses Ajax and ASP.NET technology. Data is stored and retrieved in am XML file. Once the page is loaded it send a query via ajax to an ASP.NET file, this opens an xml file reads, writes, saves, and sends the result back. Meanwhile Ajax is waiting and listening for a response, once received it displayed and formats it.

More importantly this, simple project shows the power of ajax..and how simple it is to implement in your existing backend code. The

Using the Code

There are 3 parts for the code to work fine

1. CountViews.xml(XML):


<?xml version="1.0" encoding="UTF-8"?>
<CountViews>
  <views>1</views>
</CountViews>

This is your data source and will store and save the increment in the value of the counter. If you are not familiar with XML, google "XML tutorial".

2. CountViews.cs (C#):

 
public partial class CountViews : System.Web.UI.Page
  {
  public string QQ = HttpContext.Current.Request.QueryString["QQ"];
  public string thePath = "CountViews.xml";

  protected void Page_Load(object sender, EventArgs e)
  {
  count(Convert.ToInt32(QQ));
  }</p>
 public void count(int myQQ)
  {</p>
XmlDocument doc = new XmlDocument();

  //LOAD XML FILE
  try
  {
  doc.Load(Server.MapPath(thePath));
  }

  catch (Exception) { Response.Write("Couldn't load XML file. Check its permissions"); }</p>
//FIND THE REQUIRED NODE

  string xPathID = "/CountViews/views";
  XmlElement myItem = (XmlElement)doc.SelectSingleNode(xPathID);

  //GET CURRENT VALUE AND ADD INCREAMENT
  string views = (Convert.ToInt32(myItem.InnerText) + myQQ).ToString();
  myItem.InnerText = views;
  try
  {
  //SAVE INCREASED VALUE</p>
doc.Save(Server.MapPath(thePath));
  }
  catch (Exception) { Response.Write("Couldn't save value check the permissions of your xml file"); }</p>
 //OUTPUT NEW VALUE
  Response.Write(views);
  }</p>
}</p>

This is your typical cs backend code. A series of events happens when ajax delivers the query

1. The XML file is loaded into memory.
2. The current counter value is retrieved from the XML node
3. A simple calculations executes to get new counter value
4. The value is saved to the same XML file
5. The value is also returned which ajax receives.

3. DisplayViews.aspx (Ajax, Javascript, html):

<script type="text/javascript"></p>
function GetXmlHttpObject()
  {
  var xmlHttp=null;
  try
  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();
  }
  catch (e)
  {
  // Internet Explorer
  try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  }
  return xmlHttp;

  }
  function ajaxUpdate(url, mydiv, QQ) {

  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 

  if (xmlhttp) {

  xmlhttp.onreadystatechange = function() {

  if ((xmlhttp.readyState == 4 || xmlhttp.readyState == 'complete') && xmlhttp.status == 200) {

  document.getElementById(mydiv).innerHTML = xmlhttp.responseText;

  }

  } 

  xmlhttp.open("GET", url + "?q=" + Math.random()+ "&QQ="+QQ, true);

  xmlhttp.send(null);

  }

  }</script></p>

<body onload="javascript:ajaxUpdate('CountViews.aspx','show_div','1');">
<form name="frmServerTime" id="frmServerTime">
<table border="0" cellpadding="4" cellspacing="0" id="Table2"> 
<tr><td>
<input type="button" name="btnTime" value=" +10 " id="btnTime" 
onclick="javascript:ajaxUpdate('CountViews.aspx','show_div','10');" />
<input type="button" name="btnTime" value=" +100 " id="Button1" 
onclick="javascript:ajaxUpdate('CountViews.aspx','show_div','100');" />
</td> 
</tr> 
<tr> 
<td><div id="show_div" style="border:1px solid RED; width:100px; height:20px;"></div></td> 
</tr> 
</table></form>
</body>
  

Ajax acts like a messenger. It will receive the query from the user rally it to the server then patiently wait for an answer. Once one is detected it displays it , to the user, preferably formatted with css.

The first function GetXmlHttpObject() creates a XMLHttpRequest based on what browser you are using. This is vital for ajax to work.

The next function ajaxUpdate(url, mydiv, QQ) is a method which passes 3 variables via ajax

1. url: The url where the file ajax is to be interacting is .
2. mydiv: The div area you want the result to be displayed
3. QQ: Any extra query you wish to send to your backend script via GET using ajax.

Also on this file (DisplayViews.aspx)is a simple html form which houses the user interface for the user. This has an onload event on the body tag which fires the function in javascript to increase the counter.

Points of Interest

I have also created 2 extra buttons which fires off the same function but with different values. One increases the counter by 10, the other by 100.
It shows how dynamic ajax can be. Did you also notice the speed..this is very obvious because the page doesn't load.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ola Apata
Technical Lead
United Kingdom United Kingdom
Ola Apata is a Technical IT Consultant who specialise is social media development, training and marketing. Ola resides in UK and has worked with big brand names
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150414.5 | Last Updated 21 Jul 2008
Article Copyright 2008 by Ola Apata
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid