Agregar una vista a una aplicación MVC

por Rick Anderson

En esta sección, va a modificar la clase HelloWorldController para usar archivos de plantilla de vista y encapsular limpiamente el proceso de generación de respuestas HTML a un cliente.

Crearás un archivo de plantilla de vista mediante el motor de vistas de Razor. Las plantillas de vista basadas en Razor tienen una extensión de archivo .cshtml y proporcionan una manera elegante de crear una salida HTML mediante C#. Razor minimiza el número de caracteres y pulsaciones de teclas necesarias al escribir una plantilla de vista y permite un flujo de trabajo de codificación rápida y fluida.

Actualmente, el Index método devuelve una cadena con un mensaje codificado de forma rígida en la clase de controlador. Cambie el método Index para llamar al método View de los controladores, como se muestra en el código siguiente:

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

El Index método anterior usa una plantilla de vista para generar una respuesta HTML al explorador. Los métodos controller (también conocidos como métodos de acción), como el Index método anterior, generalmente devuelven actionResult (o una clase derivada de ActionResult), no tipos primitivos como string.

Haga clic con el botón derecho en la carpeta Views\HelloWorld, luego haga clic en Agregar y a continuación en MVC 5 View Page with Layout (Razor).

En el cuadro de diálogo Especificar nombre para elemento , escriba Índice y, a continuación, haga clic en Aceptar.

En el cuadro de diálogo Seleccionar una página de diseño , acepte el _Layout.cshtml predeterminado y haga clic en Aceptar.

En el cuadro de diálogo anterior, la carpeta Views\Shared está seleccionada en el panel izquierdo. Si tuviera un archivo de diseño personalizado en otra carpeta, puede seleccionarlo. Hablaremos sobre el archivo de diseño más adelante en el tutorial

Se crea el archivo MvcMovie\Views\HelloWorld\Index.cshtml .

Agregue el siguiente etiquetado resaltado.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Haga clic con el botón derecho en el archivo Index.cshtml y seleccione Ver en el explorador.

También puede hacer clic con el botón derecho en el archivo Index.cshtml y seleccionar Ver en el Inspector de página. Consulte el tutorial inspector de página para obtener más información.

Como alternativa, ejecute la aplicación y acceda al HelloWorld controlador (http://localhost:xxxx/HelloWorld). El Index método del controlador no hizo mucho trabajo; simplemente ejecutó la instrucción return View(), que especificó que el método debe usar un archivo de plantilla de vista para representar una respuesta al explorador. Dado que no especificó explícitamente el nombre del archivo de plantilla de vista que se va a usar, ASP.NET MVC usa el archivo de vista Index.cshtml en la carpeta \Views\HelloWorld . En la imagen siguiente se muestra la cadena "¡Hola desde nuestra Plantilla de Vista!" incrustada de manera fija en la vista.

Tiene buena pinta. Sin embargo, observe que la barra de título del explorador muestra "Index - My ASP.NET Application" (Índice: mi aplicación de ASP.NET) y el vínculo grande de la parte superior de la página dice "Nombre de la aplicación". En función de lo pequeño que haga la ventana del explorador, es posible que tenga que hacer clic en las tres barras de la esquina superior derecha para ver los vínculos Inicio, Acerca de, Contacto, Registro e Inicio de sesión .

Cambiar vistas y páginas de diseño

En primer lugar, quiere cambiar el vínculo "Nombre de la aplicación" en la parte superior de la página. Ese texto es común a cada página. Realmente se implementa en un solo lugar del proyecto, aunque aparece en todas las páginas de la aplicación. Vaya a la carpeta /Views/Shared en el Explorador de soluciones y abra el archivo _Layout.cshtml . Este archivo se denomina página de diseño y se encuentra en la carpeta compartida que usan todas las demás páginas.

Las plantillas de diseño le permiten especificar el diseño del contenedor HTML de su sitio en un solo lugar y, a continuación, aplicarlo en varias páginas del sitio. Busque la línea @RenderBody(). RenderBody es un marcador de posición donde se muestran todas las páginas específicas de la vista que crea, "envolvidas" en la página de diseño. Por ejemplo, si selecciona el vínculo Acerca de, la vista Views\Home\About.cshtml se representa dentro de RenderBody método.

Cambie el contenido del elemento title. Cambie actionLink en la plantilla de diseño de "Nombre de la aplicación" a "Película MVC" y el controlador de Home a Movies. A continuación se muestra el archivo de diseño completo:

<!DOCTYPE html>
<html>
<head>
    <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>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Ejecute la aplicación y observe que ahora dice "MVC Movie". Haga clic en el vínculo Acerca de y verá cómo esa página también muestra "Película MVC". Hemos podido realizar el cambio una vez en la plantilla de diseño y hacer que todas las páginas del sitio reflejen el nuevo título.

Cuando creamos por primera vez el archivo Views\HelloWorld\Index.cshtml , contenía el código siguiente:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

El código de Razor anterior establece explícitamente la página de diseño. Examine el archivo Views\_ViewStart.cshtml , contiene el mismo marcado de Razor exactamente. El archivo Views\_ViewStart.cshtml define el diseño común que usarán todas las vistas, por lo que puede comentar o quitar ese código del archivo Views\HelloWorld\Index.cshtml .

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Puede usar la Layout propiedad para establecer una vista de diseño diferente o establecerla en null para que no se use ningún archivo de diseño.

Ahora, vamos a cambiar el título de la vista Índice.

Abra MvcMovie\Views\HelloWorld\Index.cshtml. Hay dos lugares en los que realizar un cambio: en primer lugar, el texto que aparece en el título del explorador y, a continuación, en el encabezado secundario (el elemento <h2>). Harás pequeñas modificaciones para que puedas ver qué fragmento de código cambia cada parte de la aplicación.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

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

Para indicar el título HTML que se va a mostrar, el código anterior establece una Title propiedad del ViewBag objeto (que se encuentra en la plantilla de vista Index.cshtml ). Observe que la plantilla de diseño ( Views\Shared\_Layout.cshtml ) usa este valor en el <title> elemento como parte de la <head> sección del CÓDIGO HTML que hemos modificado anteriormente.

<!DOCTYPE html>
<html>
<head>
    <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>

Con este ViewBag enfoque, puede pasar fácilmente otros parámetros entre la plantilla de vista y el archivo de diseño.

Ejecute la aplicación. Tenga en cuenta que el título del explorador, el encabezado principal y los encabezados secundarios han cambiado. (Si no ve cambios en el navegador, es posible que esté viendo contenido en caché. Presione Ctrl+F5 en su navegador para forzar la carga de la respuesta desde el servidor). El título del navegador se crea con el ViewBag.Title que establecemos en la plantilla de vista Index.cshtml y el "- Movie App" adicional agregado en el archivo de diseño.

Observe también cómo el contenido de la plantilla de vista Index.cshtml se combinó con la plantilla de vista _Layout.cshtml y se envió una única respuesta HTML al explorador. Las plantillas de diseño facilitan la realización de cambios que se aplican en todas las páginas de la aplicación.

Sin embargo, nuestra pequeña cantidad de "datos" (en este caso, el mensaje "¡Hola desde nuestra plantilla de vista!") está codificado de manera rígida. La aplicación MVC tiene una "V" (vista) y hay un "C" (controlador), pero aún no hay "M" (modelo). En breve, veremos cómo crear una base de datos y recuperar los datos del modelo de ella.

Pasar datos del controlador a la vista

Antes de ir a una base de datos y hablar de los modelos, vamos a hablar primero sobre cómo pasar información del controlador a una vista. Las clases de controlador se invocan en respuesta a una solicitud de dirección URL entrante. Una clase de controlador es donde se escribe el código que controla las solicitudes entrantes del explorador, se recuperan los datos de una base de datos y, en última instancia, se decide qué tipo de respuesta devolver al explorador. Después, las plantillas de vista se pueden usar desde un controlador para generar y dar formato a una respuesta HTML al explorador.

Los controladores son responsables de proporcionar los datos o objetos necesarios para que una plantilla de vista represente una respuesta al explorador. Procedimiento recomendado: una plantilla de vista nunca debe realizar lógica de negocios o interactuar directamente con una base de datos. En su lugar, una plantilla de vista solo debe funcionar con los datos proporcionados por el controlador. Mantener esta "separación de responsabilidades" ayuda a mantener el código limpio, comprobable y más mantenible.

Actualmente, el método de acción de la clase toma un name y un numTimes como parámetros y, a continuación, muestra los valores directamente al navegador. En lugar de que el controlador represente esta respuesta como una cadena, vamos a cambiar el controlador para que use una plantilla de vista en su lugar. La plantilla de vista generará una respuesta dinámica; es decir, es necesario pasar los datos adecuados del controlador a la vista para generar la respuesta. Para ello, haga que el controlador coloque los datos dinámicos (parámetros) que necesita la plantilla de vista en un ViewBag objeto al que puede acceder la plantilla de vista.

Vuelva al archivo HelloWorldController.cs y cambie el Welcome método para agregar un Message valor y NumTimes al ViewBag objeto . ViewBag es un objeto dinámico, lo que significa que puede poner lo que quiera en él; el ViewBag objeto no tiene propiedades definidas hasta que se coloca algo dentro de él. El sistema de enlace de modelos de MVC ASP.NET asigna automáticamente los parámetros con nombre (name y numTimes) de la cadena de consulta de la barra de direcciones a los parámetros del método. El archivo HelloWorldController.cs completo tiene este aspecto:

using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

Ahora el ViewBag objeto contiene datos que se pasarán a la vista automáticamente. A continuación, ¡necesitas una plantilla para la vista de bienvenida! En el menú Compilar , seleccione Compilar solución (o Ctrl+Mayús+B) para asegurarse de que el proyecto está compilado. Haga clic con el botón derecho en la carpeta Views\HelloWorld, luego haga clic en Agregar y a continuación en MVC 5 View Page with Layout (Razor).

En el cuadro de diálogo Especificar nombre para elemento , escriba Bienvenida y, a continuación, haga clic en Aceptar.

En el cuadro de diálogo Seleccionar una página de diseño , acepte el _Layout.cshtml predeterminado y haga clic en Aceptar.

Se crea el archivo MvcMovie\Views\HelloWorld\Welcome.cshtml .

Reemplaza el marcado en el archivo Welcome.cshtml. Creará un bucle que diga "Hello" tantas veces como el usuario lo diga. A continuación se muestra el archivo Welcome.cshtml completo.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

Ejecute la aplicación y vaya a la siguiente dirección URL:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Ahora los datos se toman de la dirección URL y se pasan al controlador mediante el enlazador de modelos. El controlador empaqueta los datos en un ViewBag objeto y pasa ese objeto a la vista. A continuación, la vista muestra los datos como HTML para el usuario.

En el ejemplo anterior, usamos un ViewBag objeto para pasar datos del controlador a una vista. Más adelante en el tutorial, usaremos un modelo de vista para pasar datos de un controlador a una vista. El enfoque de modelo de vista para pasar datos generalmente es más preferido que el enfoque de ViewBag. Consulte la entrada de blog Vistas dinámicas V fuertemente tipadas para obtener más información.

Bueno, eso era un tipo de "M" para modelo, pero no del tipo de base de datos. Vamos a aprovechar lo que hemos aprendido para crear una base de datos de películas.