Martes, 13 de septiembre de 2016

Ahora vamos con la vista que se generará usando el motor de vistas Razor. Las plantillas de vistas basadas en Razor tienen la extensión .cshtml y provee una forma elegante para crear salidas HTML usando C#. Razor minimiza el número de caracteres y teclas pulsadas requeridas cuando escribimos una plantilla de tipo vista y facilita un rápido, fluido flujo de trabajo de la codificación.

Por ahora el método Index regresa un "string" con un mensaje que es no modificable dentro de la clase controlador. Vamos a cambiar el método Index para que regrese un objeto Vista...

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

El método Index usa una plantilla de tipo vista para generar una respuesta HTML (response) al navegador. Los métodos del controlador (también conocidos como métodos de acción), generalmente regresan un ActionResult (o una clase derivada de ActionResult), no tipos primitivos como string.

Nos vamos al explorador de soluciones a la carpeta Views\HolaTierra y damos clic derecho, en el menú contextual elegimos Agregar - Página de vistas de MVC 5 con diseño (Razor)

En la ventana ponemos el nombre de Index...

Y después escogemos _Layout.cshtml

La nueva página se agrega y vamos escribir el siguiente código en Index.cshtml.

@{
        ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello, from our View Template</p>


Vamos ahora a ver esta página en el navegador ...

Acabamos de crear nuestra primera "vista" - con diseño Razor - se advierte el título y el mensaje que muestra la página, además que aparece un menu con las opciones de la aplicación - Inicio, A cerca de, Contacto...

Cambiando Vistas y páginas de diseño.

Primero, si quieres cambiar el enlace "Nombre de la aplicación" que aparece en la parte superior de la página. El texto es común para cada página. En realidad, se implementa en un solo lugar del proyecto, aunque aparezca en todas las páginas de la aplicación. Vayamos al directorio /Views/Shared en el explorador de soluciones y abre el archivo _Layout.cshtml. A este archivo se le llama página de diseño y esta en la carpeta compartida (shared folder) que usan todas las páginas.

La plantilla de diseño te permite especificar al contenedor HTML de diseño de tu sitio en un solo lugar y aplicarlo en múltiples páginas de tu sitio. Encuentra la línea @RenderBody(). RenderBody es un contenedor donde todas las páginas de vistas-específicas que creas se muestran, "embebedido" en la página de diseño. Por ejemplo, si tu seleccionas el enlace "Acerca de ", la vista Views/Home/About.cshtml es procesada dentro del método RenderBody.

Cambia el contenido del elemento del título. Cambia el ActionLink en la plantilla de diseño de "Application name" por "MVC Films" y el controlador de Home a Movies. El archivo completo de diseño se muestra a continuación.

Ejecuta la aplicación y nota como ahora cambia a MVC Films. Da clic en el enlace "Acerca de", y ve como la página dice MVC Films, también. Hemos habilitado haciendo el cambio una sola vez en la página de diseño y todas las páginas reflejan el nuevo título.


Podemos revisar diferentes páginas y observar que cada vez que creamos alguna, el código Razor agrega la línea que invoca la página de diseño.

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}

Puedes también usar la propiedad para fijar una vista de diseño diferente, o asignarle el valor null y con esto no usar el archivo de diseño.

Ahora, vamos a cambiar el título de la vista del Index.

Abre el archivo MVCFilms/Views/HolaTierra/Index.cshtml. Hay dos lugares donde tenemos que hacer el cambio. Primero, el texto que aparece en el título del navegador, y en el cabecero secundario (elemento <h2>Gui?o. Lo harás ligeramente diferente para que puedas ver a detalle como cambia el aspecto de la aplicación.

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}

@{

ViewBag.Title = "Movie List";

}

<h2>My Movie List</h2>

<p>Hello from our View Template</p>

Para indicar que el título HTML para desplegar, el código mostrado abajo fija la propiedad Title

en el objeto ViewBag (el cual esta en la plantilla de vista Index.cshtml ). Nota que tu plantilla de diseño (Views/Shared/_Layout.cshtml) usa este valor en el elemento <title> como parte de la sección <head> de HTML que nosotros modificamos previamente.

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>@ViewBag.Title - Movie App</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

Usando este esquema ViewBag, puedes facilmente pasar otros parametros entre tu plantilla de vista y tu archivo de diseño.

Ejecuta la aplicación. Nota que el título del navagador, el encabazado primario y secundario han cambiado. El título del navegador es creado con ViewBag.Title que nosotros fijamos en la plantilla de vista Index.cshtml y el texto adicional "- Movie App" se agregó en el archivo de diseño.

También identifica como el contenido de la plantilla de la vista Index.cshtml fue combinada con la plantilla de la vista _Layout.cshtml y el "response" simple HTML que fue enviado al navegador. Las plantillas de diseño hicieron muy fácil la realización de estos cambios a todas las páginas de la aplicación.

Nuestra pequeña porción de datos (en este caso el mensaje "Hello from our view Template!") aun se encuentra en el código. La aplicación tiene una "V" (view) y le hemos agregado una "C" (controller), pero no la "M" (model). En breve, vamos a crear una base de datos y extraer los datos de este modelo.

Pasando datos del Controlador a la Vista

Antes de empezar con la base de datos y hablar sobre modelos, vamos a ver como pasar informacion del controlador a la vista. Las clases controlador son invocadas en "respuesta" (response) a una petición (request) URL. Una clase controlador es donde escribes código que maneja las peticiones que hace el navegador, recupera información de una base de datos, y últimamente decide que tipo de respuesta para enviar de regreso al navegador. Las plantillas de vista pueden ser usadas desde un control para generar y formatear una respuesta HTML para el navegador.

Los controladores son los responsables para proveer cualquiera de los datos u objetos que son requeridos en orden para una plantilla de vista que procesa una respuesta al navegador. Una buena práctica: Una plantilla de vista nunca debería ejecutar la lógica del negocio o interactuar con una base de datos directamente. Por otro lado, una plantilla de vista debería de trabajar solo con los datos que le son provistos por el controlador. Manteniendo esta "separación de intereses" nos ayuda a tener un código "limpio", fácil de probar y de mantener.

Actualemente, el método Welcome de la clase controlador HolaTierraController toma los parametros name y numTimes y entonces sus valores se muestran directamente en el navegador. Mas bien que tenemos el controlador que procesa su respuesta como una cadena (string), vamos a cambiar el controlador para usar una plantilla de vista. La plantilla de vista generará una respuesta dinámica, esto significa que necesitas pasar los bits apropiados de datos desde el controlador a la vista en orden para generar una respuesta. Podemos hacer esto mediante el controlador que proporciona datos dinámicos (parametros) que la plantilla de vista necesita en un objeto ViewBag y con esto la plantilla de vista puede entonces accesar.

El retorno del archivo HolaTierraController.cs y cambiando el método Welcome para adicionar valores en Message y en NumTimes al objeto ViewBag.ViewBag es un objeto dinámico, el cual puede colocar lo que tu quieras en él; el objeto ViewBag no tiene definido propiedades hasta que colocas algo dentro de él. El sistema de enlace del modelo ASP.NET (ASP.NET MVC model binding system) automaticamente mapea el nombre de los parametros nombrados (name and numTimes) desde la cadena de consulta en la barra de dirección en tu método. Podemos observar el código completo de HolaTierraController.cs a continuación.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MvcFilms.Controllers

{

public class HolaTierraController : Controller

{

// GET: /HolaTierra/

public ActionResult Index()

{

return View();

}

// GET: /HolaTierra/Welcome/

public ActionResult Welcome(string name, int numTimes = 1)

{

ViewBag.Message = "Hello " + name;

ViewBag.NumTimes = numTimes;

return View();

}

}

}

Ahora el objeto ViewBag contiene datos que serán pasados a la vista automaticamente. Para continuar, necesitamos una plantilla de vista Welcome ! . En el menu Compilar, selecciona Compilar Solución ( o Ctrl+Shift+B) para hacer asegurarnos que el proyecto se haya compilado. Damos clic derecho en la carpeta Views/HolaTierra y damos clic en Pagina de vistas de MVC5 con diseño (Razor).

En especificar nombre para el elemento en el cuadro de dialogo, escribimos Welcome, y damos clic en aceptar.

En el dialogo Seleccionar Página de Diseño, aceptamos el default _Layout.cshtml y damos clic en aceptar.

El archivo MvcFilms\Views\HolaTierra\Welcome.cshtml ha sido creado.

Agrega el siguiente código en el archivo Welcome.cshtml. Aquí vas a crear un ciclo que diga "Hello" tantas veces como el usuario indique, a continuación el código.

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Welcome</h2>

<ul>

@for (int i = 0; i < ViewBag.NumTimes; i++)

{

<li>@ViewBag.Message</li>

}

</ul>

Ejecutamos la aplicación como:

http://localhost:xxxxx/HolaTierra/Welcome?name=Theresa&numtimes=7

Ahora los datos se toman de la URL y se pasan al controlador usando el modelo de enlazado (model binder). El contralador empaqueta los datos en el objeto ViewBag y pasa este objeto a la vista. La vista entonces despliega los datos como HTML al usuario.

En el ejemplo, usamos el objeto ViewBag para pasar datos desde el controlador a la vista.

Hasta aquí esta entrega.

Profesor Enrique Nash.



Publicado por neofito69 @ 0:26  | .NET - C#
Comentarios (0)  | Enviar
Comentarios