Novedades de ASP.NET MVC 4

  • Artículo

por el equipo de Web Camps

Descarga del kit de entrenamiento de Web Camps

ASP.NET MVC 4 es un marco para compilar aplicaciones web escalables basadas en estándares con patrones de diseño bien establecidos y la eficacia de ASP.NET y .NET Framework. Esta nueva y cuarta versión del marco se centra en facilitar el desarrollo de aplicaciones web para dispositivos móviles.

Para empezar, al crear un proyecto de ASP.NET MVC 4 ahora hay una plantilla de proyecto de aplicación móvil que puede usar para compilar una aplicación independiente específicamente para dispositivos móviles. Además, ASP.NET MVC 4 se integra con jQuery Mobile mediante un paquete NuGet jQuery.Mobile.MVC. jQuery Mobile es un marco basado en HTML5 para desarrollar aplicaciones web compatibles con todas las plataformas de dispositivos móviles populares, como Windows Phone, iPhone, Android, etc. Pero si necesita especialización, ASP.NET MVC 4 también le permite ofrecer vistas diferentes para diferentes dispositivos y proporcionar optimizaciones específicas del dispositivo.

En este laboratorio práctico, comenzará con la plantilla de proyecto de ASP.NET MVC 4 "Aplicación de Internet" para crear una aplicación de galería de imágenes. Mejorará progresivamente la aplicación con jQuery Mobile y las nuevas características de ASP.NET MVC 4 para que sea compatible con diferentes dispositivos móviles y exploradores web de escritorio. También obtendrá información sobre las nuevas recetas de código para la generación de código y cómo ASP.NET MVC 4 facilita la escritura de métodos de acción asincrónicos mediante la compatibilidad con los tipos de valor devuelto de Task <ActionResult>.

Nota:

Todos los fragmentos de código y el código de ejemplo se incluyen en el Kit de entrenamiento de Web Camps, disponible en Versiones de Microsoft-Web/WebCampTrainingKit. El proyecto específico de este laboratorio está disponible en Novedades de Web Forms en ASP.NET 4.5.

Objetivos

En este laboratorio práctico, aprenderá a:

  • Aprovechar las mejoras de las plantillas de proyecto de ASP.NET MVC, incluida la nueva plantilla de proyecto de aplicación para dispositivos móviles
  • Usar el atributo de ventanilla HTML5 y las consultas de medios CSS para mejorar la visualización en dispositivos móviles
  • Usar jQuery Mobile para mejoras progresivas y para crear una interfaz de usuario web optimizada para entrada táctil
  • Crear vistas específicas para dispositivos móviles
  • Usar el componente view-switcher para alternar entre las vistas para dispositivos móviles y de escritorio en la aplicación
  • Crear controladores asincrónicos mediante la compatibilidad con tareas

Requisitos previos

Debe tener los siguientes elementos para completar este laboratorio:

Configuración

A lo largo del documento de laboratorio, se le pedirá que inserte bloques de código. Para mayor comodidad, la mayoría de este código se proporciona como fragmentos de código de Visual Studio, a los que puede acceder desde Visual Studio para no tener que agregarlo manualmente.

Para instalar los fragmentos de código:

  1. Abra la ventana del explorador de Windows y vaya a la carpeta Source\Setup del laboratorio.
  2. Haga doble clic en el archivo Setup.cmd de esta carpeta para instalar los fragmentos de código de Visual Studio.

Si no tiene experiencia con los fragmentos de código de Visual Studio y quiere aprender a utilizarlos, puede consultar el apéndice de este documento "Apéndice A: Uso de fragmentos de código".

Ejercicios

Este laboratorio práctico incluye los siguientes ejercicios:

  1. Nuevas plantillas de proyecto ASP.NET MVC 4
  2. Creación de la aplicación web de galería de fotos
  3. Adición de compatibilidad con dispositivos móviles
  4. Uso de controladores asincrónicos

Nota:

Cada ejercicio va acompañado de una carpeta End que contiene la solución resultante que debe obtener después de completar los ejercicios. Puede usar esta solución como guía si necesita ayuda adicional para trabajar con los ejercicios.

Tiempo estimado para completar este laboratorio: 60 minutos.

Ejercicio 1: Nuevas plantillas de proyecto ASP.NET MVC 4

En este ejercicio, explorará las mejoras de las plantillas de proyecto de ASP.NET MVC 4. Además de la plantilla Aplicación de Internet, ya presente en MVC 3, esta versión ahora incluye una plantilla independiente para aplicaciones móviles. En primer lugar, verá algunas características relevantes de cada una de las plantillas. Después, trabajará en la representación de la página correctamente en las distintas plataformas mediante el enfoque adecuado.

Tarea 1: Exploración de la plantilla Aplicación de Internet

  1. Abra Visual Studio.

  2. Seleccione el comando de menú Archivo | Nuevo | Proyecto. En el cuadro de diálogo Nuevo proyecto, seleccione la plantilla Visual C#| Web en el árbol del panel izquierdo y elijaAplicación web ASP.NET MVC 4. Asigne el nombrePhotoGallery al proyecto, seleccione una ubicación (o deje el valor predeterminado) y haga clic en Aceptar.

    Nota:

    Más adelante personalizará la solución PhotoGallery de ASP.NET MVC 4 que va a crear.

    Creating a new project

    Creación de un proyecto

  3. En el cuadro de diálogo Nuevo proyecto de ASP.NET MVC 4, seleccione la plantilla de proyecto Aplicación de Internet y haga clic en Aceptar. Asegúrese de que ha seleccionado Razor como motor de vista.

    Creating a new ASP.NET MVC 4 Internet Application

    Creación de una aplicación de Internet ASP.NET MVC 4

    Nota:

    La sintaxis de Razor se ha introducido en ASP.NET MVC 3. Su objetivo es minimizar el número de caracteres y pulsaciones de tecla necesarios en un archivo, lo que permite un flujo de trabajo de programación rápido y fluido. Razor aprovecha las aptitudes existentes del lenguaje C# / VB (u otros), y ofrece una sintaxis de marcado de plantilla que permite un flujo de trabajo de construcción HTML impresionante.

  4. Presione F5 para ejecutar la solución y ver las plantillas renovadas. Puede consultar las características siguientes:

    Plantillas de estilo moderno

    Las plantillas se han renovado, lo que proporciona estilos más modernos.

    ASP.NET MVC 4 restyled templates

    Plantillas rediseñadas de ASP.NET MVC 4

    New Contact page

    Nueva página de contacto

    Representación adaptable

    Consulte el cambio de tamaño de la ventana del explorador y observe cómo el diseño de página se adapta dinámicamente al nuevo tamaño de ventana. Estas plantillas usan la técnica de representación adaptable para representarse correctamente en plataformas móviles y de escritorio sin ninguna personalización.

    ASP.NET MVC 4 project template in different browser sizes

    Plantilla de proyecto de ASP.NET MVC 4 en diferentes tamaños de explorador

    Interfaz de usuario más completa con JavaScript

    Otra mejora de las plantillas de proyecto predeterminadas es el uso de JavaScript para proporcionar un código JavaScript más interactivo. Los vínculos de inicio de sesión y registro que se usan en la plantilla ejemplifican cómo usar las validaciones de jQuery para validar los campos de entrada del lado cliente.

    jQuery Validation

    Validación de jQuery

    Nota:

    Observe las dos secciones de inicio de sesión, en la primera, puede iniciar sesión con una cuenta registrada del sitio y, en la segunda sección, también puede iniciar sesión con otro servicio de autenticación como Google (deshabilitado de forma predeterminada).

  5. Cierre el explorador para detener el depurador y volver a Visual Studio.

  6. Abra el archivo AuthConfig.cs ubicado en la carpeta App_Start.

  7. Quite el comentario de la última línea para registrar el cliente de Google para la autenticación de OAuth.

    public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

    Nota:

    Observe que puede habilitar fácilmente la autenticación mediante cualquier servicio OpenID u OAuth como Facebook, Twitter, Microsoft, etc.

  8. Presione F5 para ejecutar la solución y vaya a la página de inicio de sesión.

  9. Seleccione el servicio Google para iniciar sesión.

    Selecting the log in service

    Selección del servicio de inicio de sesión

  10. Inicie sesión con la cuenta de Google.

  11. Permita que el sitio (localhost) recupere información de la cuenta de Google.

  12. Por último, tendrá que registrarse en el sitio para asociar la cuenta de Google.

Associate your Google account

Asociación de la cuenta de Google 13. Cierre el explorador para detener el depurador y volver a Visual Studio. 14. Ahora explore la solución para consultar otras características nuevas introducidas por ASP.NET MVC 4 en la plantilla de proyecto.

The ASP.NET MVC 4 Internet Application Project Template

Plantilla de proyecto de aplicación de Internet ASP.NET MVC 4

  • Marcado HTML 5

    Examine las vistas de plantilla para ver el nuevo marcado de tema.

    New template, using Razor and HTML5 markup About.cshtml.

    Nueva plantilla, mediante el marcado Razor y HTML5 (About.cshtml).

  • Bibliotecas de JavaScript actualizadas

    La plantilla predeterminada de ASP.NET MVC 4 ahora incluye KnockoutJS, un marco MVVM de JavaScript que le permite crear aplicaciones web enriquecidas y altamente adaptables mediante JavaScript y HTML. Como en MVC 3, las bibliotecas de jQuery y jQuery UI también se incluyen en ASP.NET MVC 4.

    Nota:

    Puede obtener más información sobre la biblioteca KnockOutJS en este vínculo: [http://learn.knockoutjs.com/](http://learn.knockoutjs.com/). Además, puede obtener información sobre jQuery y jQuery UI en [http://docs.jquery.com/](http://docs.jquery.com/).

Tarea 2: Exploración de la plantilla Aplicación para dispositivos móviles

ASP.NET MVC 4 facilita el desarrollo de sitios web para exploradores de dispositivos móviles y tabletas. Esta plantilla tiene la misma estructura de aplicación que la plantilla Aplicación de Internet (observe que el código del controlador es prácticamente idéntico), pero su estilo se ha modificado para la representación correcta en dispositivos móviles basados en entrada táctil.

  1. Seleccione el comando de menú Archivo | Nuevo | Proyecto. En el cuadro de diálogo Nuevo proyecto, seleccione la plantilla Visual C#| Web en el árbol del panel izquierdo y elijaAplicación web ASP.NET MVC 4. Asigne el nombre PhotoGallery.Mobile al proyecto, seleccione una ubicación (o deje la predeterminada), seleccione "Agregar a la solución" y haga clic en Aceptar.

  2. En el cuadro de diálogo Nuevo proyecto de ASP.NET MVC 4, seleccione la plantilla de proyecto Aplicación para dispositivos móviles y haga clic en Aceptar. Asegúrese de que ha seleccionado Razor como motor de vista.

    Creating a new ASP.NET MVC 4 Mobile Application

    Creación de una aplicación para dispositivos móviles ASP.NET MVC 4

  3. Ahora puede explorar la solución y consultar algunas de las nuevas características introducidas por la plantilla de solución ASP.NET MVC 4 para dispositivos móviles:

    • Biblioteca jQuery Mobile

      La plantilla de proyecto Aplicación para dispositivos móviles incluye la biblioteca de jQuery Mobile, que es una biblioteca de código abierto para la compatibilidad con exploradores móviles. jQuery Mobile aplica mejoras progresivas a los exploradores móviles que admiten CSS y JavaScript. La mejora progresiva permite a todos los exploradores mostrar el contenido básico de una página web, mientras que solo permite que los exploradores más eficaces muestren el contenido enriquecido. Los archivos JavaScript y CSS, incluidos en el estilo jQuery Mobile, ayudan a los exploradores móviles a ajustar el contenido en la pantalla sin realizar ningún cambio en el marcado de página.

      jQuery-mobile-library-included-in-the-template

      Biblioteca jQuery Mobile incluida en la plantilla

    • Marcado basado en HTML5

      Mobile-application-template-using-HTML5-markup

      Plantilla de aplicación para dispositivos móviles con marcado HTML5 (Login.cshtml e index.cshtml)

  4. Presione F5 para ejecutar la solución.

  5. Abra el emulador de Windows Phone 7.

  6. En la pantalla de inicio del teléfono, abra Internet Explorer. Consulte la dirección URL donde se ha iniciado la aplicación de escritorio y vaya a esa dirección URL desde el teléfono (por ejemplo, http://localhost:[PortNumber]/).

  7. Ahora puede escribir la página de inicio de sesión o consultar la página Acerca de. Observe que el estilo del sitio web se basa en la nueva aplicación Metro para dispositivos móviles. La plantilla de proyecto ASP.NET MVC 4 se muestra correctamente en los dispositivos móviles, y se asegura de que todos los elementos de la página sean visibles y estén habilitados. Observe que los vínculos del encabezado son lo suficientemente grandes como para hacer clic en ellos o pulsarlos.

    Project template pages in a mobile device

    Páginas de plantilla de proyecto en un dispositivo móvil

  8. La nueva plantilla también usa la etiqueta meta Viewport. La mayoría de los exploradores para dispositivos móviles definen un ancho de ventana del explorador virtual o "ventanilla", que es mucho mayor que el ancho real del dispositivo móvil. Esto permite que los exploradores para dispositivos móviles muestren toda la página web dentro de la pantalla virtual. La etiqueta meta Viewport permite a los desarrolladores web establecer el ancho, el alto y la escala del área del explorador en los dispositivos móviles . La plantilla ASP.NET MVC 4 para aplicaciones móviles establece la ventanilla en el ancho del dispositivo ("width=device-width") en la plantilla de diseño (Views\Shared_Layout.cshtml), de modo que todas las páginas tengan su ventanilla establecida en el ancho de pantalla del dispositivo. Observe que la etiqueta meta Viewport no cambiará la vista predeterminada del explorador.

  9. Abra _Layout.cshtml, ubicado en la carpeta Views | Shared y convierta en comentario de la etiqueta meta Viewport. Ejecute la aplicación, si aún no se ha abierto y compruebe las diferencias.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

The site after commenting the viewport meta tag

El sitio después de convertir en comentario la etiqueta meta de ventanilla 10. En Visual Studio, presione MAYÚS + F5 para detener la depuración de la aplicación. 11. Quite la marca de comentario de la etiqueta meta de ventanilla.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

Tarea 3: Uso de la representación adaptable

En esta tarea, aprenderá otro método para representar correctamente una página web en dispositivos móviles y exploradores web al mismo tiempo sin ninguna personalización. Ya ha usado la etiqueta meta Viewport con un propósito similar. Ahora conocerá otro método eficaz: la representación adaptable.

La representación adaptable es una técnica que usa consultas multimedia de CSS3 para personalizar el estilo aplicado a una página. Las consultas multimedia definen condiciones dentro de una hoja de estilos y agrupan los estilos CSS bajo una determinada condición. El estilo solo se aplica a los objetos declarados cuando se cumple la condición.

La flexibilidad proporcionada por la técnica de representación adaptable permite cualquier personalización para mostrar el sitio en diferentes dispositivos. Puede definir tantos estilos como quiera en una sola hoja de estilos sin escribir código lógico para elegir el estilo. Por tanto, es una manera muy ordenada de adaptar los estilos de página, ya que reduce la cantidad de código duplicado y lógica con fines de representación. Por otro lado, el consumo de ancho de banda aumentaría, ya que el tamaño de los archivos CSS podría crecer marginalmente.

Con la técnica de representación adaptable, el sitio se mostrará correctamente, independientemente del explorador. Pero debe considerar si la carga adicional de ancho de banda es un problema.

Nota:

El formato básico de una consulta multimedia es: @media[Ámbito: todos | portátil | impresión | proyección | pantalla] ([propiedad:valor] y ... [propiedad:valor])

Ejemplos de consultas multimedia: >@media all and (max-width: 1000px) and (min-width: 700px) {}: para todas las resoluciones entre 700px y 1000px.

@media screen and (min-width: 400px) and (max-width: 700px) { ... }: solo para pantallas. La resolución debe estar entre 400 y 700px.

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }: para dispositivos portátiles (móviles y dispositivos), y pantallas. El ancho mínimo debe ser mayor que 20em.

Puede encontrar más información sobre esto en el sitio de W3C.

Ahora explorará cómo funciona la representación adaptable y mejorará la legibilidad de la plantilla de sitio web predeterminada de ASP.NET MVC 4.

  1. Abra la solución PhotoGallery.sln que ha creado en la tarea 1 y seleccione el proyecto PhotoGallery. Presione F5 para ejecutar la solución.

  2. Cambie el tamaño del ancho del explorador y establezca las ventanas a la mitad o a menos de un cuarto de su tamaño original. Observe lo que sucede con los elementos del encabezado: algunos no aparecerán en el área visible del encabezado.

  3. Abra el archivo Site.css desde el Explorador de soluciones de Visual Studio, ubicado en la carpeta de proyecto Content. Presione CTRL + F para abrir la búsqueda integrada de Visual Studio y escriba @media para buscar la consulta multimedia de CSS.

    La condición de consulta multimedia definida en esta plantilla funciona de esta manera: cuando el tamaño de la ventana del explorador es inferior a 850 px, las reglas CSS aplicadas son las definidas dentro de este bloque multimedia.

    Locating the media query

    Búsqueda de la consulta multimedia

  4. Reemplace el valor del atributo max-width establecido en 850 px por 10px, para deshabilitar la representación adaptable y presione CTRL + S para guardar los cambios. Vuelva al explorador y presione CTRL + F5 para actualizar la página con los cambios realizados. Observe las diferencias en ambas páginas al ajustar el ancho de la ventana.

    El estilo The page is applying the <span class=@media a la izquierda y a la derecha, el estilo se omite" title="En la imagen de la izquierda, la página aplica el estilo @media; en la derecha,el estilo se omite" />

    A la izquierda, la página aplica el @media estilo, a la derecha, se omite el estilo

    Compruebe ahora lo que sucede en los dispositivos móviles:

    Estilo In the left, the page is applying the <span class=@media, en la derecha se omite el estilo" title="A la izquierda, la página aplica el estilo @media; en la derecha se omite" />

    A la izquierda, la página aplica el @media estilo, a la derecha, se omite el estilo

    Aunque observará que los cambios cuando se representa la página en un explorador web no son muy significativos, cuando se usa un dispositivo móvil, las diferencias se vuelven más obvias. En el lado izquierdo de la imagen, puede ver que el estilo personalizado ha mejorado la legibilidad.

    La representación adaptable se puede usar en muchos más escenarios, lo que facilita la aplicación de estilos condicionales a un sitio web y resuelve problemas de estilo comunes con un enfoque ordenado.

    La etiqueta meta Viewport y las consultas multimedia de CSS no son específicas de ASP.NET MVC 4 y puede aprovechar estas características en cualquier aplicación web.

  5. En Visual Studio, presione MAYÚS + F5 para detener la depuración de la aplicación.

En este ejercicio, trabajará en una aplicación Galería de fotos para mostrar fotos. Empezará con la plantilla de proyecto ASP.NET MVC 4 y, después, agregará una característica para recuperar fotos de un servicio y las mostrará en la página principal.

En el ejercicio siguiente, actualizará esta solución para mejorar la forma en que se muestra en dispositivos móviles.

Tarea 1: Creación de un servicio de fotos ficticio

En esta tarea, creará un servicio de fotos ficticio para recuperar el contenido que se mostrará en la galería. Para ello, agregará un nuevo controlador que simplemente devolverá un archivo JSON con los datos de cada foto.

  1. Abra Visual Studio si aún no se ha abierto.

  2. Seleccione el comando de menú Archivo | Nuevo | Proyecto. En el cuadro de diálogo Nuevo proyecto, seleccione la plantilla Visual C#| Web en el árbol del panel izquierdo y elijaAplicación web ASP.NET MVC 4. Asigne el nombrePhotoGallery al proyecto, seleccione una ubicación (o deje el valor predeterminado) y haga clic en Aceptar. Como alternativa, puede seguir trabajando desde la solución Aplicación de Internet de ASP.NET MVC 4 existente del Ejercicio 1 y omitir el paso siguiente.

  3. En el cuadro de diálogo Nuevo proyecto de ASP.NET MVC 4, seleccione la plantilla de proyecto Aplicación de Internet y haga clic en Aceptar. Asegúrese de que ha seleccionado Razor como motor de vistas.

  4. En el Explorador de soluciones, haga clic con el botón derecho en la carpeta App_Data del proyecto y seleccione Agregar | Elemento existente. Vaya a la carpeta Source\Assets\App_Data de este laboratorio y agregue el archivo Photos.json.

  5. Cree un controlador con el nombre PhotoController. Para ello, haga clic con el botón derecho en la carpeta Controllers, vaya a Agregar y seleccione Controlador. Complete el nombre del controlador, deje la plantilla Controlador MVC vacío y haga clic en Agregar.

    Adding the PhotoController

    Adición de PhotoController

  6. Reemplace el método Index por la siguiente acción Gallery y devuelva el contenido del archivo JSON que ha agregado recientemente al proyecto.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4 - Ejemplo 02: acción Gallery)

    public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}

  7. Presione F5 para ejecutar la solución y, después, vaya a la siguiente dirección URL para probar el servicio de fotos simulado: http://localhost:[port]/photo/gallery (el valor [puerto] depende del puerto actual en el que se haya iniciado la aplicación). La solicitud a esta dirección URL debe recuperar el contenido del archivo Photos.json.

    Testing the mocked photo service

    Prueba del servicio de fotos simulado

En una implementación real, podría usar ASP.NET Web API para implementar el servicio Galería de fotos. ASP.NET Web API es un marco que facilita la creación de servicios HTTP disponibles para una amplia variedad de clientes, entre los que se incluyen exploradores y dispositivos móviles. ASP.NET Web API es una plataforma ideal para compilar aplicaciones de RESTful en .NET Framework.

Tarea 2: Representación de la galería de fotos

En esta tarea, actualizará la página Inicio para mostrar la galería de fotos mediante el servicio ficticio que ha creado en la primera tarea de este ejercicio. Agregará archivos de modelo y actualizará las vistas de la galería.

  1. En Visual Studio, presione MAYÚS + F5 para detener la depuración de la aplicación.

  2. Cree la clase Photo en la carpeta Models. Para ello, haga clic con el botón derecho en la carpeta Models, seleccione Agregar y haga clic en Clase. Después, establezca el nombre en Photo.cs y haga clic en Agregar.

  3. Agregue los siguientes métodos a la clase Photo.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 02: modelo Photo)

    public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

  4. Abra el archivo HomeController.cs desde la carpeta Controladores.

  5. Agregue las siguientes instrucciones de uso.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 02: directivas Using de HomeController)

    using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

  6. Actualice la acción Index para usar HttpClient a fin de recuperar los datos de la galería y, después, use JavaScriptSerializer para deserializarlos en el modelo de vista.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4 - Ejemplo 02: acción Index)

    public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

  7. Abra el archivo Index.cshtml ubicado en la carpeta Views\Home y reemplace todo el contenido por el código siguiente.

    Este código recorre en bucle todas las fotos recuperadas del servicio y las muestra en una lista sin ordenar.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 02: lista de fotos)

    @model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

  8. En el Explorador de soluciones, haga clic con el botón derecho en la carpeta Content del proyecto y seleccione Agregar | Elemento existente. Vaya a la carpeta Source\Assets\Content de este laboratorio y agregue el archivo Site.css. Tendrá que confirmar su reemplazo. Si tiene el archivo Site.css abierto, también tendrá que confirmar que vuelva a cargar el archivo.

  9. Abra Explorador de archivos y copie toda la carpeta Photos ubicada en la carpeta Source\Assets de este laboratorio en la carpeta raíz del proyecto en el Explorador de soluciones.

  10. Ejecute la aplicación. Ahora debería ver la página principal en la que se muestran las fotos en la galería.

    Photo Gallery

    Galería de fotos

  11. En Visual Studio, presione MAYÚS + F5 para detener la depuración de la aplicación.

Ejercicio 3: Adición de compatibilidad con dispositivos móviles

Una de las actualizaciones clave de ASP.NET MVC 4 es la compatibilidad con el desarrollo para dispositivos móviles. En este ejercicio, explorará las nuevas características de ASP.NET MVC 4 para aplicaciones móviles mediante la extensión de la solución PhotoGallery que ha creado en el ejercicio anterior.

Tarea 1: Instalación de jQuery Mobile en una aplicación ASP.NET MVC 4

  1. Abra la solución Inicio ubicada en la carpeta Source/Ex3-MobileSupport/Begin/. De lo contrario, puede seguir utilizando la solución Final obtenida al completar el ejercicio anterior.

    1. Si ha abierto la solución Inicio proporcionada, deberá descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.

    2. En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.

    3. Por último, para compilar la solución, haga clic en Compilar | Compilar solución.

      Nota:

      Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.

  2. Para abrir la Consola del administrador de paquetes, haga clic en la opción de menú Herramientas>Administrador de paquetes NuGet>Consola del administrador de paquetes.

    Opening the NuGet Package Manager Console

    Apertura de la consola del Administrador de paquetes NuGet

  3. En la consola del Administrador de paquetes, ejecute el comando siguientes para instalar el paquete jQuery.Mobile.MVC.

    jQuery Mobile es una biblioteca de código abierto para crear una interfaz de usuario optimizada para la entrada táctil. El paquete NuGet jQuery.Mobile.MVC incluye asistentes para usar jQuery Mobile con una aplicación ASP.NET MVC 4.

    Nota:

    Al ejecutar el siguiente comando, descargará la biblioteca jQuery.Mobile.MVC desde Nuget.

    PM

    Install-Package jQuery.Mobile.MVC

    Este comando instala jQuery Mobile y algunos archivos auxiliares, incluidos los siguientes:

    • Views/Shared/_Layout.Mobile.cshtml: es un diseño basado en jQuery Mobile optimizado para una pantalla más pequeña. Cuando el sitio web recibe una solicitud de un explorador móvil, reemplazará el diseño original (_Layout.cshtml) por este.

    • Un componente de conmutador de vista: consta de la vista parcial Views/Shared/_ViewSwitcher.cshtml y el controlador ViewSwitcherController.cs. Este componente mostrará un vínculo en los exploradores móviles para permitir que los usuarios cambien a la versión de escritorio de la página.
      Photo Gallery project with mobile support

      Proyecto Galería de fotos con compatibilidad para dispositivos móviles

  4. Registre los paquetes Mobile. Para ello, abra el archivo Global.asax.cs y agregue la línea siguiente.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 03: registro de los paquetes Mobile)

    protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

  5. Ejecute la aplicación mediante un explorador web de escritorio.

  6. Abra el emulador de Windows Phone 7, ubicado en menú Inicio | Todos los programas | Windows Phone SDK 7.1 | Emulador de Windows Phone.

  7. En la pantalla de inicio del teléfono, abra Internet Explorer. Consulte la dirección URL donde se ha iniciado la aplicación y vaya a esa dirección URL desde el explorador del teléfono (por ejemplo, http://localhost:[PortNumber]/).

    Observará que la aplicación tendrá un aspecto diferente en el emulador de Windows Phone, ya que jQuery.Mobile.MVC ha creado recursos en el proyecto que muestran las vistas optimizadas para dispositivos móviles.

    Observe el mensaje en la parte superior del teléfono, en el que se muestra el vínculo que cambia a la vista Escritorio. Además, el diseño _Layout.Mobile.cshtml creado por el paquete que ha instalado incluye un diseño diferente en la aplicación.

    Nota:

    Hasta ahora, no hay ningún vínculo para volver a la vista para dispositivos móviles. Se incluirá en versiones posteriores.

    Mobile view of the Photo Gallery Home page

    Vista para dispositivos móviles de la página principal de Galería de fotos

  8. En Visual Studio, presione MAYÚS + F5 para detener la depuración de la aplicación.

Tarea 2: Creación de vistas para dispositivos móviles

En esta tarea, creará una versión para dispositivos móviles de la vista de índice con contenido adaptado para una mejor apariencia en los dispositivos móviles.

  1. Copie la vista Views\Home\Index.cshtml, péguela para crear una copia y cambie el nombre del nuevo archivo a Index.Mobile.cshtml.

  2. Abra la nueva vista Index.Mobile.cshtml creada y reemplace la etiqueta <ul> existente por este código. Al hacerlo, actualizará la etiqueta <ul> con anotaciones de datos de jQuery Mobile para usar los temas para dispositivos móviles de jQuery.

    <ul data-role="listview" data-inset="true" data-filter="true">

    Nota:

    Tenga en lo siguiente:

    • El atributo data-role establecido en listview representará la lista con los estilos listview.

    • El atributo data-inset establecido en true mostrará la lista con un borde redondeado y un margen.

    • El atributo data-filter establecido en true generará un cuadro de búsqueda.

    Puede obtener más información sobre las convenciones de jQuery Mobile en la documentación del proyecto: [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)

  3. Presione CTRL + S para guardar los cambios.

  4. Cambie al emulador de Windows Phone y actualice el sitio. Observe la nueva apariencia de la lista de la galería, así como el nuevo cuadro de búsqueda ubicado en la parte superior. Después, escriba una palabra en el cuadro de búsqueda (por ejemplo, Tulipanes) para iniciar una búsqueda en la galería de fotos.

    Gallery using listview style with filtering

    Galería con el estilo listview con filtrado

    En resumen, ha usado la receta View Mobilizer para crear una copia de la vista Índice con el sufijo "mobile". Este sufijo indica que ASP.NET MVC 4 que cada solicitud generada desde un dispositivo móvil usará esta copia del índice. Además, ha actualizado la versión para dispositivos móviles de la vista Índice a fin de usar jQuery Mobile para mejorar la apariencia del sitio en dispositivos móviles.

  5. Vuelva a Visual Studio y abra Site.Mobile.css ubicado en la carpeta Content.

  6. Corrija el posicionamiento del título de la foto para que se muestre en el lado derecho de la imagen. Para ello, agregue el código siguiente al archivo Site.Mobile.css.

    CSS

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

  7. Presione CTRL + S para guardar los cambios.

  8. Vuelva a cambiar al emulador de Windows Phone y actualice el sitio. Observe que el título de la foto ahora está correctamente colocado.

    Title positioned on the right side of the image

    Título situado en el lado derecho de la imagen

Tarea 3: Temas de jQuery Mobile

Cada diseño y widget de jQuery Mobile está diseñado en torno a un nuevo marco de CSS orientado a objetos que permite aplicar un tema de diseño visual unificado y completo a sitios y aplicaciones.

El tema predeterminado de jQuery Mobile incluye cinco muestras con letras asignadas (a, b, c, d, e) para referencia rápida.

En esta tarea, actualizará el diseño para dispositivos móviles a fin de usar un tema diferente al predeterminado.

  1. Vuelva a Visual Studio.

  2. Abra el archivo _Layout.Mobile.cshtml ubicado en Views\Shared.

  3. Busque el elemento div con el rol de datos establecido en "page" y actualice data-theme a "e".

    <div data-role="page" data-theme="e">

  4. Presione CTRL + S para guardar los cambios.

  5. Actualice el sitio en el emulador de Windows Phone y observe la nueva combinación de colores.

    Mobile layout with a different color scheme

    Diseño para dispositivos móviles con una combinación de colores diferente

Tarea 4: Uso del componente View-Switcher y las características de invalidación del explorador

Una convención para las páginas web optimizadas para dispositivos móviles es agregar un vínculo cuyo texto sea similar a una vista de escritorio o un modo de sitio completo que permite a los usuarios cambiar a una versión para escritorio de la página. El paquete jQuery.Mobile.MVC incluye un componente view-switcher de ejemplo para este propósito usado en la vista _Layout.Mobile.cshtml.

Link to switch to Desktop View

Vínculo para cambiar a vista de escritorio

El intercambiador de vistas usa una nueva característica denominada Invalidación del explorador. Esta característica permite a la aplicación tratar las solicitudes como procedentes de un explorador diferente (agente de usuario) del que realmente proceden.

En esta tarea, explorará la implementación de ejemplo de un componente view-switcher agregado por jQuery.Mobile.MVC y las nuevas características de invalidación del explorador en ASP.NET MVC 4.

  1. Vuelva a Visual Studio.

  2. Abra la vista _Layout.Mobile.cshtml ubicada en la carpeta Views\Shared y observe que se hace referencia al componente view-switcher como vista parcial.

    Mobile layout using View-Switcher component

    Diseño para dispositivos móviles mediante el componente View-Switcher

  3. Abra la vista parcial _ViewSwitcher.cshtml.

    La vista parcial usa el nuevo método ViewContext.HttpContext.GetOverriddenBrowser() para determinar el origen de la solicitud web y mostrar el vínculo correspondiente para cambiar a las vistas de escritorio o para dispositivos móviles.

    El método GetOverriddenBrowser devuelve una instancia de HttpBrowserCapabilitiesBase que se corresponde al agente de usuario establecido actualmente para la solicitud (real o invalidada). Puede utilizar este valor para obtener propiedades como IsMobileDevice.

    ViewSwitcher partial view

    Vista Parcial ViewSwitcher

  4. Abra la clase ViewSwitcherController.cs ubicada en la carpeta Controllers. Compruebe que el vínculo llama a la acción SwitchView en el componente ViewSwitcher y observe los nuevos métodos HttpContext.

    • El método HttpContext.ClearOverriddenBrowser() quita cualquier agente de usuario invalidado para la solicitud actual.

    • El método HttpContext.SetOverriddenBrowser() invalida el valor real del agente de usuario de la solicitud mediante el agente de usuario especificado.
      ViewSwitcher Controller
      Controlador ViewSwitcher

      La invalidación del explorador es una característica principal de ASP.NET MVC 4, que también está disponible incluso si no instala el paquete jQuery.Mobile.MVC. Pero esta característica solo afecta a la vista, el diseño y la vista parcial, y no afecta a ninguna de las características que dependen del objeto Request.Browser.

Tarea 5: Adición del conmutador de vistas en la vista de escritorio

En esta tarea, actualizará el diseño de escritorio para incluir el conmutador de vistas. Esto permitirá a los usuarios de dispositivos móviles volver a la vista para dispositivos móviles mientras examinan la vista de escritorio.

  1. Actualice el sitio en el emulador de Windows Phone.

  2. Haga clic en el vínculo Vista de escritorio de la parte superior de la galería. Observe que no hay ningún conmutador de vistas en la vista de escritorio para permitirle volver a la vista para dispositivos móviles.

  3. Vuelva a Visual Studio y abra la vista _Layout.cshtml.

  4. Busque la sección de inicio de sesión e inserte una llamada para representar la vista parcial _ViewSwitcher debajo de la vista parcial _LogOnPartial. Después, presione CTRL + S para guardar los cambios.

    <div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>

  5. Presione CTRL + S para guardar los cambios.

  6. Actualice la página en el emulador de Windows Phone y haga doble clic en la pantalla para acercarla. Observe que la página principal muestra ahora el vínculo Vista móvil que cambia de la vista para dispositivos móviles a la vista de escritorio.

    View Switcher rendered in desktop view

    Conmutador de vistas representado en la vista de escritorio

  7. Vuelva a la vista Móvil y vaya a la página Acerca (http://localhost[puerto]/Inicio/Acerca de). Observe que, incluso si no ha creado una vista About.Mobile.cshtml, la página Acerca de se muestra mediante el diseño móvil (_Layout.Mobile.cshtml).

    About page

    Página Acerca de

  8. Por último, abra el sitio en un explorador web de escritorio. Observe que ninguna de las actualizaciones anteriores ha afectado a la vista de escritorio.

    PhotoGallery desktop view

    Vista de escritorio de PhotoGallery

Tarea 6: Creación de modos de presentación

La nueva característica Modos de presentación permite a una aplicación seleccionar vistas en función del explorador que genera la solicitud. Por ejemplo, si un explorador de escritorio solicita la página principal, la aplicación puede usar la plantilla Views\Home\Index.cshtml. Después, si un explorador para dispositivos móviles solicita la página principal, la aplicación puede devolver la plantilla Views\Home\Index.mobile.cshtml.

En esta tarea, creará un diseño personalizado para dispositivos iPhone y tendrá que simular solicitudes desde dispositivos iPhone. Para ello, puede usar un emulador o simulador de iPhone (como Electric Mobile Simulator), o bien un explorador con complementos que modifiquen el agente de usuario. Para obtener instrucciones sobre cómo establecer la cadena del agente de usuario en un explorador Safari para emular un iPhone, vea Procedimiento para permitir que Safari finja que es IE en el blog de David Alison.

Tenga en cuenta que esta tarea es opcional y puede continuar por el laboratorio sin ejecutarla.

  1. En Visual Studio, presione MAYÚS + F5 para detener la depuración de la aplicación.

  2. Abra el archivo Global.asax.cs y agregue la siguiente instrucción using.

    using System.Web.WebPages;

  3. Agregue el siguiente código resaltado al método Application_Start.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 03: DisplayMode para iPhone)

    protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

Ha registrado una nueva instancia de DefaultDisplayMode denominada "iPhone", dentro de la lista estática DisplayModeProvider.Instance.Modes, que se comparará con cada solicitud entrante. Si la solicitud entrante contiene la cadena "iPhone", ASP.NET MVC buscarás las vistas cuyo nombre contenga el sufijo "iPhone". El parámetro 0 indica la especificidad del nuevo modo; por ejemplo, esta vista es más específica que la regla general ".mobile" que coincide con las solicitudes de dispositivos móviles.

Después de ejecutar este código, cuando un explorador de iPhone genera una solicitud, la aplicación usará el diseño Views\Shared\_Layout.iPhone.cshtml que creará en los pasos siguientes.

Nota:

Esta forma de probar la solicitud de iPhone se ha simplificado con fines de demostración y podría no funcionar según lo previsto para todas las cadena de agente de usuario iPhone (por ejemplo, la prueba distingue mayúsculas y minúsculas).

  1. Cree una copia del archivo _Layout.Mobile.cshtml en la carpeta Views\Shared y cambie el nombre de la copia a "_Layout.iPhone.cshtml".
  2. Abra _Layout.iPhone.cshtml que ha creado en el paso anterior.
  3. Busque el elemento div con el atributo data-role establecido en page y cambie el atributo data-theme a "a".
<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

Ahora tiene tres diseños en la aplicación ASP.NET MVC 4:

  1. _Layout.cshtml: diseño predeterminado usado para exploradores de escritorio.

  2. _Layout.mobile.cshtml: diseño predeterminado usado para dispositivos móviles.

  3. _Layout.iPhone.cshtml: diseño específico para dispositivos iPhone, con otra combinación de colores para diferenciarlo de _Layout.mobile.cshtml.

  4. Presione F5 para ejecutar la aplicación y examinar el sitio en el emulador de Windows Phone.

  5. Abra un simulador de iPhone (vea el Apéndice C para obtener instrucciones sobre cómo instalar y configurar un simulador de iPhone) y vaya al sitio también. Observe que cada teléfono usa la plantilla específica.

    Using-different-views-for-each-mobile-device2

    Uso de vistas diferentes para cada dispositivo móvil

Ejercicio 4: Uso de controladores asincrónicos

Microsoft .NET Framework 4.5 presenta nuevas características de lenguaje en C# y Visual Basic a fin de proporcionar una nueva base para la asincronía en la programación de .NET. Esta nueva base hace que la programación asincrónica sea similar a la sincrónica y aproximadamente igual de sencilla. Ahora puede escribir métodos de acción asincrónicos en ASP.NET MVC 4 mediante la clase AsyncController. Los métodos de acción asincrónicos se pueden utilizar para solicitudes de larga duración no relacionadas con la CPU. De este modo, el servidor web no se bloquea y se puede realizar trabajo en él mientras se procesa la solicitud. La clase AsyncController se usa normalmente para las llamadas de servicio web de larga duración.

En este ejercicio se explican los conceptos básicos de la operación asincrónica en ASP.NET MVC 4. Si quiere profundizar más, puede consultar el siguiente artículo: [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

Tarea 1: Implementación de un controlador asincrónico

  1. Abra la solución Inicio ubicada en la carpeta Source/Ex4-Async/Begin/. De lo contrario, puede seguir utilizando la solución Final obtenida al completar el ejercicio anterior.

    1. Si ha abierto la solución Inicio proporcionada, deberá descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.

    2. En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.

    3. Por último, para compilar la solución, haga clic en Compilar | Compilar solución.

      Nota:

      Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.

  2. Abra la clase HomeController.cs desde la carpeta Controllers.

  3. Agregue la siguiente instrucción using.

    using System.Threading.Tasks;

  4. Actualice la clase HomeController para heredar de AsyncController. Los controladores que se derivan de AsyncController permiten a ASP.NET procesar solicitudes asincrónicas y todavía pueden prestar servicio a métodos de acción sincrónicos.

    public class HomeController : AsyncController
{

  5. Agregue la palabra clave async al método Index y haga que devuelva el tipo Task<ActionResult>.

    public async Task<ActionResult> Index()
{
    ...

    Nota:

    async es una de las nuevas palabras clave que proporciona .NET Framework 4.5; indica al compilador que este método contiene código asincrónico. Un objeto Task representa una operación asincrónica que puede completarse en algún momento en el futuro.

  6. Reemplace la llamada a client.GetAsync() con la versión asincrónica completa mediante la palabra clave await, como se muestra a continuación.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 04: GetAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...

    Nota:

    En la versión anterior, ha usado la propiedad Result del objeto Task para bloquear el subproceso hasta que se devolviera el resultado (versión de sincronización).

    Al agregar la palabra clave await se indica al compilador que espere de forma asincrónica la tarea devuelta desde la llamada de método. Esto significa que el resto del código se ejecutará como una devolución de llamada solo después de que se complete el método esperado. Otra aspecto que tener en cuenta es que no es necesario cambiar el bloque try-catch para realizar este trabajo: las excepciones que se producen en primer o segundo plano se seguirán capturando sin ningún trabajo adicional mediante un controlador proporcionado por el marco.

  7. Para cambiar el código y continuar con la implementación asincrónica, reemplace las líneas por el nuevo código, como se muestra a continuación

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 04: ReadAsStringAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  8. Ejecute la aplicación. No observará cambios importantes, pero el código no bloqueará un subproceso del grupo de subprocesos, hará un mejor uso de los recursos del servidor y mejorará el rendimiento.

    Nota:

    Puede obtener más información sobre las nuevas características de programación asincrónica en el laboratorio "Programación asincrónica en .NET 4.5 con C# y Visual Basic" incluido en el Kit de entrenamiento de Visual Studio.

Tarea 2: Control de tiempos de espera con tokens de cancelación

Los métodos de acción asincrónicos que devuelven instancias de Task también pueden admitir tiempos de espera. En esta tarea, actualizará el código del método Index para controlar un escenario de tiempo de espera mediante un token de cancelación.

  1. Vuelva a Visual Studio y presione MAYÚS + F5 para detener la depuración.

  2. Agregue la siguiente instrucción using al archivo HomeController.cs.

    using System.Threading;

  3. Actualice la acción Index para recibir un argumento CancellationToken.

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

  4. Actualice la llamada a GetAsync para pasar el token de cancelación.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 04: SendAsync con CancellationToken)

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  5. Decore el método Index con un atributo AsyncTimeout establecido en 500 milisegundos y un atributo HandleError configurado para controlar TaskCanceledException mediante el redireccionamiento a una vista TimedOut.

    (Fragmento de código: Laboratorio de ASP.NET MVC 4: Ejemplo 04: atributos)

    [AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{

  6. Abra la clase PhotoController y actualice el método Gallery para retrasar la ejecución en 1000 milisegundos (1 segundo) para simular una tarea de larga duración.

    public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}

  7. Abra el archivo Web.config y habilite los errores personalizados mediante la adición del siguiente elemento.

    <system.web>
  <customErrors mode="On"></customErrors>
  ...

  8. Cree una vista en Views\Shared con el nombre TimedOut y use el diseño predeterminado. En el Explorador de soluciones, haga clic con el botón derecho en la carpeta Views\Shared y seleccione Agregar | Vista.

    Using different views for each mobile device

    Uso de vistas diferentes para cada dispositivo móvil

  9. Actualice el contenido de la vista TimedOut como se muestra a continuación.

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

<h2>Timed Out!</h2>

  10. Ejecute la aplicación y navegue a la URL raíz. Como ha agregado un valor Thread.Sleep de 1000 milisegundos, obtendrá un error de tiempo de espera, generado por el atributo AsyncTimeout y capturado por el atributo HandleError.

    Time-out exception handled

    Excepción de tiempo de espera controlada

Nota:

Además, puede implementar esta aplicación en sitios web de Windows Azure si sigue Apéndice D: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy.

Resumen

En este laboratorio práctico, ha visto algunas de las nuevas características de ASP.NET MVC 4. Se han descrito los siguientes conceptos:

  • Aprovechar las mejoras de las plantillas de proyecto de ASP.NET MVC, incluida la nueva plantilla de proyecto de aplicación para dispositivos móviles
  • Usar el atributo de ventanilla HTML5 y las consultas de medios CSS para mejorar la visualización en dispositivos móviles
  • Usar jQuery Mobile para mejoras progresivas y para crear una interfaz de usuario web optimizada para entrada táctil
  • Crear vistas específicas para dispositivos móviles
  • Usar el componente view-switcher para alternar entre las vistas para dispositivos móviles y de escritorio en la aplicación
  • Crear controladores asincrónicos mediante la compatibilidad con tareas

Apéndice A: Uso de fragmentos de código

Con los fragmentos de código, tendrá todo el código que necesite al alcance de la mano. El documento de laboratorio le indicará exactamente cuándo puede utilizarlos, como se muestra en la siguiente figura.

Using Visual Studio code snippets to insert code into your project

Uso de fragmentos de código de Visual Studio para insertar código en el proyecto

Para agregar un fragmento de código mediante el teclado (solo C#)

  1. Coloque el cursor donde quiera insertar el código.
  2. Empiece a escribir el nombre del fragmento de código (sin espacios ni guiones).
  3. Vea cómo IntelliSense muestra los nombres de los fragmentos de código coincidentes.
  4. Seleccione el fragmento de código correcto (o siga escribiendo hasta seleccionar todo el nombre del fragmento).
  5. Presione la tecla Tab dos veces para insertar el fragmento de código en la ubicación del cursor.

Start typing the snippet name

Empezar a escribir el nombre del fragmento de código

Press Tab to select the highlighted snippet

Presione la tecla Tab para seleccionar el fragmento de código resaltado

Press Tab again and the snippet will expand

Presione la tecla Tab de nuevo y el fragmento de código se expandirá

Para agregar un fragmento de código con el mouse (C#, Visual Basic y XML)

  1. Haga clic con el botón derecho en el lugar donde quiera insertar el fragmento de código.
  2. Seleccione Insertar fragmento de código seguido de Mis fragmentos de código.
  3. Haga clic en el fragmento de código correspondiente de la lista para seleccionarlo.

Right-click where you want to insert the code snippet and select Insert Snippet

Haga clic con el botón derecho en el lugar donde quiera insertar el fragmento de código y seleccione Insertar fragmento de código

Pick the relevant snippet from the list, by clicking on it

Haga clic en el fragmento de código correspondiente de la lista para seleccionarlo

Apéndice B: Instalación de Visual Studio Express 2012 para Web

Puede instalar Microsoft Visual Studio Express 2012 para Web u otra versión "Express" mediante el Instalador de plataforma web de Microsoft . En las instrucciones siguientes se le guía por los pasos necesarios para instalar Visual Studio Express 2012 para Web mediante Instalador de plataforma web de Microsoft.

  1. Vaya a [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Como alternativa, si ya ha instalado el Instalador de plataforma web, puede abrirlo y buscar el producto "Visual Studio Express 2012 para Web con el SDK de Windows Azure".

  2. Haga clic en Instalar ahora. Si no tiene Instalador de plataforma web se le redirigirá para descargarlo e instalarlo primero.

  3. Una vez que abra Instalador de plataforma web, haga clic en Instalar para iniciar la instalación.

    Install Visual Studio Express

    Instalación de Visual Studio Express

  4. Lea todas las licencias y términos de los productos, y haga clic en Acepto para continuar.

    Accepting licensing terms

    Aceptación de los términos de licencia

  5. Espere hasta que finalice el proceso de descarga e instalación.

    Progress of installation

    Progreso de la instalación

  6. Cuando finalice la instalación, haga clic en Finalizar.

    Completed Installation

    Instalación completada

  7. Haga clic en Salir para cerrar el Instalador de plataforma web.

  8. A fin de abrir Visual Studio Express para Web, vaya a la pantalla Inicio, empiece a escribir "VS Express" y, después, haga clic en el icono de VS Express para Web.

    VS Express for Web tile

    Icono de VS Express para Web

Apéndice C: Instalación de WebMatrix 2 e iPhone Simulator

Para ejecutar el sitio en un dispositivo iPhone simulado, puede usar la extensión de WebMatrix "Electric Mobile Simulator for the iPhone". Además, puede configurar la misma extensión para ejecutar el simulador desde Visual Studio 2012.

Tarea 1: Instalación de WebMatrix 2

  1. Vaya a [https://go.microsoft.com/?linkid=9809776](https://go.microsoft.com/?linkid=9810169). Como alternativa, si ya tiene instalado el Instalador de la Plataforma Web, puede abrirlo y buscar el producto "WebMatrix 2".

  2. Haga clic en Instalar ahora. Si no tiene Instalador de plataforma web se le redirigirá para descargarlo e instalarlo primero.

  3. Una vez que abra Instalador de plataforma web, haga clic en Instalar para iniciar la instalación.

    Install WebMatrix 2

    Instalación de WebMatrix 2

  4. Lea todas las licencias y términos de los productos, y haga clic en Acepto para continuar.

    Accepting the license terms

    Aceptación de los términos de licencia

  5. Espere hasta que finalice el proceso de descarga e instalación.

    Installation progress

    Progreso de la instalación

  6. Cuando finalice la instalación, haga clic en Finalizar.

    Installation completed

    Instalación completada

  7. Haga clic en Salir para cerrar el Instalador de plataforma web.

Tarea 2: Instalación de la extensión iPhone Simulator

  1. Ejecute WebMatrix y abra cualquier sitio web existente o cree uno.

  2. Haga clic en el botón Ejecutar de la cinta Inicio y seleccione Agregar nuevo.

    Adding new WebMatrix extension

    Adición de una nueva extensión de WebMatrix

  3. Seleccione iPhone Simulator y haga clic en Instalar.

    Browsing WebMatrix extensions

    Exploración de las extensiones de WebMatrix

  4. En los detalles del paquete, haga clic en Instalar para continuar con la instalación de la extensión.

    iPhone Simulator extension

    Extensión iPhone Simulator

  5. Lea y acepte el CLUF de la extensión.

    WebMatrix extension EULA

    CLUF de la extensión de WebMatrix

  6. Ahora, puede ejecutar el sitio web desde WebMatrix mediante la opción iPhone Simulator.

    Run using iPhone

    Ejecución mediante iPhone

Tarea 3: Configuración de Visual Studio 2012 para ejecutar iPhone Simulator

  1. Abra Visual Studio 2012 y abra cualquier sitio web o cree un proyecto.

  2. Haga clic en la flecha abajo del botón Ejecutar y seleccione Examinar con.

    Browse with

    Examinar con

  3. En el cuadro de diálogo "Examinar con", haga clic en Agregar.

  4. En el cuadro de diálogo "Agregar programa", use los siguientes valores:

    • Programa: C:\Users*{UsuarioActual}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (actualice la ruta de acceso según corresponda)

    • Argumentos: "1"

    • Nombre descriptivo: iPhone Simulator

      Add program

      Agregar programa para examinar

  5. Haga clic en Aceptar y cierre los cuadros de diálogo.

  6. Ahora puede ejecutar las aplicaciones web en el simulador de iPhone desde Visual Studio 2012.

    Browse with iPhone Simulator

    Examinar con el iPhone Simulator

Apéndice C: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy

En este apéndice se muestra cómo crear un sitio web desde el portal de administración de Windows Azure y publicar la aplicación que ha obtenido al seguir el laboratorio, y aprovechar la característica de publicación Web Deploy proporcionada por Windows Azure.

Tarea 1: Creación de un sitio web desde el portal de Windows Azure

  1. Vaya al Portal de administración de Windows Azure e inicie sesión con las credenciales de Microsoft asociadas a la suscripción.

    Nota:

    Con Windows Azure puede hospedar 10 sitios web de ASP.NET de forma gratuita y, después, escalar a medida que crezca el tráfico. Puede registrarse aquí.

    Log on to Windows Azure portal

    Inicio de sesión en el Portal de administración de Windows Azure

  2. Haga clic en Nuevo en la barra de comandos.

    Creating a new Web Site

    Creación de un sitio web

  3. Haga clic en Proceso | Sitio web. Después, seleccione la opción Creación rápida. Proporcione una dirección URL disponible para el nuevo sitio web y haga clic en Crear sitio web.

    Nota:

    Un sitio web de Windows Azure es el host para una aplicación web que se ejecuta en la nube que puede controlar y administrar. La opción Creación rápida permite implementar una aplicación web completada en el sitio web de Windows Azure desde fuera del portal. No incluye pasos para configurar una base de datos.

    Creating a new Web Site using Quick Create

    Creación de un sitio web mediante Creación rápida

  4. Espere hasta que se cree el Sitio web.

  5. Una vez que se cree el sitio web, haga clic en el vínculo bajo la columna Dirección URL. Compruebe que el nuevo sitio web funciona.

    Browsing to the new web site

    Navegación al nuevo sitio web

    Web site running

    Sitio web en ejecución

  6. Vuelva al portal y haga clic en el nombre del sitio web en la columna Nombre para mostrar las páginas de administración.

    Opening the web site management pages

    Apertura de las páginas de administración del sitio web

  7. En la página Panel, en la sección de vista rápida, haga clic en el vínculo Descargar perfil de publicación.

    Nota:

    El perfil de publicación contiene toda la información necesaria para publicar una aplicación web en un sitio web de Windows Azure para cada método de publicación habilitado. El perfil de publicación contiene las direcciones URL, las credenciales de usuario y las cadenas de base de datos necesarias para conectarse y autenticarse en cada uno de los puntos de conexión para los que está habilitado un método de publicación. Microsoft WebMatrix 2, Microsoft Visual Studio Express para Web y Microsoft Visual Studio 2012 admiten la lectura de perfiles de publicación para automatizar la configuración de estos programas para publicar aplicaciones web en sitios web de Windows Azure.

    Downloading the web site publish profile

    Descarga del perfil de publicación del sitio web

  8. Descargue el archivo de perfil de publicación en una ubicación conocida. Más adelante en este ejercicio verá cómo usar este archivo para publicar una aplicación web en un sitio web de Windows Azure desde Visual Studio.

    Saving the publish profile file

    Guardado del archivo de perfil de publicación

Tarea 2: Configuración del servidor de bases de datos

Si la aplicación usa bases de datos de SQL Server, deberá crear un servidor de SQL Database. Si quiere implementar una aplicación sencilla que no use SQL Server, puede omitir esta tarea.

  1. Necesitará un servidor de SQL Database para almacenar la base de datos de la aplicación. Puede ver los servidores de SQL Database de la suscripción en el Portal de administración de Windows Azure en Bases de datos SQL | Servidores | Panel del servidor. Si no tiene un servidor creado, puede crear uno mediante el botón Agregar de la barra de comandos. Anote el nombre y la dirección URL del servidor, el nombre de inicio de sesión de administrador y la contraseña, ya que los usará en las tareas siguientes. Aún no cree la base de datos, ya que se creará en una fase posterior.

    SQL Database Server Dashboard

    Panel del servidor SQL Database

  2. En la siguiente tarea probará la conexión de base de datos desde Visual Studio, por ese motivo debe incluir la dirección IP local en la lista de Direcciones IP permitidas. Para ello, haga clic en Configurar, seleccione la dirección IP de Dirección IP del cliente actual y péguela en los cuadros de texto Dirección IP de inicio y Dirección IP final, y haga clic en el botón add-client-ip-address-ok-button.

    Adding Client IP Address

    Adición de la dirección IP del cliente

  3. Una vez que se agregue la Dirección IP del cliente a la lista de direcciones IP permitidas, haga clic en Guardar para confirmar los cambios.

    Confirm Changes

    Confirmación de los cambios

Tarea 3: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy

  1. Vuelva a la solución ASP.NET MVC 4. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto de sitio web y seleccione Publicar.

    Publishing the Application

    Publicación del sitio web

  2. Importe el perfil de publicación que ha guardado en la primera tarea.

    Importing the publish profile

    Importación del perfil de publicación

  3. Haga clic en Validar conexión. Una vez que se complete la validación, haga clic en Siguiente.

    Nota:

    La validación se completa una vez que aparezca una marca de verificación verde junto al botón Validar conexión.

    Validating connection

    Validación de la conexión

  4. En la página Configuración, en la sección Bases de datos, haga clic en el botón situado junto al cuadro de texto de la conexión de base de datos (es decir, DefaultConnection).

    Web deploy configuration

    Configuración de Web Deploy

  5. Configure la conexión de base de datos de la siguiente manera:

    • En Nombre del servidor, escriba la dirección URL del servidor de SQL Database con el prefijo tcp:.

    • En Nombre de usuario escriba el nombre de inicio de sesión del administrador del servidor.

    • En Contraseña escriba la contraseña de inicio de sesión del administrador del servidor.

    • Escriba un nuevo nombre de base de datos, por ejemplo: MVC4SampleDB.

      Configuring destination connection string

      Configuración de la cadena de conexión de destino

  6. A continuación, haga clic en Aceptar. Cuando se le pida que cree la base de datos, haga clic en Sí.

    Creating the database

    Creación de la base de datos

  7. La cadena de conexión que usará para conectarse a SQL Database en Windows Azure se muestra en el cuadro de texto Conexión predeterminada. A continuación, haga clic en Siguiente.

    Connection string pointing to SQL Database

    Cadena de conexión que apunta a SQL Database

  8. En la página Vista previa, haga clic en Publicar.

    Publishing the web application

    Publicación de la aplicación web

  9. Cuando finalice el proceso de publicación, el explorador predeterminado abrirá el sitio web publicado.

    Application published to Windows Azure

    Aplicación publicada en Windows Azure