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

N.B. I am a noob on asp.net

This should definitely be done on the client-side with javascript. — Ross Brasseaux, Mar 12 '15 at 13:37
This is just an example... But why it is not being passed should i still use something like ajax or something else. Additionally i pass a normal variable only one time and it does pass, the problem is when i pass from a function similiar to an event — Combinu, Mar 12 '15 at 13:42

score 1 · Answer 1 · edited May 23 '17 at 11:56

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.

edited May 23 '17 at 11:56

Community

1
1

answered Mar 12 '15 at 13:50

mason

31,774
10
77
121

Ok now i get it. So i decided to use ajax.. Can anyone post an example to use ajax between client side and server side? – Combinu Mar 12 '15 at 13:54
@MysticJay There's tons of examples of that already on the Internet and Stack Overflow. Do a little search, you'll find what you're looking for. If you run into specific problems with your implementation, then feel free to ask a new question. – mason Mar 12 '15 at 14:00
The problem is that i dont know where to begin as i am really noob – Combinu Mar 12 '15 at 14:11
@MysticJay How do you learn about anything on the Internet? You start with a search. What do you search for? Pick some keywords related to what you want to do. Want to do AJAX polling and use Web API on the server side? Open your favorite search engine and put the keywords in. I used Google and search for `jquery ajax asp.net web api webforms`. One of the first hits was [Using Web API with ASP.NET Web Forms](http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/using-web-api-with-aspnet-web-forms). You may be new, but that doesn't give you an excuse not to do basic research. – mason Mar 12 '15 at 14:14
I like the info on the background process. I'll have to look into that myself. – Ross Brasseaux Mar 12 '15 at 14:20

Ross Brasseaux · Answer 2 · 2015-03-12T15:00:06.070

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:

ASP.net Pass variable from server to client side

2 Answers2

Javascript

HTML