From a list C # to: Json in jquery

0

I try to convert a list in c # ASP.NET to a Json through a Webmethod.

I have a pie chart that thanks to a slide track bar the content could be modified. For this I need to send this data through a webmethod.

It all starts when the user slides the track bar towards a different month:

$("#ex19").slider();
$("#ex19").on("change", function (e) {        

    $.ajax({
        type: "POST",
        url: "erTendencia.aspx/Pie4_WM",
        data: '{name: "' + e.newValue + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: pie4_success,
        failure: function (response_pie4) {
            //$('#canales').removeClass("modalX");
            alert(response_pie4.d);
        }
    });

});

Webmethod code c #:

    public static string Pie4_WM(string name)
    {

        int month = Convert.ToInt16(name);
        List<string> ListPie4 = new List<string>();
        ListPie4.Add("{ruta: 'R1'" + ", a3:" + ClassInteres.InteresClase.D1[month] + ", Cant:" + (ClassInteres.InteresClase.D1[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R2'" + ", a3:" + ClassInteres.InteresClase.D2[month] + ", Cant:" + (ClassInteres.InteresClase.D2[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R3'" + ", a3:" + ClassInteres.InteresClase.D3[month] + ", Cant:" + (ClassInteres.InteresClase.D3[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R4'" + ", a3:" + ClassInteres.InteresClase.D4[month] + ", Cant:" + (ClassInteres.InteresClase.D4[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R5'" + ", a3:" + ClassInteres.InteresClase.D5[month] + ", Cant:" + (ClassInteres.InteresClase.D5[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R6'" + ", a3:" + ClassInteres.InteresClase.D6[month] + ", Cant:" + (ClassInteres.InteresClase.D6[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R7'" + ", a3:" + ClassInteres.InteresClase.D7[month] + ", Cant:" + (ClassInteres.InteresClase.D7[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R8'" + ", a3:" + ClassInteres.InteresClase.D8[month] + ", Cant:" + (ClassInteres.InteresClase.D8[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R9'" + ", a3:" + ClassInteres.InteresClase.D9[month] + ", Cant:" + (ClassInteres.InteresClase.D9[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R10'" + ", a3:" + ClassInteres.InteresClase.D10[month] + ", Cant:" + (ClassInteres.InteresClase.D10[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'R11'" + ", a3:" + ClassInteres.InteresClase.D11[month] + ", Cant:" + (ClassInteres.InteresClase.D11[month] / DataHelper3.TOT_pie4) + "}");
        ListPie4.Add("{ruta: 'RUTA STANDBY'" + ", a3:" + ClassInteres.InteresClase.D12[month] + ", Cant:" + (ClassInteres.InteresClase.D12[month] / DataHelper3.TOT_pie4) + "}");


        var jsonSerialiser = new JavaScriptSerializer();
        var json = jsonSerialiser.Serialize(ListPie4);            
        return json;
    }

This webmethod launches the following character string type json:

["{ruta: \u0027R1\u0027, a3:13714.190, Cant:0.2223366260227845679702863554}","{ruta: \u0027R2\u0027, a3:9168.930, Cant:0.1486481491388911856113848264}","{ruta: \u0027R3\u0027, a3:6555.930, Cant:0.1062857782079403911345430846}","{ruta: \u0027R4\u0027, a3:7147.190, Cant:0.1158713792169851545261915531}","{ruta: \u0027R5\u0027, a3:4217.480, Cant:0.0683744554741164778760775006}","{ruta: \u0027R6\u0027, a3:10675.170, Cant:0.1730675512020505138443730029}","{ruta: \u0027R7\u0027, a3:4151.140, Cant:0.0672989408596659322558732598}","{ruta: \u0027R8\u0027, a3:9554.590, Cant:0.1549005302997141796404467422}","{ruta: \u0027R9\u0027, a3:651.990, Cant:0.0105701654126561838847899147}","{ruta: \u0027R10\u0027, a3:0, Cant:0}","{ruta: \u0027R11\u0027, a3:4338.300, Cant:0.0703332084997106129655118746}","{ruta: \u0027RUTA STANDBY\u0027, a3:0, Cant:0}"]

Where the \ u0027 = are single quotes '' since the serializer C # has modified them, as I read it has no side effects since I would read it as single quotes, but when I try to put them as an independent and direct variable, that is like this:

var test = [{ruta: \u0027R1\u0027, a3:13714.190, Cant:0.2223366260227845679702863554},{ruta: \u0027R2\u0027, a3:9168.930, Cant:0.1486481491388911856113848264},{ruta: \u0027R3\u0027, a3:6555.930, Cant:0.1062857782079403911345430846},{ruta: \u0027R4\u0027, a3:7147.190, Cant:0.1158713792169851545261915531},{ruta: \u0027R5\u0027, a3:4217.480, Cant:0.0683744554741164778760775006},{ruta: \u0027R6\u0027, a3:10675.170, Cant:0.1730675512020505138443730029},{ruta: \u0027R7\u0027, a3:4151.140, Cant:0.0672989408596659322558732598},{ruta: \u0027R8\u0027, a3:9554.590, Cant:0.1549005302997141796404467422},{ruta: \u0027R9\u0027, a3:651.990, Cant:0.0105701654126561838847899147},{ruta: \u0027R10\u0027, a3:0, Cant:0},{ruta: \u0027R11\u0027, a3:4338.300, Cant:0.0703332084997106129655118746},{ruta: \u0027RUTA STANDBY\u0027, a3:0, Cant:0}];

The jquery points out writing errors.

Finally, my final goal is that the json format is correct, like this:

 var Str =   [{ruta: 'R1', a3:13714.190, Cant:0.2223366260227845679702863554},{ruta: 'R2', a3:9168.930, Cant:0.1486481491388911856113848264},{ruta: 'R3', a3:6555.930, Cant:0.1062857782079403911345430846},{ruta: 'R4', a3:7147.190, Cant:0.1158713792169851545261915531},{ruta: 'R5', a3:4217.480, Cant:0.0683744554741164778760775006},{ruta: 'R6', a3:10675.170, Cant:0.1730675512020505138443730029},{ruta: 'R7', a3:4151.140, Cant:0.0672989408596659322558732598},{ruta: 'R8', a3:9554.590, Cant:0.1549005302997141796404467422},{ruta: 'R9', a3:651.990, Cant:0.0105701654126561838847899147},{ruta: 'R10', a3:0, Cant:0},{ruta: 'R11', a3:4338.300, Cant:0.0703332084997106129655118746},{ruta: 'RUTA STANDBY', a3:0, Cant:0}];

Once this is achieved, the graph is updated with the following jquery code

function pie4_success(response_pie4)
{
var myStr = response_pie4.d;



var char4_B_ = new DevExpress.data.DataSource({
    store: {
        type: "array",
        data: myStr
    },
    map: function (dataItem) {
        var tag = [];
        tag.push(dataItem.ruta);
        tag.push(dataItem['a3']);
        tag.push(dataItem['Cant']);
        return $.extend(dataItem, { tag: tag });
    }
  });

According to the chrome developer tool, the variable myStr, is receiving the sig. information:

 "["{ruta: \u0027R1\u0027, a3:13714.190, Cant:0.2223366260227845679702863554}","{ruta: \u0027R2\u0027, a3:9168.930, Cant:0.1486481491388911856113848264}","{ruta: \u0027R3\u0027, a3:6555.930, Cant:0.1062857782079403911345430846}","{ruta: \u0027R4\u0027, a3:7147.190, Cant:0.1158713792169851545261915531}","{ruta: \u0027R5\u0027, a3:4217.480, Cant:0.0683744554741164778760775006}","{ruta: \u0027R6\u0027, a3:10675.170, Cant:0.1730675512020505138443730029}","{ruta: \u0027R7\u0027, a3:4151.140, Cant:0.0672989408596659322558732598}","{ruta: \u0027R8\u0027, a3:9554.590, Cant:0.1549005302997141796404467422}","{ruta: \u0027R9\u0027, a3:651.990, Cant:0.0105701654126561838847899147}","{ruta: \u0027R10\u0027, a3:0, Cant:0}","{ruta: \u0027R11\u0027, a3:4338.300, Cant:0.0703332084997106129655118746}","{ruta: \u0027RUTA STANDBY\u0027, a3:0, Cant:0}"]"

I add an image of the graph. Greetings.

    
asked by N'oel C'alero 21.07.2016 в 17:26
source

1 answer

0

You do not have to generate a string list for the json, you should create a class

public class CharItem
{
    public string ruta { get; set; }
    public double a3 { get; set; }
    public double Cant { get; set; }
}

public static string Pie4_WM(string name)
{

    int month = Convert.ToInt16(name);
    List<CharItem> ListPie4 = new List<CharItem>();

    ListPie4.Add(new CharItem() {ruta= "R1", a3 = ClassInteres.InteresClase.D1[month], Cant = (ClassInteres.InteresClase.D1[month] / DataHelper3.TOT_pie4)});
    ListPie4.Add(new CharItem() {ruta= "R2", a3 = ClassInteres.InteresClase.D2[month], Cant = Convert.ToDouble(ClassInteres.InteresClase.D2[month] / DataHelper3.TOT_pie4)});

    //demas items

    var jsonSerialiser = new JavaScriptSerializer();
    var json = jsonSerialiser.Serialize(ListPie4);            
    return json;
}

Each item in the list is a class that will be serialized to json

Use

link

to get the class based on the json you define

You could also try not to perform any serialization

Return JSON data (object) from WebMethod (PageMethod) in ASP.Net using C # and VB.Net

but return the list directly

[WebMethod]
public static List<CharItem> Pie4_WM(string name)
{

    int month = Convert.ToInt16(name);
    List<CharItem> ListPie4 = new List<CharItem>();

    ListPie4.Add(new CharItem() {ruta= "R1", a3 = ClassInteres.InteresClase.D1[month], Cant = (ClassInteres.InteresClase.D1[month] / DataHelper3.TOT_pie4)});
    ListPie4.Add(new CharItem() {ruta= "R2", a3 = ClassInteres.InteresClase.D2[month], Cant = Convert.ToDouble(ClassInteres.InteresClase.D2[month] / DataHelper3.TOT_pie4)});

    //demas items


    return ListPie4;
}

As from the $ .ajax you define the contentType as json will return it serialized in that format

    
answered by 21.07.2016 / 17:54
source