ASP.NET渲染控件-> JavaScript错误

Question

我有一个来自Google Chart API的图表用户控件。

当用户控件由服务器加载和呈现时，一切正常，一切正常。 但是当我使用ajax Web服务渲染控件异步并返回带有ajax的html并将其添加到页面时，我在firebug中遇到了一些脚本错误（chrome将其称为ReferenceError）：

“未定义Google”

我的项目是带有一些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);
}

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

public class PageForRendering : Page
{
    public override void VerifyRenderingInServerForm(Control control)
    {}
}

用户控件上的脚本：

<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>

使用firebug时，我发现https://www.google.com/jsapi加载正常，但是仅打印了我的第一个控制台日志。

我认为这可能是某种范围问题... google变量将在此脚本中定义：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

但是在这种情况下，下一个脚本块将无法访问它。 使用普通渲染，它可以正常工作。 由于呈现方法不同，因此在google.load调用之前脚本未完成加载，或者google变量现在已以其他方式定义在另一个作用域中。

如果我看的萤火DOM谷歌的变量定义喜欢这里 。 但是我发现，如果我在断点处放置一条线： google.load('visualization', '1.0', { 'packages': ['corechart'] }); ，我发现目前google变量未在DOM中定义。 因此，可能还需要考虑加载脚本。 但是行<script type="text/javascript" src="https://www.google.com/jsapi"></script>在它之前，应该同步执行吗？ 当我在Firebug中检查网络时，我还发现该文件已正确下载。

我可能还需要提及的是，加载ajax代码的usercontrol如下所示：

<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>

我做了一个示例项目，在其中重新创建了问题。 在这里下载 。

Answer 1

服务发送响应并使用$("#statisticsContent").html(data.d.ViewHtml);添加响应后$("#statisticsContent").html(data.d.ViewHtml); 浏览器解释html并开始并行加载和执行脚本。 我怎么知道 只是经验-在我的项目中，每次我尝试注入<script src='...'>浏览器都不等待脚本加载，并且立即执行带有自定义代码的下一个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函数中的else块。 这是解决问题的一种变通方法， 为什么google.load导致我的页面空白？ 题。

---

引用自为何google.load导致我的页面空白？ ：

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