ASP.NET Core - CRUD en MVC con C# - Parte 1

Hola que tal, en este apartado aprenderás a crear el proyecto, sobre la estructura del proyecto, configuración de la Aplicación y creación del Layout, ViewImports, ViewStart e importar la librería Bootstrap y sobre editar una página de Razor.

Comencemos el desarrollo del ya conocido CRUD (Create, Read, Update and Delete), para este caso elaboraremos paso a paso el proyecto sin hacer uso de las plantillas; el proyecto se denominará con nombre de DEMO01_CRUD,:

Requisitos:

Visual Studio 2019 Community

Aplicación web ASP.NET Core

.NET Core, ASP.NET Core 2.1

Crear la solución y proyecto:

Crear la solución de nombre DEMO01_CRUD

Escribir SOLUCI en la opción buscar, seleccionar - Solución en blanco - clic en siguiente...

Ingresas el nombre, asignas la ruta y clic en crear (en las anteriores versiones del Visual Studio ambos pasos se realizaba en una sólo opción)

Crear el proyecto de nombre DEMO01_CRUD, de tipo .NET Core, ASP.NET Core 2.1:

En Visual Studio 2019 para poder agregar un nuevo proyecto debe hacer clic derecho en la solución creada anteriormente, seleccionar la opción agregar y luego clic en nuevo proyecto (en las anteriores versiones al crear la solución te brindaba la opción de poder crear  el tipo de proyecto).

Seleccionar en el tipo de lenguaje C#, seleccionar tipo de plataforma para Windows y finalmente en tipo de proyecto para Web y clic en siguiente

Ingresas el nombre, asignas la ruta y clic en crear (en las anteriores versiones del Visual Studio ambos pasos se realizaba en una sólo opción)

Verificamos la versión 2.1 de ASP.NET Core (para Visual Studio 2019 por defecto esta seleccionado la versión 3.1 - luego haremos algunas comparativas interesantes entre ambas versiones), seleccionamos tipo de plantilla Vacío y clic en crear

Estructura del proyecto .NET Core:

Normalmente los proyectos creados de .NET Core te crea la siguiente estructura al seleccionar plantillas (para este CRUD crearemos un proyecto tipo de plantilla vacío):

Controllers: Contiene los controladores que son clases para crear los servicios REST básicos.

ValuesController.cs: Archivo de ejemplo con un servicio REST llamado values que regresa un arreglo con 2 valores.

wwwroot: Contiene los archivos estáticos como imágenes, css y javascripts.

appsettings.json: Nos permite configurar aspectos básicos de nuestra aplicación como la cadena de conexión a base de datos, log de errores, seguridad, propiedades personalizadas, keys etc.

Program.cs: En este programa se define como iniciar el servidor web. Recordemos que los proyectos de .NET Core son un programa de consola que crea un servidor web.

Startup.cs: Permite configurar los servicios disponibles, como los servicios Rest, la base de datos, seguridad, documentación.

La estructura que ahora se muestra es de un proyecto de tipo plantilla vacío.

Configuración de la Aplicación Web ASP.Net Core:

Abrimos y modificando el método Configure de la clase Startup.cs por el siguiente código:

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.Extensions.DependencyInjection;

namespace DEMO01_CRUD

{

    public class Startup

    {

        public void ConfigureServices(IServiceCollection services)

        {

            services.AddMvc();

        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)

        {

            app.UseStaticFiles();

            app.UseDeveloperExceptionPage();

            app.UseMvc(router =>

            {

                router.MapRoute(

                name: "default",

                template: "{controller=Home}/{action=Index}/{id?}");

            });

        }

    }

}

Que es un UseMvc: UseMvc es una extensión en IApplicationBuilder que toma un delegado de acción de IRouteBuilder. IRouteBuilder se usa para configurar el enrutamiento para MVC.

Crear Layout, ViewImports, ViewStart, agregar Bootstrap y directorios:

Crearemos el directorio view en la raíz de nuestro proyecto y el luego creamos el sub directorio shared.

Seguidamente clic derecho en el directorio shared seleccionar Agregar, Nuevo Elemento. Visualizará una nueva ventana que muestra la lista de elementos, de esta lista seleccione el de Tipo: Visual C# "Página de diseño de la vista Razor" y haga clic en el botón "Agregar".

Agregando un _Layout.cshtml

Editar una página de Razor:

Modifique y guarde la página con el siguiente marcado resaltado de color naranja:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    @*<title>@ViewBag.Title</title>*@

    <title>@ViewData["Title"]</title>

    <link href="/lib/bootstrap-4.3.1/dist/css/bootstrap.css" rel="stylesheet" />

</head>

<body>

    <div class="container">

        <div class="row justify-content-center">

            <h1>CRUD MVC ASP.Net Core 2.1</h1>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

    </div>

</body>

</html>

Que es un Loyout (_Layout.cshtml): Es la vista de diseño que contiene html Doctype, head y body como html normal, la única diferencia es llamar a los métodos RenderBody() y RenderSection(). RenderBody actúa como un marcador de posición inicial para otras vistas.

Por ejemplo, la vista Index.cshtml se creará en el sub directorio Home (..Views\Home) que se inyectará y representará como la vista de diseño que sera llamado por método RenderBody() del _Layout.cshtml (recordemos a los Master Page de web forms).

El @*<title>@ViewBag.Title</title>*@ es remplazado por <title>@ViewData["Title"]</title> El ViewData al igual que el ViewBag son utilizados para transferir datos del controlador a la vista. ViewData es un diccionario que puede contener pares clave-valor donde cada clave debe ser una cadena al igual que se visualiza en el "Title" que sera el encargado de transferir el titulo de la vista asociado al _Layout.cshtml.

Descargas el Package Bootstrap

Luego clic derecho en wwwroot y creamos el directorio lib agregamos todo el contenido que se encuentra en carpeta de bootstrap-4.3.1. Después hacer referencia en el _Layout.cshtml agregan el siguiente <link href="/lib/bootstrap-4.3.1/dist/css/bootstrap.css" rel="stylesheet" />

A continuación haga clic derecho en el directorio carpeta view seleccionar Agregar, Nuevo Elemento. En la lista de elementos, seleccione Importaciones de la vista de Razor" de Tipo Visual C# "Página de importaciones de la vista de Razor" y haga clic en el botón "Agregar". Esto agregará el archivo _ViewImports.cshtml.

Agregando un _ViewImports.cshtml

Crea el directorio Models en la raíz del proyecto (por ahora solo nos servirá para importar en _ViewImports.cshtml)

Abre el archivo _ViewImports.cshtml e importa los siguiente espacios de nombres:

@using DEMO01_CRUD.Models

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Los TagHelpers son nuevas características en ASP.NET Core, que nos ayudan a agregar fácilmente el código que es bastante parecido al HTML estándar, pero es procesado por el motor Razor en el servidor, lo que le brinda la ventaja de la representación del lado del servidor.

Finalmente para ir cerrando la primera parte de este apartado; clic derecho en el directorio carpeta view seleccionar Agregar, Nuevo Elemento. En la lista de elementos, seleccione Inicio de la vista de Razor" de Tipo Visual C# "Página de inicio de la vista de Razor" y haga clic en el botón "Agregar". Esto agregará el archivo _ViewStart.cshtml.

Agregar un _ViewStart.cshtml

Al agregar el archivo _ViewStart.cshtml se creará con el siguiente código inicial:

@{

    Layout = "_Layout";

}

Código que indica que todas las vistas tendrán el diseño del archivo _Layout.cshtml que se encuentra dentro de la carpeta shared (compartida).

Hasta ahora el proyecto contendrá la siguiente estructura:

Estructura de una Aplicación Web ASP.Net Core

En esta primera parte usted aprendió acerca de como:

Crear la solución y proyecto en ASP.Net Core

Sobre estructura del proyecto en ASP.Net Core

Sobre configuración de la Aplicación Web ASP.Net Core

Crear Layout, ViewImports, ViewStart e importar la librería Bootstrap

Además de editar una página de Razor

Parte 2: Crear la base de datos, cadena de conexión, agregar el modelo de datos y función de validación de lado del cliente.