Laboratorio 1

Explorando una aplicación ASP.Net MVC 5

Este laboratorio explica la estructura de una aplicación MVC, cómo compilarla, conectarla
con una base de datos local en SQL Server, cómo modificarla y ejecutarla utilizando
Visual Studio 2017. La aplicación que se utiliza en este laboratorio hace mención a una
universidad ficticia.

Objetivos
Este laboratorio pretende guiar al estudiante en el entendimiento de la estructura de una
aplicación ASP.Net MVC 5, cómo funcionan los modelos, qué relación tienen con las
tablas de una base de datos y cómo se relacionan con los controladores y las vistas.

Actividad 1 – Revisando la estructura de la aplicación

Esta actividad guía al estudiante en la revisión de la estructura de la aplicación.
Abrir en Visual Studio 2017 el archivo “ContosoUniversity.sln” ubicado en el directorio
“C:\ContenidoDidactico\Laboratorio 1\Lab01_ContosoUniversity”. Puede dar doble click
sobre el archivo o desde Visual Studio 2017 dar click en el menú “File”, ir a la opción
“Open” y dar click sobre la opción “Project/Solution…”.
Una vez que Visual Studio 2017 abra el proyecto, del lado derecho aparecerá una
pequeña ventana llamada “Solution Explorer” donde se muestra la solución, los proyectos
que contiene la solución y la estructura de los proyectos.

En el “Solution Explorer” se puede identificar el proyecto “ConsosoUnversity”, así como

los diversos elementos que contiene. Dentro del proyecto, localizar los elementos:
➢ App_Start – Folder que contiene la configuración que la aplicación carga al inicio,
paquetes de estilos y scripts, y configuración de enrutamiento de peticiones.
➢ Content – Folder que contiene todos los archivos de hojas de estilo en cascada
➢ Controllers – Folder que contiene los controladores que usa la aplicación
➢ Models – Folder que contiene los modelos que usa la aplicación
➢ Scripts – Folder que contiene los archivos JavaScript que usa la aplicación
➢ Views – Folder que contiene las vistas agrupadas en su folder que usa la aplicación
➢ Global.asax – Clase que hereda de HttpApplication, es la primera clase que se
manda a llamar al arrancar la aplicación
➢ packages.config – Contiene la configuración de los paquetes nuget instalados
➢ Web.config – Cotiene la configuración web de la aplicación, por ejemplo, la cadena
de conexión a una base de datos.
Estos elementos son obligatorios en cualquier aplicación MVC ya que trabajan en
conjunto para que la aplicación pueda desplegarse y funcionar correctamente.
Actividad 2 – Compilando la solución
Al trabajar con un proyecto que fue iniciado por un tercero, es necesario seguir una serie
de pasos para que funcione correctamente.

Restauración de paquetes nuget

Generalmente, las aplicaciones web utilizan paquetes nuget desarrollados por terceros,
estos paquetes proveen de funcionalidad extra requerida en la aplicación, por ejemplo,
serialización en json.
Sobre la solución “ContosoUniversity” dar clcik secundario y dar click sobre la opción
“Restore NuGet Packages”. Visual Studio comenzará la restauración de los paquetes
utilizados en la aplicación y que por alguna razón no se encuentran. Al finalizar, en la
pestaña “Output” se mostrará un mensaje de finalización.
Creación de la base datos local
Esta aplicación utiliza una base de datos para la persistencia de los datos capturados por
los usuarios.

En el “Solution Explorer”, ubicar el archivo “Web.config”, dar doble click sobre él para
abrirlo y ubicar la línea de código “12” que contiene la cadena de conexión a la base de
datos. La cadena de conexión que tiene el proyecto actualmente es:
<add name="SchoolContext" connectionString="Data Source=localhost;Initial
Catalog=ContosoUniversity;Integrated Security=SSPI;" providerName="System.Data.SqlClient"
/>

Con “localhost”, la aplicación intentará conectarse al equipo local, puede ser necesario
reemplazar “localhost” por el nombre de su equipo e instancia de SQL Server si es que
trabaja con una instancia nombrada o con un servidor externo
En el menú de Visual Studio, ir a la opción “Tools”, seleccionar la opción “NuGet Package
Manager” y dar click en la opción “Package Manager Console”. En la parte de debajo de
Visual Studio se abrirá la pestaña “Package Manager Console”.

En la ventana “Package Manager Console”, ejecutar los siguientes comandos:

➢ “Enable-Migrations”, dar enter y esperar a que termine la ejecución.
➢ “Add-Migration SchoolMigration”, dar enter y esperar a que termine la
ejecución
➢ “Update-Database”, dar enter y esperar a que termine la ejecución.
Después de ejecutar los comandos, Visual Studio agregará la carpeta “Micrations” a
proyecto, además, agregará dos archivos:
➢ Configuration.cs – Contiene la configuración y carga inicial para crear la base de
datos.
➢ [Timestamp]_SchoolMigration.cs – Contiene todos los objetos de base de datos
que deben ser creados.
Si requiere ejecutar nuevamente los comandos “Enable-Migrations” y “Add-Migration
School Miration” es necesario borrar la carpeta “Migrations” del proyecto y borrar la base
de datos antes de ejecutarlos nuevamente.

Abrir el archivo “Configuration.cs” ubicado en la carpeta “Migrations”, ubicar el método

“Seed” y escribir dentr de él el siguiente código:
var students = new List<Student>
{
new Student{FirstMidName="Carson",LastName="Alexander",EnrollmentDate=DateTime.Parse("2005-09-
01")},
new Student{FirstMidName="Meredith",LastName="Alonso",EnrollmentDate=DateTime.Parse("2002-09-
01")},
new Student{FirstMidName="Arturo",LastName="Anand",EnrollmentDate=DateTime.Parse("2003-09-
01")},
new Student{FirstMidName="Gytis",LastName="Barzdukas",EnrollmentDate=DateTime.Parse("2002-09-
01")},
new Student{FirstMidName="Yan",LastName="Li",EnrollmentDate=DateTime.Parse("2002-09-01")},
new Student{FirstMidName="Peggy",LastName="Justice",EnrollmentDate=DateTime.Parse("2001-09-
01")},
new Student{FirstMidName="Laura",LastName="Norman",EnrollmentDate=DateTime.Parse("2003-09-
01")},
new Student{FirstMidName="Nino",LastName="Olivetto",EnrollmentDate=DateTime.Parse("2005-09-
01")}
};

students.ForEach(s => context.Students.Add(s));

context.SaveChanges();

var departments = new List<Department>()

{
new Department()
{
Budget = 100,
Courses = new List<Course>()
{
new Course{CourseID=1050,Title="Chemistry",Credits=3},
new Course{CourseID=4022,Title="Microeconomics",Credits=3,},
new Course{CourseID=4041,Title="Macroeconomics",Credits=3,},
new Course{CourseID=1045,Title="Calculus",Credits=4,},
new Course{CourseID=3141,Title="Trigonometry",Credits=4,},
new Course{CourseID=2021,Title="Composition",Credits=3,},
},
Name = "Exact Sciences",
StartDate=DateTime.Now,
}
};
 departments.ForEach(d => context.Departments.Add(d));
context.SaveChanges();

var courses = new List<Course>

{

};
courses.ForEach(s => context.Courses.Add(s));
context.SaveChanges();
var enrollments = new List<Enrollment>
{
new Enrollment{StudentID=1,CourseID=1050,Grade=Grade.A},
new Enrollment{StudentID=1,CourseID=4022,Grade=Grade.C},
new Enrollment{StudentID=1,CourseID=4041,Grade=Grade.B},
new Enrollment{StudentID=2,CourseID=1045,Grade=Grade.B},
new Enrollment{StudentID=2,CourseID=3141,Grade=Grade.F},
new Enrollment{StudentID=2,CourseID=2021,Grade=Grade.F},
new Enrollment{StudentID=3,CourseID=1050},
new Enrollment{StudentID=4,CourseID=1050,},
new Enrollment{StudentID=4,CourseID=4022,Grade=Grade.F},
new Enrollment{StudentID=5,CourseID=4041,Grade=Grade.C},
new Enrollment{StudentID=6,CourseID=1045},
new Enrollment{StudentID=7,CourseID=3141,Grade=Grade.A},
};
enrollments.ForEach(s => context.Enrollments.Add(s));
context.SaveChanges();

Y a nivel de los “using” agregar las siguientes líneas y guardar los cambios:
using ContosoUniversity.Models;
using System.Collections.Generic;

En la ventana “Package Manager Console” ejecutar nuevamente el comando “Update-

Database”, esperar a que termine la ejecución y verificar que ya haya datos en las tablas
de la base de datos.
Sobre la solución, dar click secundario y dar click en la opción “Rebuild” para compilar el
proyecto.

Actividad 3 - Probando la aplicación

Una vez agregados los paquetes restantes y creada la base de datos, es momento de
desplegarla localmente y probar su funcionamiento.
En Visual Studio, ir a menú “Debug” y dar click en la opción “Start Debugging” para
desplegar la aplicación de manera local.

Esperar a que la aplicación de despliegue y navegar en ella para ver cada uno de sus
componentes y el despliegue de datos.
Después de probar la aplicación, detener el “Debugging” y abrir el archivo “Index.cshtml”
ubicado en la carpeta “Students” dentro de la carpeta “Views”. Entre las líneas 13 y 14,
entre el elemento “<p>” y el elemento “<table class="table">” agregar el siguiente código:
@using (Html.BeginForm("Index", "Student", FormMethod.Get))
{
<p>
Buscar por nombre: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Buscar" />
</p>
}

Abrir el archivo “StudentController.cs” ubicado en la carpeta “Controllers” ubicar el

método “Index” y en la línea 39, arriba de “switch (sortOrder)” agregar el siguiente código:
if (!String.IsNullOrEmpty(searchString))
{
students = students.Where(s => s.LastName.Contains(searchString) ||
s.FirstMidName.Contains(searchString));
}

Guardar los cambios, revisar el código de la aplicación junto con el código recién
agregado, ir a menú “Debug” y dar click en la opción “Start Debugging” para desplegar la
aplicación de manera local.

Cerrar Visual Studio 2017