Question

希望那里有人可以帮助我.....我正在构建一个MVC3项目，我似乎无法弄清楚为什么我的局部视图无法执行任何内联javascript函数。这是一个例子，但希望能显示我想要实现的原则......

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

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

如果用户点击其中一个项目，则会将其发送到包含所选项目详细信息的页面。在这个页面上，有一个菜单将有3个选择;细节，评论，图像（每个是局部视图）。如果用户从菜单中选择详细信息选项，则详细信息部分将呈现来自Web可视化API等Web服务的一些图表。

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

<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() {
 ....
  });

MVC3在局部视图中渲染脚本

1 个答案: