count down timer in asp.net using ajax[Answered] RSS

• • Reply
  anjaliagarwa...

  Member

  511 Points

  1275 Posts

  count down timer in asp.net using ajax

  Aug 25, 2020 12:18 AM|anjaliagarwal5@yahoo.com|LINK

  My web page has a timeout of 5 minutes. I want to show the users the count down in minutes and seconds so I want to show something like :

  4 minutes and 10 seconds left

  I tried to implement below code in order to achieve this:

  <asp:Timer ID="Timer1" runat="server" Interval="5000" ontick="Timer1_Tick">
                          </asp:Timer> 
                      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                      <ContentTemplate>
                          <span style="border:2px; color:tomato">Time Remaining:<asp:Label ID="Label1" runat="server"></asp:Label></span>
                      </ContentTemplate>
                      <Triggers>
                          <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick">
                          </asp:AsyncPostBackTrigger>
                      </Triggers>
                  </asp:UpdatePanel>

  This is showing the timer, but the time is showing like so:

  

  I want to show the timer as minutes and seconds. How can I achieve that. Below is my .cs page code:

  protected void Timer1_Tick(object sender, EventArgs e)
  {
      Label1.Text = DateTime.Now.Second.ToString();
  }

• • Reply
  KathyW

  Contributor

  5961 Points

  2468 Posts

  Re: count down timer in asp.net using ajax

  Aug 25, 2020 06:05 AM|KathyW|LINK

  What you are doing now is showing the seconds value of Datetime.Now every 5 seconds.  That counts up, and only show seconds.

  If you want to have a 5 minute count down, set a variable to 5 minutes and subtract 5 seconds from it on each tick of the timer.

          protected void Page_Load(object sender, EventArgs e)
          {
  
              if (!IsPostBack)
              {
                  if (Session["CountdownTimer"] == null)
                  {
                      Session["CountdownTimer"] = new TimeSpan(0, 5, 0);
                  }
                  TimeSpan current = (TimeSpan)Session["CountdownTimer"];
                  Label1.Text = current.ToString("%m") + " minutes and " + current.ToString("%s") + " seconds";
              }
          }
          protected void Timer1_Tick(object sender, EventArgs e)
          {
              TimeSpan ts5sec = new TimeSpan(0, 0, 5); // 5 seconds
              TimeSpan ts = (TimeSpan)Session["CountdownTimer"]; // current remaining time from Session
              TimeSpan current = ts - ts5sec; // Subtract 5 seconds
              Label1.Text = current.ToString("%m") + " minutes and " + current.ToString("%s") + " seconds";
              Session["CountdownTimer"] = current;  // put new remaining time in Session 
              
              //Add your code here to test for remaining time = 0 and clear the session, stop the timer, and do whatever you need to do after 5 minutes
          }

  
  
  

• • Reply
  anjaliagarwa...

  Member

  511 Points

  1275 Posts

  Re: count down timer in asp.net using ajax

  Aug 25, 2020 05:42 PM|anjaliagarwal5@yahoo.com|LINK

  Thank you!