Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
por Scott Hanselman
En este tutorial para principiantes se presentan los conceptos básicos de ASP.NET MVC. Creará una aplicación web sencilla que lea y escriba en una base de datos. Visite el centro de aprendizaje de ASP.NET MVC para encontrar otros tutoriales y ejemplos de ASP.NET MVC.
En esta sección veremos cómo podemos hacer que nuestra clase HelloWorldController use un archivo de plantilla de vista para encapsular limpiamente la generación de respuestas HTML a un cliente.
Comencemos con una plantilla de vista con nuestro método Index. Nuestro método se denomina Index y se encuentra en HelloWorldController. Actualmente, el método Index() devuelve una cadena con un mensaje que está codificado de forma rígida en la clase de controlador.
public string Index()
{
return "<html><body>This is my default action...</body></html>";
}
Ahora vamos a cambiar el método Index para que tenga este aspecto:
public ActionResult Index()
{
return View();
}
Ahora vamos a agregar una plantilla View a nuestro proyecto que podemos usar para nuestro método Index(). Para ello, haga clic con el botón derecho con el mouse en algún lugar del centro del método Index y haga clic en Agregar vista...
Se abrirá el cuadro de diálogo "Agregar vista", que nos proporciona algunas opciones para crear una plantilla de vista que pueda usar nuestro método Index. Por ahora, no cambie nada y simplemente haga clic en el botón Agregar.
Después de hacer clic en Agregar, aparecerá una nueva carpeta y un nuevo archivo en la carpeta de soluciones, como se muestra aquí. Ahora tengo una carpeta HelloWorld en Vistas y un archivo Index.aspx dentro de esa carpeta.
El nuevo archivo Index también está abierto y listo para su edición. Agregue texto bajo el primer <h2>Index</h2> como "Hola, mundo".
<h2>Index</h2>
Hello world!
Ejecute la aplicación y vuelva a visitar http://localhost:xx/HelloWorld en el explorador. El método Index de nuestro controlador en este ejemplo no realizó ningún trabajo, pero llamó a "return View()", que indicó que queríamos usar un archivo de plantilla de vista para volver a representar una respuesta al cliente. Como no hemos especificado expresamente el nombre del archivo de plantilla de vista que se debe usar, ASP.NET MVC usó de manera predeterminada el archivo de vista Index.cshtml de la carpeta \Views\HelloWorld. Ahora vemos la cadena codificada de forma rígida en nuestra vista.
Tiene buena pinta. Sin embargo, observe que el título del explorador dice "Índice" y el título grande en la página dice "Mi aplicación MVC". Vamos a cambiarlo.
Cambiar vistas y páginas maestras
En primer lugar, vamos a cambiar el texto "Mi aplicación MVC". Ese texto se comparte y aparece en cada página. Realmente aparece en un solo lugar en nuestro código, aunque se encuentra en todas las páginas de nuestra aplicación. Vaya a la carpeta /Views/Shared en el Explorador de soluciones y abra el archivo Site.Master. Este archivo se denomina página maestra y es el "shell" compartido que usan todas las demás páginas.
Observe algún texto que diga ContentPlaceholder "MainContent" en este archivo.
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
Ese marcador de posición es donde se mostrarán todas las páginas que cree, "encapsuladas" en la página maestra. Intente cambiar el título y, a continuación, ejecute la aplicación y visite varias páginas. Observará que el cambio aparece en varias páginas.
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
Ahora todas las páginas tendrán el encabezado principal (es decir, H1) de "Mi aplicación de película MVC". Que controla el texto blanco en la parte superior que se comparte en todas las páginas.
Este es el Site.Master en su totalidad con nuestro título cambiado:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Ahora, vamos a cambiar el título de la página Index.
Abra /HelloWorld/Index.aspx. Hay dos lugares que debemos cambiar. En primer lugar, el título que aparece en el título del explorador y, a continuación, el encabezado secundario, que también es H2. Haremos que sean algo diferentes para que pueda ver qué parte del código cambia cada área de la aplicación.
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Movie List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>My Movie List</h2>
Hello World!
</asp:Content>
Ejecute la aplicación y visite /Movies. Tenga en cuenta que el título del explorador, el encabezado principal y los encabezados secundarios han cambiado. Es fácil realizar grandes cambios en la aplicación con pequeños cambios en la vista.
Sin embargo, nuestro poco de "datos" (en este caso, el mensaje "Hola, mundo") estaba codificado de forma rígida. Tenemos V (vistas) y tenemos C (controladores), pero aún no hay M (modelo). Veremos en breve cómo crear una base de datos y recuperar los datos del modelo de ella.
Pasar un ViewModel
Antes de ir a una base de datos y hablar de Models, vamos a hablar primero sobre "ViewModels". Estos son objetos que representan lo que requiere una plantilla de vista para representar una respuesta HTML a un cliente. Normalmente, se crean y pasan por una clase Controller a una plantilla View y solo deben contener los datos que requiere la plantilla Vista, y ya no.
Anteriormente con nuestro ejemplo HelloWorld, el método de acción Welcome() tomó un nombre y un parámetro numTimes y lo genera en el explorador. En lugar de que el controlador siga representando esta respuesta directamente, vamos a hacer una clase pequeña para contener esos datos y, a continuación, pasarlos a una plantilla vista para representar la respuesta HTML mediante ella. De este modo, el controlador se preocupa por una cosa y la otra plantilla de vista, lo que nos permite mantener una "separación limpia de preocupaciones" dentro de nuestra aplicación.
Vuelva al archivo HelloWorldController.cs y agregue una nueva clase "WelcomeViewModel" y cambie el método Welcome dentro del controlador. Este es el HelloWorldController.cs completo con la nueva clase en el mismo archivo.
using System.Web.Mvc;
namespace Movies.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
var viewModel = new WelcomeViewModel
{
Message = "Hello " + name,
NumTimes = numTimes
};
return View(viewModel);
}
public class WelcomeViewModel
{
public string Message { get; set; }
public int NumTimes { get; set; }
}
}
}
Aunque está en varias líneas, nuestro método Welcome es realmente solo dos instrucciones de código. La primera instrucción empaqueta nuestros dos parámetros en un objeto ViewModel y el segundo pasa el objeto resultante a la vista.
¡Ahora necesitamos una plantilla de vista de bienvenida! Haga clic con el botón derecho en el método Welcome y seleccione Agregar vista. Esta vez, comprobaremos "Crear una vista fuertemente tipada" y seleccionaremos nuestra clase WelcomeViewModel en la lista desplegable. Esta nueva vista solo conocerá WelcomeViewModels y ningún otro tipo de objetos.
NOTA: Necesitará haber compilado una vez después de agregar WelcomeViewModel para que aparezca en la lista desplegable.
Este es el aspecto que debería tener el cuadro de diálogo Agregar vista. Haga clic en el botón Agregar. 
Agregue este código en el <h2> del nuevo Welcome.aspx. ¡Haremos un bucle y diremos Hola tantas veces como el usuario nos lo pida!
<% for(int i=0;i<Model.NumTimes;i++) { %>
<%h3><%: Model.Message %></h3>
<% } %>
Además, tenga en cuenta que mientras está escribiendo eso porque le dijimos esta vista sobre WelcomeViewModel (¿están casados, recuerda?) que obtenemos útiles Intellisense cada vez que hacemos referencia a nuestro objeto Model como se muestra en la captura de pantalla siguiente:
Ejecute la aplicación y vuelva a visitar http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4. Ahora estamos tomando datos de la dirección URL, se pasa automáticamente al controlador, nuestro controlador empaqueta los datos en un ViewModel y pasa ese objeto a nuestra vista. A continuación, la vista muestra los datos como HTML al usuario.
Bueno, todo esto era un tipo de "M" para el modelo, pero no el tipo de base de datos. Vamos a aprovechar lo que hemos aprendido para crear una base de datos de películas.