Quick Ajax example using Prototype.js

Overview

This example will explain how to use the Prototype.js Javascript library to perform a simple Ajax call from an html page to an ASP.NET page with dynamic info. In this example the dynamic ASP.NET page is getting the current date and time, in a real-world example an ASP.NET page could parse RSS feeds, show stocks quotes, lookup weather, etc.

Requirements

• ASP.NET
• Prototype.js

Let’s code!

1. Create a web form called ShowTime.aspx (ShowTime.cs will be auto created) in Visual Studio 2005 and add a label control as shown below:

2. Open up ShowTime.cs and declare a DateTime type variable and set it to display the current date and time:

   DateTime dtRightNow = DateTime.Now;

3. Inside the Page_Load set the page to not cache itself with the following code:

   Response.CacheControl = "no-cache";

4. Assign the current date and time to the lblDateTime control:

   this.lblDateTime.Text = String.Format("{0:d}", dtRightNow) + " @ " + String.Format("{0:T}", dtRightNow);

5. Now let’s create ShowTime.html. This page will call the Prototype.js and contain some Javascript to make an Ajax call to ShowTime.aspx
6. Between the tags, reference the Prototype.js Javascript library like this:
7. We’re almost done! Just need to ad add a few more things between the tags. We will add a link with an ID called showtimelink and a
   with the ID of output.

   
   Click this link to show current date & time
   
   ;
   
   
   ;
   

8. That’s it! View the demo.

Download

• ShowTime.zip (18kb)