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应用程序中使用，如下所示：

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

编译页面时，我收到一个javascript错误：未捕获的SyntaxError：意外的令牌＆amp;

当我尝试将@Model.ChartData存储为变量时会发生这种情况;它在编译时看起来像这样： [{"content":"","start":"\/Date(1471890279333)\/"},{ .. ..

我觉得这是一个简单的问题，但我现在不知道如何将JSON从模型正确传递到视图中。

Answer 1

在脚本中，您可以使用

var Rx = require('rxjs/Rx');
var Observable = Rx.Observable;
var Subject = Rx.Subject;

var first = new Rx.Subject();

var source = first.bufferCount(2,1).map(a => a.reduce((acc,x) => acc+x,0));

var subscription = source.subscribe(console.log)

first.next(1)
first.next(2)
first.next(2)
first.next(3)

但是，您想要在客户端中拥有一组对象，这些对象已经存在于控制器中，因此将集合序列化为控制器中的字符串，然后将其转换回客户端上的集合几乎没有意义。 / p>

您的控制器可以简单地

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

其中属性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); } ChartDataVM`为

public IEnumerable<ChartDataVM> ChartData { get; set; }, and

然后在视图中，它的

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);更改为typeof start并在查询中使用

string

将格式正确的JSON从.NET MVC Controller传递到View

1 个答案: