Índice

  1. Introducción
  2. Lo que necesitamos
  3. Creando el proyecto
  4. Añadiendo las librerías
  5. La vista
  6. Las clases Empleado y ListaEmpleado
  7. El modelo
  8. El controlador
  9. Mostrar los datos
  10. Código

 

  1. Introducción
    • En el siguiente post vamos a ver cómo podemos obtener datos JSON de un servidor/página web mediante OData, deserializarlos y visualizarlos en una vista mediante MVC(c#).
    • Antes de empezar con el ejemplo, explicaré ciertos conceptos como qué es “serializar/des-serializar” un objeto o qué es OData:
      • Cuando serializamos un objeto, estamos codificando un objeto en un medio de almacenamiento con el fin de poder transmitirlo por la conexión como bytes, o como es este caso, en un formato más legible para el ser humano como es JSON, aunque también podría ser XML.
      • OData (Open Data Protocol) es un servicio creado por Microsoft basado en estándares de Internet, siendo la versión evolucionada de ADO.NET.
  2. Lo que necesitamos
    • 1 Vista con un botón que llame a la acción y muestre los datos.
    • 1 Clase Empleado y una Clase Lista Empleado que lo contenga.
    • 1 Controlador para la vista.
    • 1 Clase Modelo que recoja los datos del servidor y los devuelva.
    • Librerías de Newtonsoft.Json y Microsoft.AspNet.WebApi.Client.
  3. Creando el proyecto
    • Abrimos Visual Estudio ➝ Nuevo Proyecto
    • CreandoProyecto1
    • Web ➝ Aplicación Web ASP.NET➝ MVC
    • CreandoProyecto2
    • CreandoProyecto3
  4. Añadiendo las librerías
    • Antes de empezar a crear los componentes de nuestro proyecto, añadiremos dos librerías que necesitaremos para que reconozca algunos de los comandos que usaremos más adelante. Dichas librerías son: Newtonsoft.Json y Microsoft.AspNet.WebApi.Client.
    • Para poder añadirlas, simplemente tendremos que hacer click derecho sobre nuestra solución➝ Administrar paquetes NuGet para la solución…➝ Examinar ➝ Buscamos ambos y los instalamos en nuestro proyecto
    • AñadirLibrerias1
    • AñadirLibrerias2
    • AñadirLibrerias3
    • AñadirLibrerias4
  5. La vista
    • Para empezar, crearemos una vista sencilla en la carpeta Home (para ahorrarnos trabajo, puede ser en una zona completamente nueva), daremos click derecho ➝ Add View. Esta vista contendrá por el momento un formulario simple con un botón para llamar a la acción.
    • Vista1
    • Vista2
    • Vista3
  6. Las clases Empleado y Lista Empleado
    • Para coger los datos del servidor/página web y deserializar, tenemos que tener una clase Empleados (o el nombre que tenga en tu JSON) con todos los campos que quieras sacar de él y una ListaEmpleados que será la raíz de dicho JSON, es decir, el que engloba a Empleados. Para ello iremos a Models ➝ Click derecho ➝Add➝Class y añadiremos las 2 clases que necesitamos.
    • Clases1
    • En nuestro caso, el raíz es “value”, por lo que este será el que se situe en ListaEmpleados. Sin embargo, al ponerlo por primera vez, aparecerá como que no lo reconoce, eso es porque debemos añadir un using Newtonsoft.Json, que podemos agregar gracias al haber añadido la librería de antes.
    • Clases2
    • Clases3
    • Clases4
    • En empleados tenemos que añadir los campos que queremos visualizar, o todos, no es relevante en este caso. Al igual que en ListaEmpleados, debemos agregar el using.
    • Clases5
  7. El modelo
    • El modelo es quien va a recoger el JSON del servidor/web mediante el OData y luego des-serializarlo usando los modelos que hemos creado previamente. Como es recoger los datos online, debemos recogerlo de manera asíncrona para que no lo finalice hasta que acabe de recoger todos los datos y procesarlos.
    • Habrá ciertos comandos que no reconocerá al principio, así que tendremos que añadir varios using a medida que nos vayan saliendo.
    • Modelo1
    • Modelo2
    • Modelo3
    • Modelo4
    • Modelo5
  8. El controlador
    • El controlador será el que envíe la petición de recogida de datos (activada por nuestro botón) y reenviará los datos al usuario. Para ello tendremos que tener 2 métodos: Un Get, que se creará para mostrar en primera instancia el botón de la vista, y un Post Async Task ActionResult, que será el que cargue la petición y reenvíe los datos en el return.
    • Para que funcione el Task, tendremos que incluir un using. Tampoco debemos olvidar de incluir nuestro Model en el controlador, sino, no reconocerá de dónde debe recoger los datos.
    • Controlador1
  9. Mostrar los datos
    • Volvemos a la vista que teníamos creada, añadiendo ahora el código para poder procesar los datos des-serializados del JSON en una tabla.
    • MostrarDatos1
    • MostrarDatos2
    • MostrarDatos3
  10. Código
    • Vista
    • Vista VisualizarDatosOdata
      1. @{
      2. ViewBag.Title = “VisualizarDatosOdata”;
      3. }
      4. @model OdataJSONVideoPost.Models.ListaEmpleados
      5. <Visualizar Datos Web Service ODATA</h2>
      6. <br />
      7. <form id=”form1″ method=”post”>
      8. <class=”btn-success” type=”submit” id=”btnMostrarEmpleados” style=”text-align: center;margin-left: 50%”>
      9. Mostrar Empleados
      10. </button>
      11. </form>
      12. <table border=’1′ class=”table-condensed” style=”text-align: center;margin-left: 30%”>
      13. <tr>
      14. <th>NOMBRE </th>
      15. <th>APELLIDO</th>
      16. <th>DIRECCION</th>
      17. <th>CIUDAD</th>
      18. </tr>
      19. @foreach (Empleados t in Model.Lista)
      20. {
      21. <tr>
      22. <td>@t.FirstName</td>
      23. <td>@t.LastName</td>
      24. <td>@t.Address</td>
      25. <td>t.City</td>
      26. </tr>
      27. }
      28. </table>
    • Controlador
    • Home Controller
      1. using System;
      2. using System.Collections.Generic;
      3. using System.Linq;
      4. using System.Threading.Tasks;
      5. using System.Web;
      6. using System.Web.Mvc;
      7. using OdataJSONVideoPost.Models;
      8. OdataJSONVideoPost.Controllers
      9. {
      10. public class HomeController : Controller
      11. {
      12. ModeloWsoData modelo;
      13. public HomeController()
      14. {
      15. this.modelo = new ModeloWsoData();
      16. }
      17. // GET: VisualizarDatosODATA
      18. public ActionResult VisualizarDatosODATA()
      19. {
      20. return View();
      21. }
      22. // Post: VisualizarDatosODATA
      23. public async Task VisualizarDatosODATA()
      24. {
      25. return View(await modelo.GetEmpleados());
      26. }
      27. }
      28. }
    • Modelo
    • Clase ModeloWsoData
      1. using System;
      2. using System.Collections.Generic;
      3. using System.Linq;
      4. using System.Net.Http;
      5. using System.Net.Http.Headers;
      6. using System.Threading.Tasks;
      7. using System.Web;
      8. namespace OdataJSONVideoPost.Models
      9. {
      10. public class ModeloWsoData
      11. {
      12. public async Task<ListaEmpleados> GetEmpleados()
      13. {
      14. using (HttpClient cliente = new HttpClient())
      15. {
      16. String peticion = “V4/Northwind/Northwind.svc/Employees”;
      17. cliente.BaseAddress = new Uri(“http://services.odata.org/”);
      18. cliente.DefaultRequestHeaders.Accept.Clear();
      19. cliente.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue(“application/json”));
      20. HttpResponseMessage response =
      21. await cliente.GetAsync(peticion);
      22. if (response.IsSuccessStatusCode)
      23. {
      24. ListaEmpleados empleados =
      25. await response.Content.ReadAsAsync<ListaEmpleados>();
      26. return empleados;
      27. }
      28. else
      29. {
      30. return null;
      31. }
      32. }
      33. }
      34. }
      35. }
    • Clase ListaEmpleados
    • Clase ListaEmpleados
      1. using System;
      2. using System.Collections.Generic;
      3. using System.Linq;
      4. using System.Web;
      5. using Newtonsoft.Json;
      6. namespace OdataJSONVideoPost.Models
      7. {
      8. public class ListaEmpleados
      9. {
      10. {
      11. [JsonProperty(“value”)]
      12. public List<Empleados> Lista { get; set; }
      13. }
      14. }
      15. }
    • Clase Empleados
    • Clase Empleados
      1. using System;
      2. using System.Collections.Generic;
      3. using System.Linq;
      4. using System.Web;
      5. using Newtonsoft.Json;
      6. namespace OdataJSONVideoPost.Models
      7. {
      8. public class Empleados
      9. {
      10. public Tienda()
      11. {
      12. [JsonProperty(“LastName”)]
      13. public String LastName { get; set; }
      14. [JsonProperty(“FirstName”)]
      15. public String FirstName { get; set; }
      16. [JsonProperty(“Address”)]
      17. public String Address { get; set; }
      18. [JsonProperty(“City”)]
      19. public String City { get; set; }
      20. [JsonProperty(“Country”)]
      21. public String Country { get; set; }
      22. }
      23. }
      24. }

     

     

     

  • Descripción: Serializar un objeto JSON en servidor/web mediante OData y mostrarlo en una vista mediante c# en MVC.
  • Autor/a: Sergio Palacios Navarro
  • Curso: Microsoft MCSD Web Applications + SharePoint Apps
  • Centro: Tajamar
  • Año académico: 2016-2017
  • Vídeo: