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

希望有幫助:)