javascript - MVC 将列表传递给 jQuery 并提取元素

Question

我需要将列表从我的 MVC Controller 传递到我 View 中的 javascript。这是我的 Controller 中的方法

    private void PopulateChart() {

        var diagramItem = new DiagramPoll();
        var diagramList = new List<DiagramPoll>();
        diagramItem.Color = "#F7464A";
        diagramItem.Label = "System 1";
        diagramItem.Value = "10";
        diagramList.Add(diagramItem);

        diagramItem.Color = "##FDB45C";
        diagramItem.Label = "System 2";
        diagramItem.Value = "20";
        diagramList.Add(diagramItem);

        ViewBag.MyValues = JsonConvert.SerializeObject(diagramList, Formatting.None);
    }

在 View 文件的脚本部分:

    <script>
        $(document).ready(function() {             
            var chartValues = @Html.Raw(ViewBag.MyValues);
        //This is what I would like to do:
        foreach (var item in chartValues) {
              var color = item.Color;
              var label = item.Label;
              var value = item.Value
        }
        });
    </script>

我需要提取上面的变量，将它们作为输入参数发送到 jQuery 图表。

谢谢!

Answer 1

要将值从 View 传递到脚本，您需要将其添加在引号中。将您的脚本更改为如下

<script>
    $(document).ready(function() {             
        var chartValues = '@ViewBag.MyValues';

    });
</script>

此外，您将无法迭代它，首先您需要将序列化的 json 对象转换为正确的 json 对象。

像这样，然后在 json 对象上运行 foreach。

var chartData = $.parseJson(chartValues);
foreach (var item in chartData ) {
      var color = item.Color;
      var label = item.Label;
      var value = item.Value
}

或者

var chartData = JSON.parse(chartValues);

但是你必须转换图表值