如何在视图javascript中使用序列化后使用json字符串?

时间:2017-09-20 12:39:25

标签: javascript c# json

我想序列化一个JSON字符串但是当我将JSON传递给视图时,我发现我的代码中的属性是字符串格式,这可能是我的代码无法工作的原因。 我在代码中序列化代码:

var data = new ChartData
{
    labels = new ChartLabels
    {
        labels = new string[3] {"Open", "Close", "Nothing"}
    },
    datasets = new ChartDatasets
    {
        data = new int[3] {20, 10, 3},
        backgroundColor = new string[3] {"#ccf9d6", "#ccf9d6", "#ccf9d6"},
        borderWidth = 1
    }                
};
var json = new JavaScriptSerializer().Serialize(data);
ScriptManager.RegisterStartupScript(
    this, 
    GetType(),
    "ServerControlScript", 
    "addChart(" + json + ");", 
    false);

我想在我的JavaScript函数中使用它:

function addChart(data) {
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, data);

修改 Json如下所示:

{"labels":
    {
        "fontSize":0,
        "boxWidth":0,
        "labels":["Open","Close","Nothing"]},
        "datasets":{"label":null,"data":[20,10,3],
        "backgroundColor":["#ccf9d6","#ccf9d6","#ccf9d6"],
        "borderWidth":1 
    }
}

有没有办法将其转换为正确的格式?或者只是把它变成一个JavaScript变量?

2 个答案:

答案 0 :(得分:0)

正如MDN所述,

  

JSON.parse()方法解析JSON字符串,构造   字符串描述的JavaScript值或对象。

正在执行addChart javascript方法调用,但是获取字符串而不是预期的JSON对象,必须解析该字符串。

在不了解应用程序的更广泛背景的情况下,很难给出一个很好的答案,因为有几种方法可以实现您的目标。最简单的方法是将行"addChart(" + json + ");",更改为"addChart(JSON.parse(" + json + "));",,以便当应用程序执行此javascript时,json字符串将由javascript引擎解析并生成addChart方法期望的javascript对象

答案 1 :(得分:0)

我不熟悉ScriptManager,我喜欢在Chrome中进行调试时出现的情况,所以我会在页面上使用asp:Literal攻击它。

ASP页面:

<script src="assets/js/bootstrap.js" type="text/javascript">
</script>
<asp:Literal runat="server" ID="aspchartdata"></asp:Literal>

代码背后:

var data = new ChartData
{
    labels = new ChartLabels
    {
        labels = new string[3] {"Open", "Close", "Nothing"}
    },
    datasets = new ChartDatasets
    {
        data = new int[3] {20, 10, 3},
        backgroundColor = new string[3] {"#ccf9d6", "#ccf9d6", "#ccf9d6"},
        borderWidth = 1
    }                
};

    aspchartdata.Text = "<script> var data=" + JsonConvert.SerializeObject(data); + "</script>";

现在您在Javascript中有一个数据变量可供使用。

在服务器端,您的文字将替换为您的新脚本以定义变量,现在您可以在ASPX页面中以简洁的方式处理onload运行等。