Aplicación ASP .NET CORE

Este post tiene como finalidad ayudar a crear una aplicación ASP .NET CORE mediante un ejemplo, pero, ¿qué es una aplicación ASP .NET CORE?

Según el propio Microsoft, es un marco multiplataforma de código abierto y de alto rendimiento que tiene como finalidad compilar modernas aplicaciones conectadas a Internet y basadas en la nube. Sabiendo esto, vamos a ver que características nos ofrece:

Framework de código abierto.
Multiplataforma: Podemos desarrollar aplicaciones para macOS, Linux y Windows.
Permite trabajar con la nube: Podemos implementar servicios cloud como los de Azure.
Rendimiento de alto nivel: El rendimiento es algo prioritario y así lo demuestra en las pruebas TechEnpower colocandose en el top 3 al soportar hasta 7 millones de peticiones por segundo.
Lenguajes: Se puede desarrollar en diferentes lenguajes ( C# , F# y Visual Basic) .

Sabiendo ya un poco lo que es ASP .NET CORE, vamos a crear nuestro primer proyecto con Micrososft Visual Studio 2019.

Para ello vamos a File->New->Project

Nos saldrá la siguiente ventana para elegir el tipo de proyecto que deseemos crear, en nuestro caso queremos elegir ASP .NET CORE. Vamos a utilizar la caja de búsquedas y añadimos “asp net core appllication”. Nos saldrá dos entradas ASP .NET CORE, en sus descripciones observamos que una utiliza el lenguaje C# y la otra F#, en nuestro caso elegimos C#.

Una vez seleccionado el tipo de proyecto ASP .NET CORE Web Application pinchamos en el botón “Next”.

Elegimos un nombre para el proyecto y la ubicación donde deseamos guardarlo y le damos al botón “Create” para continuar.

El último paso es elegir si queremos crear el proyecto vacío o con alguna plantilla, en nuestro caso elegiremos vacío y pinchamos en el botón “Create”.

Ya podemos comenzar a crear nuestra aplicación. En la siguiente imagen podemos ver que archivos han sido creados en el “Solution Explorer”.

Nuestro proyecto necesitará de un controlador, un modelo y las vistas para las distintas acciones que hagamos, además de una vista layout. De modo que vamos a crear las carpetas correspondientes donde ubicaremos cada uno de ellos.

Vamos a comenzar creando el controlador. Para ello hacemos click derecho en la carpeta controllers->Add-> Controller …

Crearemos un controlador vacío.

Le damos un nombre al controlador y le añadimos Controller al final del nombre y lo creamos.

Como podemos ver nos ha creado un método Index de tipo IActionResult.

Vamos a modificarlo para que realice unas operaciones simples.

Tendremos dos vistas, una index y la otra se encargará de realizar las operaciones.

Ahora crearemos una vista para Index y otra para OperacionesMatematicas sin embargo añadiremos su código más tarde.

Para añadirlas hacemos click derecho en el nombre del método -> Add View.

Ahora vamos a crear tres vistas más: _ViewStart, _ViewImports y la vista _Layout que irá dentro de la carpeta Shared.

Usaremos la vista _ViewImports para definir los objetos que necesitemos utilizar sin tener que volver a hacerlo nuevamente en un futuro. Para ello añadimos el siguiente código:

En la vista _ViewStart indicaremos cual será la plantilla por defecto de nuestra aplicación.

Por último en la vista _Layout estará nuestra plantilla que aparecerá en todas nuestras vistas. Vamos a ir a Bootstrap para decargar una plantilla. Podemos usar el siguiente enlace https://getbootstrap.com/docs/4.4/examples/.

Elegimos la que más nos guste, entramos en esa plantilla, le daremos click derecho en cualquier parte del cuerpo de la plantilla ->Ver código fuente y copiamos todo el código a nuestra plantilla.

Por último tenemos que añadir todos los archivos .css, .js e imágenes que usa esa plantilla.

Antes de guardar los archivos creamos dentro de la carpeta “wwwroot” de nuestro proyecto, una carpeta «js» para los archivos .js, una «css» para los .css y una «images» para la imágenes.

Ahora hacemos click derecho en los enlaces que referencien estos archivo y le luego en “Guardar enlace como” y los guardaremos en las carpetas correspondientes que acabamos de crear.