Возврат javascript в постбэк ajax ASP.NET завершается неудачно, но отлично работает при начальной загрузке страницы - PullRequest
Новая
       8

Возврат javascript в постбэк ajax ASP.NET завершается неудачно, но отлично работает при начальной загрузке страницы

1 голос
/ 08 октября 2011

У меня есть стандартная веб-страница, содержащая UpdatePanel и кнопку. После загрузки страницы устанавливается некоторый javascript и страница отображает диаграмму (используя Highcharts отсюда http://www.highcharts.com/products/highcharts).

Когда я перезагружаю UpdatePanel с помощью кнопки, выпадающего меню и т. Д., Диаграмма не перерисовывается.

Для пивоварения я сократил код, но обычно у меня есть UpdatePanel с выпадающим списком, где пользователи могут выбирать различные диаграммы, затем данные выбираются из базы данных и результаты отправляются обратно на страницу.

Кто-нибудь может объяснить, почему он не работает / не загружает график при нажатии на кнопку - и как это исправить?

График можно скачать здесь: http://www.highcharts.com/products/highcharts - просто добавьте это в папку с именем /js/highcharts.js

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    string jschart = "var chart;$('" + up1.ClientID + "').ready(function() {chart = new Highcharts.Chart({"
             + "title: { text: 'Traffic',x: 0, style: {fontSize:'13px'} },"
             + "chart:{renderTo: 'container', defaultSeriesType: 'column'},";
    litChartData.Text = String.Format("{0} {1}", jschart, getData());
}

private string getData()
{
    // this is normally coming from a database...

    return "xAxis:{title:{text:'Date'}, type:'datetime'}, yAxis:{title:{text:'Hits'}},"
        + "series:  [{ name:'Impressions',type:'column',"
        + "data: [ "
        + "[Date.UTC(2011,7,18),13],"
        + "[Date.UTC(2011,7,24),21],"
        + "[Date.UTC(2011,8,30),60]]"
        + "}] }) });";
}
</script>

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="/js/highcharts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scr" />

    <asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate> 
        <script type="text/javascript">
            <asp:Literal ID="litChartData" runat="server" />
        </script>

        <div id="container" style="width:700px;height:300px;margin:0 auto;background-color:#eee"></div>
        <center><asp:Button ID="btn" runat="server" Text="Ajax postback" /></center>

    </ContentTemplate>
    </asp:UpdatePanel>

    </form>
</body>
</html>

1 Ответ

4 голосов
/ 08 октября 2011

диаграмма отображается на стороне клиента после события Ready в jquery, но событие не вызывается повторно при вызовах ajax. решение может заключаться в создании различных сценариев в зависимости от того, является ли запрос начальным или последующим (ajax). при первом вызове просто сгенерируйте скрипт, который у вас есть в jschart var. при последующих вызовах выдает тот же сценарий, но без включения его в привязку события Ready.

UPDATE: Я полностью забыл, что панель обновления не выполняет вложенные скрипты после обновления. Решением для этого является регистрация скриптов через менеджер скриптов. попробуйте следующий код. обратите внимание, что на панели обновлений больше нет литерала сценария. 

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    string jschart =
             "if (window.chart) { window.chart.destroy(); }" +
             "window.chart = new Highcharts.Chart(" +
             "{title: { text: 'Traffic',x: 0, style: {fontSize:'13px'} }," +
             "chart:{renderTo: 'container', defaultSeriesType: 'column'}," +
             getData() +
             "});";
  ScriptManager.RegisterStartupScript(this, this.GetType(), "chart", jschart, true);
}

private string getData()
{
    // this is normally coming from a database...

    return
        "xAxis:{title:{text:'Date'}, type:'datetime'}, "
        + "yAxis:{title:{text:'Hits'}},"
        + "series:  [{"
        + "name:'Impressions',"
        + "type:'column',"
        + "data:"
        + "[[Date.UTC(2011,7,18),13],"
        + "[Date.UTC(2011,7,24),21],"
        + "[Date.UTC(2011,8,30),60]]"
        + "}]";
}
</script>

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="/js/highcharts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scr" />

    <asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate> 

        <div id="container" style="width:700px;height:300px;margin:0 auto;background-color:#eee"></div>
        <center><asp:Button ID="btn" runat="server" Text="Ajax postback" /></center>

    </ContentTemplate>
    </asp:UpdatePanel>

    </form>
</body>
</html>
...