MODELO VISTA CONTROLADOR

Ahora implementaremos otro problema elemental pero introduciendo los tres elementos
fundamentales de este patrón de programación: "Modelo", "Vista" y "Controlador".
Recordemos que cada una de los componentes del patrón MVC, tienen un objetivo bien
definido:

 Controlador: Es una clase o conjunto de clases que coordinan la comunicación entre

las peticiones que hace el cliente (Navegador generalmente), el modelo que procesa los
datos que llegan del cliente y comunica a las vistas para que muestren los datos
peticionados por el cliente.

 Vistas: Definen como se mostrará la interfaces de usuario de la aplicación.

 Modelos: Se implementan las clases que resuelven la lógica de negocios de nuestra

aplicación.

Ejercicio #01

Desarrollar un libro de visitas a un sitio web. Donde por medio de un formulario se podrá
ingresar el nombre del visitante y los comentarios.
Estos datos se deben almacenar en un archivo de texto.
Dicho escenario web debe estar compuesto por:
Cuatro vistas
Vista Uno, Donde se visualizan los enlaces
Vista Dos
Formulario donde se carga el comentario

Vista Tres:
Mensaje indicando que los datos se cargaron exitosamente.

Vista Cuatro:
Escenario donde se muestra todos los comentarios.

Un Controller
Y Un Modelo

Solución
La página principal debe tener dos hipervínculos. El primero que acceda a un formulario web
para la carga del nombre del visitante y sus comentarios y el segundo hipervínculo debe
mostrar todos los comentarios que han dejado los visitantes al sitio web.

Resolveremos el problema enunciando uno a uno los pasos que debemos dar en el Visual
Studio .Net para ir creando y codificando cada uno de los archivos necesarios en las carpetas
"Controllers", "Views" y "Models".
1. Creamos el proyecto puede ser con el nombre Biblioteca
Creación del proyecto. Para esto seleccionamos desde el menú la opción "Archivo" ->
"Nuevo" -> "Proyecto..."
2. Aparece un diálogo donde debemos indicar del lado izquierdo que utilizaremos el
lenguaje Visual C# y del lado de la derecha seleccionamos "Aplicación web ASP.NET
(.Net Framework)" y en la parte inferior definimos el "nombre", "ubicación" y "nombre de
la solución" (podemos usar el mismo texto para el "nombre de la solución" y "nombre").
3. Aparece un segundo diálogo donde seleccionaremos que cree un proyecto vacío y
utilice el patrón MVC.
4. Ahora creamos el "Controlado” para esto presionamos el botón derecho del mouse
sobre la carpeta "Controllers" y seleccionar "Agregar" -> Controlador...
5. En el diálogo seleccionamos "Controlador de MVC 5: en blanco".
6. En el diálogo siguiente damos como nombre "HomeController" (por convención en
ASP.NET MVC todos los controladores terminan con la palabra "Controller").
7. Ahora si vemos el "Explorador de soluciones" podremos comprobar que en la carpeta
"Controllers" tenemos un archivo llamado "HomeController.cs".

8. También se creó una carpeta llamada Home en la carpeta Views, en esta carpeta
guardaremos las vistas para cada acción que definamos en el controlador.
9. Ahora generaremos la vista para la página principal del sitio, como sabemos tenemos
que abrir el archivo HomeController y presionar el botón derecho del mouse sobre el
método Index.
10. El nombre de la vista la dejamos con el nombre propuesto "Index", la plantilla debe ser
"Empty (sin modelo) y finalmente sacamos el Check del "Usar página de diseño" (para
evitar que se agreguen otros archivos que veremos más adelante y que hace más
complejo el problema).
11. Si vemos ahora el "Explorador de soluciones" podemos observar que se ha creado un
archivo llamado "Index.cshtml" en la carpeta "Views", subcarpeta "Home".

12. El contenido de este archivo lo modificamos para que muestre los dos enlaces de
nuestro sitio web:
 13. Crearemos ahora la vista que muestra el formulario donde el visitante dejará sus
comentarios. Lo primero que hacemos es modificar el archivo HomeController
agregando otro método.

Hemos planteado el método FormularioVisita que sabemos que se ejecutará cuando el usuario
ingrese la URL.
http://localhost/Home/FormularioVisita
Por el momento podemos visualizar nuestra primera página con la siguiente dirección
http://localhost:61286/Home/Index/
El formulario debe mostrarse cuando el visitante elige el primer enlace de la vista
"Index.cshtml".

14. Para esto Debemos crear la vista asociada al método FormularioVisita(), como ya
sabemos presionamos el botón derecho del mouse sobre el nombre del método y
seleccionamos "Agregar Vista...":
15. Debemos crear la vista asociada al método FormularioVisita(), como ya sabemos
presionamos el botón derecho del mouse sobre el nombre del método y seleccionamos
"Agregar Vista...":
16. El nombre de la vista la dejamos con el nombre propuesto "FormularioVisita", la plantilla
debe ser "Empty (sin modelo) y finalmente sacamos el Check del "Usar página de
diseño" (para evitar que se agreguen otros archivos que veremos más adelante y que
hace más complejo el problema).
17. Si vemos ahora el "Explorador de soluciones" podemos observar que se ha creado un
archivo llamado "FormularioVisita.cshtml" en la carpeta "Views", subcarpeta "Home".
18. El contenido de este archivo lo modificamos para que muestre el formulario HTML que
permita ingresar el nombre de una persona y sus comentarios:

Generando el siguiente resultado.

19. Hemos codificado un formulario HTML con un control "input" de tipo "text" y un control
de tipo "textarea". Además del botón de tipo "submit" que envía los datos al servidor.
20. La propiedad action del elemento form indica que URL de nuestro controlador debe
atrapar el envío de los datos del formulario que carga el operador:
<form method="post" action="/Home/CargaDatos" >
Significa que en el controlador HomeController debemos plantear un método llamado
CargaDatos.
21. Si ejecutamos la aplicación veremos que podemos ver el formulario.

22. Pero cuando presionamos el botón de "Confirmar" nos muestra el error 404 que retorna
el servidor.
23. Primero crearemos el modelo que tiene como responsabilidad almacenar los datos del
visitante que serán comunicados por el controlador.
24. Presionamos el botón derecho del mouse sobre la carpeta Models y seleccionamos la
opción "Agregar" -> "Clase...":
25. Creamos la clase "LibroVisitas.cs":
26. Codificamos la clase para permitir almacenar los datos en el archivo de texto.

27. El método Grabar recibe dos string y dentro del mismo procedemos a crear un objeto de
la clase StreamWriter que se encuentra en el espacio de nombres System.IO (Debemos
disponer el using respectivo)
Al constructor de la clase StreamWriter le indicamos el path o camino donde se
almacena el archivo de texto llamado "datos.txt", utilizamos el método MapPath del
objeto HostingEnvironment que nos devuelve la ruta donde se almacena nuestro
proyecto. Le concatenamos la carpeta "App_Data" donde se debe almacenar el archivo
de texto.
El segundo parámetro de MapPath al pasar un true indicamos que si ya existe el archivo
lo abra para añadir datos al final.
Mediante el método WriteLine procedemos a grabar en el archivo de texto los
parámetros nombre y comentarios.
Finalmente cerramos el archivo llamando al método Close.

28. Ahora crearemos otra acción en el archivo HomeController donde llamaremos al modelo
para que efectúe la carga de datos. Abrimos el archivo HomeController y codificamos.
 29. La acción CargaDatos se ejecuta cuando el visitante confirma los datos del formulario
de visitas.
30. Primero recuperamos los datos ingresados por el visitante en los dos controles HTML.

string nombre = Request.Form["nombre"].ToString();

string comentarios = Request.Form["comentarios"].ToString();

Seguidamente creamos un objeto de la clase LibroVisitas y llamamos al método Grabar.

LibroVisitas libro = new LibroVisitas();

libro.Grabar(nombre, comentarios);

31. Esta es la forma que tiene el "Controlador" de comunicarse con el "Modelo", en este
caso para pedir que almacene los datos ingresados en el formulario.
32. Nos falta ahora crear una vista para la acción CargaDatos. Presionamos el botón
derecho del mouse sobre el nombre del método "CargaDatos()" y seleccionamos
"Agregar vista", luego codificamos el archivo CargaDatos.cshtml:
33. Podemos ahora seleccionar nuevamente el archivo Index.cshtml y ejecutar el proyecto.
Cargamos los datos en el formulario y presionamos el botón de Confirmar.

34. El navegador muestra la vista, pero también en el servidor se almacenaron los datos
cargados en el formulario HTML. Si vemos la carpeta "App_Data" encontraremos que
se ha creado el archivo "datos.txt", que va creciendo a medida que se agregan
comentarios.
35. Nos queda resolver la página que muestra todos los comentarios dejados por los
visitantes.
36. Primero codificaremos la responsabilidad de leer el archivo de texto que le corresponde
al "Modelo". Abrimos el archivo "LibroVisitas.cs" y codificamos el método "Leer":
 37. El método Leer procede a crear un objeto de la clase StreamReader e indicamos el path
donde se encuentra el archivo a leer llamado "datos.txt".
38. Miremos el método "ReadToEnd" recuperamos todos los caracteres almacenados en el
archivo de texto y finalmente luego de cerrar el archivo procedemos a retornar un string
con todos los caracteres leídos.
39. Ahora debemos agregar en el "Controlador" un método que responda al segundo
hipervínculo de la página principal del sitio llamado "ListadoVisitas".

En el método ListadoVisitas procedemos a crear un objeto de la clase LibroVisitas y

recuperamos el contenido almacenado llamando al método Leer:

LibroVisitas libro = new LibroVisitas();

string todo = libro.Leer();
Mediante el diccionario ViewData podemos pasar datos a la vista, creamos una entrada en el
diccionario y le asignamos el string recuperado desde el "Modelo".

ViewData["libro"] = todo;
return View();

40. Paso siguiente debemos crear la "Vista" para el método "ListadoVisitas", para ello
presionamos el botón derecho del mouse y creamos la vista como hemos estado
trabajando hasta ahora.
41. Modificamos el archivo "ListadoVisitas.cshtml" para que muestre todos los comentarios
que se han dejado en el sitio web.

42. Ahora mediante Razor podemos recuperar los datos almacenados en el diccionario
ViewData que cargamos en el "Controlador", si bien podemos escribir.

<div>
@ViewData["libro"]
<br />
<a href="/">Retornar</a>
</div>

43. Luego como tenemos marcas HTML en el archivo de texto no aparecen correctamente.
Debemos utilizar el método Raw de HTML para su correcta visualización.

El resultado de esta vista es:

Ya tenemos correctamente funcionando nuestro pequeño sitio web que permite dejar
comentarios y ver los comentarios de otros visitantes. Todo esto utilizando el patrón del Modelo
Vista Controlador.

Ejercicio # 1

Empleando los conceptos vistos de MVC realizar un escenario web que cargue los datos
básicos de una persona y los muestre en una pantalla.