Aggiunta della convalida al modello: come implementare il supporto necessario per abilitare la convalida dell'input

di Scott Hanselman

Questa è un'esercitazione per principianti che presenta le nozioni di base di ASP.NET MVC. Si creerà una semplice applicazione Web che legge e scrive da un database. Visitare il centro di apprendimento MVC ASP.NET per trovare altre esercitazioni e esempi di MVC ASP.NET.

In questa sezione verrà implementato il supporto necessario per abilitare la convalida dell'input all'interno dell'applicazione. Ci assicureremo che il contenuto del database sia sempre corretto e forniamo messaggi di errore utili agli utenti finali quando provano a immettere i dati movie che non sono validi. Si inizierà aggiungendo una piccola logica di convalida alla classe Movie.

Fare clic con il pulsante destro del mouse sulla cartella Modello e scegliere Aggiungi classe. Assegnare alla classe il nome Movie.

Quando è stato creato il modello di entità Movie in precedenza, l'IDE ha creato una classe Movie. Infatti, parte della classe Movie può essere in un file e parte in un altro. Si tratta di una classe Partial. Estenderemo la classe Movie da un altro file.

Verrà creata una classe di film parziale che punta a una "classe buddy" con alcuni attributi che daranno suggerimenti di convalida al sistema. Contrassegneremo il titolo e il prezzo come obbligatorio e insisteremo anche sul fatto che il prezzo sia compreso in un determinato intervallo. Fare clic con il pulsante destro del mouse sulla cartella Models e scegliere Aggiungi classe. Assegnare alla classe il nome Movie e fare clic sul pulsante OK. Ecco l'aspetto della classe Movie parziale.

using System.ComponentModel.DataAnnotations;

namespace Movies.Models
{
    [MetadataType(typeof(MovieMetadata))]
    public partial class Movie
    {
        class MovieMetadata
        {
            [Required(ErrorMessage="Titles are required")]
            public string Title { get; set; }

            [Range(5,100,ErrorMessage ="Movies cost between $5 and $100.")]
            public decimal Price { get; set; }
        }
    }
}

Re-Run'applicazione e provare a immettere un film con un prezzo superiore a 100. Si riceverà un errore dopo l'invio del modulo. L'errore viene rilevato sul lato server e si verifica dopo che il modulo è POSTed. Si noti che ASP.NET helper HTML predefiniti di MVC erano abbastanza intelligenti per visualizzare il messaggio di errore e mantenere i valori per noi all'interno degli elementi della casella di testo:

Questo funziona bene, ma sarebbe bello se potessimo indicare all'utente sul lato client, immediatamente, prima che il server venga coinvolto.

A questo punto si abilita una convalida lato client con JavaScript.

Aggiunta della convalida lato client

Poiché la classe Movie ha già alcuni attributi di convalida, è sufficiente aggiungere alcuni file JavaScript al modello Create.aspx View e aggiungere una riga di codice per abilitare la convalida lato client.

All'interno di VWD passare alla cartella Views/Movie e aprire Create.aspx.

Aprire la cartella Scripts nel Esplora soluzioni e trascinare i tre script seguenti all'interno del <tag head>.

• MicrosoftAjax.js
• MicrosoftMvcValidation.js

Si desidera che questi file di script vengano visualizzati in questo ordine.

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

Aggiungere anche questa singola riga sopra html.BeginForm:

<% Html.EnableClientValidation(); %>

Ecco il codice illustrato nell'IDE.

Eseguire l'applicazione e visitare di nuovo /Movies/Create e fare clic su Crea senza immettere dati. I messaggi di errore vengono visualizzati immediatamente senza il flash della pagina associato all'invio di dati fino al server. Ciò è dovuto al fatto che ASP.NET MVC convalida ora l'input sia nel client (usando JavaScript) che nel server.

Questo è bello! Aggiungere ora una colonna aggiuntiva al database.

IndietroAvanti