Question

我有一个标准网页，其中包含UpdatePanel和一个按钮。加载页面后，会设置一些javascript，页面会显示一个图表（使用此处的Highcharts http://www.highcharts.com/products/highcharts）。

当我使用按钮，下拉列表等重新加载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>

Answer 1

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

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

1 个答案: