TechClub: Start /Stop Asp Timer Control using javascript :-Rajeev Punhani

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.



<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 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:-
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" >&times;</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().

Saturday, August 8, 2015

Start /Stop Asp Timer Control using javascript

No comments :

Post a Comment

About Me

Subscribe us

Labels

Subscribe us