Programación Aplicada II

Ejemplo 1 bootstrap

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<title>Bootstrap 5</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02i
uK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4" style="background:#00ff90;
text-align:center; text-shadow: 2px 2px 2px gray">
<h2>Bienvenidos a Sistemas UNC</h2>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4" style="background:#7eff64;
</div>
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4" style="background:#9dff9f;
</div>
</div>
</div>
</body>
</html>
Ejemplo 2 bootstrap
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<title>Registro y listado de Curso</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02i
uK6FUUVM" crossorigin="anonymous">
<link href="EstiloBT.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Barra de navegación</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
<a class="nav-link" href="#">Características</a>
<a class="nav-link" href="#">Precios</a>
<a class="nav-link disabled">Deshabilitado</a>
</div>
</div>
</div>
</nav>
<div class="container my-3">
<div class="row">
<div class="col-md-4">
<h2 class="centrado">Registro de cursos</h2>
<form>
<div class="mb-3">
<label for="nombre" class="form-label">Nombre del curso</label>
<input type="text" class="form-control" id="nombre" placeholder="Ingresar
el nombre del curso">
</div>
<div class="mb-3">
<label for="creditos" class="form-label">Créditos</label>
<input type="number" class="form-control" id="creditos"
placeholder="Ingresar el número de créditos">
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Agregar</button>
<button type="reset" class="btn btn-success">Limpiar</button>
</div>
</form>
</div>
<div class="col-md-8 my-3">
<h2>Relación de cursos</h2>
<table class="table table-striped">
<thead>
<tr>
<th class="centrado">#</th>
<th class="centrado">Nombre del curso</th>
<th class="centrado">N° de créditos</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Fundamentos de Programación</td>
<td class="centrado">3</td>
</tr>
<tr>
<td>2</td>
<td>Física</td>
</tr>
<tr>
<td>3</td>
<td>DIROPE</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68S
Iy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
CSS:
.centrado{
text-align:center;
vertical-align:middle;
}
AHORA ESTAMOS HACIENDO COSAS CON EL ASP.NET
Esto de aquí es para la página razor vacía “sintaxix.cshtml”
@page
@model AplicacionCoreRazor.Pages.sintaxixModel
@{
ViewData["Title"] = "Sintaxis de RAZOR";
}
<h2>Sintaxis de Razor</h2>
<h3>Declaración Implícita</h3>
<p>Fecha actual: @DateTime.Now</p>
<h3>Declaración Explícita</h3>
<p>La fecha de la semana pasada fue: @(DateTime.Now - TimeSpan.FromDays(7))</p>
<h3>Bloque de código en Razor</h3>
@{
var mensaje = "Bienvenidos a Sistemas UNC";
var edad = 15;
var diaSem = 4;
string mostrarMensajeMayus(string msj)
{
return msj.ToUpper();
}
}
<p>@mensaje</p>
<p>@mostrarMensajeMayus(mensaje)</p>
<h3>Estructura de control - Condicional if ... else</h3>

@if (edad >= 18)
{
<p>La persona es mayor de edad</p>
} else
{
<p>La persona es menor de edad</p>
}
<h3>Estructura de control - switch</h3>

@switch (@diaSem)
{
case 1:
<p>Día de la semana: Lunes</p>
break;
case 2:
<p>Día de la semana: Martes</p>
break;
case 3:
<p>Día de la semana: Miércoles</p>
break;
case 4:
<p>Día de la semana: Jueves</p>
break;
case 5:
<p>Día de la semana: Viernes</p>
break;
case 6:
<p>Día de la semana: Sábado</p>
break;
case 7:
<p>Día de la semana: Domingo</p>
break;
default:
<p>No es un día de la semana</p>
break;
}
<h3>Estructuras de control - Bucles</h3>

@{
var listaCursos = new List<string>() { "Matemática", "Fundamentos", "Física", "Análisis",
"Algoritmos" };
var j = 0;
var k = 1;
var suma = 40;
}
<h4>Listado con for</h4>
@for(int i = 0; i<listaCursos.Count(); i++){
<p>Curso @(i+1): @listaCursos[i]</p>
}
<h4>Listado con foreach</h4>

@foreach(var curso in listaCursos){
<p>Curso @(k): @curso</p>
k++;
}
<h4>Listado con while</h4>

@while (j < listaCursos.Count)
{
<p>Curso @(j+1): @listaCursos[j]</p>
j++;
}
<h4>Manejo de errores try, catch</h4>

@try
{
var n = 8;
var promedio = suma / n;
} catch (Exception ex)
{
<p>Mensaje de error @ex.Message</p>
}
EJERCICIO: Crear una página Razor (Nombre: Ejercicio_1) debe mostrar:

Lista que imprima valores: (11, 83, 12, 7, 5, 40, 41, 50, 8, 10) 10 elementos
- Mostrar en viñetas los números pares:
- Contabilizar los pares
- Mostrar en viñetas los números impares:
- Contabilizar los impares
Con una etiqueta de HTML crear una línea horizontal
//SEMANA 7
Ejercicio estudiante
@page
@using AplicacionCoreRazor.Models;
@model estudianteModel
@{
ViewData["Title"] = "Estudiante";
}
@{
var listaEstudiante = new estudiante[]
{
new estudiante("Juan", 18, 'M'),
new estudiante("Marco", 19, 'M'),
new estudiante("Julia", 21, 'F'),
new estudiante("María", 19, 'F'),
new estudiante("Ricardo", 23, 'M'),
};
List<estudiante> listaM = new List<estudiante>();

List<estudiante> listaF = new List<estudiante>();
int m = 0, f = 0;
for(int i=0; i < listaEstudiante.Count(); i++)
{
if(listaEstudiante[i].sexo == 'M')
{
listaM.Add(listaEstudiante[i]);
m++;
} else
{
listaF.Add(listaEstudiante[i]);
f++;
}
}
}
<h2>Ejercicio 2</h2>
<h3>Lista de estudiantes</h3>
<h3>@Model.mensaje</h3>
<table class="table">
<thead>
<tr>
<td align="center">
Lista de Estudiantes
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
@for (int i = 0; i < listaEstudiante.Count(); i++)

{
<li>@listaEstudiante[i].toString()</li>
}
</ul>
</td>
<tr>
<td>
Cantidad: @listaEstudiante.Count()
</td>
</tbody>
</table>
<h3>Lista de varones y mujeres</h3>

<table class="table">
<thead>
<tr>
<td align="center">
Lista de varones
</td>
<td align="center">
Lista de mujeres
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
@for (int i = 0; i < listaM.Count(); i++)

{
<li>@listaM[i].toString()</li>
}
</ul>
</td>
<td>
<ul>
@for (int i = 0; i < listaF.Count(); i++)

{
<li>@listaF[i].toString()</li>
}
</ul>
</td>
</tr>
<tr>
<td>
Cantidad: @m
</td>
<td>
Cantidad: @f
</td>
</tr>
</tbody>
</table>
.cs de estudiante
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace AplicacionCoreRazor.Pages
{
public class estudianteModel : PageModel
{
[TempData]
public string mensaje { set; get; }
public void OnGet()

{
}
}
}
Ejercicio 3
@page
@model AplicacionCoreRazor.Pages.Ejercicio3Model
@{
ViewBag.Title = "+ Sintaxis Razor";
}
<form method="post">
<input class="btn btn-outline-primary my-2" type="submit" value="Solicitar">
</form>
<a href="Ejercicio3"><input class="btn btn-outline-primary my-2" type="button"
value="Cargar"></a>
<hr />
<p>Usted ha invocado la página web por el @Model.mensaje</p>
@if (@Model.mensaje.Equals("Método Get")){
<p>Nombre: @ViewData["nombre"] <br />Edad: @ViewData["edad"]</p>
}
.cs de ejercicio 3
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace AplicacionCoreRazor.Pages
{
public class Ejercicio3Model : PageModel
{
[TempData]
public string mensaje { set; get; }
public void OnGet()

{
mensaje = "Método Get";
ViewData["nombre"] = "Dana Sufría";
ViewData["edad"] = 18;
}
public IActionResult OnPost()
{
mensaje = "Método Post";
if (!ModelState.IsValid)
{
return new PageResult();
}
return RedirectToPage("Estudiante");
}
}
}
Ejercicio: Crear una página web que muestre un formulario ingresar los valores a los
atributos de estudiantes y se carguen en la misma página todos los estudiantes que han
ingresado.
Ejer 4
@page
@model Ejemplo1.Pages.E4_formEstModel
@{
ViewBag.Title = "Ejercicio 4";
}
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4">
<h2>Registro de Estudiantes</h2>
<div class="mb-3">
<label for="nombre" class="form-label">Nombre del estudiante</label>
<input type="text" class="form-control" id="nombre" placeholder="Nombre del
estudiante">
</div>
<div class="mb-3">
<label for="edad" class="form-label">Edad</label>
<input type="number" class="form-control" id="edad" placeholder="Edad del
estudiante">
</div>
<div class="form-check">
<label class="form-check-label" for="f">Femenino</label>
<input class="form-check-input" name="sexo" type="radio" id="f">
</div>
<label class="form-check-label" for="m">Masculino</label>
<input class="form-check-input" name="sexo" type="radio" id="m">
</div>
<div class="d-grid gap-2">
<button type="button" class="btn
btn-primary">Agregar estudiante</button>
</div>
</form>
</div>
</div>
</div>
@{/*
<a href="Ejercicio4"><input class="btn btn-outline-primary my-2" type="button"
value="Cargar"></a>
<hr />
<p>Usted ha invocado la página web por el @Model.mensaje</p>
@if (@Model.mensaje.Equals("Método Get"))
{
<p>Nombre: @ViewData["nombre"] <br />Edad: @ViewData["edad"]</p>
}*/
}
el cs del ejer 4
jajaja no hice nada xd
SEMANA 8
Ejercicio para la casita, las cosas q necesitas las tienes en el drive crack
@page
@model AplicacionCoreRazor.Pages.Ejercicio5Model
@{
ViewBag.Tittle = "Encuesta";
}
<h2> Ejercicio 5 - Encuesta</h2>
<div class="row">
<div class="col-md-8 col-sm-12 col-lg-6 col-xl-5">
<h2>Encuesta</h2><hr />
<div class="mb-3">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" class="form-control" name="nombre"
placeholder="Ingrese su nombre">
</div>
<label class="mb-2">Te gustaría realizar guardias en la oficina:</label>
<div class="form-control mb-3">
<label class="form-check-label" for="gsi">Sí</label>
<input class="form-check-input" name="guardia" type="radio" id="gsi"
value="F">
</div>
<label class="form-check-label" for="gno">No</label>
<input class="form-check-input" name="guardia" type="radio" id="gno"
value="M">
</div>
</div>
<div class="mb-3">
<label for="com" class="form-label">Comentario</label>
<textarea class="form-control" name="com" placeholder="Ingrese su un
comentario"></textarea>
</div>
<div class="my-2">
<button asp-page-handler="EnviarDatos" class="btn btn-outline-primary
my-2">Enviar</button>
</div>
</form>
</div>
</div>
</div>
SEMANA 9
UTILIDAD DE LOS ____
1. Primera cosa hecha, se cambia el método de “method=”post”” por un

“asp-page=”NombreDePagina””.
2. Cambiamos todos los type y name de los elementos del formulario por un asp-for
3. Agregamos variables, displays y tipo de dato al .cs del archivo:
4. Cambiar el método OnPost agregando una página para el redireccionado:

5. Agregamos un TempData con un mensaje en el .cs principal, también le damos a
mensaje el string del objeto estudiante:
6. Creamos la página “Gracias” y agregamos un TempData en el .cs de la página:
7. Editamos la página “Gracias”:

Por ahora no se ha creado la página “ListaEstud”, se hará lueguito pero no importa xd
así se ve jaja:
8. Ahora sí creamos la página para el listado y la editamo’ de una vez el .cs:
9. Ahora editamos y creamos cosas para que se muestre, aquí lo woa a hacer en una
tabla:
Código por aquí por si da hueva copiar
@page
@using AplicacionCoreRazor.Models
@model AplicacionCoreRazor.Pages.ListaEstudModel
@{
}
<h2>Listado de estudiantes</h2>
<div class="col-md-8">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>Edad</th>
<th>Sexo</th>
</tr>
</thead>
<tbody>
@{
var cont = 0;
foreach (estudiante oE in @Model.listaEstudiante)
{
cont++;
<tr>
<td>@cont</td>
<td>@oE.nombre</td>
<td>@oE.edad</td>
<td>@oE.sexo</td>
</tr>
}
}
</tbody>
</table>
</div>
Ya eso sería todo prácticamente
EJERCICIO:
Al formulario del estudiante agregar 3 propiedades (nota1, 2 y 3), de tal manera que
cuando se registra se debe obtener el promedio de las notas con mayor valor, en la página
web listado de estudiante debe haber 2 botones para cargar los estudiantes aprobados y
desaprobados.
Hecho en casa
SEMANA 10-11 VAMOS A TRABAJAR CON EL ASP-MVC
paso 1. creamos un proyecto del tipo MVC (modelo-vista-controlador) ya todos sabemos

como hacerlo.
paso 2. antes de nada nos vamos a dirigir a HomeControler (carpeta

Contollers/HomeController.cs/HomeController). Ahí vamos a borrar el constructor logger
paso 3. creamos una clase de tipo encuesta en este caso, en la carpeta Models, con sus
respectivos atributos (IMPORTANTE: crear un método vacío para evitar problemas futuros)
//lo de comentario me lo saqué de por ahí no va borrar eso jijiji (IMPORTANTE IR AL PASO
13 PARA CREAR LAS COSAS DE UNA VEZ)
Paso 4. Modificamos el Index (carpeta Views/Home/Index):
Paso 5. creamos un método IActionResult en HomeController.cs también un [HttpGet]
clic derecho en “Encuesta” y agregar vista vacía de tipo Razor
Una vez ahí vamos a editar cositas: (LO MISMO, IR AL PASO 13 PARA MODIFICAR LAS
COSAS DE UNA VEZ XD)
Paso 6. Ahora vamos a definir otro action con el mismo nombre para trabajar con encuesta
(ya sabes en el HomeController), en este se va a esperar un parámetro de tipo Encuesta,
cómo es que funciona no sé. A este le ponemos un [HttpPost]
creamos una vista para el mismo, esta se va a llamar “Gracias”
En la vista gracias vamos agregando cositas como botones y así

Paso 7: En el HomeController vamos creando un método ViewResult con el nombre de
VerRegistros (nombre de la página de registros/historial)
Agregamos una vista de vacía de Razor para VerRegistros:

algo así q se vea ya le sabemos supongo, ya la editamos luego
Paso 8: Creamos una nueva clase en la carpeta Models llamada ServicioEncuesta
Ya sabemos que esta clase es para almacenar los datos/registros en memoria

Vamos haciendo cositas por aquí:
Paso 9: Modificamos el archivo program.cs (este es un archivo de arranque y todas las
páginas en el proyecto la usan), ahí vamos a especificar que la nueva clase creada servirá
para almacenar datos en memoria. agregamos las líneas 1 y 7
Paso 10: Volvemos al HomeController pq vamos a hacer unas modificaciones bien xingonas
okno no sé la vdd
(Ahora ya sé vamos a crear un servicio o algo así para ServicioEncuesta y su constructor

también): Líneas 9-14
Paso 11: Modificamos el método ViewResult de Encuesta y el de VerRegistros en el

HomeController (a la vista de VerRegistros le pasamos el parámetro asistente cuidadito con
eso)
Paso 12: Ahora sí ya le hacemos el diseño a la vista VerRegistros:
paso 13: Vamos a utilizar algo en la clase Encuesta para que no permita valores nulos
modificamos la clase Encuesta y la vista Encuesta
Tengamos en cuenta que es una validación de formulario para el lado del cliente, no para el
servidor. Por lo tanto es bueno hacer la validación por el lado del servidor también, ahora lo
haremos
Paso 14: Verificación por el lado del servidor, para eso modificamos cosas en el método
Encuesta del HomeController:
Básicamente ya estaría, ahora nomás queda agregar o cambiar más cositas que está
haciendo el profe ya veremos qué onda con eso:
Agregamos líneas 5 y 6
FIN DEL EJERCICIO.
AHORA VAMOS A MODIFICARLO PARA USARLO CON UNA BASE DE DATOS:
Paso 1: ir a herramientas - Administrador de paquetes y consola:

Una vez en consola escribimos lo siguiente:
Install-Package Microsoft.EntityFrameworkCore.Sqlite
y esperamos que se instale.
Instalamos un segundo paquete escribiendo el sgte código en consola:
Install-Package Microsoft.EntityFrameworkCore.Tools
//Para qué usamos una base de datos?? para una mejora de seguridad, claro Dana me
hizo una pregunta así hace rato
//gran pregunta de hecho, resulta que las computadoras funcionan con 4 niveles de
protección, siendo el nivel 0 el más elevado, y este es designado para parte del sistema
operativo, la gestión de memoria, etc, el nivel 1 es casi entero para el sistema operativo, el
nivel 2 y 3 quedan para los programas, pero el nivel 2 al tener mayor protección que el nivel
3 es mayormente designado para las bases de datos, quedando el nivel 3 que es designado
para los programas. (fuente, ArCo cap Sistema operativo).
Paso 2: Ir a herramientas, administrador de paquetes y admin paquetes para la solución:
En las soluciones se ve así:
Paso 3: Crear una carpeta Data

Paso 4: En la nueva carpeta Data creamos una clase llamada EncuestaContext
Ahí la modificamos de la siguiente manera: (IMPORTANTE PONER :DbContext y :base)
Paso 5: Nos vamos al appsertings.json (padre de program.cs) y agregamos los siguientes

(incluida la coma):
Paso 6: Nos metemos en la program.cs y modificamos la línea del ServicioEncuesta, ya no
se va a guardar en memoria, sino en una “base de datos” con el método AddDbContext:
Línea 2 y 11-13
Paso 7: En consola vamos a añadir una clase que contenga la “migración” con el siguiente
código:
Add-Migration InitialCreate
y luego
Update-Database
Paso 8: Descargar un visor de Sqlite desde internet (https://sqlitebrowser.org) y

descargamos el de 64 bits pq nuestras computadoras son de 64 bits obvio
y ya de ahí le vas instalando. En la parte de “Shortcuts” vamos a seleccionar Desktop y
Program Menú para SQlite
vale solo sgt-sgt y esperar a que se instale.
Paso 9: Abrimos la dirección de la carpeta donde está guardado el proyecto, copiamos esa
dirección
Abrimos la encuesta desde el DB browser (acabamos de instalar) en File - Open Database
pegamos la dirección copiada antes y seleccionamos la encuesta.db
Nos abre esto:
Paso 10: Modificamos la clase EncuestaContext (o no, no estoy seguro de si hizo algo)
Paso 11: Modificamos el HomeController, específicamente el método Encuesta:

Comentamos la parte ServicioEncuesta: y escribimos una nueva línea de solo lectura, ahora
para EncuestaContext su constructor también:
Bueno ya le seguimos en la siguiente clase :)/:(
Vale bueno paso 10:

La parte de readonly ya no usará ServicioEncuesta, sino que usará EncuestaContext,
a partir de eso es que construye el constructor en HomeController usando la variable
_encuestaContext, aunque presumo que también podría ser usado sin problemas con
this.encuestaContext, algo así:
Paso 11: Ahora tenemos que tener en cuenta que ya no usaremos servicioEncuesta
para agregar y guardar la encuesta entonces debemos modificar los métodos donde
lo usemos:
usamos nuestra encuestaContext, que contiene un atributo T_encuesta dentro, que
es una lista entonces ahí añadimos la encuesta. Importante: no olvidar guardar los
cambios con encuestaContext.SaveChanges();
Paso 12: Por último modificamos VerRegistros:
Y ahora, al probarlo, verificamos que corre bien:
Se guarda inicialmente en pantalla y finalmente en la base de datos:
Ahora, hay un problema, y es que al estar almacenados en una base de datos es más
difícil borrar registros, lo más seguro es que tengamos que agregar la opción así que
aquí una forma (imagino que no será la mejor y en clase la desarrollaremos pero x):
Primero agregar el botón en VerRegistros y en Encuesta.cshtml
Ahora, dar los permisos para que en encuesta redireccione a RemoverEncuesta en

vez de a Gracias, esto en el HomeController:
Ahora crear la vista RemoverEncuesta y su .cs:

Ahora en el HomeController.cs añadir el método:
Crear las dos vistas:

y es todo.
Y lo elimina.
//VALE MUCHAS GRACIAS RENATO, AHORA CONTINUAMOS YA NO CON LO MISMO,
VAMOS CON OTROS TEMAS.
SEMANA 12
PASO 1: Crear un proyecto MVC en visual
En este caso el nombre será WebMatricula.
Paso 2: Entramos al _Layout (Views-Shared-_Layout.cshtml), cambiamos el nombre

que sale en el Index (WebMatricula por Aplicación Web Matricula) linea 15. así le
hacemos más cambios, agregamos más items (Cada nuevo item va a tener su
respectivo asp-controller y un asp-action=”Index”)
También modificamos el footer para la fecha y así:

Paso 3: Modificamos Index, (Views-Home-Index.cshtml) el Title por Inicio y le damos
un diseño como el siguiente ¿pq no?
Paso 4: Vamos a crear nuestras clases en la carpeta Models (Clase Curso, Estudiante
y Matricula)
Paso 5: Bueno ya a cada una le damos sus atributos
Estudiante:
Curso:
Matrícula: Para esta clase le vamos a agregar más cositas que solamente atributos y
constructor, algo como un método que nos servirá para determinar los valores de Grupo, en
la línea donde declaramos el Grupo tendrá un tipo de dato ‘Nombre_del_metodo?’ como
veremos en la foto: (Línea 2 se crea al crear el método enum Grupo)
*El signo de interrogación es lo que permite que el grupo acepte valores nulos, es
decir lo hace opcional.
Paso 6: A las 3 clases le vamos a agregar propiedades de tipo diálogo
(ACTUALIZADO EN LAS IMÁGENES ANTERIORES)
matricula:
estudiante:
curso:
Paso 7: Crear la carpeta Data

Paso 8: En la carpeta Data creamos una clase contexto (nombre MatriculaContext)
Paso 9: Vamos a instalar paquetes en Herramientas-Administrador_de_paquetes-Consola
Instalación de Paquetes:
Install-Package Microsoft.EntityFrameworkCore.SqlServer
Install-Package Microsoft.EntityFrameworkCore.Tools
Install-Package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore
Para el 3er paquete va a dar problemas, se hace lo siguiente:

Ir a herramientas-Administrador_paquetes-Paquetes_solución.
nos vamos a examinar y en la barra de búsqueda vamos a poner:
Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore
Seleccionamos el primero que aparece:
A la derecha marcamos Proyecto y WebMatricula así como que cambiamos la versión

a la 6.0.20 y posteriormente instalamos en el botón que dice Instalar
YA DEJA DE ESCRIBIR EN EL DOC PQ PUEDE SER PERJUDICIAL, MEJOR ME

ASEGURO
En la parte de “Instalado” de solución aparece así:
Paso 10: nos dirigimos a appsettings.json y agregamos lo siguiente (con la coma también)
dentro de un ConnectionStrings
, “ConnectionStrings”: {
"DefaultConnection":
"Server=(localdb)\\mssqllocaldb;Database=BDMatricula;Trusted_Connection=True;Mu
ltipleActiveResultSets=true"
}
Paso 11: Ahora modificamos la clase contexto que creamos en el Data, lo hacemos de la
siguiente manera:
Paso 12: Generar un método para heredar de la clase getContext en la misma clase de
MatriculaContext
Paso 13: Vamos a ejecutar un nuevo servicio para conectar con la base de datos, esto
en la página Program.cs. (con eso hecho ya podemos migrar los datos a la base de
datos) Líneas 8-10
CUANDO ESTEMOS USANDO ESTO NOS VAMOS DIRECTAMENTE HASTA EL PASO
16 PARA EVITAR PROBLEMAS Y NO ES NECESARIO AÑADIR UNA MIGRACIÓN
LUEGO
Paso 14: Crear una base de datos en consola (Herramientas-adminpaquetes-consola)

En consola vamos a añadir una clase que contenga la “migración” con el siguiente código:
Add-Migration InitialCreate
//El “InitialCreate” puede ser cualquier nombre que le quieras dar
y luego
Update-Database
(En caso se desee borrar una base de datos creada se usa Drop-”nombre base de
datos” (o Drop-Database en general))
Paso 15: Nos dirigimos a la Ver-Explorador de objetos SQL

Paso 16: Vamos a borrar la base de datos con drop-database en la consola y así poder
agregar líneas de código en Program.cs para automatizar la actualización inmediata de la
base de datos.
se nos borra la base de datos
ahora agregamos la línea 12:
luego en el mismo program.cs agregamos lo siguiente. Líneas 24-38:
Paso 17: Para este caso eliminamos la carpeta de Migraciones con todas sus clases,
cuando ejecutemos por siguiente vez la base de datos se creará automáticamente.
Paso 18: en la carpeta Controllers vamos a agregar elementos con scaffolding

scaffolding con vistas que usan Entity
Seleccionamos Estudiante en Clase de modelo y MatriculaContext en Clase DbContext:
Así se nos crean vistas:

Paso 19: Nos metemos en Create (Views - Estudiantes - Create) y cambiamos la validación
de “ModelOnly” a “All”:
Paso 20: Nos vamos a WebMatricula (PagPrincipal) y comentamos la línea de Nullable:
Paso 21: Vamos a modificar el tipo de dato que se ingresa para fecha de inscripción, esto
se hace en la clase de estudiante (en models)
Paso 22: Nos vamos a wwwroot y agregamos biblioteca del lado del ciente:
Una vez ahí seleccionamos el proveedor unpkg y escribimos lo sgt :
@fortawesome/[email protected]
Y ELEGIMOS ARCHIVOS ESPECÍFICOS, solo el archivo all.min.css de la carpeta css,

también la carpeta webfonts
Ahora sí le damos a instalar.
pequeño problemita:
la carpeta fortawesome la vamos a mover dentro de la carpeta lib
Paso 23: Vamos a mejorar la apariencia de la página

Nos vamos al _Layout (en Views - Shared - Layout) y modificamos:
Agregamos una nueva referencia de archivos css de la siguiente manera: (Línea 7)
en el navbar cambiamos el color y así ya como queramos:
Modificamos la línea (16 en mi caso) de la siguiente manera: (borramos “-fluid” en la clase

de la línea 15)
pues seguimos modificando:

Paso 24: Nos dirigimos al Index de la vista Estudiante:
una vez ahí iremos modificando el diseño de la siguiente manera:
PUCHA YA NO ACABÉ, SI ALGUIEN COPIÓ LO QUE HIZO EL PROFE CON LA TABLA

PEGUENLO AQUÍ PORFA
En Index de estudiante agrega esto en table y thead:

SEMANA 13
//AL PARECER A TODO EL MUNDO LE DIO IGUAL MI PETICIÓN ANTERIOR, BUENO

NO IMPORTA SOLO ES EL DISEÑO DE LA TABLA
Paso 25: En la misma ventana index vamos a cambiar el diseño de los botones de las
tablas para editar, borrar y obtener detalles: (se modificaron los enlaces con clase e íconos)
Paso 26: Ahora hacemos lo mismo en la página Create (cambiamos formato de botones)
IR AVANZANDO EN CASA LOS OTROS BOTONCITOS QUE FALTAN
//para esto podemos ir directamente al paso 29 y copiar desde ahí, cuidadito con los
nombres nomás
Paso 27: vamos a hacer métodos para ordenamiento, para ello vamos a la ventana Index y
hacemos lo siguiente (OJITO que en el route el nombre sea el mismo que se recibirá en el
siguiente paso):
Paso 28: Nos vamos a EstudiantesController y modificamos el método Index así:
Bueno pues al profe le dio iwal eso, volvemos a la PÁGINA index y cambiamos “ordenar”
por @ViewData[“ordenar”]:
Regresamos al EstudiantesController y hacemos la siguiente wea para ahora ordenar de

manera descendiente también:
Vale, ahora ya funciona el botón que tenemos en la tabla para ordenar, al darle click cambia
de ascendente a descendente :)
Paso 29: Veamos otra manera para ordenar (para poder hacerlo con varios campos):
En el INDEX cambiamos el nombre del ViewData y también le agregamos un botón a fecha:
En el EstudiantesController modificamos el método Index cambiando todos los if por un

switch:
y ya, ya funciona así.

Programación Aplicada II

Uploaded by

Copyright:

Available Formats

Programación Aplicada II

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programación Aplicada II

Uploaded by

Copyright:

Available Formats

Ejemplo 1 bootstrap

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

AHORA ESTAMOS HACIENDO COSAS CON EL ASP.NET

Esto de aquí es para la página razor vacía “sintaxix.cshtml”

<h3>Estructura de control - Condicional if ... else</h3>

<h3>Estructura de control - switch</h3>

<h3>Estructuras de control - Bucles</h3>

<h4>Listado con foreach</h4>

<h4>Listado con while</h4>

<h4>Manejo de errores try, catch</h4>

EJERCICIO: Crear una página Razor (Nombre: Ejercicio_1) debe mostrar:

List<estudiante> listaM = new List<estudiante>();

@for (int i = 0; i < listaEstudiante.Count(); i++)

<h3>Lista de varones y mujeres</h3>

@for (int i = 0; i < listaM.Count(); i++)

@for (int i = 0; i < listaF.Count(); i++)

public void OnGet()

public void OnGet()

jajaja no hice nada xd

1. Primera cosa hecha, se cambia el método de “method=”post”” por un

3. Agregamos variables, displays y tipo de dato al .cs del archivo:

4. Cambiar el método OnPost agregando una página para el redireccionado:

6. Creamos la página “Gracias” y agregamos un TempData en el .cs de la página:

7. Editamos la página “Gracias”:

8. Ahora sí creamos la página para el listado y la editamo’ de una vez el .cs:

Ya eso sería todo prácticamente

SEMANA 10-11 VAMOS A TRABAJAR CON EL ASP-MVC

paso 1. creamos un proyecto del tipo MVC (modelo-vista-controlador) ya todos sabemos

paso 2. antes de nada nos vamos a dirigir a HomeControler (carpeta

clic derecho en “Encuesta” y agregar vista vacía de tipo Razor

creamos una vista para el mismo, esta se va a llamar “Gracias”

En la vista gracias vamos agregando cositas como botones y así

Agregamos una vista de vacía de Razor para VerRegistros:

Paso 8: Creamos una nueva clase en la carpeta Models llamada ServicioEncuesta

Ya sabemos que esta clase es para almacenar los datos/registros en memoria

(Ahora ya sé vamos a crear un servicio o algo así para ServicioEncuesta y su constructor

Paso 11: Modificamos el método ViewResult de Encuesta y el de VerRegistros en el

FIN DEL EJERCICIO.

AHORA VAMOS A MODIFICARLO PARA USARLO CON UNA BASE DE DATOS:

Paso 1: ir a herramientas - Administrador de paquetes y consola:

En las soluciones se ve así:

Paso 3: Crear una carpeta Data

Ahí la modificamos de la siguiente manera: (IMPORTANTE PONER :DbContext y :base)

Paso 5: Nos vamos al appsertings.json (padre de program.cs) y agregamos los siguientes

Paso 8: Descargar un visor de Sqlite desde internet (https://sqlitebrowser.org) y

vale solo sgt-sgt y esperar a que se instale.

Paso 11: Modificamos el HomeController, específicamente el método Encuesta:

Bueno ya le seguimos en la siguiente clase :)/:(

Vale bueno paso 10:

Y ahora, al probarlo, verificamos que corre bien:

Se guarda inicialmente en pantalla y finalmente en la base de datos:

Ahora, dar los permisos para que en encuesta redireccione a RemoverEncuesta en

Ahora crear la vista RemoverEncuesta y su .cs:

Crear las dos vistas:

PASO 1: Crear un proyecto MVC en visual

En este caso el nombre será WebMatricula.

Paso 2: Entramos al _Layout (Views-Shared-_Layout.cshtml), cambiamos el nombre

También modificamos el footer para la fecha y así:

Paso 7: Crear la carpeta Data