Передача правильно отформатированного JSON из .NET MVC Controller для просмотра

Question

Я использую vis.js для создания временной шкалы и пытаюсь понять, где я ошибаюсь, пытаясь передать JSON из моей модели в представление. График принимает данные в формате JSON, например:

var data = [ 
{"content": "item 1", "start": "2016-08-20"}, 
{"content": "item 2", "start": "2016-08-21"}, 
{"content": "item 3", "start": "2016-08-21"}]; 

У меня есть модель выглядит так:

public class MyModel 
{ 
    public ModelData Data { get; set; } 
    public IEnumerable<TimeLineEntry> Timeline { get; set; } 
    public string ChartData { get; set; } 
} 

В моем контроллере, я передаю эту модель на вид в качестве ActionResult:

public ActionResult Summary(FilterModel filter) 
    { 
     var modelData = GetModelData(filter); 

     var timeline = BuildTimeLine(modelData); 

     var chartData = BuildChartData(timeline); 

     MyModel model = new MyModel 
     { 
      ModelData = modelData, 
      Timeline = timeline, 
      ChartData = chartData 
     }; 

     return View(model); //setting a breakpoint here, ChartData JSON looks 
    } 

    private string BuildChartData(List<TimelineEntry> data) 
    { 
     var timeline = data.Select(a => new 
     { 
      content = a.Description, 
      start = a.CreatedOn 
     }); 

     var jsonSerializer = new JavaScriptSerializer(); 
     return jsonSerializer.Serialize(timeline); 
    } 

в представлении, я пытаюсь создать переменную для хранения JSON для использования в JavaScript Application, как следующее:

<script type="text/javascript"> 
    // DOM element for the timeline 
    var container = document.getElementById('visualization'); 

    var data = @Model.ChartData; //I have a feeling I can't define data like this due to the way it is compiled. 

    var chartData = JSON.parse(data); 
    var items = new vis.DataSet(chartData); //this takes JSON 

    var options = {}; 

    var timeline = new vis.Timeline(container, items, options); 
</script> 

Когда страница компилируется, я получаю сообщение об ошибке: яваскрипта Uncaught SyntaxError: Неожиданный токен &

Это происходит, когда я пытаюсь сохранить @Model.ChartData в качестве переменной; это выглядит так, когда составлено: [{"content":"","start":"\/Date(1471890279333)\/"},{ .. ..

Я чувствую, что это простая проблема, но я в настоящее время не понимаю, как правильно передать JSON из модели в представление.

Answer 1

В сценариях можно использовать

var data = @Html.Raw(Json.Encode(Model.ChartData)) 

однако, Ваше желание массива объектов в клиенте, который у вас уже есть в контроллере, поэтому нет смысла сериализации коллекции в строку в и затем преобразовать его обратно в коллекцию на клиенте.

Ваш контроллер может быть просто

public ActionResult Summary(FilterModel filter) 
{ 
    var modelData = GetModelData(filter); 
    var timeline = BuildTimeLine(modelData); 
    var chartData = BuildChartData(timeline); 

    MyModel model = new MyModel 
    { 
     ModelData = modelData, 
     Timeline = timeline, 
     ChartData = chartData.Select(a => new ChartDataVM 
     { 
      content = a.Description, 
      start = a.CreatedOn 
     }) 
    }; 
    return View(model); 
} 

где свойство ChartData является public IEnumerable<ChartDataVM> ChartData { get; set; }, and ChartDataVM` является

public class ChartDataVM 
{ 
    public string content { get; set; } 
    public DateTime start { get; set; } 
} 

Тогда в представлении, его

var data = @Html.Raw(Json.Encode(Model.ChartData)); 
// var chartData = JSON.parse(data); Not required 
var items = new vis.DataSet(data); 

Однако, основываясь на формате вы указали, что требуется плагин, вам может потребоваться изменить свойство start к TYPEOF string и в запросе использовать

start = a.CreatedOn.Tostring("yyyy-MM-dd")