Compartir a través de

Iteración n.º 2: Hacer que la aplicación tenga un buen aspecto (C#)

por Microsoft

Descargar código

En esta iteración, mejoramos la apariencia de la aplicación modificando la página maestra de vista predeterminada de ASP.NET MVC y la hoja de estilos en cascada.

Creación de una aplicación de administración de contactos ASP.NET MVC (C#)

En esta serie de tutoriales, creamos una aplicación completa de administración de contactos de principio a fin. La aplicación Contact Manager le permite almacenar información de contacto (nombres, números de teléfono y direcciones de correo electrónico) para obtener una lista de personas.

Compilamos la aplicación en varias iteraciones. Con cada iteración, mejoramos gradualmente la aplicación. El objetivo de este enfoque de iteración múltiple es permitirle comprender el motivo de cada cambio.

  • Iteración n.º 1: Crear la aplicación. En la primera iteración, creamos el Administrador de contactos de la manera más sencilla posible. Agregamos compatibilidad con operaciones básicas de base de datos: Crear, Leer, Actualizar y Eliminar (CRUD).

  • Iteración n.º 2: Hacer que la aplicación tenga un buen aspecto. En esta iteración, mejoramos la apariencia de la aplicación modificando la página maestra de vista predeterminada de ASP.NET MVC y la hoja de estilos en cascada.

  • Iteración n.º 3: Añadir una validación de formulario. En la tercera iteración, añadimos validación básica de formularios. Evitamos que los usuarios envíen un formulario sin completar los campos de formulario obligatorios. También validamos las direcciones de correo electrónico y los números de teléfono.

  • Iteración n.º 4: Hacer que la aplicación tenga un acoplamiento flexible. En esta cuarta iteración, aprovechamos varios patrones de diseño de software para facilitar el mantenimiento y modificación de la aplicación Contact Manager. Por ejemplo, refactorizamos la aplicación para usar el patrón Repositorio y el patrón de inserción de dependencias.

  • Iteración n.º 5: Crear pruebas unitarias. En la quinta iteración, hacemos que la aplicación sea más fácil de mantener y modificar agregando pruebas unitarias. Simulamos nuestras clases de modelo de datos y compilamos pruebas unitarias para nuestros controladores y lógica de validación.

  • Iteración n.º 6: Utilizar el desarrollo mediante pruebas. En esta sexta iteración, añadimos una nueva funcionalidad a nuestra aplicación escribiendo primero pruebas unitarias y escribiendo código en las pruebas unitarias. En esta iteración, agregamos grupos de contactos.

  • Iteración n.º 7: Agregar funcionalidad de Ajax. En la séptima iteración, mejoramos la capacidad de respuesta y el rendimiento de nuestra aplicación agregando compatibilidad con Ajax.

Esta iteración

El objetivo de esta iteración es mejorar el aspecto de la aplicación Contact Manager. Actualmente, el Administrador de contactos usa la página maestra de la vista ASP.NET MVC y la hoja de estilos en cascada predeterminadas (vea la figura 1). No tienen mal aspecto, pero no quiero que el Administrador de contactos tenga el aspecto de cualquier otro sitio web ASP.NET MVC. Quiero reemplazar estos archivos por archivos personalizados.

Screenshot shows the default appearance of an ASP dot NET MVC Application.

Figura 01: Apariencia predeterminada de una aplicación ASP.NET MVC (haga clic para ver la imagen de tamaño completo)

En esta iteración, comento dos enfoques para mejorar el diseño visual de nuestra aplicación. En primer lugar, le muestro cómo aprovechar la galería de diseño de ASP.NET MVC para descargar una plantilla de diseño de ASP.NET MVC gratuita. La galería de diseño de ASP.NET MVC le permite crear una aplicación web profesional sin realizar ningún trabajo.

He decidido no usar una plantilla de la galería de diseño de ASP.NET MVC para la aplicación Contact Manager. En su lugar, encargué un diseño personalizado a una empresa de diseño profesional. En la segunda parte de este tutorial, explico cómo trabajé con una empresa de diseño profesional para crear el diseño final de ASP.NET MVC.

Screenshot shows the ASP dot NET MVC Design Gallery.

Figura 02: La galería de diseño ASP.NET MVC (haga clic para ver la imagen a tamaño completo)

Mientras escribo este tutorial, el diseño más popular de la galería es un diseño llamado October de David Hauser. Puede usar este diseño para un proyecto de ASP.NET MVC completando los siguientes pasos:

  1. Haga clic en el botón Descargar para descargar el archivo October.zip en su equipo.
  2. Haga clic con el botón derecho del ratón en el archivo October.zip descargado y haga clic en el botón Desbloquear (ver figura 3).
  3. Descomprima el archivo en una carpeta llamada October.
  4. Seleccione todos los archivos de la carpeta DesignTemplate contenidos en la carpeta October, haga clic con el botón derecho del ratón en los archivos y seleccione la opción de menú Copiar.
  5. Haga clic con el botón derecho del ratón en el nodo del proyecto ContactManager en la ventana del Explorador de soluciones de Visual Studio y seleccione la opción de menú Pegar (véase la figura 4).
  6. Seleccione la opción Edición, Buscar y reemplazar, Reemplazo rápido del menú de Visual Studio y reemplace [MyProjectName] por ContactManager. (ver figura 5).

Screenshot shows unblocking a file downloaded from the web.

Figura 03: Desbloqueo de un archivo descargado de la Web (haga clic para ver la imagen a tamaño completo)

Screenshot shows overwriting files in the Solution Explorer.

Figura 04: Sobrescritura de archivos en el Explorador de soluciones (haga clic para ver la imagen a tamaño completo)

Screenshot shows replacing Project Name with Contact Manager.

Figura 05: Reemplazo de [ProjectName] por ContactManager (haga clic para ver la imagen a tamaño completo)

Una vez finalizados estos pasos, su aplicación web usará el nuevo diseño. La página de la figura 6 ilustra el aspecto de la aplicación Contact Manager con el diseño de octubre.

Screenshot shows Contact Manager with the October template.

Figura 06: ContactManager con la plantilla de octubre (haga clic para ver la imagen a tamaño completo)

Creación de un diseño de ASP.NET MVC personalizado

La Galería de diseños de ASP.NET MVC tiene una buena selección de diferentes estilos de diseño. La Galería le ofrece una forma sencilla de personalizar el aspecto de sus aplicaciones ASP.NET MVC. Y, por supuesto, la Galería tiene la gran ventaja de ser completamente gratuita.

Sin embargo, puede que necesite crear un diseño completamente único para su sitio web. En ese caso, tiene sentido trabajar con una empresa de diseño de sitios web. Decidí adoptar este enfoque para el diseño de la aplicación Contact Manager.

Comprimí el Administrador de contactos de la iteración 1 y envié el proyecto a la empresa de diseño. No tenían Visual Studio (¡qué vergüenza!), pero eso no supuso ningún problema. Pudieron descargar Microsoft Visual Web Developer gratuitamente desde el sitio web de https://www.asp.net y abrir la aplicación Contact Manager en Visual Web Developer. En un par de días, habían producido el diseño de la figura 7.

Screenshot shows the ASP dot NET MVC Contact Manager Design.

Figura 07: El diseño del Administrador de contactos de ASP.NET MVC (haga clic para ver la imagen a tamaño completo)

El nuevo diseño constaba de dos archivos principales: un nuevo archivo de hoja de estilos en cascada y un nuevo archivo de página maestra de vista. Una página maestra de vistas contiene el diseño y el contenido compartido para las vistas en una aplicación de ASP.NET MVC. Por ejemplo, la página maestra de la vista incluye el encabezado, las pestañas de navegación y el pie de página que aparecen en la figura 7. He sobrescrito la página maestra de la vista Site.Master existente en la carpeta Views\Shared con el nuevo archivo Site.Master de la empresa de diseño,

La empresa de diseño también creó una nueva hoja de estilos en cascada y un conjunto de imágenes. Coloqué estos nuevos archivos en la carpeta Content y sobrescribí el archivo Site.css existente. Debe colocar todo el contenido estático en la carpeta Content.

Observe que el nuevo diseño del Administrador de contactos incluye imágenes para editar y eliminar contactos. Junto a cada contacto de la tabla HTML de contactos aparecerán las imágenes Editar y Eliminar.

Originalmente, estos vínculos que se representaban con el asistente HTML.ActionLink() de esta forma:

<td>
    <%= Html.ActionLink("Edit", "Edit", new { id=item.Id  }) %> |
    <%= Html.ActionLink("Delete", "Delete", new { id=item.Id  }) %> 
</td>

El método Html.ActionLink() no es compatible con imágenes (el método HTML codifica el texto del vínculo por motivos de seguridad). Por lo tanto, he sustituido las llamadas a Html.ActionLink() por llamadas a Url.Action() como ésta:

<td class="actions edit">
    <a href='<%= Url.Action("Edit", new {id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
</td>
<td class="actions delete">
    <a href='<%= Url.Action("Delete", new {id=item.Id}) %>'><img src="../../Content/Delete.png" alt="Delete" /></a>
</td>

El método Html.ActionLink() representa un hipervínculo HTML completo. El método Url.Action(), en cambio, representa solo la URL sin la etiqueta <a>.

Observe, además, que el nuevo diseño incluye tanto pestañas seleccionadas como no seleccionadas. Por ejemplo, en la figura 8, la pestaña Crear nuevo contacto está seleccionada y la pestaña Mis contactos no está seleccionada.

Screenshot shows selected and unselected tabs.

Figura 08: Pestañas seleccionadas y no seleccionadas (haga clic para ver la imagen a tamaño completo)

Para representar tanto las pestañas seleccionadas como las no seleccionadas, he creado un asistente HTML personalizado llamado MenuItemHelper. Este método asistente representa una etiqueta <li> o una etiqueta <li class="selected"> dependiendo de si el controlador y la acción actuales se corresponden con el nombre del controlador y la acción pasados al asistente. El código de MenuItemHelper se encuentra en la lista 1.

Lista 1: Helpers\MenuItemHelper.cs

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

namespace Helpers
{
    /// <summary>
    /// This helper method renders a link within an HTML LI tag.
    /// A class="selected" attribute is added to the tag when
    /// the link being rendered corresponds to the current
    /// controller and action.
    /// 
    /// This helper method is used in the Site.Master View 
    /// Master Page to display the website menu.
    /// </summary>
    public static class MenuItemHelper
    {
        public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
        {
            string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

            var builder = new TagBuilder("li");
            
            // Add selected class
            if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
                builder.AddCssClass("selected");            
            
            // Add link
            builder.InnerHtml = helper.ActionLink(linkText, actionName, controllerName);

            // Render Tag Builder
            return builder.ToString(TagRenderMode.Normal);
        }

    }
}

El MenuItemHelper usa la clase TagBuilder internamente para compilar la etiqueta HTML <li>. La clase TagBuilder es una clase utilitaria muy útil que puede usar siempre que necesite desarrollar una nueva etiqueta HTML. Incluye métodos para añadir atributos, añadir clases CSS, generar id. y modificar el HTML interno de la etiqueta.

Resumen

En esta iteración, mejoramos el diseño visual de nuestra aplicación ASP.NET MVC. En primer lugar, ha conocido la Galería de diseño de ASP.NET MVC. Ha aprendido a descargar plantillas de diseño gratuitas de la Galería de diseños de ASP.NET MVC que puede usar en sus aplicaciones ASP.NET MVC.

A continuación, explicamos cómo puede crear un diseño personalizado modificando el archivo de hoja de estilos en cascada y el archivo de página de vista maestra predeterminados. Para que fuera compatible con el nuevo diseño, tuvimos que hacer algunos cambios menores en nuestra aplicación Contact Manager. Por ejemplo, hemos agregado un nuevo asistente HTML llamado MenuItemHelper que muestra las pestañas seleccionadas y no seleccionadas.

En la siguiente iteración, abordamos el importantísimo tema de la validación. Agregamos código de validación a nuestra aplicación para que un usuario no pueda crear un nuevo contacto sin suministrar los valores requeridos, como el nombre y los apellidos de la persona.

AnteriorSiguiente