Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original.
Traducción
Original

Vistas y representación de la interfaz de usuario en aplicaciones de ASP.NET MVC

El marco de ASP.NET MVC admite el uso de un motor de vista para generar las vistas (interfaz de usuario). De forma predeterminada, el marco de MVC usa tipos personalizados (ViewPage, ViewMasterPage y ViewUserControl) que heredan de los tipos de página ASP.NET existente (.aspx), página maestra (.master), y control de usuario (.ascx) existentes como vistas.

En el flujo de trabajo típico de una aplicación web de MVC, los métodos de acción de controlador administran una solicitud web de entrada. Estos métodos de acción usan los valores de parámetro de entrada para ejecutar el código de aplicación y recuperar o actualizar los objetos del modelo de datos de una base de datos. A continuación, los métodos seleccionan una vista que representa una respuesta en un explorador.

En el modelo Model-View-Controller (MVC), las vistas están pensadas exclusivamente para encapsular la lógica de presentación. No deben contener lógica de aplicación ni código de recuperación de base de datos. El controlador debe administrar toda la lógica de aplicación. Una vista representa la interfaz de usuario adecuada usando los datos que recibe del controlador. Estos datos se pasan a una vista desde un método de acción de controlador usando el método View.

NotaNota:

La carpeta Views es la ubicación recomendada para las vistas en la estructura de proyecto web de MVC.

En el ejemplo siguiente se muestra cómo se representa una vista en una clase de controlador.

public ActionResult Categories()
{
    List<Category> categories = northwind.GetCategories();
    return View(categories);
}

En el ejemplo, el parámetro que se pasa en la llamada al método View es una lista de los objetos Category que se pasan a la vista. El método View llama al motor de vista, que usa los datos de la lista para representarlos en la vista y para mostrarlos en el explorador.

Una página de vista es una instancia de la clase ViewPage. Hereda de la clase Page e implementa la interfaz IViewDataContainer. La clase ViewPage define una propiedad ViewData que devuelve un objeto ViewDataDictionary. Esta propiedad contiene los datos que la vista debe mostrar.

Puede crear una página de vista usando las plantillas que se proporcionan en un proyecto de Visual Studio para una aplicación web ASP.NET. De forma predeterminada, las vistas son páginas web ASP.NET representadas por el marco de MVC. El marco de MVC usa el enrutamiento de direcciones URL para determinar qué acción de controlador se va a invocar y, a continuación, la acción de controlador decide qué vistas va a representar.

En el ejemplo siguiente se muestra el marcado de la página Index.aspx. Esta página es una de las vistas predeterminado que se generan al crear un nuevo proyecto de MVC en Visual Studio. Por convención, se asigna el nombre "Index" a la vista predeterminado de una aplicación de ASP.NET MVC.


<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>


La directiva @ Page contiene el atributo Inherits que define la relación entre la aplicación y la vista. De forma predeterminada, el valor del atributo Inherits usa el modelo siguiente: Application.Views.Controller.ViewPage

Si está trabajando con una vista fuertemente tipada, el atributo Inherits usa el modelo siguiente:

Application.Views.Controller.ViewPage<Tipo>

Igual que las páginas ASP.NET en aplicaciones basadas en formularios Web Forms, las vistas de página de ASP.NET (archivos .aspx) pueden usar páginas maestras para definir un diseño y una estructura coherentes. En un sitio típico, la página maestra se enlaza a una página de contenido en la directiva @ Page de la página de contenido. También puede usar páginas maestra dinámicas (es decir, puede asignar una página maestra en tiempo de ejecución) cuando llame al método View de la clase Controller.

En el ejemplo siguiente se muestra la vista Site.master, que es la página maestra que se genera al crear un nuevo proyecto de MVC en Visual Studio.


<%@ Master Language="VB" 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 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>



<%@ 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 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>


Una vista parcial permite definir una vista que se representará dentro de una vista primaria. Las vistas parciales se implementan como controles de usuario de ASP.NET (.ascx).

Cuando se crea una instancia de una vista parcial, obtiene su propia copia del objeto ViewDataDictionary que está disponible para la vista primaria. Por lo tanto, la vista parcial tiene acceso a los datos de la vista primaria. Sin embargo, si la vista parcial actualiza los datos, esas actualizaciones solo afectan al objeto ViewData de la vista parcial. Los datos de la vista primaria no cambian.

Al crear las vistas, muchas tareas son repetitivas o requieren un conocimiento especial del marco de MVC. Para ayudar en estos escenarios y facilitar la representación de HTML, el marco de MVC incluye clases y miembros de aplicación auxiliar. El diseño de las clases de aplicación auxiliar es extensible para que pueda agregar clases y miembros de aplicación auxiliar personalizados.

El marco de MVC incluye las aplicaciones auxiliares siguientes:

  • Aplicaciones auxiliares de formularios, para elementos de formulario como botones de radio, cuadros de lista, botones de selección, cuadros de texto, áreas de texto, contenido oculto y campos de contraseña.

  • Aplicaciones auxiliares de direcciones URL, que permiten generar direcciones URL para enrutamiento.

  • Aplicaciones auxiliares de HTML, que incluyen funciones para administrar las cadenas HTML, como Encode, Decode, AttributeEncode y RenderPartial.

Puede tener acceso a las aplicaciones auxiliares de representación basadas en código mediante las propiedades que se agregan a las clases ViewPageViewMasterPage y ViewUserControl.

Título

Descripción

Representar un formulario mediante aplicaciones auxiliares HTML

Explica cómo usar los métodos de aplicación auxiliar de HTML para representar un formulario en una vista.

Pasar datos en una aplicación ASP.NET MVC

Explica cómo pasar datos de un controlador a una vista.

Tutorial: Usar aplicaciones auxiliares con plantilla para mostrar datos en ASP.NET MVC

Muestra un método para compilar automáticamente una interfaz de usuario basada en un modelo de datos.

Crear una vista de ASP.NET MVC llamando a varias acciones

Explica cómo crear una vista primaria que contiene varias vistas secundarias.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft