Question

I wanna diplay a Stopwatch timer… using Asp.Net C#…

I have looked through many threads and searched on Google also, but I can’t find a proper code or solution.

Most of the solutions I found were very hard to implement and some of them didn’t work.

I want to create stopwatch like below Image.

By clicking on the start button it starts the watch from 00.00 in the format of HH.MM and and change the text of the button to Stop.

By clicking on that again it stops the watch and then saves that time in a database and also displays it in given TextBox.

By clicking on reset it resets the time to 00.00.

How can i do this?

I doesn’t have any idea about this, so some code is needed.

BELOW IS THE CODE AND IMAGE WHICH I TRIED IN THE WEBSITE…

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Diagnostics;

public partial class Default5 : System.Web.UI.Page
{
    private Stopwatch sw = new Stopwatch();
        protected void Page_Load(object sender, EventArgs e)
        {


        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            if (Button3.Text == "start")
            {
                Timer1.Enabled = true;
                sw.Start();
                Button3.Text = "stop";

            }
            else
            {
                Timer1.Enabled = false;
                sw.Stop();
                Button3.Text = "start";

                //TextBox1.Text = Label1.Text;
            }
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            int hrs = sw.Elapsed.Hours;
            //int hrs = "1;
            int mins = sw.Elapsed.Minutes;
            int secs = sw.Elapsed.Seconds;

            Label1.Text = hrs + ":";

            if (mins < 10)
               Label1.Text += "0" + mins + ":";
            else
                Label1.Text += mins + ":";

            if (secs < 10)
                Label1.Text += "0" + secs;
            else
                Label1.Text += secs;
        }
}

AND THE CODE WRITTEN IN THE PROJECT (WHICH WORKS WELL) IS…

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Diagnostics;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private Stopwatch sw = new Stopwatch();

        private void button1_Click(object sender, EventArgs e)
        {
            if (button1.Text == "Start")
            {
                timer1.Enabled = true;
                sw.Start();
                button1.Text = "Stop";

            }
            else
            {
                timer1.Enabled = false;
                sw.Stop();
                button1.Text = "Start";
                textBox1.Text = label1.Text;
            }
        }

        private void timer1_Tick(object sender, EventArgs e)
        {
            int hrs = sw.Elapsed.Hours, mins = sw.Elapsed.Minutes, secs = sw.Elapsed.Seconds;

            label1.Text = hrs + ":";

            if(mins <10)
                label1.Text += "0"  + mins + ":";
            else 
                label1.Text += mins + ":";

            if (secs < 10)
                label1.Text += "0" + secs;
            else
                label1.Text += secs;
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

In both the timer interval is set at 1000.

In the website the time is not increasing, it remains at 0:00:00…

Answer 1

There is a big difference in developing for desktop and for web applications.

In your WinForm app, the app is running on one pc, in one process. The code behind has constant access to the User Interface and can update the current time.

In a Web application, everything is different. The web is by it’s very nature a disconnected, stateless environment. This means that the server gets a request from a browser somewhere in the world, creates a response and sends this back to the browser and forgets about it.

This means that there is no permanent connection between the user interface showing in the browser and the code running on your on server. This is why your code is not working.

ASP.NET WebForms has functionality that helps you with the problems that are inherent to web development, it kinds of tricks in you believing there is some permanent connection.

I would suggest, to get better understand how things work, to remove the timer from your code behind and add a button that when clicked will change the label text.

To really create a stopwatch you need code that runs in the browser of your users, instead of on the server. Code running in the browser knows about the environment and user interface and it can update things accordingly. This is done in a different programming language called JavaScript.

I would suggest starting with the tutorials here.