Question

我有一个FusionCharts库，我想用它在C＃Web应用程序中绘图。创建图表的代码（在单独的文件夹中找到一些开销文件之后）是：

  <script type="text/javascript" src="Charts/FusionCharts.js">

  <script type="text/javascript"><!--         

  var myChart = new FusionCharts( "Charts/Spline.swf", 
  "myChartId", "400", "300", "0");
  myChart.setXMLUrl("Data.xml");
  myChart.render("chartContainer");

  // -->     
  </script>

现在我尝试做的是在用户控件中包含那段代码。但是我希望可以选择传递一些参数，例如我想要它使用的“Data.xml”以及高度和宽度。我现在有它工作，但我当前的问题是当我在页面中包含多个控件实例时，因为如果我检查我的项目页面的“查看源代码”代码，它会添加两个组件，但javascript看起来很好像这样：

  <script type="text/javascript" src="Charts/FusionCharts.js">

  <script type="text/javascript"><!--         

  var myChart = new FusionCharts( "Charts/Spline.swf", 
  "myChartId", "400", "300", "0");
  myChart.setXMLUrl("Data.xml");
  myChart.render("chartContainer");

  // -->     
  </script>

  <script type="text/javascript" src="Charts/FusionCharts.js">

  <script type="text/javascript"><!--         

  var myChart = new FusionCharts( "Charts/Spline.swf", 
  "myChartId", "400", "300", "0");
  myChart.setXMLUrl("Data.xml");
  myChart.render("chartContainer");

  // -->     
  </script>

它复制了代码，因此我的变量myChart得到了重复，并且正如预期的那样，只渲染了一个图表。解决这个问题的最佳方法是什么？或者基本上包括在page_load中动态生成的JavaScript，我可以为每个控件操作？

Answer 1

如果您希望每页只包含一次FusionCharts.js脚本，请在RegisterClientScriptInclude中使用OnPreRender进行注册：

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    this.Page.ClientScript.RegisterClientScriptInclude(
        typeof(YourUserControl), "FusionCharts", "Charts/FusionCharts.js");
}

对于其他脚本块，请说明它应该如何工作。 myChart是唯一应该有所不同的东西吗？那么"myChartId"和"chartContainer"呢？

如果问题仅仅是myChart变量彼此冲突，那么您可以将脚本包含在一个自执行的匿名函数中：

<script type="text/javascript"><!--
(function() {
    var myChart = new FusionCharts( "Charts/Spline.swf", 
        "<%= this.ChartId %>", "400", "300", "0");
        myChart.setXMLUrl("<%= this.DataFile %>");
        myChart.render("<%= this.ChartContainerId %> ");
})();
// -->     
</script>

使用ascx控件时重复javascript代码

1 个答案: