In this article i will demonstrate how to control the 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.
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 i used to solve this issue.
When we add a timer control to a web page it will add the following script to the page.
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 behaviour is not as expected.While performing any operations page should not refresh.To solve this issue i stoped 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 clientside using javascript are:-<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>
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 i 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> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <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().
