Uso del calendario popup datepicker dell'interfaccia utente HTML5 e jQuery con ASP.NET MVC - Parte 4

Articolo
06/16/2023

Questa esercitazione illustra le nozioni di base su come usare i modelli di editor, i modelli di visualizzazione e il calendario popup della datapicker dell'interfaccia utente jQuery in un'applicazione Web ASP.NET MVC.

Aggiunta di un modello per la modifica delle date

In questa sezione verrà creato un modello per la modifica delle date che verranno applicate quando ASP.NET MVC visualizza l'interfaccia utente per la modifica delle proprietà del modello contrassegnate con l'enumerazione Date dell'attributo DataType . Il modello eseguirà il rendering solo della data; l'ora non verrà visualizzata. Nel modello si userà il calendario popup datepicker dell'interfaccia utente jQuery per fornire un modo per modificare le date.

Per iniziare, aprire il file Movie.cs e aggiungere l'attributo DataType con l'enumerazione Date alla ReleaseDate proprietà, come illustrato nel codice seguente:

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

Questo codice causa la visualizzazione del campo senza l'ora ReleaseDate nei modelli di visualizzazione e nei modelli di modifica. Se l'applicazione contiene un modello date.cshtml nella cartella Views\Shared\EditorTemplates o nella cartella Views\Movies\EditorTemplates, tale modello verrà usato per eseguire il rendering di qualsiasi DateTime proprietà durante la modifica. In caso contrario, il sistema di ASP.NET templating predefinito visualizzerà la proprietà come data.

Premere CTRL+F5 per eseguire l'applicazione. Selezionare un collegamento di modifica per verificare che il campo di input per la data di rilascio mostri solo la data.

In Esplora soluzioni espandere la cartella Visualizzazioni, espandere la cartella Condivisa e quindi fare clic con il pulsante destro del mouse sulla cartella Views\Shared\EditorTemplates.

Fare clic su Aggiungi e quindi su Visualizza. Viene visualizzata la finestra di dialogo Aggiungi visualizzazione .

Nella casella Nome visualizzazione digitare "Date".

Selezionare la casella di controllo Crea come visualizzazione parziale . Assicurarsi che le caselle di controllo Usa un layout o un master e Crea una visualizzazione fortemente tipizzata non siano selezionate.

Scegliere Aggiungi. Viene creato il modello Views\Shared\EditorTemplates\Date.cshtml .

Aggiungere il codice seguente al modello Views\Shared\EditorTemplates\Date.cshtml .

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

La prima riga dichiara il modello come tipo DateTime . Anche se non è necessario dichiarare il tipo di modello in modelli di modifica e visualizzazione, è una procedura consigliata in modo da ottenere il controllo in fase di compilazione del modello passato alla visualizzazione. Un altro vantaggio è che si ottiene IntelliSense per il modello nella visualizzazione in Visual Studio. Se il tipo di modello non è dichiarato, ASP.NET MVC lo considera un tipo dinamico e non esiste un controllo dei tipi di compilazione. Se si dichiara il modello come tipo DateTime , diventa fortemente tipizzato.

La seconda riga è solo il markup HTML letterale che visualizza "Using Date Template" prima di un campo date. Questa riga verrà temporaneamente usata per verificare che questo modello di data venga usato.

La riga successiva è un helper Html.TextBox che esegue il rendering di un input campo che è una casella di testo. Il terzo parametro per l'helper usa un tipo anonimo per impostare la classe per la casella di testo su datefield e il tipo su date. Poiché class è un oggetto riservato in C#, è necessario usare il @ carattere per eseguire l'escape dell'attributo nell'parser class C#.

Il date tipo è un tipo di input HTML5 che consente ai browser con riconoscimento HTML5 di eseguire il rendering di un controllo calendario HTML5. Più avanti si aggiungerà JavaScript per collegare il datepicker jQuery all'elemento Html.TextBox usando la datefield classe .

Premere CTRL+F5 per eseguire l'applicazione. È possibile verificare che la ReleaseDate proprietà nella visualizzazione di modifica usi il modello di modifica perché il modello visualizza "Using Date Template" appena prima della ReleaseDate casella di input di testo, come illustrato in questa immagine:

Nel browser visualizzare l'origine della pagina. Ad esempio, fare clic con il pulsante destro del mouse sulla pagina e selezionare Visualizza origine. L'esempio seguente mostra alcuni dei markup per la pagina, illustrando gli class attributi e type nel codice HTML di cui è stato eseguito il rendering.

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

Tornare al modello Views\Shared\EditorTemplates\Date.cshtml e rimuovere il markup "Using Date Template". Ora il modello completato è simile al seguente:

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

In questa sezione si aggiungerà il calendario popup datepicker dell'interfaccia utente jQuery al modello di modifica data. La libreria dell'interfaccia utente jQuery offre supporto per animazioni, effetti avanzati e widget personalizzabili. Si basa sulla libreria javaScript jQuery. Il calendario popup datepicker semplifica e naturale immettere le date usando un calendario anziché immettere una stringa. Il calendario popup limita anche gli utenti alle date legali: la voce di testo normale per una data consente di immettere qualcosa come 2/33/1999 ( 33 febbraio 1999), ma il calendario popup datepicker dell'interfaccia utente jQuery non consente questo.

Prima di tutto, è necessario installare le librerie dell'interfaccia utente jQuery. A tale scopo, si userà NuGet, ovvero una gestione pacchetti inclusa nelle versioni di SP1 di Visual Studio 2010 e Visual Web Developer.

In Visual Web Developer dal menu Strumenti selezionare Gestione pacchetti NuGet e quindi selezionare Gestisci pacchetti NuGet.

Nota: se il menu Strumenti non visualizza il comando Gestione pacchetti NuGet , è necessario installare NuGet seguendo le istruzioni nella pagina Installazione di NuGet del sito Web NuGet.

Se si usa Visual Studio anziché Visual Web Developer, dal menu Strumenti selezionare Gestione pacchetti NuGet e quindi aggiungi riferimento al pacchetto libreria.

Nella finestra di dialogo MVCMovie - Gestisci pacchetti NuGet fare clic sulla scheda Online a sinistra e quindi immettere "jQuery.UI" nella casella di ricerca. Selezionare j Query UI Widgets:Datepicker, quindi selezionare il pulsante Installa .

NuGet aggiunge queste versioni di debug e versioni minificate di jQuery UI Core e la selezione data dell'interfaccia utente jQuery al progetto:

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

Nota: le versioni di debug (i file senza estensione min.js) sono utili per il debug, ma in un sito di produzione è necessario includere solo le versioni minificate.

Per usare effettivamente il selettore di date jQuery, è necessario creare uno script jQuery che collega il widget del calendario al modello di modifica. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Script e scegliere Aggiungi, quindi Nuovo elemento e quindi file JScript. Assegnare al file DatePickerReady.js.

Aggiungere il codice seguente al file DatePickerReady.js :

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

Se non si ha familiarità con jQuery, ecco una breve spiegazione di ciò che fa: la prima riga è la funzione "jQuery ready", che viene chiamata quando tutti gli elementi DOM in una pagina sono stati caricati. La seconda riga seleziona tutti gli elementi DOM con il nome datefielddella classe , quindi richiama la datepicker funzione per ognuna di esse. Tenere presente che la datefield classe è stata aggiunta al modello Views\Shared\EditorTemplates\Date.cshtml precedentemente nell'esercitazione.

Aprire quindi il file Views\Shared\_Layout.cshtml . È necessario aggiungere riferimenti ai file seguenti, che sono tutti necessari in modo che sia possibile usare la selezione data:

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

Nell'esempio seguente viene illustrato il codice effettivo da aggiungere nella parte inferiore dell'elemento head nel file 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 sezione completa head è illustrata qui:

<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>

Il metodo helper contenuto URL converte il percorso della risorsa in un percorso assoluto. È necessario usare @URL.Content per fare riferimento correttamente a queste risorse quando l'applicazione è in esecuzione in IIS.

Premere CTRL+F5 per eseguire l'applicazione. Selezionare un collegamento di modifica, quindi inserire il punto di inserimento nel campo ReleaseDate . Viene visualizzato il calendario popup dell'interfaccia utente jQuery.

Come la maggior parte dei controlli jQuery, datepicker consente di personalizzarla in modo esteso. Per informazioni, vedere Personalizzazione visiva: progettazione di un tema dell'interfaccia utente jQuery nel sito dell'interfaccia utente jQuery .

Supporto del controllo input data HTML5

Come altri browser supportano HTML5, si vuole usare l'input HTML5 nativo, ad esempio l'elemento di input e non usare il calendario dell'interfaccia date utente jQuery. È possibile aggiungere logica all'applicazione per usare automaticamente i controlli HTML5 se il browser li supporta. A tale scopo, sostituire il contenuto del file diDatePickerReady.js con quanto segue:

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

La prima riga di questo script usa Modernizr per verificare che l'input della data HTML5 sia supportato. Se non è supportato, il selettore data dell'interfaccia utente jQuery viene invece collegato. Modernizr è una libreria JavaScript open source che rileva la disponibilità di implementazioni native di HTML5 e CSS3. Modernizr è incluso in qualsiasi nuovo ASP.NET progetti MVC creati.

Dopo aver apportato questa modifica, è possibile testarla usando un browser che supporta HTML5, ad esempio Opera 11. Eseguire l'applicazione usando un browser compatibile con HTML5 e modificare una voce di film. Il controllo data HTML5 viene usato invece del calendario popup dell'interfaccia utente jQuery:

Poiché le nuove versioni dei browser implementano HTML5 in modo incrementale, un buon approccio per il momento consiste nell'aggiungere codice al sito Web che supporta un'ampia gamma di supporto HTML5. Ad esempio, uno script diDatePickerReady.jspiù affidabile è illustrato di seguito che consente al sito di supportare browser che supportano solo parzialmente il controllo data HTML5.

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

Questo script seleziona gli elementi HTML5 input di tipo date che non supportano completamente il controllo data HTML5. Per questi elementi, associa il calendario popup dell'interfaccia utente di jQuery e quindi modifica l'attributo type da date a text. Modificando l'attributo type da date a text, il supporto della data HTML5 parziale viene eliminato. Uno script DatePickerReady.js ancora più affidabile è disponibile in JSFIDDLE.

Aggiunta di date nullable ai modelli

Se si usa uno dei modelli di data esistenti e si passa una data Null, verrà visualizzato un errore di run-time. Per rendere i modelli di data più affidabili, è necessario modificarli per gestire i valori Null. Per supportare le date nullable, modificare il codice in Views\Shared\DisplayTemplates\DateTime.cshtml impostando quanto segue:

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

Il codice restituisce una stringa vuota quando il modello è Null.

Modificare il codice nel file Views\Shared\EditorTemplates\Date.cshtml nel modo seguente:

@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"  })
}

Quando questo codice viene eseguito, se il modello non è Null, viene usato il valore del DateTime modello. Se il modello è Null, viene invece utilizzata la data corrente.

Ritorno a capo

In questa esercitazione sono state illustrate le nozioni di base di ASP.NET helper con modelli e viene illustrato come usare il calendario popup datepicker dell'interfaccia utente jQuery in un'applicazione MVC ASP.NET. Per altre informazioni, provare queste risorse:

Per informazioni sull'interfaccia utente di jQuery, vedere l'interfaccia utente di jQuery.
Per informazioni su come localizzare il controllo datepicker, vedere Interfaccia utente/Datepicker/Localizzazione.
Per altre informazioni sui modelli ASP.NET MVC, vedere la serie di blog di Brad Wilson su ASP.NET modelli MVC 2. Anche se la serie è stata scritta per ASP.NET MVC 2, il materiale si applica ancora per la versione corrente di ASP.NET MVC.

Indietro

Condividi tramite

Aggiunta di un modello per la modifica delle date

Supporto del controllo input data HTML5

Aggiunta di date nullable ai modelli

Ritorno a capo

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Uso del calendario popup datepicker dell'interfaccia utente HTML5 e jQuery con ASP.NET MVC - Parte 4

Aggiunta di un modello per la modifica delle date

Aggiunta di un calendario popup datepicker dell'interfaccia utente jQuery con NuGet

Supporto del controllo input data HTML5

Aggiunta di date nullable ai modelli

Ritorno a capo

Commenti e suggerimenti

Risorse aggiuntive