Asp.net渲染控件->；javascript错误

我有一个用户控件，其中包含一些来自GoogleChartAPI的图表

当服务器加载并呈现usercontrol时，一切都按预期方式工作。但是，当我使用AJAXWebService异步呈现控件并使用ajax返回html并将其添加到页面时，firebug中出现了一些脚本错误（chrome称之为ReferenceError）：

“谷歌没有定义”

我的项目是带有一些javascript的ASP.Net MVP Webforms。
我制作了一个示例项目，在其中我重新创建了该问题

控件渲染器代码：

public virtual string RenderControlToString(string path, bool htmlEncode)
{
    StringWriter stringWriter = new StringWriter();
    this.RenderControl(path, (TextWriter)stringWriter);
    string s = stringWriter.ToString();
    if (!htmlEncode)
        return s;
    else
        return HttpContext.Current.Server.HtmlEncode(s);
}

public virtual void RenderControl(string path, TextWriter writer)
{
    var page = new PageForRendering();
    page.Controls.Add(page.LoadControl(path));
    HttpContext.Current.Server.Execute((IHttpHandler)page, writer, true);
}

（省略“需要在表单中”错误-控件添加到的页面上有一个表单）

用户控件上的脚本：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    console.log("Loading Google Charts...");
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    console.log("Google Charts loaded!");

    google.setOnLoadCallback(function () {
        ...some code...
    });
</script>

---

我制作了一个示例项目，在其中我重新创建了该问题

在您的服务发送响应并使用

$（“#statisticsContent”）.html（data.d.ViewHtml）添加响应之后浏览器解释html并开始并行加载和执行脚本。我怎么知道？只是经验-在我的项目中，每次尝试注入
时，浏览器都不会等待加载脚本，下一个
script
带有自定义代码的标记会立即执行

这就是您的情况，您需要等待
jsapi
加载，然后执行将加载包并执行图表呈现的代码。代码如下：

<div id="chart_div"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    waitForGoogleApiAndLoadPackages();
    function waitForGoogleApiAndLoadPackages() {
        if (typeof (google) === 'undefined')
            setTimeout(waitForGoogleApiAndLoadPackages, 100);
        else {
            google.load('visualization', '1.0', { 'callback': 'renderChart', 'packages': ['corechart'] });
        }
    }

    function renderChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);

        var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>


waitForGoogleApiAndLoadPackages（）；
函数waitForGoogleAppiandLoadPackages（）{
if（typeof（google）==“未定义”）
设置超时（waitForGoogleApiAndLoadPackages，100）；
否则{
load（'visualization'，'1.0'，{'callback'：'renderChart'，'packages'：['corechart']}）；
}
}
函数renderChart（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'number'，'Slices'）；
数据。addRows（[['蘑菇'，3]，'洋葱'，1]，'橄榄'，1]，'西葫芦'，1]，'意大利香肠'，2]]；
var options={'title'：'我昨晚吃了多少比萨饼'，'width'：400，'height'：300}；
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
图表绘制（数据、选项）；
}

另一个有趣的部分是
waitForGoogleApiAndLoadPackages
函数中的
else
块。这是解决上述问题的一个变通方法


引自：

看起来google.load正在使用
document.write（），如果在页面加载后使用，则会清除
html

听起来不错。。我会在有时间的时候看一看，然后回来汇报。waitForGoogleApiToLoad==waitForGoogleApiAndLoadPackages对吗？@MortenHolmgaard是的，你是对的，这是函数名中的输入错误。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="statisticsContent">&nbsp;</div>

<script type="text/javascript">
    $(document).ready(function () {
        function getStatisticsView() {
            var id = $(".chooseStatisticsToShow input:radio:checked").val();
            var statisticsType = (id == $(".choosePlayingGroupDropDownList option:selected").val() ? 1 : 0);

            $.ajax({
                cache: false,
                global: false,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: '/Services/StatisticsService.svc/GetStatisticsView',
                data: JSON.stringify({
                    statisticsType: statisticsType,
                    id: id
                }),
                success: function (data) {
                        $("#statisticsContent").html(data.d.ViewHtml);
                }
            });
        }
        getStatisticsView();

        $(".chooseStatisticsToShow").change(function () {
            getStatisticsView();
        });
    });
</script>

<div id="chart_div"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    waitForGoogleApiAndLoadPackages();
    function waitForGoogleApiAndLoadPackages() {
        if (typeof (google) === 'undefined')
            setTimeout(waitForGoogleApiAndLoadPackages, 100);
        else {
            google.load('visualization', '1.0', { 'callback': 'renderChart', 'packages': ['corechart'] });
        }
    }

    function renderChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);

        var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>