Asp.net渲染控制 - > JavaScript錯誤

Question

我與谷歌從圖表API一些圖表一個用戶控件。

當用戶控件得到裝載和通常的方式一切正常的服務器渲染。但是，當我使用AJAX的web服務的渲染控制異步和使用Ajax返回的HTML，並將其添加到頁面中，我得到一些腳本錯誤的螢火（鉻稱其爲的ReferenceError）：

「谷歌不是定義」

我的項目是與一些JavaScript ASP.Net MVP Web表單。
我已經在那裏我已經重新發出一個樣本項目。 Download it here。

控制渲染器的代碼：

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加載罰款，但只有第一個我的控制檯日誌已打印。

我想這可能是某種範圍的問題...... 的谷歌變量將在此腳本中定義：

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

但在這種情況下，在接下來的腳本塊訪問。正常的渲染它正常工作。無論是在google.load調用之前加載腳本，還是由於不同的呈現方法，google變量現在以某種方式在另一個範圍內定義。

如果我看的螢火DOM谷歌的變量的定義如下here。但是我發現，如果我將一個斷點放在一行：google.load('visualization', '1.0', { 'packages': ['corechart'] });，我發現在這個時候，google變量沒有在DOM中定義。所以加載腳本可能也是一些問題。但行<script type="text/javascript" src="https://www.google.com/jsapi"></script>是在它之前，它應該同步執行權？當我在螢火蟲中檢查網絡時，我也發現該文件已正確下載。

我可能還需要提及的是，用戶控件加載AJAX代碼如下所示：

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

我已經在那裏我已經重新發出一個樣本項目。 Download it here。

Answer 1

在您的服務發送響應並且您使用$("#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塊。這是解決Why does google.load cause my page to go blank?問題中描述的問題的解決方法。

---

從Why does google.load cause my page to go blank?報價：

看起來像的google.load使用 document.write（）的，這要是在頁面加載後使用添加腳本到頁面，抹了 HTML。