Desarrollo Asp - Parte2 PDF

En el concepto anterior vimos que el "Controlador" recibe las distintas peticiones del
navegador. Lo resolvimos haciendo que el mismo "Controlador" generara la página HTML.
Ahora veremos como el "Controlador" delega la responsabilidad de generar la página a la

"Vista" (View)
Problema
Desarrollar un sitio web que muestre en la página principal el nombre de un club de futbol
y una pequeña reseña, y en otra página los integrantes del plantel.
Utilizar la "Vista" para generar las dos páginas.
Creamos el proyecto (Proyecto3)
Creación del proyecto. Para esto seleccionamos desde el menú la opción "Archivo" ->
"Nuevo" -> "Proyecto..."
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"):
Aparece un segundo diálogo donde seleccionaremos que cree un proyecto vacío y utilice el
patrón MVC:
Dijimos que la plantilla que nos crea el Visual Studio .Net no es funcional, es decir no
podemos ejecutar el programa.
Ahora creamos el "Controlador" como hicimos el concepto anterior.
El controlador principal siempre lo llamaremos "Home", para esto presionamos el botón

derecho del mouse sobre la carpeta "Controllers" y seleccionar "Agregar" -> Controlador...:
En el diálogo seleccionamos "Controlador de MVC 5: en blanco":
En el diálogo siguiente damos como nombre "HomeController" (por convención en
ASP.NET MVC todos los controladores terminan con la palabra "Controller"):
Ahora si vemos el "Explorador de soluciones" podremos comprobar que en la carpeta
"Controllers" tenemos un archivo llamado "HomeController.cs":
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.
Como vimos en el concepto anterior se ha generado el archivo HomeController.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Proyecto3.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
Para generar la vista para el método Index procedemos a presionar el botón derecho del
mouse sobre el nombre del método y seleccionamos "Agregar Vista...":
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):
Si vemos ahora el "Explorador de soluciones" podemos observar que se ha creado un
archivo llamado "Index.cshtml" en la carpeta "Views", subcarpeta "Home":
El contenido de este archivo veremos que gran parte es HTML (luego veremos que
podemos agregar programación con Razor que es un motor de vistas):
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
Modificamos este archivo para responder a nuestro ejemplo:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h1>Club Belgrano</h1>
<p>Club nacido en el barrio Alberdi...</p>
</div>
</body>
</html>
En este momento si ejecutamos la aplicación podemos ver que ya se muestra la página

principal del sitio:
Análisis del funcionamiento.
Accedemos al sitio mediante la petición:
http://localhost
Podemos acceder también a la página principal del sitio ingresando http://localhost/Home/Index
Como sabemos la petición la captura la clase HomeController y dentro de esta se ejecuta el

método Index:

{
// GET: Home
{
return View();
}
}
El método Index llama en su interior al método View y éste sabe por convenciones del
ASP.NET MVC que debe acceder a la carpeta Views, dentro de esta a la carpeta "Home"
(porque nuestro controlador se llama HomeController) y dentro de esta carpeta buscar el
archivo "Index.cshtml" (porque el método se llama Index).
El método View genera la página HTML y crea un objeto de la clase ActionResult que es
en definitiva la que retorna la petición del navegador.
Creación de la página que muestra el plantel.
Para practicar desarrollaremos nuevamente los pasos para crear la página del sitio que
muestra el plantel del equipo de fútbol.
Modificamos el archivo "HomeController" agregando el método "Plantel":
using System;
using System.Linq;
using System.Web;
{
{
// GET: Home
{
return View();
}
public ActionResult Plantel()

{
return View();
}
}
}
El método es idéntico al método Index.
Para generar la vista para el método Plantel procedemos a presionar el botón derecho del
mouse sobre el nombre del método y seleccionamos "Agregar Vista...":
El nombre de la vista la dejamos con el nombre propuesto "Planel", la plantilla debe ser
"Empty (sin modelo) y finalmente sacamos el Check del "Usar página de diseño" :
Si vemos ahora el "Explorador de soluciones" podemos observar que se ha creado un

archivo llamado "Plantel.cshtml" en la carpeta "Views", subcarpeta "Home":
Modificamos este archivo para responder a nuestro problema:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Plantel</title>
</head>
<body>
<div>
<h1>Jugadores</h1>
<p>Juan<br>
Pedro<br>
Luis</p>
</div>
</body>
</html>
Tenemos listo ahora nuestra segunda página del sitio. Si ejecutamos la aplicación teniendo
abierta la vista "Plantel.cshtml" podremos ver el resultado en el navegador:
Hay que tener en cuenta que cuando estamos desarrollando una aplicación con Visual
Studio .Net la vista que se encuentra activa es la que se ve cuando ejecutamos la aplicación.
En un primer paso resolvimos toda la lógica de nuestra aplicación web solo con el
"Controlador", en un segundo paso separamos las actividades agrupando funcionalidades
en el "Controlador" y la "Vista". 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 las 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.
Problema
Desarrollar un libro de visitas a un sitio web. Debe haber un formulario que permita
ingresar el nombre del visitante y los comentarios. Almacenar los datos en un archivo de
texto.
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 (Proyecto4)
Creación del proyecto. Para esto seleccionamos desde el menú la opción "Archivo"
-> "Nuevo" -> "Proyecto..."
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"):
Aparece un segundo diálogo donde seleccionaremos que cree un proyecto vacío y

utilice el patrón MVC:
2. Ahora creamos el "Controlador" como hicimos en conceptos anteriores.
El controlador principal siempre lo llamaremos "Home", para esto presionamos el

botón derecho del mouse sobre la carpeta "Controllers" y seleccionar "Agregar" ->
Controlador...:
En el diálogo seleccionamos "Controlador de MVC 5: en blanco":
En el diálogo siguiente damos como nombre "HomeController" (por convención en
ASP.NET MVC todos los controladores terminan con la palabra "Controller"):
Ahora si vemos el "Explorador de soluciones" podremos comprobar que en la
carpeta "Controllers" tenemos un archivo llamado "HomeController.cs":
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.
3. 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:
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):
Si vemos ahora el "Explorador de soluciones" podemos observar que se ha creado
un archivo llamado "Index.cshtml" en la carpeta "Views", subcarpeta "Home".
El contenido de este archivo lo modificamos para que muestre los dos enlaces de
nuestro sitio web:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p><a href="/Home/FormularioVisita">Dejar comentarios en el
libro de visitas.</a></p>
<p><a href="/Home/ListadoVisitas">Comentarios de
visitantes.</a></p>
</div>
</body>
</html>
Ya podemos ejecutar la aplicación y ver la página principal del sitio web propuesto:
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:
using System;
using System.Linq;
using System.Web;
{
{
// GET: Model
{
return View();
}
public ActionResult FormularioVisita()

{
return View();
}
}
}
Hemos planteado el método FormularioVisita que sabemos que se ejecutará cuando

el usuario ingrese la URL:
http://localhost/Home/FormularioVisita
Esto sucede cuando el visitante elige el primer enlace de la vista "Index.cshtml".
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...":
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):
Si vemos ahora el "Explorador de soluciones" podemos observar que se ha creado
un archivo llamado "FormularioVisita.cshtml" en la carpeta "Views", subcarpeta
"Home".
El contenido de este archivo lo modificamos para que muestre el formulario HTML

que permita ingresar el nombre de una persona y sus comentarios:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>FormularioVisita</title>
</head>
<body>
<div>
<form method="post" action="/Home/CargaDatos" >
<p>Nombre:<input type="text" name="nombre" /></p>
<p>Comentarios<br />
<textarea rows="10" cols="120"
name="comentarios"></textarea></p>
<p><input type="submit" value="Confirmar" /></p>
</form>
</div>
</body>
</html>
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.
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.
Si ejecutamos la aplicación veremos que podemos ver el formulario:

Pero cuando presionamos el botón de "Confirmar" nos muestra el error 404 que
retorna el servidor:
4. Primero crearemos el modelo que tiene como responsabilidad almacenar los datos
del visitante que serán comunicados por el controlador.
Presionamos el botón derecho del mouse sobre la carpeta Models y seleccionamos

la opción "Agregar" -> "Clase...":
Creamos la clase "LibroVisitas.cs":
Codificamos la clase para permitir almacenar los datos en el archivo de texto:
using System;
using System.Linq;
using System.Web;
using System.Web.Hosting;
using System.IO;
namespace Proyecto4.Models
{
public class LibroVisitas
{
public void Grabar(string nombre, string comentarios)
{
StreamWriter archivo = new
StreamWriter(HostingEnvironment.MapPath("~") +
"/App_Data/datos.txt", true);
archivo.WriteLine("Nombre:" + nombre +
"<br>Comentarios:" + comentarios + "<hr>");
archivo.Close();
}
}
}
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.
5. 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:
6. using System;
7. using System.Collections.Generic;
8. using System.Linq;
9. using System.Web;
10. using System.Web.Mvc;
11. using Proyecto4.Models;
12.
13. namespace Proyecto4.Controllers
14. {
15. public class HomeController : Controller
16. {
17. // GET: Model
18. public ActionResult Index()
19. {
20. return View();
21. }
22.
23. public ActionResult FormularioVisita()
24. {
25. return View();
26. }
27.
28. public ActionResult CargaDatos()
29. {
30. string nombre = Request.Form["nombre"].ToString();
31. string comentarios =
Request.Form["comentarios"].ToString();
32. LibroVisitas libro = new LibroVisitas();
33. libro.Grabar(nombre, comentarios);
34. return View();
35. }
36. }
37. }
La acción CargaDatos se ejecuta cuando el visitante confirma los datos del

formulario de visitas.
Primero recuperamos los datos ingresados por el visitante en los dos controles
HTML:
string nombre = Request.Form["nombre"].ToString();

string comentarios =
Seguidamente creamos un objeto de la clase LibroVisitas y llamamos al método

Grabar:
LibroVisitas libro = new LibroVisitas();

libro.Grabar(nombre, comentarios);
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.
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:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>CargaDatos</title>
</head>
<body>
<div>
<p>Los datos ingresados fueron almacenados.</p>
<p>Gracias por sus comentarios.</p>
<p><a href="/">Retornar</a></p>
</div>
</body>
</html>
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:
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.
38. Nos queda resolver la página que muestra todos los comentarios dejados por los
visitantes.
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":
using System;
using System.Linq;
using System.Web;
using System.Web.Hosting;
using System.IO;
namespace Proyecto4.Models
{
public class LibroVisitas
{
public void Grabar(string nombre, string comentarios)
{
StreamWriter archivo = new
StreamWriter(HostingEnvironment.MapPath("~") +
"/App_Data/datos.txt", true);
archivo.WriteLine("Nombre:" + nombre +
"<br>Comentarios:" + comentarios + "<hr>");
archivo.Close();
}
public string Leer()
{
StreamReader archivo = new
StreamReader(HostingEnvironment.MapPath("~") +
"/App_Data/datos.txt");
string todo = archivo.ReadToEnd();
archivo.Close();
return todo;
}
}
}
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".
Midente 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 leidos.
Ahora debemos agregar en el "Controlador" un método que responda al segundo

hiperínculo de la página principal del sitio llamado "ListadoVisitas":
using System;
using System.Linq;
using System.Web;
using Proyecto4.Models;
{
{
// GET: Model
{
return View();
}
public ActionResult FormularioVisita()

{
return View();
}
public ActionResult CargaDatos()

{
string nombre = Request.Form["nombre"].ToString();
string comentarios =
libro.Grabar(nombre, comentarios);
return View();
}
public ActionResult ListadoVisitas()
{
string todo = libro.Leer();
ViewData["libro"] = todo;
return View();
}
}
}
En el método ListadoVisitas procedemos a crear un objeto de la clase LibroVisitas y

recuperamos el contenido almacenado llamando al método Leer:

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();
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.
Modificamos el archivo "ListadoVisitas.cshtml" para que muestre todos los

comentarios que se han dejado en el sitio web:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>ListadoVisitas</title>
</head>
<body>
<div>
@Html.Raw(ViewData["libro"])
<br />
<a href="/">Retornar</a>
</div>
</body>
</html>
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>
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.
Es necesario practicar para sentir más natural esta forma de organizar el código de nuestro
proyecto en distintas carpetas, con distintas clases que tienen asignadas distintas
responsabilidades.

Desarrollo Asp - Parte2 PDF

Uploaded by

Document Information

Original Title

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

Desarrollo Asp - Parte2 PDF

Uploaded by

Copyright:

Available Formats

En el concepto anterior vimos que el "Controlador" recibe las distintas peticiones del

navegador. Lo resolvimos haciendo que el mismo "Controlador" generara la página HTML.

Ahora veremos como el "Controlador" delega la responsabilidad de generar la página a la

Creamos el proyecto (Proyecto3)

Ahora creamos el "Controlador" como hicimos el concepto anterior.

El controlador principal siempre lo llamaremos "Home", para esto presionamos el botón

Como vimos en el concepto anterior se ha generado el archivo HomeController.cs:

En este momento si ejecutamos la aplicación podemos ver que ya se muestra la página

Análisis del funcionamiento.

Accedemos al sitio mediante la petición:

Como sabemos la petición la captura la clase HomeController y dentro de esta se ejecuta el

public class HomeController : Controller

Creación de la página que muestra el plantel.

Modificamos el archivo "HomeController" agregando el método "Plantel":

public ActionResult Plantel()

El método es idéntico al método Index.

Si vemos ahora el "Explorador de soluciones" podemos observar que se ha creado un

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

1. Creamos el proyecto (Proyecto4)

Aparece un segundo diálogo donde seleccionaremos que cree un proyecto vacío y

El controlador principal siempre lo llamaremos "Home", para esto presionamos el

public ActionResult FormularioVisita()

Hemos planteado el método FormularioVisita que sabemos que se ejecutará cuando

Esto sucede cuando el visitante elige el primer enlace de la vista "Index.cshtml".

Debemos crear la vista asociada al método FormularioVisita(), como ya sabemos

El contenido de este archivo lo modificamos para que muestre el formulario HTML

Hemos codificado un formulario HTML con un control "input" de tipo "text" y un

<form method="post" action="/Home/CargaDatos" >

Significa que en el controlador HomeController debemos plantear un método

Si ejecutamos la aplicación veremos que podemos ver el formulario:

Presionamos el botón derecho del mouse sobre la carpeta Models y seleccionamos

Al constructor de la clase StreamWriter le indicamos el path o camino donde se

Mediante el método WriteLine procedemos a grabar en el archivo de texto los

Finalmente cerramos el archivo llamando al método Close.

5. Ahora crearemos otra acción en el archivo HomeController donde llamaremos al

La acción CargaDatos se ejecuta cuando el visitante confirma los datos del

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

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

LibroVisitas libro = new LibroVisitas();

Esta es la forma que tiene el "Controlador" de comunicarse con el "Modelo", en este

Podemos ahora seleccionar nuevamente el archivo Index.cshtml y ejecutar el

Primero codificaremos la responsabilidad de leer el archivo de texto que le

El método Leer procede a crear un objeto de la clase StreamReader e indicamos el

Midente el método "ReadToEnd" recuperamos todos los caracteres almacenados en

Ahora debemos agregar en el "Controlador" un método que responda al segundo

public ActionResult FormularioVisita()

public ActionResult CargaDatos()

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

LibroVisitas libro = new LibroVisitas();

Mediante el diccionario ViewData podemos pasar datos a la vista, creamos una

Modificamos el archivo "ListadoVisitas.cshtml" para que muestre todos los

Ahora mediante Razor podemos recuperar los datos almacenados en el diccionario

Luego como tenemos marcas HTML en el archivo de texto no aparecen

El resultado de esta vista es:

You might also like