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。