Timer in ASP.NET webform to update a label text

Question

I use this code for create timer that want to update a label each second:

timer = new System.Timers.Timer();
timer.Elapsed += new ElapsedEventHandler(OnRefresh_Tick);
timer.Interval = 1000;

The function OnRefresh_Tick call each second but the label text doesn't change.

Edit:

I use the below code for the timer, but when the timer starts, I can't write in the second textbox (txtPassword) and it refreshes and the cursor goes to the first textbox (txtUserName)

.aspx file:

<form id="form1" runat="server">
        <br /><br />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="txtUserName" runat="server" Height="30px" Width="100px"></asp:TextBox><br /><br />
                <asp:TextBox ID="txtPassword" runat="server" Height="30px" Width="100px"></asp:TextBox><br /><br />
                <asp:Label runat="server" id="lnkSendVerificationCode"></asp:Label><br /><br />
                <asp:Button ID="Button1" runat="server" Text="Start Timer"  CssClass="btn" OnClick="Button1_Click"/>
                <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

.cs file:

protected void Page_Load(object sender, EventArgs e)
{
            if(!IsPostBack)
            {

            }
        }

        protected void Button1_Click(object sender,EventArgs e)
        {
            Session["VerificationCodeCounter"] = "20";
            Timer1.Enabled = true;
        }//Button1_Click

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            int sendVerificationCounter = -1;
            try { sendVerificationCounter = int.Parse(Session["VerificationCodeCounter"].ToString()); } catch { }//catch

            if (sendVerificationCounter == 1)
            {
                sendVerificationCounter = -1;
                Session["VerificationCodeCounter"] = sendVerificationCounter.ToString();
                Timer1.Enabled = false;
            }//if
            else if (sendVerificationCounter > 0)
            {
                sendVerificationCounter--;
                lnkSendVerificationCode.Text = sendVerificationCounter.ToString();
                Session["VerificationCodeCounter"] = sendVerificationCounter.ToString();
            }//else if
        }//Button1_Click

Answer 1

Try say this:

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div style="padding:25px">
                <h4>enter seconds to count down</h4>
                <asp:TextBox ID="txtCount" runat="server" 
                    Height="42px"
                    Width="80px"
                    Font-Size="XX-Large"
                    Text="0"
                    style="text-align: center">
                </asp:TextBox>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Start Timer"  CssClass="btn" OnClick="Button1_Click"/>

                <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>

        <br />
    </div>

And code behind would be this:

    protected void Button1_Click(object sender, EventArgs e)
    {
        Timer1.Interval = 1000; // tick our timer each second
        Timer1.Enabled = true;
    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        int MyCount = Convert.ToInt32(txtCount.Text);
        if (MyCount > 0 )
        {
            MyCount = MyCount - 1;
            txtCount.Text = MyCount.ToString();
        }
        else
        {
            // we are done, stop the timer
            Timer1.Enabled = false;
        }
    }

So, we now see this if we enter 10 (for 10 seconds).

If we hit start timer, then it counts down to 0, and then stops the timer.

Edit: With a up-date panel

So, if we don't want a whole page re-fresh, then we can use this:

         <h4>enter seconds to count down</h4>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="txtCount" runat="server" 
                    Height="42px"
                    Width="80px"
                    Font-Size="XX-Large"
                    Text="0"
                    style="text-align: center">
                </asp:TextBox>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Start Timer"  CssClass="btn" OnClick="Button1_Click"/>

                <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>

Remember, while the whole page will now not re-fresh, do keep in mind that the page life cycle DOES trigger. So, if you have some code in on-page load to setup controls? Then you need this

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // code here to load up grids, and controls 
            // code here ONLY runs on first time page load
        }
    }

So, keep in mind that for any up-date panel (button clicks, timer etc.), then the page load event DOES fire each time.

However, that !IsPostback check? The last 100+ web pages I created that loads or sets up ANYTHING on a page will have the above code stub, and check for !IsPostback.

You can't quite even make a working webforms page unless you follow the above rule. What this means is your page can now handle post-backs, and not re-load controls and run the first time setup of such controls.

So, keep in mind, a update panel DOES post-back, and does trigger the page load event. Better said, a update panel, and click of a button (or timer) inside will post-back, but it what we call a partial page post-back.

Edit3: With a label

So, say we want a label - not a text box. Then do this:

<body>
    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div style="padding:25px">

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="txtCount" runat="server" 
                        Height="42px"
                        Width="80px"
                        Font-Size="XX-Large"
                        Text="999"
                        style="text-align: center">
                    </asp:Label>
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Start Timer"  CssClass="btn" OnClick="Button1_Click"/>

                    <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
        </div>
    </form>
</body>

And now our code becomes this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // code here to load up grids, and controls 
            // code here ONLY runs on first time page load
            txtCount.Text = "10";
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Timer1.Interval = 1000; // tick our timer each second
        Timer1.Enabled = true;
    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        int MyCount = Convert.ToInt32(txtCount.Text);
        if (MyCount > 0 )
        {
            MyCount = MyCount - 1;
            txtCount.Text = MyCount.ToString();
        }
        else
        {
            // we are done, stop the timer
            Timer1.Enabled = false;
        }
    }

And now we see this: