Información general sobre las vistas de ASP.NET MVC (C#)

  • Artículo

por Stephen Walther

¿Qué es un ASP.NET vista MVC y cómo difiere de una página HTML? En este tutorial, Stephen Walther le presenta las vistas y muestra cómo puede aprovechar las ventajas de View Data and HTML Helpers in a View.in a View.

El objetivo de este tutorial es proporcionarle una breve introducción a las vistas, los datos de las vistas y los asistentes HTML de ASP.NET MVC. Al final de este tutorial, debería entender cómo crear nuevas vistas, pasar datos de un controlador a una vista y usar asistentes HTML para generar contenido en una vista.

Descripción de las vistas

Para ASP.NET o Active Server Pages, ASP.NET MVC no incluye nada que corresponda directamente a una página. En una aplicación de ASP.NET MVC, no hay ninguna página en disco que corresponda a la ruta de acceso de la URL que usted escribe en la barra de direcciones de su explorador. Lo más parecido a una página en una aplicación de ASP.NET MVC es algo llamado vista.

En una aplicación ASP.NET MVC, en cambio, las solicitudes del explorador se asignan a acciones del controlador. Una acción del controlador puede devolver una vista. Sin embargo, una acción de controlador puede realizar algún otro tipo de acción, como redirigirle a otra acción del controlador.

La lista 1 contiene un controlador simple denominado HomeController. HomeController expone dos acciones de controlador denominadas Index() y Details().

Lista 1: HomeController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Details()
        {
            return RedirectToAction("Index");
        }
    }
}

Puede invocar la primera acción, la acción Index(), escribiendo la siguiente dirección URL en la barra de direcciones del explorador:

/Home/Index

Puede invocar la segunda acción, la acción Details(), escribiendo esta dirección en el explorador:

/Home/Details

La acción Index() devuelve una vista. La mayoría de las acciones que cree devolverán vistas. Sin embargo, una acción puede devolver otros tipos de resultados de acción. Por ejemplo, la acción Details() devuelve un RedirectToActionResult que redirige la solicitud entrante a la acción Index().

La acción Index() contiene la siguiente línea de código:

View();

Esta línea de código devuelve una vista que debe encontrarse en la siguiente ruta de acceso en el servidor web:

\Views\Home\Index.aspx

La ruta de acceso a la vista se deduce del nombre del controlador y del nombre de la acción del controlador.

Si lo prefiere, puede ser explícito sobre la vista. La siguiente línea de código devuelve una vista denominada Fred:

View( Fred );

Cuando se ejecuta esta línea de código, se devuelve una vista desde la siguiente ruta de acceso:

\Views\Home\Fred.aspx

Nota:

Si tiene previsto crear pruebas unitarias para la aplicación ASP.NET MVC, es una buena idea ser explícito sobre los nombres de vista. De este modo, puede crear una prueba unitaria para comprobar que una acción de controlador devolvió la vista esperada.

Incorporación de contenido a una vista

Una vista es un documento (X)HTML estándar que puede contener scripts. Los scripts se usan para agregar contenido dinámico a una vista.

Por ejemplo, la vista de la lista 2 muestra la fecha y hora actuales.

Lista 2: \Views\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <% Response.Write(DateTime.Now);%>

    </div>
</body>
</html>

Observe que el cuerpo de la página HTML de la lista 2 contiene el siguiente script:

<% Response.Write(DateTime.Now);%>

Use los delimitadores de script <% y %> para marcar el principio y el final de un script. Este script está escrito en C#. Muestra la fecha y hora actuales llamando al método Response.Write() para representar contenido en el explorador. Los delimitadores de script <% y %> se pueden usar para ejecutar una o varias instrucciones.

Como llama a Response.Write() con tanta frecuencia, Microsoft proporciona un acceso directo para llamar al método Response.Write(). La vista de la lista 3 usa los delimitadores <%= y %> como acceso directo para llamar a Response.Write().

Lista 3: Views\Home\Index2.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <%=DateTime.Now %>

    </div>
</body>
</html>

Puede usar cualquier lenguaje .NET para generar contenido dinámico en una vista. Normalmente, usará Visual Basic .NET o C# para escribir los controladores y vistas.

Uso de asistentes HTML para generar contenido de vista

Para facilitar la incorporación de contenido a una vista, puede aprovechar algo llamado asistente HTML. Un asistente HTML, normalmente, es un método que genera una cadena. Puede usar asistentes HTML para generar elementos HTML estándar, como cuadros de texto, vínculos, listas desplegables y cuadros de lista.

Por ejemplo, la vista de la lista 4 aprovecha tres asistentes HTML, los asistentes BeginForm(), TextBox() y Password(), para generar un formulario de inicio de sesión (consulte la figura 1).

Lista 4:- \Views\Home\Login.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form</title>
</head>
<body>
    <div>
    
    <% using (Html.BeginForm())
       { %>

        <label for="UserName">User Name:</label>
        <br />
        <%= Html.TextBox("UserName") %>
        
        <br /><br />
            
        <label for="Password">Password:</label>
        <br />
        <%= Html.Password("Password") %>
        
        <br /><br />

        <input type="submit" value="Log in" />        
    
    <% } %>
    
    </div>
</body>
</html>

The New Project dialog box

Figura 01: Un formulario de inicio de sesión estándar (haga clic para ver la imagen a tamaño completo)

Se llama a todos los métodos auxiliares HTML en la propiedad Html de la vista. Por ejemplo, se llama al método Html.TextBox() para representar un TextBox.

Tenga en cuenta que al llamar a los asistentes Html.TextBox() y Html.Password() usa los delimitadores de script <%= y %>. Estos asistentes simplemente devuelven una cadena. Debe llamar a Response.Write() para representar la cadena en el explorador.

El uso de métodos auxiliares HTML es opcional. Le facilitan la vida al reducir la cantidad de HTML y script que necesita escribir. La vista de la lista 5 representa exactamente el mismo formulario que la vista de la lista 4 sin usar asistentes HTML.

Lista 5:- \Views\Home\Login.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form without Help</title>
</head>
<body>
    <div>

    <form method="post" action="/Home/Login">
    
    <label for="userName">User Name:</label>
    <br />
    <input name="userName" />
    
    <br /><br />
    
    <label for="password">Password:</label>
    <br />
    <input name="password" type="password" />
    
    <br /><br />
    <input type="submit" value="Log In" />
    
    </form>
    
    </div>
</body>
</html>

También tiene la opción de crear sus propios asistentes HTML. Por ejemplo, puede crear un método auxiliar GridView() que muestre automáticamente un conjunto de registros de base de datos en una tabla HTML. Exploramos este tema en el tutorial Creación de asistentes HTML personalizados.

Uso de los datos de vista para pasar datos a una vista

Los datos de vista se usan para pasar datos de un controlador a una vista. Piense en los datos de vista como un paquete que envía por correo. Todos los datos pasados de un controlador a una vista deben enviarse mediante este paquete. Por ejemplo, el controlador de la lista 6 agrega un mensaje para ver los datos.

Lista 6: ProductController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Index()
        {
            ViewData["message"] = "Hello World!";
            return View();
        }

    }
}

La propiedad ViewData del controlador representa una colección de pares nombre y valor. En la lista 6, el método Index() agrega un elemento a la colección de datos de vista denominado message con el valor Hola mundo. Cuando el método Index() devuelve la vista, los datos de vista se pasan a la vista automáticamente.

La vista de la lista 7 recupera el mensaje de los datos de vista y representa el mensaje en el explorador.

Lista 7:- \Views\Product\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Product Index</title>
</head>
<body>
    <div>
    
    <%= Html.Encode(ViewData["message"]) %>
    
    </div>
</body>
</html>

Observe que la vista aprovecha el método auxiliar HTML.Encode() al representar el mensaje. El asistente HTML.Encode() codifica caracteres especiales, como < y > en caracteres que son seguros para mostrarse en una página web. Siempre que represente el contenido que un usuario envía a un sitio web, debe codificar el contenido para evitar ataques por inyección de JavaScript.

(Dado que creamos el mensaje en ProductController, no es necesario codificar el mensaje. Sin embargo, es un buen hábito llamar siempre al método Html.Encode() al mostrar el contenido recuperado de los datos de vista dentro de una vista).

En la lista 7, aprovechamos los datos de vista para pasar un mensaje de cadena simple de un controlador a una vista. También puede usar los datos de vista para pasar otros tipos de datos, como una colección de registros de base de datos, de un controlador a una vista. Por ejemplo, si desea mostrar el contenido de la tabla de base de datos Products en una vista, pasará la colección de registros de base de datos de los datos de vista.

También tiene la opción de pasar datos de vista fuertemente tipados de un controlador a una vista. Exploramos este tema en el tutorial Descripción de las vistas y los datos de vista fuertemente tipados.

Resumen

En este tutorial se proporciona una breve introducción a las vistas de ASP.NET MVC, los datos de vista y los asistentes HTML. En la primera sección, ha aprendido a agregar nuevas vistas al proyecto. Ha aprendido que debe agregar una vista a la carpeta correcta para llamarla desde un controlador determinado. A continuación, analizamos el tema de los asistentes HTML. Ha aprendido cómo los asistentes HTML le permiten generar fácilmente contenido HTML estándar. Por último, ha aprendido a aprovechar las ventajas de los datos de vista para pasar datos de un controlador a una vista.

Siguiente