count down timer in asp.net using ajax

Question

User351619809 posted

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();
}

Answer 1

User409696431 posted

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
        }

Answer 2

User351619809 posted

Thank you!