局部视图中的 MVC3 渲染脚本

Question

希望有人可以帮助我解决这个问题.....我正在构建一个 MVC3 项目，但我似乎无法弄清楚为什么我的部分视图无法执行任何内联 javascript 函数。这是一个虚构的例子，但希望能展示我想要实现的主体......

我在视图中有一个项目列表，称为项目。

foreach (var item in Model.SaleItems)
{ 
  <div>@Html.ActionLink((string)item.ID, "Item", new { ID = @item.ID })</div>
}

如果用户单击其中一个项目，他们将被发送到一个页面，其中包含有关所选项目的详细信息。在这个页面上，有一个菜单，有 3 个选项；详细信息、评论、图像（每个都是部分视图）。如果用户从菜单中选择详细信息选项，详细信息部分将呈现来自网络服务（如 Google 可视化 API）的一些图表。

这是我的部分视图，其中包含用于加载图表的脚本：

<div>
  <h4>Details</h4>
  <div id= "detailsContainer"></div>
 </div>


<script type="text/javascript">
   $(document).ready(function () {
    google.load('visualization', '1', { packages: ['table'] });
    google.setOnLoadCallback(drawDetailsTable);
    });
    function drawDetailsTable() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', '');
      data.addColumn('string', '');
      data.addRows(4);
      data.setCell(0, 0, 'Color');
    data.setCell(0, 1, '<b>@Model.Color</b>');
    data.setCell(1, 0, 'Size');
    data.setCell(1, 1, '<b>@Model.Size</b>');
    data.setCell(2, 0, 'Weight');
    data.setCell(2, 1, '<b>@Model.Weight</b>');
    data.setCell(3, 0, 'Material');
    data.setCell(3, 1, '<b>@Model.MainMaterial</b>');
    var table = new google.visualization.Table(document.getElementById('detailsContainer'));
    var options = { allowHtml: true };
    table.draw(data, options);
}

</script>

有人知道为什么这不起作用吗？如果我将脚本从局部视图移动到视图，并在主视图的 ActionResult 中静态声明一个项目，它将起作用，但除此之外它不起作用。

提前致谢！

Answer 1

我终于明白了。 Shuniar 是正确的，脚本应该在部分视图中执行，但问题在于 Google 地图和可视化 API。局部视图将呈现但从未在脚本中调用的函数。这是有道理的，因为部分视图没有 onLoad。

google.setOnLoadCallback(drawDetailsTable);
function drawDetailsTable() {
 ....
  });

为了修复它，我只是将其更改为在渲染局部时显式调用函数。

    google.setOnLoadCallback(drawDetailsTable);
    drawDetailsTable();        
    function drawDetailsTable() {
 ....
  });