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

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.

Agregar una plantilla DateTime automática

En la primera parte de este tutorial, ha visto cómo puede agregar atributos al modelo para especificar explícitamente el formato y cómo puede especificar explícitamente la plantilla que se usa para representar el modelo. Por ejemplo, el atributo DisplayFormat en el código siguiente especifica explícitamente el formato de la propiedad ReleaseDate.

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

En el ejemplo siguiente, el atributo DataType, mediante la enumeración Date, especifica que se debe usar la plantilla de fecha para representar el modelo. Si no hay ninguna plantilla de fecha en el proyecto, se usa la plantilla de fecha integrada.

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

Sin embargo, ASP.MVC puede emparejar tipos coincidentes usando la convención sobre configuración, buscando una plantilla que coincida con el nombre de un tipo. Esto le permite crear una plantilla que da formato automáticamente a los datos sin usar ningún atributo o código. Para esta parte del tutorial, creará una plantilla que se aplica automáticamente a las propiedades del modelo de tipo DateTime. No es necesario usar un atributo u otra configuración para especificar que la plantilla debe usarse para representar todas las propiedades del modelo de tipo DateTime.

También aprenderá a personalizar la visualización de propiedades individuales o incluso de campos individuales.

Para empezar, vamos a quitar la información de formato existente y mostrar las fechas completas en la aplicación.

Abra el archivo Movie.cs y convierta en comentario el atributo DataType en la propiedad ReleaseDate:

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

Presione CTRL+F5 para ejecutar la aplicación.

Observe que la propiedad ReleaseDate ahora muestra la fecha y hora, ya que es el valor predeterminado cuando no se proporciona información de formato.

Agregar estilos CSS para probar nuevas plantillas

Antes de crear una plantilla para dar formato a las fechas, agregará algunas reglas de estilo CSS que puede aplicar a las nuevas plantillas. Esto le ayudará a comprobar que la página representada usa la nueva plantilla.

Abra el archivo Content\Site.cs y agregue las siguientes reglas CSS a la parte inferior del archivo:

/* Styles to test new editor and display templates.
----------------------------------------------------------*/
.loud-1 {
    font-weight: bold;
    color: Red;
}
.loud-2 {
    font-size:  2.0em;
    color:Green;
}
.loud-3 {
    font-style: italic;
    color: yellow;
    background-color: blue;
}

Agregar plantillas de visualización DateTime

Ahora puede crear la nueva plantilla. En la carpeta Views\Movies, cree una carpeta DisplayTemplates.

En la carpeta Views\Shared, cree una carpeta DisplayTemplates y una carpeta EditorTemplates.

Todos los controladores usarán las plantillas de visualización de la carpeta Views\Shared\DisplayTemplates. El controlador Movie solo usará las plantillas de visualización de la carpeta Views\Movie\DisplayTemplates. (Si una plantilla con el mismo nombre aparece en ambas carpetas, la plantilla de la carpeta Views\Movie\DisplayTemplates, es decir, la plantilla más específica, tiene prioridad para las vistas devueltas por el controlador Movie).

En el Explorador de soluciones, expanda la carpeta Views, expanda la carpeta Shared y, a continuación, haga clic con el botón secundario en la carpeta Views\Shared\DisplayTemplates.

Haga clic en Agregar y, a continuación, haga clic en Vista. Se abre el cuadro de diálogo Agregar vista.

En el cuadro Nombre de vista, escriba DateTime. (Debe usar este nombre para que coincida con el nombre del tipo).

Active la casilla Crear como vista parcial. Asegúrese de que las casillas Usar un diseño o una página maestra y Crear una vista fuertemente tipada no están activadas.

Haga clic en Agregar. Se crea una plantilla DateTime.cshtml en Views\Shared\DisplayTemplates.

En la imagen siguiente se muestra la carpeta Vistas en el Explorador de soluciones después de crear las plantillas de visualización y editor DateTime.

Abra el archivo Views\Shared\DisplayTemplates\DateTime.cshtml y agregue el siguiente marcado, que usa el método String.Format para dar formato a la propiedad como una fecha sin la hora. (El formato {0:d} especifica el formato de fecha corta).

@String.Format("{0:d}", Model.Date)

Repita este paso para crear una plantilla DateTime en la carpeta Views\Movie\DisplayTemplates. Use el código siguiente en el archivo Views\Movie\DisplayTemplates\DateTime.cshtml.

<span class="loud-1">   
@String.Format("{0:d}", Model.Date)
</span>

La clase CSS loud-1 hace que la fecha se muestre en texto rojo y en negrita. Ha agregado la clase CSS loud-1 como medida temporal para poder ver fácilmente cuándo se usa esta plantilla en particular.

Lo que ha hecho es crear y personalizar plantillas que ASP.NET usará para mostrar fechas. La plantilla más general (en la carpeta Views\Shared\DisplayTemplates) muestra una fecha corta simple. La plantilla específica del controlador Movie (en la carpeta Views\Movies\DisplayTemplates) muestra una fecha corta con formato de texto rojo en negrita.

Presione CTRL+F5 para ejecutar la aplicación. El explorador representa la vista Índice de la aplicación.

La propiedad ReleaseDate ahora muestra la fecha en una fuente roja en negrita sin la hora. Esto le ayuda a confirmar que el asistente con plantilla DateTime en la carpeta Views\Movies\DisplayTemplates está seleccionado en el asistente con plantilla DateTime en la carpeta compartida (Views\Shared\DisplayTemplates).

Ahora cambie el nombre del archivo Views\Movies\DisplayTemplates\DateTime.cshtml a Views\Movies\DisplayTemplates\LoudDateTime.cshtml.

Presione CTRL+F5 para ejecutar la aplicación.

Esta vez la propiedad ReleaseDate muestra una fecha sin la hora y sin la fuente roja en negrita. Esto muestra que una plantilla que tiene el nombre del tipo de datos (en este caso DateTime) se usa automáticamente para mostrar todas las propiedades del modelo de ese tipo. Después de cambiar el nombre del archivo DateTime.cshtml a LoudDateTime.cshtml, ASP.NET ya no encontró una plantilla en la carpeta Views\Movies\DisplayTemplates, por lo que usó la plantilla DateTime.cshtml de la carpeta *Views\Movies\Shared*.

(La coincidencia de plantillas no distingue entre mayúsculas y minúsculas, por lo que podría haber creado el nombre del archivo de plantilla con cualquier mayúscula o minúscula. Por ejemplo, DATETIME.cshtml, datetime.cshtml y DaTeTiMe.cshtml coincidirían con el tipo DateTime).

Para revisar: en este punto, el campo ReleaseDate se muestra usando la plantilla Views\Movies\DisplayTemplates\DateTime.cshtml, que muestra los datos con un formato de fecha corta, pero, por lo demás, no agrega ningún formato especial.

Usar UIHint para especificar una plantilla para mostrar

Si la aplicación web tiene muchos campos DateTime y, de forma predeterminada, desea mostrar todos o la mayoría de ellos en formato de solo fecha, la plantilla DateTime.cshtml es un buen enfoque. Pero, ¿y si tiene unas cuantas fechas en las que desea mostrar la fecha y la hora completas? No hay problema. Puede crear una plantilla adicional y usar el atributo UIHint para especificar el formato de fecha y hora completas. A continuación, puede aplicar de forma selectiva esa plantilla. Puede usar el atributo UIHint en el nivel de modelo o puede especificar la plantilla dentro de una vista. En esta sección, verá cómo usar el atributo UIHint para cambiar de forma selectiva el formato de algunas instancias de campos de fecha y hora.

Abra el archivo Views\Movies\DisplayTemplates\LoudDateTime.cshtml y reemplace el código existente por lo siguiente:

<span class="loud-2">   
@Model.ToString()
</span>

Esto hace que se muestren la fecha y la hora completas y agrega la clase CSS que hace que el texto sea verde y grande.

Abra el archivo Movie.cs y agregue el atributo UIHint a la propiedad ReleaseDate, como se muestra en el ejemplo siguiente:

[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }

Esto indica a ASP.NET MVC que cuando muestre la propiedad ReleaseDate (específicamente, y no cualquier objeto DateTime), debe usar la plantilla LoudDateTime.cshtml.

Presione CTRL+F5 para ejecutar la aplicación.

Observe que la propiedad ReleaseDate ahora muestra la fecha y hora en una fuente verde y grande.

Vuelva al atributo UIHint en el archivo Movie.cs y coméntelo para que no se use la plantilla LoudDateTime.cshtml. Vuelva a ejecutar la aplicación. La fecha de lanzamiento no se muestra en grande y verde. Esto comprueba que la plantilla Views\Shared\DisplayTemplates\DateTime.cshtml se usa en las vistas Índice y Detalles.

Como se mencionó anteriormente, también puede aplicar una plantilla en una vista, lo que le permite aplicar la plantilla a una instancia individual de algunos datos. Abra la vista Views\Movies\Details.cshtml. Agregue "LoudDateTime" como segundo parámetro de la llamada Html.DisplayFor para el campo ReleaseDate. El código completo es similar al siguiente:

<div class="display-label">ReleaseDate</div>
<div class="display-field">
    @Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>

Esto especifica que la plantilla LoudDateTime debe usarse para mostrar la propiedad del modelo, independientemente de los atributos que se apliquen al modelo.

Presione CTRL+F5 para ejecutar la aplicación.

Compruebe que la página de índice de películas usa la plantilla Views\Shared\DisplayTemplates\DateTime.cshtml (negrita roja) y que la página Movie\Details usa la plantilla Views\Movies\DisplayTemplates\LoudDateTime.cshtml (grande y verde).

En la sección siguiente, creará una plantilla para un tipo complejo.

AnteriorSiguiente