在javascript中更新c#变量有问题吗？

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

您的页面没有按照您认为应该更新的方式进行更新的原因有两点：

• 虽然您使用ajax向Web服务发送请求，但实际的数据服务端点有一个空返回，这意味着它不返回任何内容，这不是很实用

• 您的柜台服务正在进行一些更新，并返回一个数字，但仅此而已

因此，在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

方法，以便它返回此类数据。如果我们按以下方式更改它，我们可以返回一个项目数组

[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包含一个对象数组，包含以下属性

• 名称

  ：

  字符串

• 失败

  ：

  编号

• 成功

  ：

  编号

• 服务

  ：

  号码

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

此函数将接收您的数据，然后根据属性创建数组，如果您要返回包含数组的匿名对象，您将更轻松一些，例如

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);
});

$（函数（）{
函数callfunc（）{
$.ajax({
类型：“POST”，
url:“getcharts.aspx/calctranscs”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
荷航（结果d）；
abc（结果d）；
},
错误：函数（结果）{
警报（result.responseText）；
}
});
}
函数计数器（）{
$.ajax({
类型：“POST”，
url:“getcharts.aspx/Counter”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
console.log（result.d）；
callfunc（）；
},
错误：函数（结果）{
警报（result.responseText）；
}
});
}
函数mapData（数据、属性）{
返回数据.map（函数（项）{
归还物品[财产]；
} );
}
函数klm（数据）{
var merchantname=mapData（数据，“名称”）；
var servicevalue=mapData（数据，“服务”）；
var failedvalue=mapData（数据，“失败”）；
var successvalue=mapData（数据“successed”）；
Highcharts.图表（'container1'{
图表：{
类型：“列”
},
标题：{
文本：“堆叠柱形图”
},
xAxis：{
类别：商品名称
},
亚克斯：{
分:0,，
标题：{
文本：“事务状态”
},
堆叠标签：{
启用：对，
风格：{
fontWeight:'粗体'，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“灰色”
}
}
},
图例：{
对齐：“右”，
x:-30，
垂直排列：“顶部”，
y:25，
浮动：是的，
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |“白色”，
边框颜色：“#CCC”，
边框宽度：1，
影子：错
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:“{series.name}:{point.y}
总计：{point.stackTotal}”
},
打印选项：{
专栏：{
堆叠：“正常”，
数据标签：{
启用：对，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”
}
}
},
系列：[{
名称：'服务'，
数据：servicevalue
}, {
名称：“失败”，
数据：failedvalue
}, {
名称：“成功”，
数据：successvalue
}]
});
}
职能abc（数据）{
var merchantname=mapData（数据，“名称”）；
var servicevalue=mapData（dat
$(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);
});