Introduction
Ajax (Asynchronous JavaScript and XML) is a new web development technique for the interactive websites. With AJAX to help we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.
- JavaScript
- XML
- Asynchronous Call to the server
Timer Control
Timer controls allow you to do postbacks at certain intervals. If used together with UpdatePanels, which is the most common approach, it allows for timed partial updates of your page, but it can be used for posting back the entire page as well. The Timer control uses the interval attribute to define the number of milliseconds to occur before firing the Tick event.
Step 1 : Open Visual Studio 2010.
- Go to File->New->WebSite
- Select ASP.NET Empty WebSite
Step 2 : Go to Solution Explorer and right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
Step 3 : Go to the Default.aspx page and click on the [Design] option and drag the control from the Toolbox.
- Drag a ScriptManager, UpdatePanel, Image and Label
Step 4 : Go to the Toolbox and drag a TimerControl.
Step 5 : Now define the Timer control property.
Code
<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">
</asp:Timer>
ContentTemplate
Step 6 : We can use the UpdatePanel for the Timer control. Inside the UpdatePanel create a <ContentTemplate>.
Code
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"
ViewStateMode="Enabled">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Font-Size="14pt">AJAX in Action</asp:Label>
<br />
<br />
<asp:Image ID="Image1" runat="server" ImageUrl="~/img/Desert.jpg" Width="200px" />
</ContentTemplate>
AsyncPostBackTrigger
Step 7 : Now go to the Default.aspx[Source] option and define an AsyncPostBackTrigger.
Code
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
Step 8 : Go to the Default.aspx[Source] option and click on the UpdatePanel.
- Go to property option and define ViewStateMode.
Step 9 : Go to Default.aspx.cs file and write some code.
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.Collections.Specialized;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Timer1_Tick(object sender, EventArgs e)
{
NameValueCollection list = new NameValueCollection();
list.Add("AJAX in Action", "~/img/Jellyfish.jpg");
list.Add("AJAX Bible", "~/img/Koala.jpg");
list.Add("my AJAX", "~/img/Lighthouse.jpg");
list.Add("AJAX", "~/img/Penguins.jpg");
list.Add("Bhai", "~/img/Tulips.jpg");
Random r = new Random();
int index = r.Next(0, 5);
Label1.Text = list.Keys[index].ToString();
Image1.ImageUrl = list[index].ToString();
}
Step 10 : Go to the Default.aspx[Source] option and write some code.
Code
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"
ViewStateMode="Enabled">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Font-Size="14pt">AJAX in Action</asp:Label>
<br />
<br />
<asp:Image ID="Image1" runat="server" ImageUrl="~/img/Desert.jpg" Width="200px" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">
</asp:Timer>
</div>
</form>
Step 11 : Now run the application by Pressing F5.
Step 12 : After a two second interval the image will be changed.
Again after two seconds the following image will show.
Resource