Question

我需要在我的视图中将MVC控制器中的列表传递给javascript。这是我的控制器中的方法

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

在视图文件的脚本部分中：

    <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

要将值从视图传递到脚本，您需要将其添加到引号中。将脚本更改为

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

但你必须确保转换chartValues

Answer 2

你可以尝试这样的事情：

@model IList<WebApplication2.Models.DiagramPoll>

<script type="text/javascript">
$(document).ready(function() {             
    //This is what I would like to do:
    @foreach (var item in Model) {
        var color = item.Color;
        var label = item.Label;
        var value = item.Value;
    }
});

    public ActionResult About()
    {
        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);

        return View(diagramList);
    }

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

2 个答案: