Highcharts 在 asp.net 的 UpdatePanel 中不起作用答案

【问题标题】：Highcharts not working in UpdatePanel of asp.netHighcharts 在 asp.net 的 UpdatePanel 中不起作用
【发布时间】：2015-03-16 10:22:19
【问题描述】：

我在 asp.net 中绘制了一个高图。我工作正常，但是当我将提交按钮放在更新面板中时，highchart 不起作用。它没有重绘。页面未重新加载，因此未重绘。

aspx代码-

  <asp:UpdatePanel runat="server" ID="update1">
            <ContentTemplate>
        <asp:Button ID="button_borrowing_calculate" CssClass="SDButtonGrad" runat="server" Text="Calculate>>" Height="30px" Width="90px" OnClientClick="emptycheck();" OnClick="btn_bp_calculate_Click" /></ContentTemplate>
          </ContentTemplate>
        </asp:UpdatePanel>


    <asp:UpdatePanel runat="server" ID="updatep">
            <ContentTemplate>
                          <div id="rp_graph1" style="height: auto; width: 100%;" runat="server">
                                                <highchart:LineChart runat="server" Height="300px" Width="99%" ID="hcLine" />
                                            </div>
          </ContentTemplate>
        </asp:UpdatePanel>

aspx.cs 代码-

   protected void btn_bp_calculate_Click(object sender, EventArgs e)
{


    hcLine.Title.text = "Borrowing Capacity";
    hcLine.YAxis.Add(new YAxisItem { title = new Title("Amount") });
    hcLine.XAxis.Add(new XAxisItem
    {
        categories = new[] { "0","1", "2","3", "4","5", "6","7", "8","9", "10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30",
                                                            "31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50"
                                                        }
    });

    var series = new List<Serie>();
    series.Add(new Serie { data = new object[] { 400, 435, 446, 479, 554, 634, 687, 750, 831 } });
    //bind 
    hcLine.DataSource = series;
    hcLine.DataBind();




}

【问题讨论】：

能否贴出相关代码
您收到任何错误吗？
没有错误......我认为客户端脚本没有重新加载，因为这个图表没有在更新面板中重绘。计算后图表 div 为空。

标签： c# asp.net highcharts updatepanel

【解决方案1】：

你的aspx代码不是很清楚。但我会写两个建议并尝试其中一个

如果您的按钮位于更新面板之外，请尝试以下方式：

     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
 <ContentTemplate>
<div id="rp_graph1" style="height: auto; width: 100%;" runat="server">
  <highchart:LineChart runat="server" Height="300px" Width="99%" ID="hcLine" />
</div>
</ContentTemplate>
<Triggers>
 <asp:AsyncPostBackTrigger ControlID="button_borrowing_calculate" />
  </Triggers>
</asp:UpdatePanel>

如果您的按钮位于更新面板内，请将属性 childrenAsTrigger 设置为 true

<asp:UpdatePanel ID="UpdatePanel1" runat="server"  ChildrenAsTriggers="true">

【讨论】：

我认为 Highchart 没有重绘，因为没有重新加载页面就不会加载客户端脚本。如何解决？

【解决方案2】：

使用 PostBackTrigger 代替 AsyncPostBackTrigger。通常我在Page_load方法中注册。

这是我使用 dotnet.HighCharts 组件的简短示例。

<asp:UpdatePanel ID="updPanel" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnRefresh" Text="Refresh" OnClick="btnRefresh_Click" runat="server" />
        <div>
            <asp:Literal ID="chrtMyChart" runat="server"></asp:Literal>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

来电：

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.GetCurrent(this).RegisterPostBackControl(btnRefresh);

    Render_Chart("%");
}

Render_Chart 是生成图表的方法。它也被称为按下按钮 btnRefresh

如果您想要一个完整的示例，请尝试查看at this post。

【讨论】：

【解决方案3】：

没有公认的答案，所以想编写我所寻求的解决方案，以便其他人可以使用它。

来源是http://www.balsamino.com/programming/39-highcharts-dotnet-and-updatepanel-a-complete-solution.html

基本上，在带有更新面板的 Web 表单中，简单地执行 litxxx.text = mydontnethighchartsoutput() 是行不通的。

您所要做的就是从您的 dotnethighcharts 函数中返回两件事： 1.chart1.ChartContainerHtmlString().ToString 2.chart1.ChartScriptHtmlString().ToString

将 1. 的输出放入 ScriptManager.RegisterStartupScript（最后一个参数 = FALSE 表示您不希望将脚本块添加为 chart1.ChartContainerHtmlString().ToString 会为您执行此操作

把 2. 的输出放到你的字面上 LitMyLiteral.text = chart1.ChartScriptHtmlString().ToString

希望有帮助:)

【讨论】：