asp.net mvc - Passing correctly formatted JSON from .NET MVC Controller to View -

i'm using vis.js create timeline, , trying understand i'm going wrong when trying pass json model view. timeline accepts data in json format, example:

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

i have model looks following:

public class mymodel {     public modeldata data { get; set; }     public ienumerable<timelineentry> timeline { get; set; }      public string chartdata { get; set; } } 

in controller, i'm passing model view 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 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);     } 

in view, i'm attempting create variable store json use in javascript application, following:

<script type="text/javascript">   // dom element timeline     var container = document.getelementbyid('visualization');      var data = @model.chartdata; //i have feeling can't define data due way 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> 

when page compiled, i'm getting javascript error: uncaught syntaxerror: unexpected token &

this happens when try store @model.chartdata variable; looks when compiled: [{"content":"","start":"\/date(1471890279333)\/"},{ ....

i feel simple problem, i'm @ loss how pass json model view.

in script can use

var data = @html.raw(json.encode(model.chartdata)) 

however, wanting array of objects in client, have in controller, there little point serializing collection string in controller , converting collection on client.

your controller can be

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

where property chartdata public ienumerable<chartdatavm> chartdata { get; set; }, andchartdatavm` is

public class chartdatavm {     public string content { get; set; }     public datetime start { get; set; } } 

then in view,

var data = @html.raw(json.encode(model.chartdata)); // var chartdata = json.parse(data); not required var items = new vis.dataset(data); 

however, based on format have indicated plugin requires, may need change property start typeof string , in query use

start = a.createdon.tostring("yyyy-mm-dd")