Question

我正在学习使用javascript和c＃。所以，我使用highcharts来绘制我从c＃传递给javascript的一些数据。现在，我想手动更新c＃中的变量以查看javascript中值的变化，但由于某种原因，变量不会更新。我能做错什么？这是我到目前为止所尝试的。我更新了变量“merchantname”但由于某种原因，我的前端没有任何反应。

Answer 1

您的网页未按照您认为应该更新的方式更新的原因有点双重：

虽然您使用ajax向Web服务发送请求，但您的真实数据服务端点有一个void返回，这意味着它不会返回任何内容，这不是很实用
您的柜台服务正在进行一些更新，并返回一个号码，但就是这样

所以在C＃方面，你应该返回一个类型化的对象，这样你就可以在你的javascript响应中使用它，比方说，你添加一个名为FruitItem的类

public class FruitItem {
    public string Name { get; set; }
    public int Failed { get; set; }
    public int Succeeded { get; set; }
    public int Service { get; set; }

    public FruitItem(string name, int failed, int succeeded, int service) {
        Name = name;
        Failed = failed;
        Succeeded = succeeded;
        Service = service;
    }
}

像这样，您可以比使用断开连接的数组更保持数据的连贯性。

现在必须将此数据传输回您的客户端，因此在您当前的设置中，我们需要更改calctransctl方法，以便返回此类数据。如果我们按以下方式更改它，我们可以返回一个FruitItems数组

[WebMethod]
public static FruitItem[] calctranscs()
{
    return new FruitItem[] {
        new FruitItem("Strawberry", 100, 200, 400),
        new FruitItem("Apples", 200, 100, 400),
        new FruitItem("Pineapple", 300, 200, 400),
        new FruitItem("Mango", 100, 200, 400)
    };
}

或者（如果您希望继续使用断开连接的数组），您还可以返回包含断开连接的数组的匿名对象，如下所示：

[WebMethod]
public static object calctranscs() {
    return new { 
        merchant_names = new string[] { "Strawberry", "Apples", "Pineapple", "Mango" },
        failures = new int[] {100, 200, 300, 100},
        succeeded = new int[] {200, 100, 200, 200},
        service = new int[] {400, 400, 400, 400}
    };
}

这将返回一个包含您数据的匿名对象（暂时，答案的其余部分将包含带有对象的版本）

接下来我们要改变的是，在你的ajax回调中处理现在收到的数据，你的calcfunc方法现在必须处理它得到的响应

function callfunc() {
    $.ajax({
        type: "POST",
        url: "getcharts.aspx/calctranscs",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            klm( result.d );
            abc( result.d );
            // please note, I removed the setInterval here, we can do it at initializing time
        },
        error: function (result) {
            alert(result.responseText);
        }
    });
}

我们现在知道你的result.d包含一个对象数组，包含以下属性

Name：string
Failed：number
Succeeded：number
Service：number

因此，要将这些映射到您的图表函数的预期输入，您可以像这样更改klm函数（和abc函数也以类似的方式）

function mapData( data, property ) {
  return data.map( function( item ) {
    return item[property];
  } );
}

function klm( data ) {
    var merchantname = mapData( data, "Name" );
    var servicevalue = mapData( data, "Service" );
    var failedvalue = mapData( data, "Failed" );
    var successvalue = mapData( data, "Succeeded" );
    // the rest of your code is unchanged
}

这个函数将接收你的数据，然后根据属性创建数组，如果你要让你的匿名对象包含数组，你会比较简单，例如

function klm( data ) {
    var merchantname = data.merchant_names;
    var servicevalue = data.service;
    var failedvalue = data.failures;
    var successvalue = data.succeeded;
    // the rest of your code is unchanged
}

我在.aspx页面中进行的额外更改是在加载所有javascript文件后仅加载完整数据，因此这将包装整个javascript部分

$(function() {
    function callfunc() {
        $.ajax({
            type: "POST",
            url: "getcharts.aspx/calctranscs",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                klm( result.d );
                abc( result.d );
            },
            error: function (result) {
                alert(result.responseText);
            }
        });
    }

    function Counter() {
        $.ajax({
            type: "POST",
            url: "getcharts.aspx/Counter",
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function (result) {
                console.log(result.d);
                callfunc();
            },
            error: function (result) {
                alert(result.responseText);
            }
        });

    }

    function mapData( data, property ) {
        return data.map( function( item ) {
            return item[property];
        } );
    }

    function klm( data ) {
        var merchantname = mapData( data, "Name" );
        var servicevalue = mapData( data, "Service" );
        var failedvalue = mapData( data, "Failed" );
        var successvalue = mapData( data, "Succeeded" );

        Highcharts.chart('container1', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: merchantname
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Transaction Status'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: [{
                name: 'Service',
                data: servicevalue
            }, {
                name: 'Failure',
                data: failedvalue
            }, {
                name: 'Success',
                data: successvalue
            }]
        });

    }

    function abc( data ) {
        var merchantname = mapData( data, "Name" );
        var servicevalue = mapData( data, "Service" );
        var failedvalue = mapData( data, "Failed" );
        var successvalue = mapData( data, "Succeeded" );

        Highcharts.chart('container3', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                //  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                categories: merchantname
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: [{
                name: 'Service',
                data: servicevalue
            }, {
                name: 'Failure',
                data: failedvalue
            }, {
                name: 'Success',
                data: successvalue
            }]
        });
    }

    callfunc();
    setInterval(Counter, 30000);
});

值得注意的变化是包装$(function() { /*... your code ...*/ })将等待所有javascript代码加载，并且setInterval从回调移动到被调用的第一个函数之一（在callfunc之后）。

每次触发间隔并且成功时，它将触发对callfunc的新调用，并且您的数据可能会被重绘

（请注意，最后一个代码也是使用FruitItem文本的工作代码，而不是匿名对象）

在javascript中更新c＃变量的问题？

1 个答案: