Highcharts and C# - Javascriptserializer loses value after postback (with updatepanel)

Asked

Viewed 29 times

0

I am building the category (Xaxis) and the data series in Highcharts through Javascriptserializer. The structure works perfectly when using in Page_load, but when postback (click on Asp button inside updatepanel), it loses the value (tested through an Alert('testeValorQueFicouZerado')).

How do I make the value persist/be loaded to the chart? Below codebehind

public string xAxis { get; set; }
public string series1 { get; set; }
public string series2 { get; set; }


(DataTable tabela criada com campo Credenciado, VRE e Valor)

List<string> credL = new List<string>();
List<double> vreL = new List<double>();
string vreTemp = string.Empty;
List<double> valorL = new List<double>();
string valorTemp = string.Empty;
foreach (DataRow dr in tabela.Rows)
{
    credL.Add(Convert.ToString(dr["Credenciado"]));
    vreTemp = Convert.ToString(dr["VRE"]).Replace(".", string.Empty).Replace("R$ ", string.Empty);
    if (vreTemp == string.Empty)
    {
        vreL.Add(0);
    }
    else
    {
    vreL.Add(Convert.ToDouble(vreTemp));
    }
    valorTemp = Convert.ToString(dr["Recuperado"]).Replace(".", string.Empty).Replace("R$ ", string.Empty);
    if(valorTemp == string.Empty)
    {
    valorL.Add(0);
    }
    else
    {
    valorL.Add(Convert.ToDouble(valorTemp));
    }

}

JavaScriptSerializer jsSerializexAxis = new JavaScriptSerializer();
xAxis = jsSerializexAxis.Serialize(credL);

JavaScriptSerializer jsSerializeseries1 = new JavaScriptSerializer();
series1 = jsSerializeseries1.Serialize(vreL);

JavaScriptSerializer jsSerializeseries2 = new JavaScriptSerializer();
series2 = jsSerializeseries2.Serialize(valorL);

And in html/js:

<script type="text/javascript">

            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'graficoRecuperado',
                                type: 'column'
                            },
                            title: {
                                text: 'Valor Recuperado'
                            },
                            xAxis: {
                                categories: eval('<%=xAxis%>')
                            },
                            yAxis: {
                                title: {
                                    text: 'em reais (R$)'
                                }
                            },
                            series: [{
                                name: 'VRE',
                                data: eval('<%=series1%>')
                            }, {
                                name: 'Recuperado',
                                data: eval('<%=series2%>')
                            }]
                        });
                    }
                });
            }; 

</script>

<asp:UpdatePanel runat="server">
<ContentTemplate>
            <div id="graficoRecuperado" style="width:100%;height:400px;"></div>
(gridview e outros controles...)
</ContentTemplate>
</asp:UpdatePanel>

1 answer

0

After many tests, I finally found a satisfactory solution that dribbled updatepanel and worked under add_endRequest: I created the graph by codebehind using the Builder string.

stretch:

.
.
.
StringBuilder sb = new StringBuilder();

sb.Append("var div = document.getElementById('graficoRecuperado');");
sb.Append("div.style.display = 'block';");
sb.Append("var prm = Sys.WebForms.PageRequestManager.getInstance();");
sb.Append("if (prm != null)");
sb.Append("{");
sb.Append("prm.add_endRequest(function(sender, e) {");
sb.Append("chart = new Highcharts.Chart({");
.
.
.
ScriptManager.RegisterStartupScript(this, this.GetType(), "ChamarFuncaoCriarGrafico", sb.ToString(),true);

To the user who has denied the doubt, it would be very important that you leave a comment on the reason for this attitude. If it is something simple for you to solve, how about helping others by presenting some of your wisdom? If something is wrong in the approach, inform where the error is so that it is possible to correct and keep an interesting question. To deny simply falls only doubt on you: you have no knowledge, have difficulty in reading and understanding texts or lack competence?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.