使用 ASP MVC 为 javascript 函数插入 s 字符串作为 var答案

【问题标题】：Inserting a s string as var for a javascript function with ASP MVC使用 ASP MVC 为 javascript 函数插入 s 字符串作为 var
【发布时间】：2017-05-05 12:55:38
【问题描述】：

我需要在一个 ASP 项目中插入一个图表，MVC 模式。我自己定义了Json格式所需的字符串，它似乎可以正常工作。控制器定义的字符串是：

{ 
    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？非常感谢

【问题讨论】：

您可以使用这些数组作为属性创建一个类，填充它并使用JsonConvert.Serialise（newtonsofts json nuget）。如果您将其作为字符串进行，我认为您不会像这样对引号进行 html 编码
是的，只是不要创建字符串。您实际上甚至不需要自定义类。您可以定义一个匿名对象，并将其直接序列化为 JSON。
试试这个@Html.Raw(Json.Encode(Model.Tipologie_json))。

标签： javascript c# asp.net-mvc

【解决方案1】：

您可以这样做：

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

【讨论】：

在得知这一点之前，我尝试将我的 JSON 放入 <input type='hidden' id='myData' value='...'> 发现如果数据包含撇号，它会严重失败。我把它打印出来挂在我的小隔间里，并附上一张纸条，提醒自己不要做傻事。