Почему при рендеринге моего пользовательского элемента управления Javascript не работает должным образом?

Я использую комбинацию HTMLTextWriter и StringWriter для визуализации моих пользовательских элементов управления. Код, используемый для визуализации пользовательского элемента управления, инициируется посредством вызова ajax из некоторого Javascript на моей странице. Полученный текст 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.

Если, например, я хочу иметь диаграмму Google, я вставляю их 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 не определен».

Важно отметить, что это не ограничивается Google Charts - у меня были аналогичные проблемы с Twitter Search API и другими. Кроме того, размещение строки
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
на моей странице по умолчанию или на главной странице не имеет значения.

Наконец, этот код будет работать без проблем, если пользовательский элемент управления добавлен на мою главную страницу во время разработки с использованием обычной директивы @Register, что заставляет меня думать, что проблема вызвана StringWriter. Кто-нибудь сталкивался с подобной проблемой или может пролить свет на эту тему?


javascript html asp.net user-controls stringwriter
person Andy F    schedule 23.06.2011    source источник
comment
Попробуйте проверить разметку, добавив на страницу пользовательский элемент управления. Я предполагаю, что это вводит некоторую неработающую наценку.   -  person Jim Lamb    schedule 23.06.2011
comment
Каков фактический вывод HTML вокруг этого тега скрипта?   -  person cwallenpoole    schedule 23.06.2011
comment
@cwallenpoole: когда пользовательский элемент управления добавляется во время выполнения, он отображается так же, как теги скрипта с элементом div пользовательского элемента управления. Когда я сталкиваюсь с проблемой, не определенной в Google (при динамическом добавлении пользовательского элемента управления), я, похоже, не получаю никакой разметки. Кажется, что браузер просто зависает, не обрабатывая javascript.   -  person Andy F    schedule 23.06.2011

Ответы (2)


arrow_upward
1
arrow_downward

Я не думаю, что проблема связана с google.setOnLoadCallback и т. Д., Я думаю, у вас есть проблема с определением объема. Попробуй это:

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

Это явно установит контекст функции drawChart на то, что имеет доступ к переменной google.

person cwallenpoole    schedule 23.06.2011
comment
К сожалению, это не помогло. Я повторюсь - код Google Chart работает нормально, как и когда пользовательский элемент управления добавляется во время разработки, только когда он принудительно проходит через String Writer, я начинаю получать ошибки. - person Andy F; 23.06.2011

arrow_upward
0
arrow_downward

Я нашел способ обойти эту проблему, хотя до сих пор не знаю, что ее вызывает. Я поместил свой код диаграммы Google на главную страницу и превратил его в функцию jQuery, вызывая ее при загрузке пользовательского элемента управления.

Затем это привело к еще одной проблеме, когда iFrame вернулся пустым в Firefox и Chrome (но не в IE, как ни странно). Эта проблема была решена здесь.

Короче говоря, это грязнее, чем мне хотелось бы, но конечный результат тот же.

person Andy F    schedule 24.06.2011