Ir al contenido principal

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.

Comentarios

Entradas más populares de este blog

Habilitar Usuario HR Oracle

Al realizar la primera instalación del Oracle, el usuario HR por defecto está bloqueado y por ende no podemos loguearnos como dicho usuario, lo que debe hacer son los siguiente pasos, aplicables para Linux o Windows.
1. Conectarse como usuario system o sysdba + contraseña haciendo uso del comando connect.
Usuario: system
Password: xxxx 


2. Hacer uso  del comando alter user hr account unlock desbloqueamos la cuenta.
alter user hr account unlock;

3. Escribimos el comando alter user HR identified by hr; con esto estamos diciendo que la contraseña será hr.

alter user HR identified by hr;

4. Ahora testeamos la conexión con el comando - conn hr/hr@xe. Si deseas después de conectarnos se puede realizar un select a la tabla employees del hr.


Resultado del select realizado
5. Con todos estos pasos realizados ya podemos logearnos desde cualquier IDE como el usuario hr  y la contraseña hr que definimos en el paso 3. 
Para finalizar nos loguearemos con el IDE Oracle SQL Developer.

Espero les sea de utilidad,…

Usuario SYS y SYSTEM - ORACLE

Usuario SYS y SYSTEM
Ambos usuario son creados de forma automática al crear la base de datos ORACLE y se otorga el rol de DBA.

SYS (password por defecto: CHANGE_ON_INSTALL).
SYSTEM (password por defecto: MANAGER).

Lo que se recomienda es cambiar el password de ambos usuarios por el tema de seguridad.

SYS:
Todas las tablas y vistas para el diccionario de datos de la base de datos están almacenados en el esquema SYS. Estas tablas y vistas son críticas para el funcionamiento de la base de datos ORACLE. Para mantener la integridad del diccionario de datos, las tablas del esquema SYS son manipulados solo por la base de datos. Nunca se debería modificar algo o crear tablas en el esquema del usuario SYS.

SYSTEM:
El usuario SYSTEM se utiliza para crear tablas y vistas adicionales que muestran información administrativa, tablas internas y vistas utilizado por varias opciones y herramientas de la base de datos ORACLE. No se recomienda utilizar el esquema SYSTEM para almacenar tablas de interés para usu…

Parámetro de entrada y salida – PL/SQL

Parámetro de entrada y salida – PL/SQL:
Los parámetros de entrada y salida no son los parámetros de inicialización de la base de datos ORACLE. Los parámetros de entra y salida son utilizados mayormente en implementaciones de funciones, procedimientos almacenados o bloques de código bajo el lenguaje del PL/SQL, se considera que ambos parámetros (entra y salida) puedan realizar operaciones en el mismo bloque PL/SQL, es decir, si enviamos un parámetro de entrada hará que cumpla cierta operación y retornara los valores de salida de dicha operación procesada de acuerdo al parámetro de ingresado. Es de acuerdo al caso que nos presenta en la implementación.
Algo importante al definir los parámetros, es saber y considerar cuántos tipos de parámetro existe si solo hablamos de entrada y salida, en realidad mi determinación seria 3 tipos:

Parámetros:

IN – entrada
OUT – salida
IN OUT – entrada salida

Parámetro IN – entrada:
El comportamiento común de estés tipos de parámetros es estar siempre pendiente d…