Usar el calendario emergente Datepicker de HTML5 y jQuery UI con ASP.NET MVC: parte 4 (2023)

por Rick Anderson

Este tutorial le enseñará los conceptos básicos de cómo trabajar con plantillas de editor, plantillas para mostrar y el calendario emergente datepicker de jQuery UI en una aplicación web de ASP.NET MVC.

Agregar una plantilla para editar fechas

En esta sección, creará una plantilla para editar fechas que se aplicarán cuando ASP.NET MVC muestre la interfaz de usuario para editar las propiedades del modelo marcadas con la enumeración Date del atributo DataType . La plantilla solo representará la fecha; no se mostrará la hora. En la plantilla, usará el calendario emergente Datepicker de jQuery UI para proporcionar una manera de editar fechas.

Para empezar, abra el archivo Movie.cs y agregue el atributo DataType con la enumeración Date a la ReleaseDate propiedad , como se muestra en el código siguiente:

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

Este código hace que el ReleaseDate campo se muestre sin el tiempo en las plantillas de presentación y en las plantillas de edición. Si la aplicación contiene una plantilla date.cshtml en la carpeta Views\Shared\EditorTemplates o en la carpeta Views\Movies\EditorTemplates , esa plantilla se usará para representar cualquier DateTime propiedad durante la edición. De lo contrario, el sistema de plantillas integrado ASP.NET mostrará la propiedad como una fecha.

Presione CTRL+F5 para ejecutar la aplicación. Seleccione un vínculo de edición para comprobar que el campo de entrada de la fecha de lanzamiento solo muestra la fecha.

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

Haga clic en Agregary, a continuación, haga clic en Ver. Se muestra el cuadro de diálogo Agregar vista .

En el cuadro Nombre de vista , escriba "Date".

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

Haga clic en Agregar. Se crea la plantilla Views\Shared\EditorTemplates\Date.cshtml .

Agregue el código siguiente a la plantilla Views\Shared\EditorTemplates\Date.cshtml .

@model DateTimeUsing Date Template@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()), new { @class = "datefield", type = "date" })

La primera línea declara que el modelo es un DateTime tipo. Aunque no es necesario declarar el tipo de modelo en las plantillas de edición y visualización, es un procedimiento recomendado para obtener la comprobación en tiempo de compilación del modelo que se pasa a la vista. (Otra ventaja es que, a continuación, obtiene IntelliSense para el modelo en la vista en Visual Studio). Si no se declara el tipo de modelo, ASP.NET MVC lo considera un tipo dinámico y no hay ninguna comprobación de tipos en tiempo de compilación. Si declara que el modelo es un DateTime tipo, se convierte en fuertemente tipado.

La segunda línea es simplemente el marcado HTML literal que muestra "Usar plantilla de fecha" antes de un campo de fecha. Usará esta línea temporalmente para comprobar que se está usando esta plantilla de fecha.

La siguiente línea es un asistente Html.TextBox que representa un input campo que es un cuadro de texto. El tercer parámetro del asistente usa un tipo anónimo para establecer la clase del cuadro datefield de texto en y el tipo en date. (Dado que class es un objeto reservado en C#, debe usar el @ carácter para escapar el class atributo en el analizador de C#).

El date tipo es un tipo de entrada HTML5 que permite a los exploradores compatibles con HTML5 representar un control de calendario HTML5. Más adelante, agregará algo de JavaScript para enlazar el datepicker de jQuery al Html.TextBox elemento mediante la datefield clase .

Presione CTRL+F5 para ejecutar la aplicación. Puede comprobar que la ReleaseDate propiedad de la vista de edición usa la plantilla de edición porque la plantilla muestra "Using Date Template" justo antes del ReleaseDate cuadro de entrada de texto, como se muestra en esta imagen:

En el explorador, vea el origen de la página. (Por ejemplo, haga clic con el botón derecho en la página y seleccione Ver origen). En el ejemplo siguiente se muestra parte del marcado de la página, que ilustra los class atributos y type en el HTML representado.

<input class="datefield" data-val="true" data-val-required="Date is required" id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Vuelva a la plantilla Views\Shared\EditorTemplates\Date.cshtml y quite el marcado "Using Date Template". Ahora la plantilla completada tiene este aspecto:

@model DateTime@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()), new { @class = "datefield", type = "date" })

Adición de un calendario emergente datepicker de la interfaz de usuario de jQuery mediante NuGet

En esta sección, agregará el calendario emergente datepicker de jQuery UI a la plantilla de edición de fecha. La biblioteca de interfaz de usuario de jQuery proporciona compatibilidad con animaciones, efectos avanzados y widgets personalizables. Se basa en la biblioteca de JavaScript de jQuery. El calendario emergente datepicker facilita y natural la entrada de fechas con un calendario en lugar de escribir una cadena. El calendario emergente también limita a los usuarios a fechas legales: la entrada de texto normal para una fecha le permitiría escribir algo como 2/33/1999 ( 33 de febrero de 1999), pero el calendario emergente datepicker de la interfaz de usuario de jQuery no lo permitirá.

En primer lugar, debe instalar las bibliotecas de interfaz de usuario de jQuery. Para ello, usará NuGet, que es un administrador de paquetes que se incluye en las versiones SP1 de Visual Studio 2010 y Visual Web Developer.

En Visual Web Developer, en el menú Herramientas , seleccione Administrador de paquetes NuGet y, después, administrar paquetes NuGet.

Nota: Si el menú Herramientas no muestra el comando Administrador de paquetes NuGet , debe instalar NuGet siguiendo las instrucciones de la página Instalar NuGet del sitio web de NuGet.

Si usa Visual Studio en lugar de Visual Web Developer, en el menú Herramientas , seleccione Administrador de paquetes NuGet y, a continuación, seleccione Agregar referencia de paquete de biblioteca.

En el cuadro de diálogo MVCMovie - Administrar paquetes NuGet , haga clic en la pestaña En línea de la izquierda y, a continuación, escriba "jQuery.UI" en el cuadro de búsqueda. Seleccione j Query UI Widgets:Datepicker y, a continuación, seleccione el botón Instalar .

NuGet agrega estas versiones de depuración y versiones mínimas de jQuery UI Core y el selector de fecha de la interfaz de usuario de jQuery al proyecto:

• jquery.ui.core.js
• jquery.ui.core.min.js
• jquery.ui.datepicker.js
• jquery.ui.datepicker.min.js

Nota: Las versiones de depuración (los archivos sin la extensión .min.js ) son útiles para la depuración, pero en un sitio de producción, incluiría solo las versiones minificadas.

Para usar realmente el selector de fecha de jQuery, debe crear un script de jQuery que enlazará el widget de calendario a la plantilla de edición. En Explorador de soluciones, haga clic con el botón derecho en la carpeta Scripts y seleccione Agregar, nuevo elemento y, a continuación, en Archivo JScript. Asigne al archivo el nombre DatePickerReady.js.

Agregue el código siguiente al archivo DatePickerReady.js :

$(function () { $(".datefield").datepicker(); });

Si no está familiarizado con jQuery, esta es una breve explicación de lo que hace: la primera línea es la función "jQuery ready", a la que se llama cuando se han cargado todos los elementos DOM de una página. La segunda línea selecciona todos los elementos DOM que tienen el nombre datefieldde clase y, a continuación, invoca la datepicker función para cada uno de ellos. (Recuerde que agregó la datefield clase a la plantilla Views\Shared\EditorTemplates\Date.cshtml anteriormente en el tutorial).

A continuación, abra el archivo Views\Shared\_Layout.cshtml . Debe agregar referencias a los siguientes archivos, que son todos necesarios para poder usar el selector de fechas:

• Content/themes/base/jquery.ui.core.css
• Content/themes/base/jquery.ui.datepicker.css
• Content/themes/base/jquery.ui.theme.css
• jquery.ui.core.min.js
• jquery.ui.datepicker.min.js
• DatePickerReady.js

En el ejemplo siguiente se muestra el código real que debe agregar en la parte inferior del head elemento en el archivo Views\Shared\_Layout.cshtml .

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>

La sección completa head se muestra aquí:

<head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script></head>

El método auxiliar de contenido de dirección URL convierte la ruta de acceso al recurso en una ruta de acceso absoluta. Debe usar @URL.Content para hacer referencia correctamente a estos recursos cuando la aplicación se ejecuta en IIS.

Presione CTRL+F5 para ejecutar la aplicación. Seleccione un vínculo de edición y, a continuación, coloque el punto de inserción en el campo ReleaseDate . Se muestra el calendario emergente de la interfaz de usuario de jQuery.

Al igual que la mayoría de los controles jQuery, el datepicker le permite personalizarlo ampliamente. Para obtener información, consulte Personalización visual: Diseño de un tema de la interfaz de usuario de jQuery en el sitio de la interfaz de usuario de jQuery .

Compatibilidad con el control de entrada de fecha HTML5

A medida que más exploradores admiten HTML5, querrá usar la entrada HTML5 nativa, como el date elemento de entrada, y no usar el calendario de la interfaz de usuario de jQuery. Puede agregar lógica a la aplicación para usar automáticamente controles HTML5 si el explorador los admite. Para ello, reemplace el contenido del archivo DatePickerReady.js por lo siguiente:

if (!Modernizr.inputtypes.date) { $(function () { $(".datefield").datepicker(); });}

La primera línea de este script usa Modernizr para comprobar que se admite la entrada de fecha HTML5. Si no se admite, el selector de fecha de la interfaz de usuario de jQuery se enlaza en su lugar. (Modernizr es una biblioteca javaScript de código abierto que detecta la disponibilidad de implementaciones nativas de HTML5 y CSS3. Modernizr se incluye en cualquier nuevo ASP.NET proyectos de MVC que cree).

Después de realizar este cambio, puede probarlo mediante un explorador que admita HTML5, como Opera 11. Ejecute la aplicación con un explorador compatible con HTML5 y edite una entrada de película. El control de fecha HTML5 se usa en lugar del calendario emergente de la interfaz de usuario de jQuery:

Dado que las nuevas versiones de exploradores implementan HTML5 de forma incremental, un buen enfoque por ahora es agregar código a su sitio web que admite una amplia variedad de compatibilidad con HTML5. Por ejemplo, a continuación se muestra un script de DatePickerReady.js más sólido que permite que el sitio admita exploradores que solo admitan parcialmente el control de fecha HTML5.

if (!Modernizr.inputtypes.date) { $(function () { $("input[type='date']") .datepicker() .get(0) .setAttribute("type", "text"); })}

Este script selecciona elementos HTML5 input de tipo date que no admiten completamente el control de fecha HTML5. Para esos elementos, enlaza el calendario emergente de la interfaz de usuario de jQuery y, a continuación, cambia el type atributo de date a text. Al cambiar el atributo de date a text, se elimina la type compatibilidad parcial con fecha HTML5. Puede encontrar un script de DatePickerReady.js aún más sólido en JSFIDDLE.

Agregar fechas que aceptan valores NULL a las plantillas

Si usa una de las plantillas de fecha existentes y pasa una fecha nula, obtendrá un error en tiempo de ejecución. Para que las plantillas de fecha sean más sólidas, las cambiará para controlar valores NULL. Para admitir fechas que aceptan valores NULL, cambie el código de Views\Shared\DisplayTemplates\DateTime.cshtml a lo siguiente:

@model Nullable<DateTime>@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

El código devuelve una cadena vacía cuando el modelo es NULL.

Cambie el código del archivo Views\Shared\EditorTemplates\Date.cshtml a lo siguiente:

@model Nullable<DateTime> @{ DateTime dt = DateTime.Now; if (Model != null) { dt = (System.DateTime) Model; } @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date" })}

Cuando se ejecuta este código, si el modelo no es null, se usa el valor del DateTime modelo. Si el modelo es null, se usa la fecha actual en su lugar.

Ajuste

En este tutorial se han tratado los conceptos básicos de ASP.NET asistentes con plantillas y se muestra cómo usar el calendario emergente datepicker de jQuery UI en una aplicación ASP.NET MVC. Para obtener más información, pruebe estos recursos:

• Para obtener información sobre jQuery UI, consulte jQuery UI.
• Para obtener información sobre cómo localizar el control datepicker, vea UI/Datepicker/Localization.
• Para obtener más información sobre las plantillas de ASP.NET MVC, consulte la serie de blog de Brad Wilson sobre ASP.NET plantillas de MVC 2. Aunque la serie se escribió para ASP.NET MVC 2, el material todavía se aplica a la versión actual de ASP.NET MVC.