Laboratorio Nº2 - Aplicaciones Web
Laboratorio Nº2 - Aplicaciones Web
Página | 1
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
Página | 2
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
Página | 3
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
Página | 4
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
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
Página | 6
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
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
Página | 9
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
@{
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
if (employee == null)
{
return NotFound();
}
return View(employee);
}
}
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="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";
}
Página | 15
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
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));
}
@{
ViewData["Title"] = "Delete";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Deleting Employee</h2>
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>
[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
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>
Página | 19
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
Haga clic en el botón Detalles para ver los detalles del empleado.
Página | 20
APLICACIONES WEB
Ing. CHRISTIAN A. MENDOZA SANTOS
Página | 21