Programación II Ing.

Guillermo Rivera

UNIDAD III – DISEÑO DE APLICACIONES WEB UTILIZANDO BASE DE

DATOS Y EL MODELO DE CAPAS CON MVC.
4. Modelos en ASP.NET MVC.

INTRODUCCIÓN.
La palabra modelo en el desarrollo de software está sobrecargada para cubrir cientos de diferentes
conceptos. Hay modelos de madurez, modelos de diseño, modelos de amenaza y modelos de
procesos. El asistir a una reunión de desarrollo sin hablar sobre un modelo de uno u otro tipo es
raro. Aun cuando limita el alcance del término modelo al contexto del patrón de diseño MVC se
puede todavía debatir los méritos de tener un modelo de objetos orientado a negocios versus un
modelo de objetos específico de vistas. Este material habla sobre modelos como los objetos que se
usan para enviar información a la base de datos, desarrollar cálculos de negocios e incluso
mostrarlos en una vista. En otras palabras, estos objetos representan el dominio sobre el cual se
enfoca la aplicación y los modelos son los objetos que se desean mostrar, guardar, crear, actualizar
y borrar.
ASP.NET MVC proporciona un conjunto de herramientas y características para construir
características de una aplicación usando solamente la definición del modelo de objetos. Se puede
pensar en el problema que se desea resolver y escribir clases C# para representar los objetos
primarios involucrados. A continuación se pueden usar herramientas proporcionadas por MVC para
construir los controladores y las vistas para los escenarios estándar índice, crear, editar y borrar para
cada uno de los objetos del modelo. El trabajo de construcción es llamado scaffolding.
Los modelos representan el dominio específico de datos y lógica de negocios en la arquitectura
MVC, ya que mantiene los datos de la aplicación. Los objetos modelo recuperan y almacenan
estados del modelo en un almacén de persistencia tal como una base de datos.
Una clase de tipo Modelo guarda datos en las propiedades públicas. Todas las clases Modelo residen
en la carpeta Model en la estructura de carpetas de MVC.

INTERACCIÓN ENTRE EL MODELO, LA VISTA Y EL CONTROLADOR.

El siguiente diagrama muestra la interacción entre los tres componentes del modelo MVC en
ASP.NET:

Controlador

Modelo Vista

En el diagrama se muestra que el controlador responde a una solicitud recibida, obtiene los datos
necesarios del modelo y los envía a la vista, la cual los presenta en el navegador.

1 de 9
Programación II Ing. Guillermo Rivera

PROCEDIMIENTO.
1. Inicie Visual Studio y abra el proyecto MVCPaises.
2. Agregue un modelo a la aplicación, para lo cual haga clic derecho sobre la carpeta Models y
seleccione las opciones Add, Class.

3. Coloque el nombre Empleado a la nueva clase.

2 de 9
Programación II Ing. Guillermo Rivera

4. Digite el código siguiente:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCPaises.Models
{
public class Empleado
{
public int IDEmpleado { get; set; }
public string Nombre { get; set; }
public string Genero { get; set; }
public string Ciudad { get; set; }
}
}

SUGERENCIA: Puede generar más rápidamente las propiedades si digita la palabra prop
y a continuación presiona la tecla TAB dos veces.

5. Agregue un controlador a la aplicación, para lo cual haga clic derecho sobre la carpeta
Controllers y seleccione las opciones Add, Controller.

3 de 9
Programación II Ing. Guillermo Rivera

6. Seleccione la opción MVC 5 Controller – Empty.

7. Coloque el nombre EmpleadoController.

8. Cambie el nombre del método de acción a Detalle().

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCPaises.Controllers
{
public class EmpleadoController : Controller
{
// GET: Empleado
public ActionResult Detalle()
{
return View();
}
}
}

4 de 9
Programación II Ing. Guillermo Rivera

9. En este momento se debería escribir el código necesario para recuperar información de una
tabla. Para efectos didácticos en este ejercicio se usará “código quemado”. Escriba el código
siguiente:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCPaises.Models;

namespace MVCPaises.Controllers
{
public class EmpleadoController : Controller
{
public ActionResult Detalle()
{
Empleado empleado = new Empleado()
{
IDEmpleado = 101,
Nombre = "Juan Pérez",
Genero = "Masculino",
Ciudad = "San Salvador"
};

return View();
}
}
}

10. Agregue una vista. Haga clic derecho sobre el método de acción Detalle() y seleccione la
opción Add View.

5 de 9
Programación II Ing. Guillermo Rivera

11. En la pantalla mostrada cambie la plantilla a Empty y en la opción Model class seleccione
Empleado(MVCPaises.Models).

12. Escriba el código siguiente:

@model MVCPaises.Models.Empleado

@{
ViewBag.Title = "Detalles del empleado";
}

<h2>Detalles del empleado</h2>

<table>
<tr>
<td>
<b>ID Empleado:</b>
</td>
<td>
@Model.IDEmpleado
</td>
</tr>
<tr>
<td>
<b>Nombre:</b>
</td>
<td>
@Model.Nombre
</td>
</tr>
<tr>
<td>
<b>Género</b>
</td>
<td>
@Model.Genero
</td>
</tr>

6 de 9
Programación II Ing. Guillermo Rivera

<tr>
<td>
<b>Ciudad:</b>
</td>
<td>
@Model.Ciudad
</td>
</tr>
</table>

13. Ejecute la aplicación.

14. La línea causante del error se resalta en color rojo, lo cual establece que el error se genera
debido a que no se tienen valores para este campo. Evidentemente el controlador no ha
enviado la información correspondiente a la vista. En el controlador modifique el código
como se muestra en la línea resaltada con color amarillo:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCPaises.Models;

namespace MVCPaises.Controllers
{
public class EmpleadoController : Controller
{
public ActionResult Detalle()
{
Empleado empleado = new Empleado()
{
IDEmpleado = 101,
Nombre = "Juan Pérez",
Genero = "Masculino",
ciudad = "San Salvador"
};

return View(empleado);
}
}
}

7 de 9
Programación II Ing. Guillermo Rivera

15. Ejecute nuevamente la aplicación. Obtendrá la pantalla siguiente:

16. En el URL escriba la dirección apropiada (nombre del controlador y del método de acción) y
presione ENTER.

8 de 9
Programación II Ing. Guillermo Rivera

NOTA: Se puede cambiar la pantalla de inicio que se mostrará en el navegador web. Para ello
abra el archivo RouteConfig.cs que se encuentra dentro de la carpeta App_Start y realice
cualquiera de las dos acciones siguientes:
1. Cambie el código de la ruta por el siguiente:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Empleado", action = "Detalle",
id = UrlParameter.Optional }
);
}
2. Copie el código original y cambie el nuevo código con lo mostrado a continuación. Tenga
cuidado de dejar primero el código modificado porque será lo primero que se ejecute.
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
name: "Inicio",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Empleado", action = "Detalle",
id = UrlParameter.Optional }
);

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index",
id = UrlParameter.Optional }
);
}
Ejercicio: aplique cualquiera de las dos opciones anteriores y vuelva a ejecutar la aplicación web.

NOTA: Gran parte de este material ha sido tomado de los videos publicados por Kud Venkat de
Pragim Technologies, Marathalli, Bangalore, India. Puede encontrar los videos originales en la
direción URL siguiente:
http://csharp-video-tutorials.blogspot.com/p/aspnet-mvc-tutorial-for-beginners.html

9 de 9