1 de noviembre de 2012

MVC. Como recuperar datos del servidor desde el cliente (JavaScript JSON)

Imaginemos que desde el cliente (JavaScript) quieres recuperar una lista con la cantidad de proyectos por cada una de las áreas:

image

Para lograrlo necesitaremos:

1. En el controlador (Servidor) recuperar la lista y devolver el JSON correspondiente:

public partial class HomeController : Controller

{

       public virtual ActionResult GetProjectByAreaCount()

       {

             var result = new List<object>();

 

             Random rnd = new Random();

             int length = rnd.Next(10, 17);

             for (int i = 1; i < length; i++)

             {

                    result.Add(new {

                           Area = string.Format("Area {0}", i),

                           Cant = rnd.Next(2, 200)

                    });

             }

 

             return Json(result, JsonRequestBehavior.AllowGet);

       }

 

2. En el cliente realizar la llamada al servidor y procesar la respuesta.

<script type="text/javascript">

       $(document).ready(function () {

 

             $.getJSON('@Url.Action("GetProjectByAreaCount", "Home")', fnShowData);

 

             function fnShowData(response){

                    if (response != null) {

                           for (var i = 0; i < response.length; i++) {

                                  $("#div1").append("<li>" + response[i].Cant + " " + response[i].Area + "</li>")

                           }

                    }

             }

 

       })

</script>

No hay comentarios:

Publicar un comentario