2017-05-05 65 views
-1

我需要在ASP项目MVC模式中插入一个图形。 我自己定义了Json格式所需的字符串,它似乎正常工作。 的字符串,由控制器定义是:用ASP插入一个s字符串作为var函数MVC

{ 
    labels: ['America','Europa', 'Global','Oceania'], 
    datasets: [{ 
     data: [0.20, 0.20, 0.20, 0.40], 
     backgroundColor: ['#a3aaf7','#89a8ff', '#01469b', '#0d1156'], 
     hoverBackgroundColor: ['#beed9e', '#84ffbd', '#0afb00', '#058217'] 
    }] 
} 

要插入的图表中,使用chart.js之,显然我需要这个变量传递到相应的javascript函数...我尝试使用HTML助手(@ html.displayfor)以及直接参考模型变量(例如@ Model.Tipologie_json):

<script> 
    var tipologia=new string(@Model.Tipologie_json); 
    window.onload=function(){ 
     var ctx = document.getElementById("Tipologia").getContext("2d"); 
     var myPieChart = new Chart(ctx, { type: 'pie', data: tipologia }); 
    } 
</script> 

但HTML转换为:

var tipologia=new string({labels:[&#39;Equity&#39;],datasets:[{ data:[1.00000],backgroundColor:[&#39;#a3aaf7&#39;],hoverBackgroundColor:[&#39;#beed9e&#39;]}]}); 

因此它将'转换为等价的代码,这使得图表的计算失败。 如何在不进行任何字符转换的情况下将变量传递给HTML?非常感谢

+0

你可以创建一个类与数组作为属性,填充它并使用'JsonConvert.Serialise'(newtonsofts json nuget)。如果你是以字符串形式进行的,我认为你不会像这样编码这样的引号 – Pete

+0

是的,只是不要创建一个字符串。你甚至不需要自定义类。您可以定义一个匿名对象,并将其直接序列化为JSON。 –

+0

试试这个'@ Html.Raw(Json.Encode(Model.Tipologie_json))'。 – mmushtaq

回答

0

而是试图直接插入值到您的JavaScript可以做到这一点的:

<script type="application/json" id="yourData">@Model.YourJson</script> 

如果模型中的数据尚未序列化为JSON,你可以这样做:

<script type="application/json" id="yourData"> 
    @Html.Raw(JsonConvert.SerializeObject(Model.YourData, 
     new JsonSerializerSettings 
      { ContractResolver = new CamelCasePropertyNamesContractResolver() })) 
</script> 

还是在控制器序列化(使模型已经包含了JSON),您将设置模型的字符串属性相同的方式:

model.SomeStringProperty = JsonConvert.SerializeObject(
    Model.YourData, 
    new JsonSerializerSettings 
      { ContractResolver = new CamelCasePropertyNamesContractResolver() }); 

(我使用驼峰JSON的设置,但你可以离开了这一点。)

然后取回从你的JavaScript数据:

var parsed = JSON.parse(document.getElementById("yourData").textContent); 
+0

在我学会了这个之前,我试着把我的JSON放在'中,发现如果数据包含撇号,它会失败。我把它打印出来并挂在我的小房间里,给自己写一封便签,不要做愚蠢的事情。 –

相关问题