Доступ к свойствам модели MVC3 из Javascript в представлении

Question

Я пытаюсь создать диаграмму Google в приложении MVC.

Вот фрагмент кода Google Chart javascript

function drawChart() {
 var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows([

      ['Work',    11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

}

Что я хотел бы сделать, так это заменить строку data.addRows выше на цикл for, повторяющий элементы моей модели. Я могу просто итерировать в представлении вне тега, как, конечно, так:

 "@foreach (var item in Model) {
    <div>@Html.DisplayFor(modelItem => item.Customer.Name)</div>
  }"

Кажется, я не могу найти решение для перебора моей модели ВНУТРИ тега. Есть идеи?

Answer 1

Предположим, у вас есть модель вида:

public class MyViewModel
{
    public object[][] Values { get; set; }
}

, в котором вы сохраняете некоторые значения и передаете их в представление:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            Values = new[]
            {
                new object[] { "Work",     11 },
                new object[] { "Eat",      2 },
                new object[] { "Commute",  2 },
                new object[] { "Watch TV", 2 },
                new object[] { "Sleep",    7 },
            }
        };
        return View(model);
    }
}

по вашему мнению, вы можете JSON кодировать его:

@model MyViewModel
<script type="text/javascript">
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(@Html.Raw(Json.Encode(Model.Values)));
    }
</script>

, который будет отображаться в окончательной разметке как:

<script type="text/javascript">
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows([["Work",11],["Eat",2],["Commute",2],["Watch TV",2],["Sleep",7]]);
    }
</script>

И вам не следует беспокоиться о наличии значений, содержащих одинарные или двойные кавычки, которые потенциально могут нарушить ваш JavaScript, поскольку вы использовали сериализатор JSON вместо его ручной сборки.