isc_diars_manual_5.1 (mvc5 en visual studio 2013)

FACULTAD DE INGENIERÍA INGENIERÍA DE SISTEMAS COMPUTACIONALES

Diseño y Arquitectura de Software

Página 1

Manual 5.1: “MVC 5 Y ENTITY FRAMEWORK EN VISUAL STUDIO 2013”

Estimado participante, reciba el saludo cordial de los integrantes de la carrera de

Ingeniería de Sistemas Computacionales de nuestra Universidad Privada del Norte.

Antes de iniciar con la realización del manual es necesario que tengas en cuenta lo

siguiente:

MARCO TEÓRICO

a. ¿Qué es un patrón de diseño?

Un patrón de diseño es una solución reutilizable en problemas con un

contexto común en el diseño de software. Podemos conceptualizarlo como

una receta, pasos concretos a seguir que nos ayudarán a resolver un

problema. No cualquier cosa puede ser considerada un patrón de

diseño, puesto que deben cumplir ciertos objetivos o tener ciertas

características:

• Reutilizable en distintas circunstancias de diseño.

• Efectivo en problemas similares.

• Permite evitar riesgos de impidan reutilizar código.

• Simplifican la forma de documentar una aplicación.

b. ¿Patrón de Diseño MVC?

MVC (Modelo-Vista-Controlador) es un patrón de diseño que separa los

datos, la lógica de negocios y las interfaces de usuario. Como su nombre lo

dice, está separado en tres componentes: modelo, controlador y vista. Está

basado en la ideología de separación de conceptos y cumple perfectamente

con los objetivos de los patrones de diseño.

c. Modelo

Es la capa encargada de los datos, es decir, tiene mecanismos para acceder

a la información y también para actualizar su estado. Comúnmente se

encarga de comunicarse con la base de datos mediante funciones que

accederán a las tablas y realizarán las funciones habituales de datos.

d. Vista

Se trata del código que nos permitirá presentar los datos que el modelo nos

proporciona, como ejemplo podríamos decir que en una aplicación web

es el código HTML que nos permite mostrar la salida de los datos

procesados.



Página 2

e. Controlador

Es la capa que sirve de enlace entre la vista y el modelo. Envía comandos al

modelo para actualizar su estado, y a la vista correspondiente para cambiar

su presentación, pero no es el encargado de manipular los datos ni de

generar una salida.

Para comprender un poco más este patrón de diseño veamos cómo funciona

en una aplicación web común:

Fig. 1: Modelo MVC



Página 3

f. Ventajas de MVC

• Está enfocado en separar responsabilidades

Si en este momento estás pensando “y eso en que me afecta o

beneficia”, pues pensemos un poco en cómo están creadas las

aplicaciones y sitios web actuales, HTML para los objetos o el

marcado, CSS para el estilo y Javascript para la lógica, cada uno con

su propio enfoque y su propia responsabilidad, pues con MVC es lo

mismo pero incluyendo los componentes que mencionamos antes.

• Reutilizar Código

Cualquier Framework que creado a partir de MVC te permite reutilizar

código, regresar vistas totales o parciales, evitando duplicar estilos o

contenido en las vistas. Todo el manejo de datos se realiza en los

modelos, por lo que si modificas tu base de datos solo es necesario

modificar el modelo correspondiente para que permita manejar los

datos actualizados, sin necesidad de actualizar cada lugar donde es

utilizado.

• Evitamos código Espagueti

Con este patrón de diseño reducimos y hasta eliminamos el uso de

código de servidor y de presentación en un mismo lugar.

• Perfecto para equipos multidisciplinarios

Con este patrón de diseño reducimos y hasta eliminamos el uso de

código de servidor y de presentación en un mismo lugar. Por lo que

si en tu equipo hay alguien encargado de maquetar la aplicación,

alguien más se encarga de crear las reglas de negocio y demás

actividades, cada uno puede trabajar independientemente del otro

sin sufrir afectaciones.

g. Conclusiones

MVC es un patrón de diseño enfocado a separar las responsabilidades dentro

de nuestra aplicación y es muy utilizado en la web por su enfoque y las

ventajas que ofrece con respecto a algunas otras formas o patrones de

desarrollo de aplicaciones web. Recordemos que aunque los patrones de

diseño son muy útiles en el desarrollo de software, no siempre es necesario

usarlos y eso no significa que la aplicación esté “mal diseñada”, algunas

veces no son necesarios y mucho menos obligatorios, a veces abusar de los

patrones de diseño puede traer más problemas de los que resuelve.



Página 4

DESARROLLO

1. Iniciamos el Sistema Operativo Windows.

Fig. 2: Iniciando Windows

2. Iniciamos el IDE (Integrated Development Environment) de Programación

Visual Studio.

Fig. 3: Iniciando Visual Studio 2013



Página 5

3. Nos aparece la pantalla inicial de Visual Studio.

Fig. 4: Pantalla Inicial de Visual Studio 2013

4. Creamos un nuevo proyecto.

Ilustración 1: Creando un nuevo proyecto



Página 6

3.- Seleccionamos la ficha web y escoges Aplicación Web ASP. Net, por ultimo clic en aceptar.

Ilustración 2: Creando la Aplicación Web ASP.Net

4.-Elegimos la ficha MVC.

Ilustración 3: Cambiando la autenticación del Proyecto MVC



Página 7

5.- Ahora cambiamos la autentificacion a sin autentificacion ya que las otras opciones es cuando desees que tu proyecto tambien pueda loguearse con tus cuentas de Facebook, Skype,Twiter. Por ultimo Clic en Aceptar.

Ilustración 4: Cambiando la autenticación del proyecto

6.- Luego Seleccionamos MVC y Clic en aceptar.

Ilustración 5: Creando el proyecto MVC



Página 8

7.- Observamos que el proyecto se ha creado satisfactoriamente.

Ilustración 6: Aplicación Web MVC creada

8.- Abrimos SQL SERVER.

Ilustración 7: Abriendo SQL Server



Página 9

9.- Comenzaremos a crear una nueva Base de Datos.

10.- Crearemos la Base de datos “Universidad” y clic en el botón “OK”.

Ilustración 8: Creando una nueva base de datos

Ilustración 9: Base de Datos Universidad



Página 10

11.- una vez creada la BD Crearemos una nueva tabla

12.- Ahora crearemos los atributos para la tabla



Página 11

13.- Ahora una vez una llenado los atributos vamos a proceder especificar que nuestro código_estudiante sea autoincrementado para eso seleccionamos el atributo y luego nos dirigimos a la propiedad Identity Specification

14.- Ahora ese propiedad lo cambiamos a de No a Si



Página 12

15.- luego procedemos a especificar la clave primaria en este caso elegimos Codigo_Estudiante ya que será este atributo por la cual identificaremos cada registro.

Para esto seleccionamos Codigo_Estudiante y nos dirigimos a la llave superior y le hacemos clic

16.- así que nuestra tabla quedara así:



Página 13

17.- Ahora procederemos a guardar la tabla

18.- a esta tabla le llamaremos “Estudiante”



Página 14

19.- Ahora procederemos a llenar la tabla con registros

20.- Tabla Llenada



Página 15

21.- Ahora procederemos a crear nuestro modelo de datos desde visual Studio 2013

22.- escogemos la Ficha datos y escogemos ADO NET Entity Data Model



Página 16

23.- colocamos un nombre en este caso “ModeloUniversidad” luego clic en Agregar

24.- Seleccionamos EF Designer desde base de datos y clic en siguiente



Página 17

25.- Clic en nueva conexión para poder crear nuestra cadena de conexión a nuestra base de datos.

26.- escogemos nuestro servidor y nuestra base de datos , luego clic en Probar Conexión.



Página 18

27.- como vemos nuestra conexión fue exitosa así que aceptamos y luego clic en aceptar.

28.- ahora clic en siguiente para seguir



Página 19

29.- acá podemos escoger el Framework a Trabajar en este caso lo haremos con el

6.x

30.- escogemos nuestra tabla creada y clic en finalizar



Página 20

31.- nos mostrara la base de datos mapeada

32.- ahora presionamos CTRL + Mayus + S para guardar todo el proyecto .Luego

procederemos a crear nuestro controlador



Página 21

33.- Escogemos Controlador MVC 5 con acciones de lectura y escritura luego

clic en agregar.

34.- Colocamos un nombre al Controlador y Aceptar



Página 22

35.- nos motrara el controlador con todas las acciones de Editar Eliminar

Listar y Crear ya implementadas

36.- Aquí el Código del archivo EstudianteControllers.cs creado

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DEMO_MVC5.Controllers { public class EstudianteController : Controller { // GET: Estudiante public ActionResult Index() { return View(); } // GET: Estudiante/Details/5 public ActionResult Details(int id) { return View(); } // GET: Estudiante/Create public ActionResult Create() { return View(); }



Página 23

// POST: Estudiante/Create [HttpPost] public ActionResult Create(FormCollection collection) { try { // TODO: Add insert logic here return RedirectToAction("Index"); } catch { return View(); } } // GET: Estudiante/Edit/5 public ActionResult Edit(int id) { return View(); } // POST: Estudiante/Edit/5 [HttpPost] public ActionResult Edit(int id, FormCollection collection) { try { // TODO: Add update logic here return RedirectToAction("Index"); } catch { return View(); } } // GET: Estudiante/Delete/5 public ActionResult Delete(int id) { return View(); } // POST: Estudiante/Delete/5 [HttpPost] public ActionResult Delete(int id, FormCollection collection) { try { // TODO: Add delete logic here return RedirectToAction("Index"); } catch { return View(); } }



Página 24

} }

37.- Ahora procederemos a crear nuestra Vista para esto hacemos siguiente clic derecho en índex y escoger agregar vista



Página 25

38.- Ahora al tipo de plantilla escogemos List ya que le diremos que al momento que carga el archivo índex me muestre todos los estudiantes que tiene mi Base de Datos.

En clase modelo escogemos a la tabla estudiante que ha sido mapeada en mi vista modelo.

39.- nos quedara de esta manera y luego clic en agregar



Página 26

40.- como verán ya nos muestra con todos los atributos del estudiante nuestra vista hecha con razor.

41.- Código de nuestro archivo razor creado:

Archivo index.cshtml

@model IEnumerable<DEMO_MVC5.Models.Estudiante> <p> @Html.ActionLink("Create New", "Create") </p> <table class="table"> <tr> <th> @Html.DisplayNameFor(model => model.Codigo_Estudiante) </th> <th> @Html.DisplayNameFor(model => model.Nombre) </th> <th> @Html.DisplayNameFor(model => model.Apellido_Paterno) </th> <th> @Html.DisplayNameFor(model => model.Apellido_Materno) </th> <th> @Html.DisplayNameFor(model => model.Estado) </th> <th></th> </tr> @foreach (var item in Model) { <tr>



Página 27

<td> @Html.DisplayFor(modelItem => item.Codigo_Estudiante) </td> <td> @Html.DisplayFor(modelItem => item.Nombre) </td> <td> @Html.DisplayFor(modelItem => item.Apellido_Paterno) </td> <td> @Html.DisplayFor(modelItem => item.Apellido_Materno) </td> <td> @Html.DisplayFor(modelItem => item.Estado) </td> <td> @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) | @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) | @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ }) </td> </tr> } </table>

42.- Ahora como ya tenemos nuestro modelo, controlador y vista creada.



Página 28

43.- Ahora procederemos a pasarle datos a la vista. Para eso trabajaremos con la

vista controlador en el archivo EstudianteController.cs

Primero hacemos referencia a nuestra vista modelo

using DEMO_MVC5.Models;

Segundo creamos una variable que obtendrá acceso a toda nuestra base de

datos

UniversidadEntities Datos = new UniversidadEntities();

Tercero modificamos la acción del index creando una variable la cual tendrá acceso

a todos los datos de la tabla estudiante:

public ActionResult Index() { var DatosEstudiante = Datos.Estudiante; return View(DatosEstudiante);

}

44.- Nuestro archivo EstudianteController.cs quedaría de esta manera

Código Fuente EstudianteController.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DEMO_MVC5.Models; namespace DEMO_MVC5.Controllers { public class EstudianteController : Controller { UniversidadEntities Datos = new UniversidadEntities(); // GET: Estudiante public ActionResult Index() { var DatosEstudiante = Datos.Estudiante; return View(DatosEstudiante); } // GET: Estudiante/Details/5 public ActionResult Details(int id) { return View(); }



Página 29

// GET: Estudiante/Create public ActionResult Create() { return View(); } // POST: Estudiante/Create [HttpPost] public ActionResult Create(FormCollection collection) { try { // TODO: Add insert logic here return RedirectToAction("Index"); } catch { return View(); } } // GET: Estudiante/Edit/5 public ActionResult Edit(int id) { return View(); } // POST: Estudiante/Edit/5 [HttpPost] public ActionResult Edit(int id, FormCollection collection) { try { // TODO: Add update logic here return RedirectToAction("Index"); } catch { return View(); } } // GET: Estudiante/Delete/5 public ActionResult Delete(int id) { return View(); } // POST: Estudiante/Delete/5 [HttpPost] public ActionResult Delete(int id, FormCollection collection) { try { // TODO: Add delete logic here return RedirectToAction("Index");



Página 30

} catch { return View(); } } } }

45.- Ejecutaremos el proyecto para hacer las pruebas respectivas:

46.- Hasta Esta Oportunidad Tenemos Listo el Listado de Todos los estudiantes. Ahora procederemos a hacer el registro de nuevos estudiantes.

Para eso trabajaremos en la vista controlador en el archivo EstudianteController.cs

Y buscamos la acción Create y le damos clic derecho agregar vista.



Página 31

47.- Colocamos un nombre a la vista - escogemos la plantilla créate- y escogemos la clase modelo estudiante – seleccionamos la casilla – clic en agregar



Página 32

48.- tenemos nuestra vista créate creada



Página 33

49.- Codigo Fuente de vista créate.cshtml

@model DEMO_MVC5.Models.Estudiante @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Estudiante</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Codigo_Estudiante, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Codigo_Estudiante, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Codigo_Estudiante, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Nombre, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Nombre, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Nombre, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Paterno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Paterno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Paterno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Materno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Materno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Materno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Estado, htmlAttributes: new { @class = "control-label col-md-2" })



Página 34

<div class="col-md-10"> @Html.EditorFor(model => model.Estado, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Estado, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }



Página 35

50.-al Carga la aplicación mostrara lo siguiente. Ahora para probar que la vista funciona hacemos clic en Create New

51.- Vista Cargada



Página 36

52.- Ahora procederemos a personalizar la vista Create por que el código del estudiante es autogenerado por lo cual no deberíamos de ingresar entonces lo borramos del código fuente y el archivo quedaría de esta manera:

Codigo fuente archivo créate.cshtml

@model DEMO_MVC5.Models.Estudiante @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Registro de Estudiantes</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Nombre, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Nombre, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Nombre, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Paterno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Paterno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Paterno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Materno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Materno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Materno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Estado, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Estado, new { htmlAttributes = new { @class = "form-control" } })



Página 37

@Html.ValidationMessageFor(model => model.Estado, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Regresar a Inicio", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }



Página 38

53.- Probando Vista Créate.

54.- Ahora procederemos a ingresarle datos al archivo EstudianteController en la acción Create.

Este Fragmento de código será en la acción del post del create.

// POST: Estudiante/Create [HttpPost] public ActionResult Create(FormCollection collection) { try { //Creamos una variable del tipo estudiante Estudiante estudiantes = new Estudiante(); // ahora le pasamos los datos ingresados por teclado a cada atributo estudiantes.Nombre =collection["Nombre"]; estudiantes.Apellido_Paterno = collection["Apellido_Paterno"]; estudiantes.Apellido_Materno = collection["Apellido_Materno"]; // como el tipo de dato del estado es byte por eso lo convertimos estudiantes.Estado = Convert.ToByte(collection["Estado"]); //Ahora Agregamos a la entidad Datos.Estudiante.Add(estudiantes); // hacemos el guardado Datos.SaveChanges(); //redireccionamos a la pagina index return RedirectToAction("Index"); } catch { return View(); }

}



Página 39

55.- Ejecutamos para hacer la prueba necesaria:

57.- como verán ya nos muestra el estudiante registrado.



Página 40

58.-Ahora procederemos a trabajar la acción editar la cual nos permitirá actualizar los datos de los estudiantes.

Para esto nos ubicamos en el la acción GET en el mismo achivo Estudiante_Controller.cs

59.- Clic derecho y agregamos la vista editar



Página 41

60.- Ahora como plantilla escogemos EDIT – luego seleccionamos la clase modelo estudiante –Activamos el check - y agregar

61.- Ahora nos mostrara el archivo edit.cshtml



Página 42

62.- Código Fuente de Archivo edit.cshtml

@model DEMO_MVC5.Models.Estudiante @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Estudiante</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Codigo_Estudiante, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Codigo_Estudiante, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Codigo_Estudiante, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Nombre, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Nombre, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Nombre, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Paterno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Paterno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Paterno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Materno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Materno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Materno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group">



Página 43

@Html.LabelFor(model => model.Estado, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Estado, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Estado, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Save" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }



Página 44

63.- Antes de ejecutar y probar el archivo debemos de modificar unas línea de código en el archivo index.cshtml casi en las ultimas líneas encontraremos esto

<td> @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) | @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) | @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })

</td>

Y ahora lo modificaremos para poder llamar a la vista editar y próximamente a eliminar

<td> @Html.ActionLink("Edit", "Edit", new { id=item.Codigo_Estudiante }) | @Html.ActionLink("Details", "Details", new { id=item.Codigo_Estudiante }) | @Html.ActionLink("Delete", "Delete", new { id=item.Codigo_Estudiante })

</td>

64.- Ahora si probaremos el archivo edit.cshtml. Para comprobar que todo vaya correctamente

Y le damos clic en Edit.



Página 45

65.- y Ahora Veremos que efectivamente nos muestra la vista Editar. Por qué nos trajo los datos del registro seleccionado listo para poder actualizar sus datos

66. Ahora pasaremos a programar la acción para poder actualizar los datos y para eso nos posicionamos en GET donde haremos una consulta LIN Q

// GET: Estudiante/Edit/5 public ActionResult Edit(int id) { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); return View(dataestudiante); }

67.- Ahora nos ubicamos en la acción POST y Colocamos el Siguiente código:

// POST: Estudiante/Edit/5 [HttpPost] public ActionResult Edit(int id, FormCollection collection) { try { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); // ahora le pasamos los datos ingresados por teclado a cada atributo dataestudiante.Nombre = collection["Nombre"]; dataestudiante.Apellido_Paterno = collection["Apellido_Paterno"]; dataestudiante.Apellido_Materno = collection["Apellido_Materno"]; // como el tipo de dato del estado es byte por eso lo convertimos dataestudiante.Estado = Convert.ToByte(collection["Estado"]);



Página 46

//Ahora Agregamos a la entidad Datos.Estudiante.Add(dataestudiante); // hacemos el guardado Datos.SaveChanges(); //redireccionamos a la pagina index return RedirectToAction("Index"); } catch { return View(); } }

68.- Hasta el momento esto es lo que deberíamos tener en nuestro archivo EstudianteController.cs

Codigo Fuente Archivo EstudianteController.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DEMO_MVC5.Models; namespace DEMO_MVC5.Controllers { public class EstudianteController : Controller { UniversidadEntities Datos = new UniversidadEntities(); // GET: Estudiante public ActionResult Index() { var DatosEstudiante = Datos.Estudiante; return View(DatosEstudiante); } // GET: Estudiante/Details/5 public ActionResult Details(int id) { return View(); } // GET: Estudiante/Create public ActionResult Create() { return View(); } // POST: Estudiante/Create [HttpPost] public ActionResult Create(FormCollection collection) { try



Página 47

{ //Creamos una variable del tipo estudiante Estudiante estudiantes = new Estudiante(); // ahora le pasamos los datos ingresados por teclado a cada atributo estudiantes.Nombre =collection["Nombre"]; estudiantes.Apellido_Paterno = collection["Apellido_Paterno"]; estudiantes.Apellido_Materno = collection["Apellido_Materno"]; // como el tipo de dato del estado es byte por eso lo convertimos estudiantes.Estado = Convert.ToByte(collection["Estado"]); //Ahora Agregamos a la entidad Datos.Estudiante.Add(estudiantes); // hacemos el guardado Datos.SaveChanges(); //redireccionamos a la pagina index return RedirectToAction("Index"); } catch { return View(); } } // GET: Estudiante/Edit/5 public ActionResult Edit(int id) { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); return View(dataestudiante); } // POST: Estudiante/Edit/5 [HttpPost] public ActionResult Edit(int id, FormCollection collection) { try { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); // ahora le pasamos los datos ingresados por teclado a cada atributo dataestudiante.Nombre = collection["Nombre"]; dataestudiante.Apellido_Paterno = collection["Apellido_Paterno"]; dataestudiante.Apellido_Materno = collection["Apellido_Materno"]; // como el tipo de dato del estado es byte por eso lo convertimos dataestudiante.Estado = Convert.ToByte(collection["Estado"]); // hacemos el guardado Datos.SaveChanges(); //redireccionamos a la pagina index return RedirectToAction("Index"); } catch { return View(); } } // GET: Estudiante/Delete/5



Página 48

public ActionResult Delete(int id) { return View(); } // POST: Estudiante/Delete/5 [HttpPost] public ActionResult Delete(int id, FormCollection collection) { try { // TODO: Add delete logic here return RedirectToAction("Index"); } catch { return View(); } } } }

69.- Ahora ejecutamos el proyecto para ver que todo corra bien:

Para probar haremos clic en Edit.



Página 49

70.- Luego modificamos los datos y Hacemos clic en guardar

71.- Vemos los resultados que fueron satisfactorios en el registro número 2.



Página 50

72.- Ahora solo nos queda Trabajar la vista Eliminar para eso nos posicionamos en la acción Get de eliminar – clic derecho agregar vista.

73.- Ahora escogemos la plantilla delete – luego como modelo escogemos a estudiante- seleccionamos el check y clic en agregar.



Página 51

74.- Tenemos nuestra vista creada delete.cshtml.

75.- Aquí el código Fuente del Archivo delete.cshtml

@model DEMO_MVC5.Models.Estudiante <h3>Are you sure you want to delete this?</h3> <div> <h4>Estudiante</h4> <hr /> <dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.Codigo_Estudiante) </dt> <dd> @Html.DisplayFor(model => model.Codigo_Estudiante) </dd> <dt> @Html.DisplayNameFor(model => model.Nombre) </dt> <dd> @Html.DisplayFor(model => model.Nombre) </dd> <dt> @Html.DisplayNameFor(model => model.Apellido_Paterno) </dt> <dd>



Página 52

@Html.DisplayFor(model => model.Apellido_Paterno) </dd> <dt> @Html.DisplayNameFor(model => model.Apellido_Materno) </dt> <dd> @Html.DisplayFor(model => model.Apellido_Materno) </dd> <dt> @Html.DisplayNameFor(model => model.Estado) </dt> <dd> @Html.DisplayFor(model => model.Estado) </dd> </dl> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-actions no-color"> <input type="submit" value="Delete" class="btn btn-default" /> | @Html.ActionLink("Back to List", "Index") </div> } </div>

76.- Una vez creada la vista procedemos a agregar código a la acción delete en el archivo EstudianteController.cs

// GET: Estudiante/Delete/5 public ActionResult Delete(int id) { // Realizamos la consulta LINQ var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); return View(dataestudiante); }

77.- Ahora También nos vamos a la acción eliminar pero de POST y ingresamos el siguiente código.

// POST: Estudiante/Delete/5 [HttpPost] public ActionResult Delete(int id, FormCollection collection) { try {



Página 53

var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); Datos.Estudiante.Remove(dataestudiante); Datos.SaveChanges(); return RedirectToAction("Index"); } catch { return View(); }

}

78.- Una vez Modificado procedemos a efectuar la prueba de la vista delete.cshtml

Para eso escogemos un registro y le hacemos clic en delete.



Página 54

79.- Nos mostrara esta vista de confirmación de eliminar. Y hacemos clic en eliminar

80.- Como vemos el registro ya fue eliminado



Página 55

81.- Ahora trabajaremos la vista details para eso nos ubicamos en la acción details y clic derecho agregar vista

82.- escogemos como plantilla la opción Details luego escogemos el modelo Estudiante – seleccionamos el check y clic en agregar



Página 56

83.- acá tenemos la vista Details.cshtml creada

84.- Ahora editaremos la última línea de esta vista para poder utilizarla

<p> @Html.ActionLink("Edit", "Edit", new { id = Model.PrimaryKey */ }) | @Html.ActionLink("Back to List", "Index") </p>

Ahora modificamos a esto:

<p> @Html.ActionLink("Edit", "Edit", new { id = Model.Codigo_Estudiante }) | @Html.ActionLink("Back to List", "Index") </p>

85.- El código fuente de la vista details.cshtml debería de quedar así:

@model DEMO_MVC5.Models.Estudiante <div> <h4>Estudiante</h4> <hr />



Página 57

<dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.Codigo_Estudiante) </dt> <dd> @Html.DisplayFor(model => model.Codigo_Estudiante) </dd> <dt> @Html.DisplayNameFor(model => model.Nombre) </dt> <dd> @Html.DisplayFor(model => model.Nombre) </dd> <dt> @Html.DisplayNameFor(model => model.Apellido_Paterno) </dt> <dd> @Html.DisplayFor(model => model.Apellido_Paterno) </dd> <dt> @Html.DisplayNameFor(model => model.Apellido_Materno) </dt> <dd> @Html.DisplayFor(model => model.Apellido_Materno) </dd> <dt> @Html.DisplayNameFor(model => model.Estado) </dt> <dd> @Html.DisplayFor(model => model.Estado) </dd> </dl> </div> <p> @Html.ActionLink("Edit", "Edit", new { id = Model.Codigo_Estudiante }) | @Html.ActionLink("Back to List", "Index") </p>

86.- Ahora nos ubicaremos en la acción Details del archivo EstudianteController.cs y agregamos el siguiente código:

// GET: Estudiante/Details/5 public ActionResult Details(int id) { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First();



Página 58

return View(dataestudiante);

}

87.- Ahora ejecutaremos el proyecto y hacemos clic en Details



Página 59

88.- y como verán nos muestra un resumen del registro seleccionado



Página 60

89.- Entonces teniendo ya todo el CRUD completo vamos a hacer unos pequeños ajustes a las vistas empezaremos por:

Vista Create:

Codigo fuente Archivo créate.cshtml

@model DEMO_MVC5.Models.Estudiante @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Registro de Estudiantes</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Nombre, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Nombre, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Nombre, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Paterno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Paterno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Paterno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Materno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Materno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Materno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Estado, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Estado, new { htmlAttributes = new { @class = "form-control" } })



Página 61

@Html.ValidationMessageFor(model => model.Estado, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Registrar" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Regresar a Inicio", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }

Vista Editar:

Código fuente Archivo edit.cshtml

@model DEMO_MVC5.Models.Estudiante @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Editar Estudiante</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Nombre, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Nombre, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Nombre, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Apellido_Paterno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Paterno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Paterno, "", new { @class = "text-danger" }) </div> </div>



Página 62

<div class="form-group"> @Html.LabelFor(model => model.Apellido_Materno, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Apellido_Materno, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Apellido_Materno, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Estado, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Estado, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Estado, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Guardar" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Regresar a Inicio", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }



Página 63

Vista Delete:

Código Fuente delete.cshtml

@model DEMO_MVC5.Models.Estudiante <h3>esta seguro de Eliminar ?</h3> <div> <h4>Eliminar Estudiante</h4> <hr /> <dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.Codigo_Estudiante) </dt> <dd> @Html.DisplayFor(model => model.Codigo_Estudiante) </dd> <dt> @Html.DisplayNameFor(model => model.Nombre) </dt> <dd> @Html.DisplayFor(model => model.Nombre) </dd> <dt> @Html.DisplayNameFor(model => model.Apellido_Paterno) </dt> <dd> @Html.DisplayFor(model => model.Apellido_Paterno) </dd> <dt> @Html.DisplayNameFor(model => model.Apellido_Materno) </dt> <dd> @Html.DisplayFor(model => model.Apellido_Materno) </dd> <dt> @Html.DisplayNameFor(model => model.Estado) </dt> <dd> @Html.DisplayFor(model => model.Estado) </dd> </dl> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-actions no-color"> <input type="submit" value="Eliminar" class="btn btn-default" /> | @Html.ActionLink("Regresar a Inicio", "Index")



Página 64

</div> } </div>

Vista Detalis:

Codigo fuente archivo details.cshtml

@model DEMO_MVC5.Models.Estudiante <div> <h4>Estudiante</h4> <hr /> <dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.Codigo_Estudiante) </dt> <dd> @Html.DisplayFor(model => model.Codigo_Estudiante) </dd> <dt> @Html.DisplayNameFor(model => model.Nombre) </dt> <dd> @Html.DisplayFor(model => model.Nombre) </dd> <dt> @Html.DisplayNameFor(model => model.Apellido_Paterno) </dt> <dd> @Html.DisplayFor(model => model.Apellido_Paterno) </dd> <dt> @Html.DisplayNameFor(model => model.Apellido_Materno) </dt> <dd> @Html.DisplayFor(model => model.Apellido_Materno) </dd> <dt> @Html.DisplayNameFor(model => model.Estado) </dt> <dd> @Html.DisplayFor(model => model.Estado) </dd> </dl> </div> <p> @Html.ActionLink("Editar", "Edit", new { id = Model.Codigo_Estudiante }) |



Página 65

@Html.ActionLink("Regresar a Inicio", "Index") </p>

Vista índex:

Código Fuente Index.cshtml

@model IEnumerable<DEMO_MVC5.Models.Estudiante> <p> @Html.ActionLink("Nuevo registro", "Create") </p> <table class="table"> <tr> <th> @Html.DisplayNameFor(model => model.Codigo_Estudiante) </th> <th> @Html.DisplayNameFor(model => model.Nombre) </th> <th> @Html.DisplayNameFor(model => model.Apellido_Paterno) </th> <th> @Html.DisplayNameFor(model => model.Apellido_Materno) </th> <th> @Html.DisplayNameFor(model => model.Estado) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Codigo_Estudiante) </td> <td> @Html.DisplayFor(modelItem => item.Nombre) </td> <td> @Html.DisplayFor(modelItem => item.Apellido_Paterno) </td> <td> @Html.DisplayFor(modelItem => item.Apellido_Materno) </td> <td> @Html.DisplayFor(modelItem => item.Estado) </td> <td> @Html.ActionLink("Editar", "Edit", new { id=item.Codigo_Estudiante }) | @Html.ActionLink("Detalles", "Details", new { id=item.Codigo_Estudiante }) | @Html.ActionLink("Eliminar", "Delete", new { id=item.Codigo_Estudiante })



Página 66

</td> </tr> } </table>

Una vez hecho las modificaciones también colocaremos el código fuente del archivo EstudianteControllers.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DEMO_MVC5.Models; namespace DEMO_MVC5.Controllers { public class EstudianteController : Controller { UniversidadEntities Datos = new UniversidadEntities(); // GET: Estudiante public ActionResult Index() { var DatosEstudiante = Datos.Estudiante; return View(DatosEstudiante); } // GET: Estudiante/Details/5 public ActionResult Details(int id) { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); return View(dataestudiante); } // GET: Estudiante/Create public ActionResult Create() { return View(); } // POST: Estudiante/Create [HttpPost] public ActionResult Create(FormCollection collection) { try { //Creamos una variable del tipo estudiante Estudiante estudiantes = new Estudiante(); // ahora le pasamos los datos ingresados por teclado a cada atributo



Página 67

estudiantes.Nombre =collection["Nombre"]; estudiantes.Apellido_Paterno = collection["Apellido_Paterno"]; estudiantes.Apellido_Materno = collection["Apellido_Materno"]; // como el tipo de dato del estado es byte por eso lo convertimos estudiantes.Estado = Convert.ToByte(collection["Estado"]); //Ahora Agregamos a la entidad Datos.Estudiante.Add(estudiantes); // hacemos el guardado Datos.SaveChanges(); //redireccionamos a la pagina index return RedirectToAction("Index"); } catch { return View(); } } // GET: Estudiante/Edit/5 public ActionResult Edit(int id) { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); return View(dataestudiante); } // POST: Estudiante/Edit/5 [HttpPost] public ActionResult Edit(int id, FormCollection collection) { try { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); // ahora le pasamos los datos ingresados por teclado a cada atributo dataestudiante.Nombre = collection["Nombre"]; dataestudiante.Apellido_Paterno = collection["Apellido_Paterno"]; dataestudiante.Apellido_Materno = collection["Apellido_Materno"]; // como el tipo de dato del estado es byte por eso lo convertimos dataestudiante.Estado = Convert.ToByte(collection["Estado"]); // hacemos el guardado Datos.SaveChanges(); //redireccionamos a la pagina index return RedirectToAction("Index"); } catch { return View(); } } // GET: Estudiante/Delete/5 public ActionResult Delete(int id) { // Realizamos la consulta LINQ var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); return View(dataestudiante); } // POST: Estudiante/Delete/5



Página 68

[HttpPost] public ActionResult Delete(int id, FormCollection collection) { try { var dataestudiante = (from e in Datos.Estudiante where id == e.Codigo_Estudiante select e).First(); Datos.Estudiante.Remove(dataestudiante); Datos.SaveChanges(); return RedirectToAction("Index"); } catch { return View(); } } } }



Página 69

Ejecución de cada vista:

Vista Create:



Página 70

Vista Editar:

Vista Detalles:



Página 71

Vista Eliminar:

Referencias bibliográficas:

http://www.desarrolloweb.com/articulos/que-es-mvc.html

http://blog.en1mes.com/2014/04/mvc-los-programadores-deberian-usarlo/

https://juanlucodingbinding.wordpress.com/2014/03/06/modelo-mvc-ejemplo-basico-de-mvc-en-asp-net-mvc-4/

http://www.genbetadev.com/formacion/tutorial-de-iniciacion-en-asp-net-mvc-con-visual-studio-2013

isc_diars_manual_5.1 (mvc5 en visual studio 2013)

Documents