將模型轉換爲JSON並將其傳遞到JavaScript setOnLoadCallBack

Question

以下是我的看法。我修改了它以顯示我希望如何工作。我有一個圖形，當頁面加載時繪製。我的模型包含它需要的數據。我必須將其轉換爲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> 

Answer 1

你只需要在一些地方呈現你的JSON在JavaScript中塊這樣的（我以前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>