当前位置: 代码迷 >> JavaScript >> 将模型转换为JSON并将其传递给JavaScript setOnLoadCallBack
  详细解决方案

将模型转换为JSON并将其传递给JavaScript setOnLoadCallBack

热度:46   发布时间:2023-06-13 12:33:00.0

以下是我的看法。 我已经对其进行了修改,以显示我希望它如何工作。 我有一个页面加载时绘制的图形。 我的模型包含它需要的数据。 我必须将其转换为JSON(对吗?),然后将其传递给generateGraph,但是setOnLoadCallBack是我的问题。 在调用setOnLoadCallBack之前,我不知道如何创建JSON字符串。

@model IEnumerable<FHWebUserInterface.Models.Weight>
<div id="visualization" style="width: 600px; height: 400px;"></div>

<div id="linechart_material"></div>



@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var weightsAsJsonString = serializer.Serialize(Enumerable.Select(Model, weight =>
        new
        {
            date = weight.Date,
            value = weight.Value
        }));
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.1', { packages: ['corechart', 'imagelinechart'] });
</script>
<script type="text/javascript">
    function drawVisualization(weightsAsJsonString) {

        // Removed the body            

        chart.draw(data, options);
    }
    google.setOnLoadCallback(drawVisualization(weightsAsJsonString));
</script>

您只需要在JSON这样的JavaScript块中的某个位置呈现json(我已经在google.setOnLoadCallback调用之前添加了它):

@model IEnumerable<FHWebUserInterface.Models.Weight>
<div id="visualization" style="width: 600px; height: 400px;"></div>

<div id="linechart_material"></div>



@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var weightsAsJsonString = serializer.Serialize(Enumerable.Select(Model, weight =>
        new
        {
            date = weight.Date,
            value = weight.Value
        }));
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.1', { packages: ['corechart', 'imagelinechart'] });
</script>
<script type="text/javascript"> 
    function drawVisualization(weightsAsJsonString) {

        // Removed the body            

        chart.draw(data, options);
    }

    // here is my change
    var weightsAsJsonString = @weightsAsJsonString; // so it will render your C# object from server side here on client side

    google.setOnLoadCallback(drawVisualization(weightsAsJsonString));
</script>