在javascript中访问已经是JSON的MVC Model属性

Question

免责声明：我不想在视图中对属性/对象进行编码/序列化！我想在我的业务层中将其发送给控制器。

我有一个CustomerDetailViewModel列表，我希望在CustomerDetailView中显示。它看起来像这样：

   public class CustomerDetailViewModel
{
    public CustomerDetailViewModel()
    {
        EmployeeAndHours = new Dictionary<string, int>();
    }

    public string customerName { get; set; }
    public string projectName { get; set; }
    public int totalNumberOfProjectHours { get; set; }
    public Dictionary<string, int> EmployeeAndHours { get; set; }
    public string jsonChartDataSets { get; set; }
}

所以我将遍历它们并在表格中显示它们。现在，'jsonChartDatasets'是一个从对象列表中填充的属性，我像这样序列化：'JsonConvert.SerializeObject（listOfDatasets）;' 它看起来像这样：

每个'jsonChartDataSets看起来都一样。这很重要。重要的是我在视图中有一个脚本，我想使用这个json字符串。它适用于ChartJS。

看起来像这样，这就是我尝试使用该属性的方式：

var months = ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'];

// For drawing the lines
var ctx = document.getElementById("projectChart");

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: months,
        datasets: '@Model[0].jsonChartDataSets'
    },
    options:
    {
        responsive: true,
        maintainAspectRatio: true
    }
});

这些是错误（最顶层的是（'@Model [0] .jsonChartDataSets'）的console.log。

我感谢您的帮助！

Answer 1

您的jsonChartDataSets属性是string，而不是json。您需要使用JSON.parse()在脚本中将其重新转换回来。

请注意，您的@inject IJsonHelper Json;方法视图中还需要Json.Serialize()。

// Get the value from the model
var data = @Json.Serialize(@Model[0].jsonChartDataSets);
// convert to javascript array
data = JSON.parse(data);

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: months,
        datasets: data
    },
    ....
});