TimerControl With UpdatePanel in AJAX Using ASP.NET

Davin Martyn
12y
136.9k
0
3
100
Article

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.