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
Let’s code!
- Create a web form called
ShowTime.aspx(ShowTime.cswill be auto created) in Visual Studio 2005 and add a label control as shown below: - Open up
ShowTime.csand declare a DateTime type variable and set it to display the current date and time:DateTime dtRightNow = DateTime.Now; - Inside the
Page_Loadset the page to not cache itself with the following code:Response.CacheControl = "no-cache"; - Assign the current date and time to the
lblDateTimecontrol:this.lblDateTime.Text = String.Format("{0:d}", dtRightNow) + " @ " + String.Format("{0:T}", dtRightNow); - Now let’s create
ShowTime.html. This page will call thePrototype.jsand contain some Javascript to make an Ajax call toShowTime.aspx - Between the
tags, reference thePrototype.jsJavascript library like this:. - Now we will write the Javascript that uses
Ajax.UpdaterfromPrototype.js. Below is the code that declares the page containing the dynamic content and the element to output the data when the link is clicked (you could also include the snippet below in a seperate Javascript file). - 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 awith the ID of output.; ;- That’s it! View the demo.
Download
- ShowTime.zip (18kb)
5 Comments
Reply
- That’s it! View the demo.
This does not work in Firefox.
Eiii! thanx! it does work =) i rather use this option than using those horrible update panel heheh
it works on both, firefox and ie =)
One last thing, it is possible to call an specific function?? can you email me ? LOL
Byee
Thanks for the example.
Can you tell me why I cannot make this work if I try to do the exact same from an aspx page (instead of the html page), when I click the link nothing gets updated in the aspx page.
Thanks