Showing timer from c# on html page using javascript

Question

Hello I am trying to implement a timer in c sharp that counts seconds and display it on my html page. But when i pass the variable to javascript it is always 0. I have searched everywhere for an answer.

This is my code so far:

The timer object:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Timers;

/// <summary>
/// Summary description for Class1
/// </summary>
public class TimerEu
{

    private Timer t;
    private int time;

    public TimerEu()
    {
        this.t = new Timer(1000);
        this.time = 0;

        t.Elapsed += new ElapsedEventHandler(RunEvent);
        t.Interval = 1000;
        t.Enabled = true;
    }

    public void RunEvent(object source, ElapsedEventArgs e)
    {
        this.time++;
        Console.WriteLine(time);
    }
    public int getTime()
    {
        return this.time;
    }
}

aspx.cs page:

public partial class _Default : System.Web.UI.Page
{
    public String[] var=new String[10];
    public TimerEu time;
    public int  testint;

    protected void Page_Load(object sender, EventArgs e)
    {
        time = new TimerEu();
        testint = 0;

        Console.Write("hello"+time.getTime());
        for (int i = 0; i < 10; i++)
            var[i] =Operations.test.convertString();
    }

    public void plus()
    {
        this.testint++;   
    }
}

and the html/javascript part:

<form id="form1" runat="server">
    <div>
        <br></br>
        <br></br>
        <br></br>
        <p id="demo" runat="server"></p>

        <script>
            var now=0;

            var x= setInterval(function () {
            //now++;

            now = <%=time.getTime()%>
        //    now =<%=testint%>
         //   <%plus();%>

            document.getElementById("demo").innerHTML = now;
    },1000)
</script>

The problem is that the javascript dosen't seem to call the getTime function every sec, instead it only gets 0 as output. What am I doing wrong?

What are you trying to achieve? why do you need a server side timer? could you use a client side timer to execute methods server side instead? at the moment you effectively have two timers running. — Mauro, Jul 20 '17 at 08:28
ASP is Active Server Page, it is server side code that only runs on a postback ie page load , there is no way it can inform java of the timer change, if you move it onto a service call you can use AJAX to call it from java but then you can do the exact same thing in pure java — MikeT, Jul 20 '17 at 08:32
the code inside `<% %>` will only get generated when the page loads and not for each iteration of the timer. If you wish to inspect the `value` of the server variable then you need to create a `webapi controller` that you call from your `javascript` but is this REALY what you want?? — Steve Drake, Jul 20 '17 at 08:32
Possible duplicate of [Calling ASP.NET Code Behind function from JavaScript](https://stackoverflow.com/questions/2521352/calling-asp-net-code-behind-function-from-javascript) — MikeT, Jul 20 '17 at 08:43
I know I can do it in pure javascript, but that is not my intention, the timer in c# represents a data change on the server side that the page has to detect. — Sergiu, Jul 20 '17 at 09:56
@SteveDrake yes! I want to be able to call the function after the page loads — Sergiu, Jul 20 '17 at 10:06
@Sergiu I would post a dif Q, or maybe have a look at https://stackoverflow.com/questions/14049817/in-asp-net-mvc-all-possible-ways-to-call-controller-action-method-from-a-razor — Steve Drake, Jul 20 '17 at 10:29
if you wish to enter the new world of building fancy websites, I would look into creating Single Page App my personal choice is Angular (not angularjs but Angular) but that's my choice which ofc is subjective. https://angular.io/ — Steve Drake, Jul 20 '17 at 10:31
You won't be able to do what you want. As long as you want to do it in C# you will have to make an ajax call to get the result of your C# function. Your server is not able to send notifications to the client in webApps... At least i don't know either how to do that. — JBO, Jul 31 '17 at 09:19

score 2 · Answer 1 · answered Jul 20 '17 at 08:35

You have to understand important thing. This statement <%=time.getTime()%> is executed only once on the server side before rendered html page is sent to the browser. When it's executed, it will be replaced with 0 (the result of method call).

Browser will see only now = 0 and in this case, javascript code doesn't make any sense

score 1 · Answer 2 · answered Jul 20 '17 at 08:30

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 <script type="text/javascript">
     var before_loadtime = new Date().getTime();
     window.onload = Pageloadtime;
     function Pageloadtime() {
         var aftr_loadtime = new Date().getTime();
         // Time calculating in seconds
         pgloadtime = (aftr_loadtime - before_loadtime) / 1000
         document.getElementById("loadtime").innerHTML = "Pgae load time is <font color='red'><b>" + pgloadtime + "</b></font> Seconds";
     }
</script>
</head>
<body>
<h3 style="font-weight: bold; font-style: italic; font-size: large; color: #3333CC">Page load time in JavaScript</h3>
<div>
<span id="loadtime"></span>
</div>
</body>
</html>

answered Jul 20 '17 at 08:30

khushi

32
3

2

code only answer are not good answers, add a paragraph or 2 to explain how you fixed the issue and why the issue happened in the first place – MikeT Jul 20 '17 at 08:36
it is necessary? – khushi Jul 20 '17 at 08:54
necessary no, good practice Yes, way of avoiding down votes and moderation definitely – MikeT Jul 20 '17 at 08:59
I don't want to time the loading time, I want to display the data change in the c # code on the page, the timer is just the easiest way i can simiulate a data change. – Sergiu Jul 20 '17 at 10:04
mike I am new here so guide me how to give answer, my answer is correct but u r says about votes i can not understand properly. – khushi Jul 20 '17 at 10:54

Showing timer from c# on html page using javascript

2 Answers2