在ASP.NET中返回javascript ajax回发失败，但在初始页面加载时工作正常

问题描述：

我有一个包含UpdatePanel和一个按钮的标准网页。加载页面时，会设置一些javascript，页面呈现图表（使用此处的Highcharts http://www.highcharts.com/products/highcharts）。在ASP.NET中返回javascript ajax回发失败，但在初始页面加载时工作正常

当我使用按钮重新加载UpdatePanel时，下拉式等图表不会重新呈现。

对于brewity我缩短了代码，但通常我有一个带有下拉列表的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>

答

图表是基于jQuery的ready事件在客户端上呈现的文件夹，但事件不会在ajax调用中重新触发。该解决方案可能会发出不同的脚本，具体取决于请求是初始还是后续（ajax）。在初次调用时只发出jschart var中的脚本。后续调用中的会发出相同的脚本，但不会将其包装到Ready事件绑定中。

更新：我完全忘了更新面板不会在更新后执行嵌套脚本。解决方案是通过脚本管理器注册脚本。尝试下面的代码。请注意，更新面板中不再有脚本文字。

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

感谢您的回复。我会尝试这 – Sha

我一直在努力完成这个工作几天，但没有运气 - 你（或任何人）有任何机会有如何做到这一点的代码示例？我尝试了与谷歌的运气，但失败了。希望得到一些帮助:) – Sha

@Perelli看到 – ivan

在ASP.NET中返回javascript ajax回发失败，但在初始页面加载时工作正常

相关推荐