Condividi tramite

Uso del calendario popup datapicker html5 e jQuery dell'interfaccia utente con ASP.NET MVC - Parte 1

  • Articolo

di Rick Anderson

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

Questa esercitazione illustra le nozioni di base su come usare i modelli di editor, i modelli di visualizzazione e il calendario popup datepicker dell'interfaccia utente jQuery in un'applicazione Web MVC ASP.NET. Per questa esercitazione, è possibile usare Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer"), che è una versione gratuita di Microsoft Visual Studio oppure è possibile usare Visual Studio 2010 SP1 se è già disponibile.

Prima di iniziare, assicurarsi di aver installato i prerequisiti elencati di seguito. È possibile installarli tutti facendo clic sul collegamento seguente: Programma di installazione della piattaforma Web. In alternativa, è possibile installare singolarmente il software necessario usando i collegamenti seguenti:

Se si usa Visual Studio 2010 anziché Visual Web Developer, installare i prerequisiti facendo clic sul collegamento seguente: Prerequisiti di Visual Studio 2010.

Questa esercitazione presuppone che sia stata completata l'esercitazione Introduzione a MVC 3 o che si abbia familiarità con ASP.NET sviluppo MVC. Questa esercitazione inizia con il progetto completato dell'esercitazione Introduzione a MVC 3 .

Scopo dell'esercitazione

Si aggiungeranno modelli (in particolare, modificare e visualizzare modelli) alla semplice applicazione di presentazione di film creata nell'esercitazione Introduzione a MVC 3 . Si aggiungerà anche un calendario popup datepicker dell'interfaccia utente di jQuery per semplificare il processo di immissione delle date. Lo screenshot seguente mostra l'applicazione modificata con il calendario popup datepicker dell'interfaccia utente jQuery visualizzato.

Screenshot della finestra Movie jQuery che mostra la visualizzazione Modifica con un campo Titolo e un campo Data di rilascio con un calendario popup datepicker dell'interfaccia utente jQuery.

Acquisizione di competenze

In questa esercitazione si apprenderà:

  • Come usare gli attributi dello spazio dei nomi DataAnnotations per controllare il formato dei dati quando vengono visualizzati e quando sono in modalità di modifica.
  • Come creare modelli (modificare e visualizzare modelli) per controllare la formattazione dei dati.
  • Come aggiungere il datepicker dell'interfaccia utente di jQuery come modo per immettere i campi data.

Introduzione

Se non si ha già l'applicazione di presentazione di film dal progetto iniziale, scaricarla:

  • Scaricare
  • In Esplora risorse fare clic con il pulsante destro del mouse sul file MvcMovie.zip e scegliere Proprietà.
  • Nella finestra di dialogo Proprietà MvcMovie.zip selezionare Sblocca. L'operazione di sblocco impedisce la visualizzazione dell'avviso di sicurezza quando si tenta di utilizzare un file ZIP scaricato dal Web.

Screenshot che mostra la casella Mvc Movie dot zip Properties con la sezione Sicurezza e il pulsante Sblocca evidenziato con un rettangolo rosso.

Fare clic con il pulsante destro del mouse sul file MvcMovie.zip e scegliere Estrai tutto per decomprimere il file. In Visual Web Developer o Visual Studio 2010 aprire il file MvcMovieCS_TU.sln .

In Esplora soluzioni fare doppio clic su Views\Shared\_Layout.cshtml per aprirlo. Modificare l'intestazione H1 da MVC Movie App in Movie jQuery. Premere CTRL+F5 per eseguire l'applicazione e fare clic sulla scheda Home , che consente di visualizzare il Index metodo del controller del film. Per provare l'applicazione, selezionare il collegamento Modifica e il collegamento Dettagli per uno dei film. Si noti che nelle visualizzazioni Indice, Modifica e Dettagli la data di rilascio e il prezzo sono formattati in modo corretto:

Screenshot della finestra Movie jQuery che mostra la visualizzazione Dettagli con i valori impostati per il film selezionato elencato.

La formattazione per la data e il prezzo è il risultato dell'utilizzo dell'attributo DisplayFormat sulle proprietà della Movie classe .

Aprire il file Movie.cs e impostare come commento l'attributo DisplayFormat sulle ReleaseDate proprietà e Price . La classe risultante Movie è simile alla seguente:

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

Premere di nuovo CTRL+F5 per eseguire l'applicazione e selezionare la scheda Home per visualizzare l'elenco di film. Questa volta la data di rilascio mostra la data e l'ora e il campo prezzo non visualizza più il simbolo di valuta. La modifica apportata alla Movie classe ha annullato la formattazione utile illustrata in precedenza, ma la correzione verrà risolta in un attimo.

Screenshot della finestra Movie jQuery che mostra la visualizzazione Dettagli con i valori impostati del film visualizzati dopo le modifiche apportate al file Movie dot cs.

Utilizzo dell'attributo DataAnnotations DataType per specificare il tipo di dati

Sostituire l'attributo commentato DisplayFormat per la ReleaseDate proprietà con l'attributo DataType usando l'enumerazione Date . Sostituire di nuovo l'attributo DisplayFormat per la Price proprietà con l'attributo DataType , questa volta usando l'enumerazione Currency . Questo è l'aspetto del codice completato:

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

Eseguire l'applicazione. Ora la data di rilascio e le proprietà del prezzo sono formattate correttamente (ovvero, usando i formati di data e valuta appropriati). L'attributo DataType fornisce metadati di tipo per i modelli MVC predefiniti ASP.NET in modo che i campi eseguano il rendering nel formato corretto. L'uso dell'attributo DataType è preferibile all'uso dell'attributo DisplayFormat originariamente nel codice, perché l'attributo rende il modello più pulito e più flessibile per scopi come l'internazionalizzazione DataType .

Nella sezione successiva verrà illustrato come creare modelli personalizzati per visualizzare i campi data.

Avanti