Uso del calendario popup datepicker dell'interfaccia utente HTML5 e jQuery con ASP.NET MVC - Parte 2
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 DateTime automatico
Nella prima parte di questa esercitazione è stato illustrato come aggiungere attributi al modello per specificare in modo esplicito la formattazione e come specificare in modo esplicito il modello usato per eseguire il rendering del modello. Ad esempio, l'attributo DisplayFormat nel codice seguente specifica in modo esplicito la formattazione per la ReleaseDate proprietà.
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }
Nell'esempio seguente l'attributo DataType , usando l'enumerazione Date , specifica che il modello di data deve essere usato per eseguire il rendering del modello. Se nel progetto non è presente alcun modello di data, viene usato il modello di data predefinito.
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
Tuttavia, ASP. MVC può eseguire la corrispondenza dei tipi usando la configurazione con convenzione over-configuration, cercando un modello che corrisponde al nome di un tipo. In questo modo è possibile creare un modello che formatta automaticamente i dati senza usare attributi o codice. Per questa parte dell'esercitazione si creerà un modello applicato automaticamente alle proprietà del modello di tipo DateTime. Non è necessario usare un attributo o un'altra configurazione per specificare che il modello deve essere usato per eseguire il rendering di tutte le proprietà del modello di tipo DateTime.
Si apprenderà anche un modo per personalizzare la visualizzazione delle singole proprietà o anche dei singoli campi.
Per iniziare, rimuovere le informazioni di formattazione esistenti e visualizzare le date complete nell'applicazione.
Aprire il file Movie.cs e commentare l'attributo DataType nella ReleaseDate proprietà:
// [DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
Premere CTRL+F5 per eseguire l'applicazione.
Si noti che la ReleaseDate proprietà visualizza ora sia la data che l'ora, perché è l'impostazione predefinita quando non vengono fornite informazioni di formattazione.
Aggiunta di stili CSS per il test di nuovi modelli
Prima di creare un modello per la formattazione delle date, si aggiungeranno alcune regole di stile CSS che è possibile applicare ai nuovi modelli. Questi consentono di verificare che la pagina di cui è stato eseguito il rendering usi il nuovo modello.
Aprire il file Content\Site.cse aggiungere le regole CSS seguenti alla fine del file:
/* 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;
}
Aggiunta di modelli di visualizzazione DateTime
È ora possibile creare il nuovo modello. Nella cartella Views\Movies creare una cartella DisplayTemplates .
Nella cartella Views\Shared creare una cartella DisplayTemplates e una cartella EditorTemplates.
I modelli di visualizzazione nella cartella Views\Shared\DisplayTemplates verranno usati da tutti i controller. I modelli di visualizzazione nella cartella Views\Movie\DisplayTemplates verranno usati solo dal Movie controller. Se un modello con lo stesso nome viene visualizzato in entrambe le cartelle, il modello nella cartella Views\Movie\DisplayTemplates , ovvero il modello più specifico, ha la precedenza per le visualizzazioni restituite dal Movie controller.
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\DisplayTemplates.
Fare clic su Aggiungi e quindi su Visualizza. Viene visualizzata la finestra di dialogo Aggiungi visualizzazione .
Nella casella Nome visualizzazione digitare DateTime. È necessario usare questo nome per corrispondere al nome del tipo.
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 un modello DateTime.cshtml nelle visualizzazioni\Shared\DisplayTemplates.
L'immagine seguente mostra la cartella Views in Esplora soluzioni dopo la creazione dei DateTime modelli di visualizzazione e editor.
Aprire il file Views\Shared\DisplayTemplates\DateTime.cshtml e aggiungere il markup seguente, che usa il metodo String.Format per formattare la proprietà come data senza l'ora. Il formato specifica il {0:d} formato di data breve.
@String.Format("{0:d}", Model.Date)
Ripetere questo passaggio per creare un DateTime modello nella cartella Views\Movie\DisplayTemplates . Usare il codice seguente nel file Views\Movie\DisplayTemplates\DateTime.cshtml .
<span class="loud-1">
@String.Format("{0:d}", Model.Date)
</span>
La loud-1 classe CSS causa la visualizzazione della data in grassetto in testo rosso. È stata aggiunta la loud-1 classe CSS come misura temporanea in modo da poter visualizzare facilmente quando viene usato questo particolare modello.
Sono stati creati e personalizzati modelli che ASP.NET useranno per visualizzare le date. Il modello più generale (nella cartella Views\Shared\DisplayTemplates ) visualizza una semplice data breve. Il modello specifico per il Movie controller (nella cartella Views\Movies\DisplayTemplates ) visualizza una breve data formattata anche come testo rosso grassetto.
Premere CTRL+F5 per eseguire l'applicazione. Il browser esegue il rendering della visualizzazione Indice per l'applicazione.
La ReleaseDate proprietà visualizza ora la data in un carattere rosso grassetto senza l'ora. Ciò consente di verificare che l'helper modello nella cartella Views\Movies\DisplayTemplates sia selezionata tramite l'helper DateTimeDateTime modello nella cartella condivisa (Views\Shared\DisplayTemplates).
Rinominare ora il file Views\Movies\DisplayTemplates\DateTime.cshtml in Views\Movies\DisplayTemplates\LoudDateTime.cshtml.
Premere CTRL+F5 per eseguire l'applicazione.
Questa volta la ReleaseDate proprietà visualizza una data senza l'ora e senza il carattere rosso grassetto. Questo illustra che un modello con il nome del tipo di dati (in questo caso DateTime) viene usato automaticamente per visualizzare tutte le proprietà del modello di tale tipo. Dopo aver rinominato il file DateTime.cshtml in LoudDateTime.cshtml, ASP.NET non è più stato trovato un modello nella cartella Views\Movies\DisplayTemplates, quindi ha usato il modello DateTime.cshtml dalla cartella *Views\Movies\Shared*.
La corrispondenza del modello è senza distinzione tra maiuscole e minuscole, quindi è possibile creare il nome del file modello con maiuscole e minuscole. Ad esempio , DATETIME.cshtml, datetime.cshtml e DaTeTiMe.cshtml corrisponderebbero tutti al DateTime tipo.
Per esaminare: a questo punto, il campo viene visualizzato usando il ReleaseDate modello Views\Movies\DisplayTemplates\DateTime.cshtml , che visualizza i dati usando un formato di data breve, ma in caso contrario non aggiunge alcun formato speciale.
Uso di UIHint per specificare un modello di visualizzazione
Se l'applicazione Web include molti DateTime campi e per impostazione predefinita si desidera visualizzare tutti o la maggior parte di essi in formato di sola data, il modello DateTime.cshtml è un buon approccio. Ma cosa succede se hai alcune date in cui vuoi visualizzare la data e l'ora completa? Non c'è problema. È possibile creare un modello aggiuntivo e usare l'attributo UIHint per specificare la formattazione per la data e l'ora completa. È quindi possibile applicare in modo selettivo tale modello. È possibile usare l'attributo UIHint a livello di modello oppure specificare il modello all'interno di una visualizzazione. In questa sezione verrà illustrato come usare l'attributo per modificare in modo selettivo la UIHint formattazione per alcune istanze di campi data-ora.
Aprire il file Views\Movies\DisplayTemplates\LoudDateTime.cshtml e sostituire il codice esistente con quanto segue:
<span class="loud-2">
@Model.ToString()
</span>
Ciò determina la visualizzazione della data e dell'ora completa e aggiunge la classe CSS che rende il testo verde e di grandi dimensioni.
Aprire il file Movie.cs e aggiungere l'attributo UIHint alla ReleaseDate proprietà, come illustrato nell'esempio seguente:
[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }
Ciò indica ASP.NET MVC che quando visualizza la ReleaseDate proprietà (in particolare, e non solo qualsiasi DateTime oggetto), deve usare il modello LoudDateTime.cshtml .
Premere CTRL+F5 per eseguire l'applicazione.
Si noti che la proprietà visualizza ora la data e l'ora ReleaseDate in un carattere verde di grandi dimensioni.
Tornare all'attributo UIHint nel file Movie.cs e commentarlo in modo che il modello LoudDateTime.cshtml non venga usato. Eseguire di nuovo l'applicazione. La data di rilascio non viene visualizzata su grandi e verdi. Ciò verifica che il modello Views\Shared\DisplayTemplates\DateTime.cshtml venga usato nelle visualizzazioni Indice e Dettagli.
Come accennato in precedenza, è anche possibile applicare un modello in una visualizzazione, che consente di applicare il modello a una singola istanza di alcuni dati. Aprire la visualizzazione Views\Movies\Details.cshtml . Aggiungere "LoudDateTime" come secondo parametro della chiamata Html.DisplayFor per il ReleaseDate campo. Ecco il codice completo:
<div class="display-label">ReleaseDate</div>
<div class="display-field">
@Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>
Questo specifica che il LoudDateTime modello deve essere usato per visualizzare la proprietà del modello, indipendentemente dagli attributi applicati al modello.
Premere CTRL+F5 per eseguire l'applicazione.
Verificare che la pagina dell'indice del film usi il modello Views\Shared\DisplayTemplates\DateTime.cshtml (rosso grassetto) e che la pagina Movie\ Details usi il modello Views\Movies \DisplayTemplates\LoudDateTime.cshtml (grande e verde).
Nella sezione successiva si creerà un modello per un tipo complesso.