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.