ASP.net Pass variable from server to client side

Question

I am using system timers on server side using this code

System.Timers.Timer tm = new System.Timers.Timer();

After i am using the interval event so that when the timer is started with a specified interval, the event is fired and i do my code which is the following

protected void ev_interval(some arguments)
{
   label.text = (x++).ToString();
}

So to simplify i have a global variable x which increments and is passes to a label which is found on the client aspx file.

When not using timers the variable is passed but when the timer is fired i can see no value in the label text.

Do i need a refresh or something since it will be loading a different number or do i need to get in the same scope?

Note that when i am using breakpoints the line in the interval event is executed and when i try to watch the variables everything is ok the problem is that it is not displaying on the page.

Regards

NB I am a noob on asp.net

Answer 1

When the server sends the response to the client, that's it. No further communication takes place between the server and the client. So running a timer in the code behind on the server isn't a good idea, you won't have any client to talk to by the time your timer's interval function is hit.

In order to update the client after the initial request, you have a couple of options.

The first option is to implement polling, using AJAX and a JavaScript timer. Every few seconds the web page will fire off a new asynchronous request to the server, which will respond with additional content. Usually the server side component for this in ASP.NET would be Web API . Often the client side uses a JavaScript library to abstract away some of the more cumbersome AJAX details, and jQuery is one of the most popular for that. This question shows how to implement polling.

A more modern technique would be to have some background process on the server running at a specified interval. I'm partial to Hangfire , because it has a cool interface. This background logic would run its task, then ideally call some code on all connected clients, RPC style . A great library for accomplishing that in ASP.NET is SignalR . Basically, the client opens a connection to the server, then the server can call JavaScript functions on the client at will. It's great for "real time" things that you want to update faster than implementing polling, and it scales better.

Answer 2

If you want to perform a server side function periodically and according to a timed interval, then you most likely want a client-side process. Judging from your question, however, it doesn't look like you need anything from the server-side at all. If this is just a value that increments according to a timer, why not just create a javascript function to do this?

If, on the other hand, you have a variable that somehow changes server-side and you need to pass it to the client, you would do something similar to the code below, except you would place an API call within the timer's handler instead of the incrementing value. The handler would call the API (which is basically just a function on the server-side that can be called by the client without a post-back), the API would perform the function and return a value, and the javascript would insert the value into the element on the web page. Granted, if you are new, there can be some complex steps involved when creating APIs, but that is how you would do it.

I'll include some links at the bottom of this answer to get you started on building the API if that's what you want to do.

---

Javascript

$(document).ready(function () {
    var myAspTextbox = $('#myAspTextbox'); // variable for our ASP Textbox control.
    var inc = parseInt(myAspTextbox.val() || 0); // variable for ou incrementing value. This will pull either (1) the value already in the textbox if one is there when the page is loaded, or (2) will set the value to zero.
    var timeInterval = 2000 // set interval timer for two seconds
    var incrementalInterval = setInterval(function () {
        inc++;
        myAspTextbox.val(inc);
    }, 1500);

});

---

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DEMO</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="freestyle.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:TextBox ClientIDMode="Static" ID="myAspTextbox" runat="server" placeholder="Incremental Interval"></asp:TextBox>

    </div>
    </form>
</body>
</html>

---

If you want to create an API controller...

Whether you're using webforms or MVC, API controllers are an excellent tool for partial page rendering and dynamic content, and I always encourage budding developers to consider using them. The instructions for creating an API controller are a little vast to post here directly, but here are some excellent links that should get you started:

• Using Web API with ASP.NET Web Forms
• Create Web API in .Net ASP.NET 4.0 Web Form - VB.NET