Aplicación CRUD con Angular 4. Parte 4: lado servidor, CRUD con ASP.NET MVC 5

En este post se creará una aplicación del lado servidor con ASP.NET MVC 5 de Microsof y EntityFramework para acceso a datos.

Para iniciar, lo primero que debe hacerse es descargar el Visual Studio Community desde https://www.visualstudio.com/vs/community/ e instalarlo. Es importante en las opciones de instalación, indicarle al Visual Studio Community que instale las herramientas para desarrollo Web.

Una vez instalado, se procede a crear un proyecto ASP.NET MVC:


En las opciones de creación de proyecto, seleccionamos los siguientes parámetros y especificamos un nombre para el proyecto:


Posteriormente se le indica al wizard de creación de proyectos del Visual Studio que debe crear un proyecto ASP.NET MVC vacío:


Una vez creado el proyecto, debe verse de la siguiente manera:


Luego de crear el proyecto, el primer paso es crear el model. En este caso, el modelo de negocio es bastante sencillo y sólo cuenta con la clase customer. Para crear la clase, se inicia con click derecho sobre la carpeta Models como sigue:


Posteriormente se debe especificar el nombre de la clase:


Seguidamente, se debe ejecutar el manejador de paquetes/dependencias del proyecto: NuGet,


A través de NuGet, se procederá a instalar el paquete EntityFramework.SqlServerCompact, este paquete incluye una base de datos liviana llamada SqlServer Compact Edition CE, además, incluye Entity Framework que es la librería ORM oficial de Microsoft.


Se deben aceptar los términos de licencia para incorporar las dependencias que incluye el paquete:


Una vez instalados las dependencias de Entity Framework, se procederá a especificar las propiedades de la clase Customer, como sigue:


Con lo anterior básicamente estamos definiendo todas las propiedades de Customer, como requeridas.

Luego, se debe crear la clase RestaurantDBContext, cuya función será servir de intermediario (ORM) entre la capa del negocio y la capa de base de datos de la aplicación. Para esto, se creará la carpeta DataAcces, y dentro de esta carpeta, la clase RestaurantDBContext.


En esta clase cuenta con la propiedad «DbSet <Customer> Customers» que especifica la conexión de la base de datos con la clase del modelo Customer:


Posteriormente, se configurará el string de conexión de la aplicación Web con la base de datos, para ello, editamos el archivo Web.Config agregando la información de conexión a la BD:

<connectionStrings>

<add
name=«RestaurantDBContext«


connectionString=«Data Source=|DataDirectory|\restaurant.sdf»


providerName=«System.Data.SqlServerCe.4.0« />

</connectionStrings>


Es muy importante que el valor de la propiedad name=«RestaurantDBContext«, del connection string sea igual al nombre de la clase DbContext que se creó anteriormente, es decir: RestaurantDBContext.

Ahora que se han establecido los parámetros de conexión con la base de datos se procederá con la creación del controller que recibirá las peticiones HTTP con los datos del customer que se desea persistir en la base de datos:


Seleccionamos el tipo de controller «MVC 5 Controller – Empty»:


Se especifica el nombre del controller: CustomerController:


El resultado debería ser el siguiente:


En el controller se creará un Action (método) denominado SaveCustomer para recibir un objeto Customer vía HTTP y persistirlo en la base de datos:


Para resaltar en el código anterior:

  1. _restaurantDbContext: Permite establecer una conexión e interactuar con la base de datos.
  2. SaveCustomer: Este método contiene la lógica necesaria para guardar un customer en la base de datos. Este método devuelve un JSON con un objeto que tiene la propiedad SavedRecords
  3. Dispose: Este método libera recursos cuando se destruye el controller, en este caso, un recurso importante a liberar es la clase del DbContext.

Para verificar que funcione el action (SaveCustomer), se puede descargar el cliente HTTP llamado Postman para Google Chrome. Postman se puede descargar desde aquí.

Una vez instalado Postman, se ejecuta desde Google Chrome y se configura con los siguientes parámetros:


Básicamente se está especificando que se hará una petición HTTP vía POST al customer-controller y se invocará el action SaveCustomer, que a su vez recibe un objeto Customer como parámetro, lo guarda en la BD y obtiene un objeto retornado por el servidor con la propiedad SavedRecords, indicando cuántos registros se guardaron en la base de datos.

De igual forma se puede crear un Action en el controller para obtener todos los customers guardados en la BD:


Es de destacar el argumento (JsonRequestBehavior.AllowGet) del método Json, este valor se establece para permitir cualquier petición vía GET, básicamente se indica que no existirá ninguna seguridad ni bloqueo de las peticiones entrantes, por lo cual cualquier persona o aplicación podrá acceder a esta información de forma pública.

Realizando la prueba desde el Postman, se obtendría el siguiente resultado:


Deja un comentario