从视图中的Javascript访问MVC3模型属性

Access MVC3 Model properties from Javascript in the View

本文关键字：MVC3 模型 属性 访问 Javascript 视图      更新时间：2023-09-26

我正试图在mvc应用程序中构建一个谷歌图表。

以下是谷歌图表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]
    ]);

}

我想做的是用一个for循环来替换上面的data.addRows行，该循环遍历我的模型中的项。我可以在标签之外的视图中进行很好的迭代，当然是这样：

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

我似乎找不到一个在标签内迭代我的模型的解决方案。有什么想法吗？

假设您有一个视图模型：

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序列化程序，而不是手动构建它。

相关文章：