Click here to Skip to main content
12,623,903 members (31,217 online)
Click here to Skip to main content
Add your own
alternative version

Stats

14.8K views
164 downloads
15 bookmarked
Posted

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>

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>

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

You may also be interested in...

Pro

Comments and Discussions

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