When we add a timer control to a web page it will add the following script to the page.
- <script type="text/javascript" >
-
- 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>
-
- <!-- 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().