Start /Stop ASP.NET Timer Control using JavaScript

When we add a timer control to a web page it will add the following script to the page.

<script type="text/javascript" >
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":5000,"uniqueID":"Timer1"}, null, null, $get("Timer1"));
});
//]]>
</script>

Now in aspx page, I was refreshing page after fixed time using timer control. But the problem was that when I was performing certain actions the page would refresh and this behavior is not as expected. While performing any operations page should not refresh.

To solve this issue I stopped the timer control using JavaScript and when the task is completed again I start the timer control. In my example I will open a modal popup from Gridview and it closes after page refresh .The various methods available for timer control at client side using JavaScript are:

For stop timer control tick event - timer._stopTimer();
For start timer control tick event - timer._startTimer();
For change interval of timer - timer.set_interval(5000);
For checking whether timer is enabled - timer.get_enabled();
For enabling and disabling timer -timer.setenabled(true); true for enabling and false for disabling.

Below is the code used to solve this issue.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="StopTimer.aspx.cs" Inherits="StopTimer" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function showpopup()
{
var timer = $find('<%= Timer1.ClientID %>');
timer._stopTimer();
console.log("Timer stopped");
$('#myModal').modal('show');
}
$(document).ready(function () {
$(".custom-close").on('click', function () {
var timer1 = $find('<%= Timer1.ClientID %>');
var value = $('#<%=DropDownList1.ClientID %>').val();
timer1.set_interval(parseInt(value));
timer1._startTimer();
$('#myModal').modal('hide');
}
)
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="custom-close" >×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" >Close</button>
</div>
</div>
</div>
</div>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Text="Refresh Every 5 sec" Value="5000" Selected="True"></asp:ListItem>
<asp:ListItem Text="Refresh Every 1 Min" Value="60000" ></asp:ListItem>
<asp:ListItem Text="Refresh Every 2 Min" Value="120000"></asp:ListItem>
<asp:ListItem Text="Refresh Every 3 Min" Value="180000"></asp:ListItem>
</asp:DropDownList>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick"></asp:Timer>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" CssClass="btn " onclick="showpopup();" Text='<% #Eval("Price") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Datetransaction">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<% #Eval("Datetransaction") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Productcode">
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<% #Eval("Productcode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class StopTimer : System.Web.UI.Page
{
string connStr = ConfigurationManager.ConnectionStrings["Test"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
Timer1.Interval = Convert.ToInt32(DropDownList1.SelectedValue);
if (!IsPostBack)
grdibind();
}
protected void grdibind()
{
SqlConnection con = new SqlConnection(connStr);
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "select top 1000 * from Sales";
cmd.Connection = con;
con.Open();
GridView1.DataSource = cmd.ExecuteReader();
GridView1.DataBind();
con.Close();
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Timer1.Interval = Convert.ToInt32(DropDownList1.SelectedValue);
}
protected void Timer1_Tick(object sender, EventArgs e)
{
grdibind();
}
}

On Clicking any cell of the Price column a popup will open using showpopup() thereby stopping timer control using _stopTimer(). When close of Modal popup again i call _startTimer().