1

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.

Page.asp:

<body>
    <form id="form1" runat="server">
        <canvas id="canv" width="200" height="200">
            Cannot display canvas because your web browser is a fail.
        </canvas>
        <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");
                return;
            }

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

            var x;

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

            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;
            for (i = 0; i < ctrls.length; i++) {
                ctrls[i].value = newVal; //For example
            }
        }

        </script>
    </form>
</body>

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.

Improve this question

2 Answers 2

Reset to default
1

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.

Improve this answer
7
  • 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? Commented Oct 21, 2010 at 13:26
  • Alternatively, how to call c# method from javascript would be a good solution. Commented Oct 21, 2010 at 13:28
  • 1
    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 }); Commented Oct 21, 2010 at 13:39
  • 1
    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 Commented Oct 21, 2010 at 13:48
  • How do I get the returned value? Commented Oct 21, 2010 at 15:19
1

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:

http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

Hope this helps.

Improve this answer
1
  • The web service isn't my department so I'm stuck with an XML one unfortunately! Commented Oct 21, 2010 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.