为什么在呈现我的用户控件时 Javascript 无法正常运行？答案

【问题标题】：Why does Javascript not function properly when my user control is rendered?为什么在呈现我的用户控件时 Javascript 无法正常运行？
【发布时间】：2011-06-23 14:44:32
【问题描述】：

我正在使用 HTMLTextWriter 和 StringWriter 的组合来呈现我的用户控件。用于呈现用户控件的代码是通过我页面上的一些 Javascript 的 ajax 调用启动的。生成的 StringWriter 文本返回到 javascript 代码并附加到我的页面。渲染代码如下所示：

Dim sw As New System.IO.StringWriter
If Not IsDBNull(reader.Item("UserControlName")) Then
    'Use Reflection to create the appropriate class.
    'First get the type
    'The usercontrol name is retrieved from my datatable reader
    Dim htmlcontroltype = Type.GetType("MyProject." & reader.Item("UserControlName"))
    If Not IsNothing(htmlcontroltype) Then
        'Create an instance of the class
        Dim htmlcontrol = Activator.CreateInstance(htmlcontroltype)
        htmlcontrol = htmlcontrol.LoadControl("~/" & reader.Item("UserControlName") & ".ascx")
        htmlcontrol.DataBind()
        Dim tw As New HtmlTextWriter(sw)
        htmlcontrol.RenderControl(tw)
    Else
        sw.Write("No matching User Control was found in the project.")
    End If
End If

Return sw.ToString

这将返回我的用户控件，它似乎工作正常，直到我尝试用 Javascript 做任何好事。

例如，如果我想要一个谷歌图表，我将their Javascript 粘贴到我的用户控件中。像这样：

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TestControl.ascx.vb" Inherits="MyProject.TestControl" %>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
            google.load("visualization", "1", { packages: ["corechart"] });
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                [ -- snip! -- ]
                var chart = new google.visualization.LineChart(document.getElementById('visualization1'));
                chart.draw(data, { width: 300, height: 250, title: 'Company Performance' });
            }
        </script>
<div id="visualization1" style="width: 300px; height: 300px;"></div>

但是！当我运行程序时，它会出错，声称“google is undefined”。

请务必注意，这不仅限于 Google 图表 - 我在 Twitter 搜索 API 和其他方面也遇到过类似问题。另外，放置线路
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
在我的默认或母版页中没有区别。

最后，如果在设计时使用通常的@Register 指令将用户控件添加到我的母版页，则此代码将毫无问题地工作 - 让我相信问题是由 StringWriter 引起的。有没有人遇到过类似的问题或者可以对这个问题有所了解？

【问题讨论】：

尝试使用添加到页面的用户控件来验证您的标记。我的猜测是它引入了一些损坏的标记。
该脚本标签周围的实际 HTML 输出是什么？
@cwallenpoole：当在运行时添加用户控件时，它会呈现为带有用户控件 div 的脚本标签。当我遇到“谷歌未定义”问题（动态添加用户控件时）时，我似乎没有得到任何标记。浏览器似乎在无法处理 javascript 时挂断。

标签： javascript asp.net html user-controls stringwriter

【解决方案1】：

我认为问题不在于 google.setOnLoadCallback 等，我认为您的范围存在问题。试试这个：

google.setOnLoadCallback(function(){drawChart.call(window)});

这会将 drawChart 函数的上下文显式设置为可以访问 google 变量的内容。

【讨论】：

不幸的是，这没有帮助。我会重申 - 谷歌图表代码在设计时添加用户控件时工作正常，只是当它被强制通过字符串编写器时我开始出错。

【解决方案2】：

我找到了解决此问题的方法，但我仍然不知道是什么原因造成的。我将我的 Google 图表代码放入我的主页并将其包装到一个 jQuery 函数中，在加载用户控件时调用它。

这导致了另一个问题，即 iFrame 在 Firefox 和 Chrome 中返回为空（但奇怪的是，在 IE 中没有）。此问题已解决here。

长话短说，它比我想象的要混乱，但最终结果是一样的。

【讨论】：