Take the 2-minute tour ×

I'm fairly new to web development.

Basically I'm using a HTML5 canvas to render content, and javascript functions which clear and render to the canvas.

I'm hoping to call a web service to get data that would affect content, which I believe is most easily done from C#, and was wondering how I could use this to periodically call a javascript function that would update values that are being rendered to the canvas?

To make this clearer, I have something like this:

Oh I'm also using jquery by the way, partly because I was told to.


        <canvas id="canv" width="200" height="200">
            Cannot display canvas because your web browser is a fail.
        <script type="text/javascript">

        var ctrls = new Array();

        $(document).ready(function () {
            var canvas;
            var context;
            canvas = $("#canv").get(0);
            if (!canvas) {
                alert("Failed to get canvas");

            context = canvas.getContext('2d');
            if (!context) {
                alert("Failed to get context");

            var x;

            x = new Object();
            x.value = 0;
            x.parent2d = context;

            window.setInterval(Render, 25);

        function Render() {
            var i;
            for (i = 0; i < ctrls.length; i++) {
                ctrls[i].parent2d.clearRect(0, 0, 200, 200);
                //Draw stuff.

        function Update(newVal) {
            var i;
                ctrls[i].value = newVal; //For example


What is the easiest (if it's even possible) way to call the Update(newVal) function from C# (Page.asp.cs), and how could this be set up to be done periodically? What would be the limitations on what object(s) could be passed to this function?

Dictionary<String, Double>

would be very useful.

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

When exactly does update need to be called after page load? If it's every five seconds, it might be easier to carefully set up some sort of Javascript-based interval (making sure you are checking certain conditions to ensure that the interval quits upon any error conditions).

Depending on what data you have, you may want to setup a method in C# that given certain POST or GET parameters passed to it via a jQuery $.ajax() call.

For instance:

$(document).ready(function() {
var intervalId = setInterval("runUpdate()", 5000);

function runUpdate() {
//Make an ajax call here, setting up a variable called 'data'

update(data);//Data is newVal, which was setup in the ajax call above

That code would run the update function every five seconds.

share|improve this answer
Hi, update would be called with/after periodic calls to a web service (say, every 10sec). I'd prefer to make the web service calls from C#, otherwise do you know of a good ajax tutorial? –  Toby Wilson Oct 21 '10 at 13:26
Alternatively, how to call c# method from javascript would be a good solution. –  Toby Wilson Oct 21 '10 at 13:28
Jquery's $.ajax() method is fairly simple: api.jquery.com/jQuery.ajax Once you design a method in C# to handle whatever parameters your jQuery sends it in Ajax, and then pass back a text-based value. $.ajax( type: 'POST', data: info_variable_sent_to_c_sharp, url: '/Your/Site/method', success: function() { //Do something here, it worked }, error: function() { //Do something else, it failed }); –  Mattygabe Oct 21 '10 at 13:39
Essentially, the high-level view of the action sequence is this: 1. Page Loads 2. Javascript creates 10-second timer 3. Every ten seconds, call "runUpdate" javascript function 4. runUpdate performs an ajax request, getting a "new value" from your application 5. runUpdate calls update() using aforementioned "new value" 6. Steps 3-5 are repeated until the end of time –  Mattygabe Oct 21 '10 at 13:48
How do I get the returned value? –  Toby Wilson Oct 21 '10 at 15:19
show 2 more comments

Firstly from Javascript I would normally avoid using xml based web services. The returned data is XML which has lots of unessesary tags which can cause transfer to be slow.

Instead look at JSON. Its much faster. However not so easy for authentication. To help you understand its power both twitter and facebook use it in there APIs.

JQuery can consume JSON really easy

$.getJSON(someurl, function(jData) {
//use returned data

You might find it useful to read this:


Hope this helps.

share|improve this answer
The web service isn't my department so I'm stuck with an XML one unfortunately! –  Toby Wilson Oct 21 '10 at 13:36
add comment

Your Answer


