APLICACIONES WEB

Ing. CHRISTIAN A. MENDOZA SANTOS

Paso 1: requisitos previos

Tendrás la opción de actualizar en caso de que no esté al día.

Paso 2: cree el proyecto ASP.NET Core 5.0.
Abra Visual Studio y haga clic en "Crear un nuevo proyecto".

Seleccione la aplicación web ASP.NET Core (Model-View-Controller) como

plantilla de proyecto y haga clic en Siguiente .

Página | 1
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Introduzca el nombre del proyecto y haga clic en Siguiente.

En información adicional, seleccione los campos como se configuran a

continuación y haga clic en Crear .

Página | 2
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Paso 3: estructura del proyecto ASP.NET CORE 5.0

Paso 4: instale todos los paquetes necesarios desde NuGet

Haga clic con el botón derecho en Dependencias y luego en Administrar
paquete NuGet.

Página | 3
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Para acceder a la base de datos de MS SQL Server, necesitamos instalar el

siguiente
proveedor. Busque "Microsoft.EntityFrameworkCore.SqlServer" como se
muestra a continuación e instálelo.

Para ejecutar los comandos de EF Core necesitaremos las herramientas de EF-

Core. Busque " Microsoft.EntityFrameworkCore.Tools " como se muestra a
continuación e instálelo .

Página | 4
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Este paquete nos permitirá ejecutar scaffold, comandos de migración desde la

consola del administrador de paquetes (PMC). También lo ayudará a crear el
contexto de la base de datos y las clases modelo.

Paso 5: crear una base de datos y una tabla de empleados

Cree una nueva base de datos llamada CompanyDB en sql-server y ejecute la
siguiente consulta SQL para crear una tabla de empleados.
CREATE TABLE [dbo].[Employees](
[EmployeeId] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NOT NULL,
[Address] [varchar](250) NULL,
[Designation] [varchar](50) NULL,
[Salary] [decimal](18, 0) NOT NULL,
[JoiningDate] [datetime] NOT NULL,
PRIMARY KEY CLUSTERED
(
[EmployeeId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON)
ON [PRIMARY]
) ON [PRIMARY]
GO
ALTER TABLE [dbo].[Employees] ADD DEFAULT (getdate()) FOR
[JoiningDate]
GO

Paso 6: cree una clase de modelo y contexto a partir de una base de datos
existente.
La creación de una clase de modelo y contexto a partir de una base de datos
existente también se denomina enfoque de base de datos primero. Entonces,
para realizar ingeniería inversa, debemos ejecutar el comando Scaffold-
DbContext . Este comando de andamio creará modelos y clases de contexto
basadas en el esquema de la base de datos.
Ejecute el siguiente comando de andamio después de reemplazar el nombre
del servidor, el nombre de la base de datos con la configuración de conexión de
su aplicación.

Página | 5
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Scaffold-DbContext “Server=******;Database=ComapnyDB;Integrated
Security=True” Microsoft.EntityFrameworkCore.SqlServer -OutputDir
Models

Por encima de scaffold, los comandos tienen tres parámetros.

El primer parámetro del comando scaffold tiene el nombre del servidor, el
nombre de la base de datos y la información de seguridad integrada.
Server=******;Database=ComapnyDB;Integrated Security=True
C#
Copiar
El segundo parámetro tiene información sobre el proveedor. estamos usando
sql-server, por lo que el proveedor será
Microsoft.EntityFrameworkCore.SqlServer.
Microsoft.EntityFrameworkCore.SqlServer
C#
Copiar
El tercer parámetro, es decir , -OutputDir , se usa para especificar la ubicación
donde queremos generar clases modelo. En nuestros casos es la
carpeta Modelos .
-OutputDir Models
C#
Copiar
Paso 7: crear un controlador de empleados
En la carpeta del controlador, haga clic derecho y luego Agregar >
Controlador . Seleccione la plantilla del controlador como se destaca a
continuación y haga clic en Agregar. En el cuadro de diálogo, proporcione el
siguiente nombre de tipo del controlador, en nuestro caso
es EmployeeController.cs y haga clic en Agregar para crear la
clase EmployeeController en la carpeta del controlador.

Página | 6
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Finalmente, la clase de controlador de empleados se ha creado con un código

básico generado automáticamente para la operación cruda.

Paso 8 - Configuración miscelánea

Almacene la cadena de conexión dentro de appsettings.json y elimine el
método OnConfiguring() generado automáticamente de la clase dbcontext, ya
que no es una buena práctica tener una cadena de conexión dentro del método
OnConfiguring().
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},

Página | 7
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

"AllowedHosts": "*",
"ConnectionStrings": {
"CompanyDB": "Server=******;Database=CompanyDB;Integrated
Security=True;"
}
}
C#
Copiar
En la clase Startup.cs , agregue CompanyDBContext como un servicio dentro
del método ConfigureService() como se muestra a
continuación. Recuperaremos el valor de la cadena de conexión
del archivo appsettings.json a través del método GetConnectionString() del
objeto IConfiguration .
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }

// This method gets called by the runtime. Use this method to add
services to the container.
public void ConfigureServices(IServiceCollection services)
{
var connectionString =
Configuration.GetConnectionString("CompanyDB");
services.AddDbContextPool<CompanyDBContext>(option =>
option.UseSqlServer(connectionString));
services.AddControllersWithViews();
}
C#
Copiar
Para cargar la vista de índice del controlador de empleados al iniciar la
aplicación, simplemente necesitamos cambiar el nombre del controlador
a Empleado dentro del método Configure() .
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Employee}/{action=Index}/{id?}");
});
C#
Copiar
Inyecte el objeto CompnyDBContext en el constructor del controlador de
empleados mediante la inyección de dependencia .
public class EmployeeController : Controller
{
private readonly CompanyDBContext _context;

Página | 8
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

public EmployeeController(CompanyDBContext context)

{
_context = context;
}
------
-------
}
C#
Copiar
Paso 9: operaciones ASP.NET Core MVC CRUD
Instrucciones generales para agregar vistas,
En la carpeta Vistas, cree una nueva carpeta llamada Empleado . Haga clic en
la carpeta Empleado y haga clic en Agregar .
Luego haga clic en Ver y haga clic en Razor View – Plantilla vacía y luego haga
clic en Agregar para crear la vista.

Después de agregar todas las vistas para la operación CRUD, la carpeta

Empleado tendrá el siguiente archivo de vistas.

Método de acción de índice

Reemplace su método de acción Index con el siguiente código dentro del
controlador de empleados.

Página | 9
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

public async Task<IActionResult> Index()

{
var employees = await _context.Employees.ToListAsync();
return View(employees);
}
C#
Copiar
Reemplace el código de vista de índice generado automáticamente con el
siguiente código,
@model IEnumerable<DotNet5Crud.Models.Employee>

@{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Employee List</h1>

<p style="text-align:right;margin-right:20px;">
<a class="btn btn-outline-primary" asp-
action="AddOrEdit">Create New</a>
</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model =>
model.Designation)
</th>
<th>
@Html.DisplayNameFor(model => model.Address)
</th>
<th>
@Html.DisplayNameFor(model => model.Salary)
</th>
<th>
@Html.DisplayNameFor(model =>
model.JoiningDate)
</th>
<th></th>
<th>Edit Action</th>
<th>Details Action</th>
<th>Delete Action</th>
</tr>
</thead>

Página | 10
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Designation)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</td>
<td>
@Html.DisplayFor(modelItem => item.Salary)
</td>
<td>
@Html.DisplayFor(modelItem => item.JoiningDate)
</td>
<td>
<td class="text-center">
<a asp-action="AddOrEdit" class="btn btn-
outline-primary" asp-route-employeeId ="@item.EmployeeId">Edit</a>
</td>
<td class="text-center">
<a asp-action="Details" class="btn btn-outline-
info" asp-route-employeeId="@item.EmployeeId">Details</a>
</td>
<td class="text-center">
<a asp-action="Delete" class="btn btn-outline-
danger" asp-route-employeeId ="@item.EmployeeId">Delete</a>
</td>
</tr>
}
</tbody>
</table>
</div>

Índice
Devuelve todos los empleados de la tabla de empleados y los presenta en la
vista de índice.
Método de acción AddOrEdit
Reemplace los métodos de acción Crear y Editar con el método de acción
simple AddOrEdit a continuación,
//AddOrEdit Get Method
public async Task<IActionResult> AddOrEdit(int? employeeId)
{

Página | 11
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

ViewBag.PageName = employeeId == null ? "Create Employee" :

"Edit Employee";
ViewBag.IsEdit = employeeId == null ? false : true;
if (employeeId == null)
{
return View();
}
else
{
var employee = await
_context.Employees.FindAsync(employeeId);

if (employee == null)
{
return NotFound();
}
return View(employee);
}
}

//AddOrEdit Post Method

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> AddOrEdit(int employeeId,
[Bind("EmployeeId,Name,Designation,Address,Salary,JoiningDate")]
Employee employeeData)
{
bool IsEmployeeExist = false;

Employee employee = await

_context.Employees.FindAsync(employeeId);

if (employee != null)
{
IsEmployeeExist = true;
}
else
{
employee = new Employee();
}

if (ModelState.IsValid)
{
try
{
employee.Name = employeeData.Name;
employee.Designation = employeeData.Designation;
employee.Address = employeeData.Address;
employee.Salary = employeeData.Salary;

Página | 12
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

employee.JoiningDate = employeeData.JoiningDate;

if(IsEmployeeExist)
{
_context.Update(employee);
}
else
{
_context.Add(employee);
}
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
throw;
}
return RedirectToAction(nameof(Index));
}
return View(employeeData);
}
C#
Copiar
Reemplace el código a continuación en la vista AddOrEdit ,
@model DotNet5Crud.Models.Employee

@{
ViewData["Title"] = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container p-3 my-3 border" >

<h1> @ViewBag.PageName</h1>

<div class="row">
<div class="col-sm-6">
<hr />
<form asp-action="AddOrEdit">
<div asp-validation-summary="ModelOnly"
class="text-danger"></div>
@if (@ViewBag.IsEdit)
{
<input type="hidden" asp-for="EmployeeId" />
}
<div class="form-group">
<label asp-for="Name" class="control-
label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-
danger"></span>

Página | 13
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

</div>
<div class="form-group">
<label asp-for="Designation" class="control-
label"></label>
<input asp-for="Designation" class="form-
control" />
<span asp-validation-for="Designation"
class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Address" class="control-
label"></label>
<input asp-for="Address" class="form-control"
/>
<span asp-validation-for="Address" class="text-
danger"></span>
</div>
<div class="form-group">
<label asp-for="Salary" class="control-
label"></label>
<input asp-for="Salary" class="form-control" />
<span asp-validation-for="Salary" class="text-
danger"></span>
</div>
<div class="form-group">
<label asp-for="JoiningDate" class="control-
label"></label>
<input asp-for="JoiningDate" class="form-
control" />
<span asp-validation-for="JoiningDate"
class="text-danger"></span>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit"
value="Save" />
<a class="btn btn-danger" asp-
action="Index">Back</a>
</div>
</form>
</div>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Página | 14
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Crear
Toma los detalles del empleado como entrada y crea un nuevo registro de
empleado en la tabla de empleados.
Editar
Toma los detalles de los empleados como entrada y actualiza los nuevos
detalles en la tabla de empleados.
Detalles Acción Método
Reemplace el código del método de acción Detalles con el
siguiente fragmento de código.
// Employee Details
public async Task<IActionResult> Details(int? employeeId)
{
if (employeeId == null)
{
return NotFound();
}
var employee = await _context.Employees.FirstOrDefaultAsync(m
=> m.EmployeeId == employeeId);
if (employee == null)
{
return NotFound();
}
return View(employee);
}
C#
Copiar
Reemplace el siguiente código en la vista Detalles ,
@model DotNet5Crud.Models.Employee
@{
ViewData["Title"] = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container p-3 my-3 border">

<h1>Employee Details</h1>
<hr />
<dl class="row">
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.Name)
</dd>
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.Designation)
</dt>
<dd class="col-sm-9">

Página | 15
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

@Html.DisplayFor(model => model.Designation)

</dd>
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.Address)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.Address)
</dd>
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.Salary)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.Salary)
</dd>
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.JoiningDate)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.JoiningDate)
</dd>
</dl>
<div>
<a class="btn btn-primary" asp-action="AddOrEdit" asp-
route-employeeId="@Model.EmployeeId">Edit</a>
<a class="btn btn-danger" asp-action="Index">Back</a>
</div>
</div>

Detalles
Devuelve los detalles del empleado de la tabla de empleados por ID de
empleado.
Eliminar método de acción
Reemplace el código del método de acción Eliminar con el siguiente
fragmento de código.
// GET: Employees/Delete/1
public async Task<IActionResult> Delete(int? employeeId)
{
if (employeeId == null)
{
return NotFound();
}
var employee = await _context.Employees.FirstOrDefaultAsync(m
=> m.EmployeeId == employeeId);

return View(employee);
}

Página | 16
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

// POST: Employees/Delete/1
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Delete(int employeeId)
{
var employee = await _context.Employees.FindAsync(employeeId);
_context.Employees.Remove(employee);
await _context.SaveChangesAsync();

return RedirectToAction(nameof(Index));
}

Reemplace el siguiente código en la vista Eliminar :

@model DotNet5Crud.Models.Employee

@{
ViewData["Title"] = "Delete";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Deleting Employee</h2>

<h3>Would you like to continue?</h3>

<div class="container p-3 my-3 border">
<hr />
<dl class="row">
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.Name)
</dd>
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.Designation)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.Designation)
</dd>
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.Address)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.Address)
</dd>
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.Salary)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.Salary)

Página | 17
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

</dd>
<dt class="col-sm-3">
@Html.DisplayNameFor(model => model.JoiningDate)
</dt>
<dd class="col-sm-9">
@Html.DisplayFor(model => model.JoiningDate)
</dd>
</dl>

<form asp-action="Delete">
<input type="hidden" asp-for="EmployeeId" />
<input class="btn btn-primary" type="submit"
value="Yes" />
<a class="btn btn-danger" asp-action="Index">No</a>
</form>

</div>

Eliminar : toma la ID del empleado como entrada y, después de confirmar la

ventana emergente de eliminación, elimina al empleado de la tabla de
empleados.
Paso 10 - Validaciones en ASP.NET Core

public class EmployeeValidator

{
[Required]
[MaxLength(50)]
[Display(Name = "Employee Name")]
public string Name { get; set; }

[Required]
[Display(Name = "Employee Salary")]
public decimal Salary { get; set; }

[Required]
[Display(Name = "Joining Date")]
public decimal JoiningDate { get; set; }
}

[ModelMetadataType(typeof(EmployeeValidator))]
public partial class Employee
{
}

Página | 18
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Validación del lado del servidor

La validación del lado del servidor se realiza utilizando la
propiedad ModelState de la clase ControllerBase. En general, ModelState
maneja los errores que provienen del enlace del modelo y la validación del
modelo. En la ejecución de la acción del
controlador, ModelState.IsValid verifica si hay algún error presente o no. Si es
cierto, permitirá continuar; de lo contrario, devolverá la vista.

Validación del lado del cliente

En Diseño.cshtml
<script src="~/lib/jquery/dist/jquery.min.js"></script>

En _ValidationScriptsPartial.cshtml
<script src="~/lib/jquery-
validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-
unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Paso 11 - Ejecute la aplicación

Cuando ejecutamos la aplicación. Por defecto, se cargará la vista de índice.

Haga clic en el botón Crear nuevo para crear un nuevo empleado .

Página | 19
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Haga clic en el botón Editar para editar un empleado .

Haga clic en el botón Detalles para ver los detalles del empleado.

Página | 20
 APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS

Haga clic en el botón Eliminar para eliminar al empleado.

Página | 21