asp.net-mvc - template - webapplayers

ASP.NET MVC JsonResult y JQuery flot

Question

Estoy tratando de usar el plugin de gráficos jquery flot con asp.net mvc. Intento extraer dinámicamente datos de un JsonResult para completar el gráfico.

Mi problema es que parece que no puedo obtener los datos devueltos de JsonResult en el formato correcto.

Aquí está mi código del lado del servidor:

    public ActionResult JsonValues()
    {
        IList<IDictionary<string, int>> listofvalues = new List<IDictionary<string, int>>();
        IDictionary<string, int> values1 = new Dictionary<string, int>();
        values1.Add("2003", 10882);
        values1.Add("2002", 10383);
        values1.Add("2001", 10020);
        values1.Add("2000", 9762);
        values1.Add("1999", 9213);
        values1.Add("1998", 8720);

        IDictionary<string, int> values3 = new Dictionary<string, int>();
        values3.Add("2003", 599);
        values3.Add("2002", 510);
        values3.Add("2001", 479);
        values3.Add("2000", 457);
        values3.Add("1999", 447);
        values3.Add("1998", 414);

        listofvalues.Add(values1);
        listofvalues.Add(values3);

        JsonResult result = new JsonResult { Data = listofvalues };
        return result;
    }

Y aquí está mi código del lado del cliente:

    $(function() {
        $.getJSON("/path/to/JsonValues", function(data) {
            var plotarea = $("#plot_area");
            $.plot(plotarea, data);
        });
    });

Tenga en cuenta que el siguiente código del lado del cliente funciona bien:

    $(function() {
        var points = [
            [[2003, 10882],
            [2002, 10383],
            [2001, 10020],
            [2000, 9762],
            [1999, 9213],
            [1998, 8720]],

            [[2003, 599],
            [2002, 510],
            [2001, 479],
            [2000, 457],
            [1999, 447],
            [1998, 414]]
        ];

        var plotarea = $("#plot_area");
        $.plot(plotarea, points);
    });

Dado que lo anterior funciona correctamente, parece que solo se trata de formatear el JsonResult devuelto correctamente. ¿Cómo puedo hacer esto? ¿Es la lista de diccionarios el mejor tipo para devolver, o debería estar usando algo más? ¿O hay una función en javascript que debería usar para formatear los datos correctamente?

Parece una cosa realmente simple, pero no puedo hacer que funcione.

Answer 1

Verifique que su Json haya regresado al cliente, serán objetos Json con pares de valores clave, algo como:

{{''2003'':10882,''2002'':10383},....}

Donde como requiera una matriz de Matrices.

[[[2003, 10882],[2002, 10383]],...]

Siempre puede generar la cadena Json usted mismo y devolver el resultado

StringBuilder sb = new StringBuilder();
sb.append("[2003,10882],")
return Json("[" + sb.ToString() + "]");

O podría intentar almacenar sus valores en Arrays que podrían generar el Json deseado, pero no lo he intentado.

Answer 2

Si quieres hacerlo con matrices C #, puedes hacer lo siguiente:

var values = new object[] {
    new object[] /* First series of value */
    {
        new int[,] { {2003,10882} },
        new int[,] { {2002,10383} }
    }
};

Y entonces

return Json(values);

Answer 3

Necesita una matriz JSON en el formulario:

[[1, 1], [2, 3], [5, 5]]

El complemento de categoría flot espera datos en el formulario:

[["category1", 12], ["category2", 3]]

Esto no es sencillo de crear en C # (tuvo que buscar durante mucho tiempo :-))

La clave es crear Arrays de object [] ( object [] )

El código no probado sigue:

IEnumerable<object[]> values1_array = from x in values1 
select new object [] {x.Key, x.Value};

IEnumerable<object[]> values3_array = from x in values3 
select new object [] {x.Key, x.Value};

//create one big object
var dataArray = new object[] {
    new {data = values1_array, label="Values1"},
    new {data = values3_array, label="Values3"},
};

//return Json data
return Json(dataArray) /* JsonRequestBehavior.AllowGet ?*/

Su código de JavaScript debería funcionar:

$(function() {
    $.getJSON("/path/to/JsonValues", function(data) {
        var plotarea = $("#plot_area");
        $.plot(plotarea, data);
    });
});