Parte 6: Uso delle annotazioni dei dati per la convalida del modello

di Jon Galloway

MVC Music Store è un'applicazione di esercitazione che introduce e spiega dettagliatamente come usare ASP.NET MVC e Visual Studio per lo sviluppo Web.

MVC Music Store è un'implementazione leggera del negozio di esempio che vende album musicali online e implementa l'amministrazione del sito di base, l'accesso degli utenti e la funzionalità del carrello acquisti.

Questa serie di esercitazioni illustra in dettaglio tutti i passaggi eseguiti per compilare l'applicazione di esempio MVC Music Store ASP.NET. La parte 6 illustra l'uso delle annotazioni dei dati per la convalida del modello.

Si è verificato un problema importante con i moduli Di creazione e modifica, che non eseguono alcuna convalida.We have a major issue with our Create and Edit forms: they're not doing any validation. È possibile eseguire operazioni come lasciare vuoti i campi obbligatori o digitare lettere nel campo Prezzo e il primo errore visualizzato è dal database.

È possibile aggiungere facilmente la convalida all'applicazione aggiungendo annotazioni dati alle classi del modello. Le annotazioni dei dati consentono di descrivere le regole da applicare alle proprietà del modello e ASP.NET MVC si occuperà dell'applicazione e della visualizzazione dei messaggi appropriati agli utenti.

Aggiunta della convalida ai moduli album

Verranno usati gli attributi di annotazione dati seguenti:

  • Obbligatorio : indica che la proprietà è un campo obbligatorio
  • DisplayName : definisce il testo da utilizzare nei campi del modulo e nei messaggi di convalida
  • StringLength : definisce una lunghezza massima per un campo stringa
  • Intervallo : fornisce un valore massimo e minimo per un campo numerico
  • Bind : elenca i campi da escludere o includere quando si associano i valori del parametro o del modulo alle proprietà del modello
  • ScaffoldColumn : consente di nascondere i campi dai moduli dell'editor

*Nota: per altre informazioni sulla convalida del modello con attributi di annotazione dei dati, vedere la documentazione MSDN all'indirizzo *https://go.microsoft.com/fwlink/?LinkId=159063

Aprire la classe Album e aggiungere le istruzioni using seguenti all'inizio.

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

Aggiornare quindi le proprietà per aggiungere attributi di visualizzazione e convalida, come illustrato di seguito.

namespace MvcMusicStore.Models
{
    [Bind(Exclude = "AlbumId")]
    public class Album
    {
        [ScaffoldColumn(false)]
        public int      AlbumId    { get; set; }
        [DisplayName("Genre")]
        public int      GenreId    { get; set; }
        [DisplayName("Artist")]
        public int      ArtistId   { get; set; }
        [Required(ErrorMessage = "An Album Title is required")]
        [StringLength(160)]
        public string   Title      { get; set; }
        [Range(0.01, 100.00,
            ErrorMessage = "Price must be between 0.01 and 100.00")]
        public decimal Price       { get; set; }
        [DisplayName("Album Art URL")]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }
        public virtual Genre  Genre    { get; set; }
        public virtual Artist Artist   { get; set; }
    }
}

Mentre siamo lì, abbiamo anche cambiato le proprietà Genre e Artist in virtual properties. In questo modo Entity Framework può caricarli in modo differita in base alle esigenze.

public virtual Genre    Genre       { get; set; }
public virtual Artist   Artist      { get; set; }

Dopo aver aggiunto questi attributi al modello Album, la schermata Crea e modifica inizia immediatamente a convalidare i campi e usa i nomi visualizzati scelti (ad esempio, Url dell'arte dell'album anziché AlbumArtUrl). Eseguire l'applicazione e passare a /StoreManager/Create.

Screenshot del modulo Crea che mostra gli elenchi a discesa Genre e Artist e i campi Title, Price e Album Art U R L.

Verranno quindi interrotte alcune regole di convalida. Immettere un prezzo pari a 0 e lasciare vuoto il titolo. Quando si fa clic sul pulsante Crea, verrà visualizzato il modulo con i messaggi di errore di convalida che mostrano quali campi non soddisfano le regole di convalida definite.

Screenshot del modulo Crea che mostra i campi Titolo e Prezzo in rosso a causa di errori nell'input e nell'errore rosso a corredo.

Test della convalida Client-Side

La convalida lato server è molto importante dal punto di vista dell'applicazione, perché gli utenti possono aggirare la convalida lato client. Tuttavia, i moduli della pagina Web che implementano solo la convalida lato server presentano tre problemi significativi.

  1. L'utente deve attendere che il modulo venga pubblicato, convalidato nel server e affinché la risposta venga inviata al browser.
  2. L'utente non riceve feedback immediato quando corregge un campo in modo che passi ora le regole di convalida.
  3. Stiamo sprecando le risorse del server per eseguire la logica di convalida invece di sfruttare il browser dell'utente.

Fortunatamente, i modelli di scaffolding di MVC 3 ASP.NET hanno la convalida lato client incorporata, che non richiede alcun lavoro aggiuntivo.

La digitazione di una singola lettera nel campo Titolo soddisfa i requisiti di convalida, quindi il messaggio di convalida viene rimosso immediatamente.

Screenshot del modulo Crea che mostra il campo Prezzo in rosso a causa di un errore nell'input e nel testo di errore rosso associato.