Uso del calendario emergente de selección de fechas de jQuery UI y HTML5 con ASP.NET MVC: Parte 1

por Rick Anderson

En este tutorial aprenderá los conceptos básicos para trabajar con plantillas de editor, plantillas de visualización y el calendario emergente de selección de fechas de jQuery UI en una aplicación web ASP.NET MVC.

En este tutorial aprenderá los conceptos básicos para trabajar con plantillas de editor, plantillas de visualización y el calendario emergente de selección de fechas de interfaz de usuario de jQuery en una aplicación web ASP.NET MVC. Para este tutorial, puede usar Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer"), que es una versión gratuita de Microsoft Visual Studio, o puede usar Visual Studio 2010 SP1 si ya lo tiene.

Antes de empezar, asegúrese de que ha instalado los requisitos previos que se enumeran a continuación. Para instalarlos todos, haga clic en el vínculo siguiente: Instalador de plataforma web. Como alternativa, puede instalar individualmente el software necesario mediante los vínculos siguientes:

• Requisitos previos de Visual Studio Web Developer Express SP1
• Actualización de herramientas de ASP.NET MVC 3
• SQL Server Compact 4.0 (compatibilidad con runtime y herramientas)

Si usa Visual Studio 2010 en lugar de Visual Web Developer, para instalar los requisitos previos haga clic en el vínculo siguiente: Requisitos previos de Visual Studio 2010.

En este tutorial se supone que ha completado el tutorialIntroducción a MVC 3 o que tiene conocimientos sobre el desarrollo de ASP.NET MVC. Este tutorial comienza con el proyecto completado del tutorial Introducción a MVC 3.

Lo que creará

Agregará plantillas (en concreto, plantillas de edición y visualización) a la sencilla aplicación de listado de películas que se ha creado en el tutorial Introducción a MVC 3. También agregará un calendario emergente de selector de fechas de jQuery UI para simplificar el proceso de escribir fechas. En la captura de pantalla siguiente se muestra la aplicación modificada con el calendario emergente de selector de fechas jQuery UI.

Habilidades que aprenderá

Aprenderá lo siguiente:

• Procedimiento para usar atributos del espacio de nombres DataAnnotations para controlar el formato de los datos cuando se muestran y cuándo están en modo de edición.
• Procedimiento para crear plantillas (de edición y visualización) para controlar el formato de los datos.
• Procedimiento para agregar el selector de fechas de jQuery UI como una manera de escribir campos de fecha.

Introducción

Si aún no tiene la aplicación movie-listing del proyecto de inicio, descárguela:

• Descarga.
• En el Explorador de Windows, haga clic con el botón derecho en el archivo MvcMovie.zip y seleccione Propiedades.
• En el cuadro de diálogo Propiedades de MvcMovie.zip, seleccione Desbloquear. (El desbloqueo evita recibir una advertencia de seguridad que se produce al intentar usar un archivo .zip que ha descargado de la web).

Haga clic con el botón derecho en el archivo MvcMovie.zip y seleccione Extraer todo para descomprimir el archivo. En Visual Web Developer o Visual Studio 2010, abra el archivo MvcMovieCS_TU.sln.

En el Explorador de soluciones, haga doble clic en Views\Shared\_Layout.cshtml para abrirlo. Cambie el encabezado H1 de MVC Movie App a Movie jQuery. Presione CTRL+F5 para ejecutar la aplicación y haga clic en la pestaña Inicio, que le llevará al método Index del controlador de película. Para probar la aplicación, seleccione el vínculo Editar y el vínculo Detalles de una de las películas. Observe que en las vistas Índice, Edición y Detalles, la fecha de lanzamiento y el precio tienen un formato agradable:

El formato de la fecha y el precio es el resultado de usar el atributo DisplayFormat en las propiedades de la clase Movie.

Abra el archivo Movie.cs y convierta en comentario el atributo DisplayFormat de las propiedades ReleaseDate y Price. La clase Movie resultante tiene este aspecto:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

    //  [DisplayFormat(DataFormatString = "{0:d}")]
    public DateTime ReleaseDate { get; set; }

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    //[DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Presione CTRL+F5 de nuevo para ejecutar la aplicación y seleccione la pestaña Inicio para ver la lista de películas. Esta vez la fecha de lanzamiento muestra la fecha y hora, y el campo de precio ya no muestra el símbolo de moneda. El cambio en la clase Movie ha anulado el formato agradable que ha visto antes, pero lo corregirá en un momento.

Uso del atributo DataType de DataAnnotations para especificar el tipo de datos

Reemplace el atributo DisplayFormat convertido en comentario de la propiedad ReleaseDate por el atributo DataType mediante la enumeración Date. Vuelva a reemplazar el atributo DisplayFormat de la propiedad Price por el atributo DataType, pero esta vez mediante la enumeración Currency. Este es el aspecto del código completado:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Ejecute la aplicación. Ahora las propiedades de fecha de lanzamiento y precio tienen el formato correcto (es decir, los formatos de fecha y moneda adecuados). El atributo DataType proporciona metadatos de tipo para las plantillas integradas de ASP.NET MVC para que los campos se representen en el formato correcto. El uso del atributo DataType es preferible usar el atributo DisplayFormat que originalmente estaba en el código, ya que el atributo DataType hace que el modelo sea más limpio y flexible para fines como los de internacionalización.

En la sección siguiente verá cómo crear plantillas personalizadas para mostrar campos de fecha.

Siguiente