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

Question

我在asp.net中绘制了一个图表。 我工作正常，但是当我将SUBMIT按钮放在updatepanel中时，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();




}

Answer 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">

Answer 2

代替使用AsyncPostBackTrigger，而使用PostBackTrigger 。 通常我在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按钮

如果您想要一个完整的示例，请尝试看一下这篇文章 。

Answer 3

没有可接受的答案，因此想到编写我寻求的解决方案，以便其他人可以使用它。

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

基本上，在具有updatepanels的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

希望有帮助:)