countdown timer in Ajax in asp.net page

Question

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

Can you please share your code-behind (the aspx.cs or aspx.vb that accompanies this page or control)? — defines, Aug 25 '20 at 00:08

defines · Accepted Answer · 2020-08-25T00:56:13.320

Presently, your code-behind is updating Label1 with the second of the current time. What you want is how much time is remaining until five minutes after the user first loaded the page.

Note that if this is simply to display a five-minute countdown, it is certainly simpler and involves far fewer requests to your server to just do so with javascript; see The simplest possible JavaScript countdown timer?

That's not precisely what you asked for, so let's take a look at doing it with the asp:Timer and asp:AsyncPostBackTrigger, server-side. To do that, first we'll need to know what time the user loaded the page. One way you might do that is to set it to the Session (if not already set):

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["LoggedInTime"] == null)
        Session["LoggedInTime"] = DateTime.Now;
}

Now, in your postback method:

protected void Timer1_Tick(object sender, EventArgs e)
{
    // Get the time back from Session
    DateTime loggedInTime = Convert.ToDateTime(Session["LoggedInTime"]);

    // Add five minutes to calculate the timeout
    DateTime outaTime = loggedInTime.AddMinutes(5);

    // Subtract the current time to get remaining time
    TimeSpan remainingTime = outaTime.Subtract(DateTime.Now);

    // Now, we're ready to format our Label...
    // First, we probably care if time has already expired
    if (remainingTime.Ticks <= 0)
    {
        Label1.Text = "We're outa time, doc!";
        return;
    }

    // Otherwise, format the Label using our TimeSpan
    Label1.Text = $"{remainingTime.Minutes} minutes and {remainingTime.Seconds} seconds left";
}

countdown timer in Ajax in asp.net page

1 Answers1