javascript + asp.net - 从 c# 调用 javascript 函数并传递一个对象答案

【问题标题】：javascript + asp.net - Calling javascript functions from c# and passing an objectjavascript + asp.net - 从 c# 调用 javascript 函数并传递一个对象
【发布时间】：2010-10-21 13:13:31
【问题描述】：

我对 Web 开发还很陌生。

基本上我使用 HTML5 画布来呈现内容，以及清除并呈现到画布的 javascript 函数。

我希望调用 Web 服务来获取会影响内容的数据，我认为这在 C# 中最容易完成，并且想知道如何使用它来定期调用将更新值的 JavaScript 函数正在渲染到画布上？

为了更清楚，我有这样的事情：

哦，顺便说一句，我也在使用 jquery，部分原因是我被告知要这样做。

页面.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>

从 C# (Page.asp.cs) 调用 Update(newVal) 函数的最简单（如果可能的话）方法是什么，如何将其设置为定期执行？可以将哪些对象传递给此函数有什么限制？

Dictionary<String, Double>

会很有用的。

【问题讨论】：

标签： c# javascript asp.net html canvas

【解决方案1】：

页面加载后究竟什么时候需要调用更新？如果是每五秒一次，那么仔细设置某种基于 Javascript 的间隔可能会更容易（确保您正在检查某些条件以确保间隔在任何错误条件下退出）。

根据您拥有的数据，您可能希望在 C# 中设置一个方法，该方法通过 jQuery $.ajax() 调用传递给它的某些 POST 或 GET 参数。

例如：

$(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
}

该代码将每五秒运行一次更新函数。

【讨论】：

您好，更新将在定期调用 Web 服务时/之后调用（例如，每 10 秒）。我更喜欢从 C# 进行 Web 服务调用，否则你知道一个好的 ajax 教程吗？
另外，如何从 javascript 调用 c# 方法将是一个很好的解决方案。
Jquery 的 $.ajax() 方法相当简单：api.jquery.com/jQuery.ajax 在 C# 中设计一个方法来处理 jQuery 在 Ajax 中发送的任何参数，然后传回基于文本的值。 $.ajax( type: 'POST', data: info_variable_sent_to_c_sharp, url: '/Your/Site/method', success: function() { //在这里做点什么，成功了 }, error: function() { //做别的东西，它失败了});
基本上，动作序列的高级视图是这样的： 1. 页面加载 2. Javascript 创建 10 秒计时器 3. 每十秒调用“runUpdate” javascript 函数 4. runUpdate 执行一个 ajax 请求，从您的应用程序中获取一个“新值” 5. runUpdate 使用上述“新值”调用 update() 6. 重复步骤 3-5 直到时间结束
如何获取返回值？

【解决方案2】：

首先从 Javascript 开始，我通常会避免使用基于 xml 的 Web 服务。返回的数据是 XML，其中有很多不必要的标签，可能会导致传输缓慢。

改为查看 JSON。它要快得多。然而，认证并不那么容易。为了帮助您了解它的强大功能，twitter 和 facebook 都在 API 中使用它。

JQuery 可以很容易地使用 JSON

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

您可能会发现阅读此内容很有用：

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

希望这会有所帮助。

【讨论】：

Web 服务不是我的部门，所以不幸的是我被 XML 卡住了！