Tutorial básico de ASP .NET Core MVC

En este tutorial implementarás un sitio web con ASP .NET Core MVC que se conecta a una base de datos y permite realizar operaciones CRUD a la tabla desde el sitio.

NOTA: El código fuente de este proyecto está disponible en mi repositorio de GitHub

Paso 1. Abre Visual Studio 2019 y selecciona la opción Crear un nuevo proyecto.

Paso 2. Busca el tipo de proyecto ASP.NET Core Web Application, selecciónalo y da clic en Next:

Paso 3. El nombre del proyecto es DemoMVC, elige una ubicación y da clic en Crear.

Paso 4. A continuación, elige la plantilla Web Application (Model-View-Controller). En la sección superior asegúrate de elegir .NET Core y la versión ASP .NET Core 2.2:

Paso 5. Espera a que finalice la creación del proyecto. En la carpeta Models crea una nueva clase llamada Student con el código mostrado a continuación.

Paso 6. Ahora crea una carpeta con el nombre Context, dentro de la cual agregarás una nueva clase llamada SchoolDatabaseContext. Su código es el siguiente:

Paso 7. El siguiente paso es definir la cadena de conexión a la base de datos donde almacenaremos la información. Esto se realiza en el archivo appsettings.json de la siguiente forma:

Paso 8. Da clic derecho en el nombre del proyecto DemoMVC y elige la opción Manage Nuget packages.

Paso 9. Busca el paquete Microsoft.EntityFrameworkCore.SqlServer. Selecciona la última versión disponible para .NET Core 2.2 (en este caso, 2.2.6)

Paso 10. Una vez instalado el paquete, abre el archivo Startup.cs y registra el contexto en el método ConfigureServices de la siguiente manera:

• Agregando los espacios de nombres
• Indicando la cadena de conexión y el gestor de bases de datos
• Recomendable indicar que Json ignore las referencias circulares.

Paso 11. Nuevamente en el Administrador de Paquetes Nuget, busca el paquete Microsoft.EntityFrameworkCore.Tools. Selecciona la misma versión que elegiste para el paquete Microsoft.EntityFrameworkCore.SqlServer (la 2.2.6) e instálalo en el proyecto.

Paso 12. En el menú Herramientas de Visual Studio da clic en Nuget Package Manager y selecciona Package Manager Console.

Paso 13. En la consola, ejecuta el comando Add-Migration pasando como parámetro la clase de contexto de la siguiente manera:

Esto creará la carpeta Migrations y varias clases de soporte para migraciones bajo el esquema Code-First.

Paso 14. Ahora ejecuta el comando Update-Database para efectivamente crear la base de datos en tu servidor junto con la tabla Students.

Si accedes a tu servidor de base de datos, encontrarás la nueva base de datos junto con la tabla mencionada.

Paso 15. A continuación, en la carpeta Controllers da clic derecho y selecciona Add –> New Scaffolded Item. Elige Controlador MVC con vistas utilizando Entity Framework.

Paso 16. Realiza lo siguiente:

• En clase de Modelo elige Student.
• En clase de Contexto de Datos selecciona SchoolDatabaseContext.
• Selecciona las 3 opciones que aparecen en la sección Vistas.
• Finalmente, el nombre del Controller es StudentsController.

Lo que sucederá a continuación es que se creará la clase StudentsController (en Controllers) y también las páginas Create, Delete, Details, Edit e Index para Students (en Views).

Paso 17. Explora StudentsController y observa el código para:

• Obtener toda la información de la tabla (método Index -GET-)
• Obtener un registro específico (método Details -GET-, que acepta el id del registro a buscar)
• Agregar un nuevo elemento (método Create -POST-, que recibe un objeto Student)
• Editar una entrada (método Edit -POST-, que recibe un objeto Student y el id de la entrada a modificar)
• Eliminar un dato (método DeleteConfirmed -POST-, que acepta el id del dato a eliminar)
• Además existe una sobrecarga de métodos (mismo nombre pero distinto verbo HTTP), los cuales representan la View a mostrar (se buscará un archivo .cshtml dentro de la carpeta Views/Students con el mismo nombre del método):
  • Create (GET)
  • Edit (GET)
  • Delete (GET)

Paso 18. De igual forma, explora los archivos generados en Views/Students y cómo se combina el código HTML con el de C#:

• Index.cshtml muestra la lista de estudiantes y contiene enlaces a las otras páginas
• Create.cshtml permite agregar un nuevo estudiante a la base de datos.
• Details.cshtml despliega la información del estudiante seleccionado y tiene un enlace para pasar a edición de datos.
• Edit.cshtml permite modificar los datos del estudiante seleccionado.
• Delete.cshtml muestra los datos del estudiante seleccionado y permite eliminar el registro de la base de datos.

Paso 19. Abre el archivo _Layout.cshtml que se encuentra dentro de Views/Shared y agrega un nuevo elemento de menú para poder navegar a la vista Index del controlador Students.

Paso 20. Finalmente, compila y ejecuta la aplicación. Navega por cada página para verificar el funcionamiento correcto del sitio web.

Como puedes ver, desarrollar un sitio web con ASP .NET Core MVC es muy fácil y te proporciona funcionalidad inmediata con una configuración muy sencilla. Por supuesto, puedes agregar funcionalidad en los controladores (crear nuevas acciones, buscar información en otras tablas, etc.) y también mejorar las vistas (código HTML) para presentar la información de otra manera.

Espero que este tutorial haya sido de utilidad para tí, si tienes alguna duda o comentario, házmelo saber.

¡Saludos y hasta la próxima, muchas gracias por tu visita!

Luis