Esporta (0) Stampa
Espandi tutto
Il presente articolo è stato tradotto manualmente. Passare il puntatore sulle frasi nell'articolo per visualizzare il testo originale.
Traduzione
Originale

Procedura: implementare la convalida remota in ASP.NET MVC

ASP.NET MVC 3 fornisce un meccanismo che consente di effettuare una chiamata remota al server per convalidare un campo del form senza inserire l'intero form nel server. Questa operazione risulta utile nel caso in cui sia presente un campo che non è possibile convalidare nel client con il rischio che la convalida non riesca all'invio del form. Ad esempio, molti siti Web richiedono la registrazione mediante un ID utente univoco. Per i siti più diffusi possono essere necessari diversi tentativi per trovare un ID utente che non sia già utilizzato e l'input dell'utente non è considerato valido finché non sono validi tutti i campi, compreso l'ID utente. La possibilità di eseguire la convalida in remoto consente all'utente di non dover inviare il form diverse volte prima di trovare un ID disponibile.

Nell'illustrazione seguente viene mostrato un form nuovo utente in cui vene visualizzato un messaggio di errore che indica che l'ID richiesto non è disponibile. L'ID immesso dagli utenti viene convalidato non appena si esce dalla casella di testo Nome utente, ovvero quando la casella di testo perde lo stato attivo. La convalida non richiede un postback completo.

Convalida UID remoto

Come esempio di convalida remota, in questo argomento viene illustrato come implementare un form simile a quello mostrato nell'illustrazione precedente. L'esempio può servire da punto di partenza per creare la convalida remota specifica dell'applicazione.

A complemento di questo argomento sono disponibili un progetto iniziale di Visual Studio e un progetto di soluzione completato che è possibile scaricare.

Creazione del progetto iniziale

  1. Creare un nuovo progetto ASP.NET MVC 3 con sintassi Razor seguendo le istruzioni illustrate nella pagina Creating a MVC 3 Application with Razor and Unobtrusive JavaScript. In alternativa, aprire il progetto iniziale dell'applicazione Web ASP.NET MVC incluso nel download indicato in precedenza.

  2. Eseguire l'applicazione e fare clic sul collegamento Crea nuovo.

  3. Nella casella di testo Nome utente immettere un nome utente esistente, ad esempio "BenM".

  4. Immettere i valori per i campi rimanenti e fare clic su Crea.

    Nell'immagine seguente viene illustrato il messaggio di errore generato dall'invio di un nome utente non univoco.

    Creare errori completi

    In base alla configurazione corrente, la pagina esegue un postback completo al server. Poiché nel server il nome utente non è univoco, viene generata un'eccezione e restituita a Entity Framework. Il processo mediante il quale viene inviata la pagina al server, viene tentata l'esecuzione di un aggiornamento del database, viene rilevata un'eccezione e viene restituito un messaggio di errore può richiedere una notevole quantità di tempo.

    SuggerimentoSuggerimento:

    È possibile utilizzare Fiddler o Firebug per verificare che gli errori di convalida del client vengono gestiti dal client e non inviati al server.

Analisi del codice di convalida

  1. Nel progetto aprire il file Mvc3RemoteVal\Models\UserModel e analizzare il contenuto.

    Gli attributi StringLengthAttribute, RequiredAttribute e RegularExpressionAttribute forniscono la convalida sia lato client che lato server per il modello dell'utente. Per ulteriori informazioni, vedere Procedura: convalidare i dati del modello utilizzando gli attributi DataAnnotations.

  2. Analizzare il file Mvc3RemoteVal\Views\Shared\_Layout.

    Nella sezione HTML head sono inclusi gli elementi di script che fanno riferimento agli script jQuery necessari per la convalida lato client mediante gli attributi nello spazio dei nomi System.ComponentModel.DataAnnotations. I riferimenti a script puntano alla rete per la distribuzione di contenuti (CDN) di Microsoft Ajax. Sfruttando la rete CDN di Microsoft Ajax, è possibile migliorare significativamente le prestazioni delle applicazioni AJAX. I contenuti della rete CDN di Microsoft Ajax vengono memorizzati nella cache di server distribuiti in tutto il mondo. La rete CDN di Microsoft Ajax consente inoltre ai browser di riutilizzare i file JavaScript memorizzati nella cache per i siti Web presenti in domini diversi. La rete CDN di Microsoft Ajax supporta SSL (http://), in caso sia necessario presentare una pagina Web utilizzando Secure Sockets Layer.

  3. Aprire il file Mvc3RemoteVal\Web.config.

    L'elemento appSettings contiene le chiavi seguenti per abilitare la convalida del client e la convalida di JavaScript non intrusivo.

    <appSettings>
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
      </appSettings>
    

    È inoltre possibile abilitare o disabilitare queste impostazioni chiamando ClientValidationEnabled e EnableUnobtrusiveJavaScript(Boolean). Se tali righe di codice sono presenti nel file Global.asax, la convalida del client e di JavaScript non intrusivo viene abilitata o disabilitata per l'intera applicazione. Se il codice viene visualizzato in un controller o in una visualizzazione, la convalida del client e di JavaScript non intrusivo verrà abilitata o disabilitata solo per l'azione corrente.

    NotaNota:

    Poiché quando si utilizza la convalida del client non intrusiva non viene generato alcun codice JavaScript, se non si includono gli script di convalida, non verrà visualizzato alcun errore al caricamento della pagina. L'unico risultato è che i valori del form non verranno convalidati nel browser.

  4. Facoltativamente, disabilitare lo script client nel browser, eseguire di nuovo la pagina e immettere i dati che violano i vincoli di convalida.

    Quando si esce dal campo che contiene i dati non validi, non viene visualizzato alcun errore di convalida poiché lo scripting è disabilitato. Poiché in ASP.NET MVC viene utilizzato JavaScript non intrusivo, non vengono visualizzati errori di script lato client. All'invio del form viene tuttavia eseguita la convalida lato server. È consigliabile testare l'applicazione Web con un browser in cui lo scripting è disabilitato.

In questa sezione viene illustrato come aggiungere la convalida remota per verificare che il nome utente immesso sia univoco. Se il nome utente non è univoco, il server suggerisce un nome utente univoco.

Configurazione della convalida remota sul server

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Controllers, scegliere Aggiungi, quindi fare clic su Controller.

  2. Assegnare un nome al controller, ad esempio ValidationController. È possibile aggiungere questo metodo di azione a qualsiasi controller, ad esempio controller Home. È tuttavia consigliabile inserire la convalida nel relativo controller in modo da separare le problematiche e semplificare il test.

  3. Sostituire il contenuto della classe controller di convalida con il codice seguente:

    using System;
    using System.Globalization;
    using System.Web.Mvc;
    using System.Web.UI;
    using Mvc3RemoteVal.Models;
    
    namespace Mvc3RemoteVal.Controllers {
        [OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
        public class ValidationController : Controller {
    
            IUserDB _repository;
    #if  InMemDB
              public ValidationController() : this(InMemoryDB.Instance) { }
    #else
            public ValidationController() : this(new EF_UserRepository()) { }
    #endif
    
    
            public ValidationController(IUserDB repository) {
                _repository = repository;
            }
    
            public JsonResult IsUID_Available(string Username) {
    
                if (!_repository.UserExists(Username))
                    return Json(true, JsonRequestBehavior.AllowGet);
    
                string suggestedUID = String.Format(CultureInfo.InvariantCulture,
                    "{0} is not available.", Username);
    
                for (int i = 1; i < 100; i++) {
                    string altCandidate = Username + i.ToString();
                    if (!_repository.UserExists(altCandidate)) {
                        suggestedUID = String.Format(CultureInfo.InvariantCulture,
                       "{0} is not available. Try {1}.", Username, altCandidate);
                        break;
                    }
                }
                return Json(suggestedUID, JsonRequestBehavior.AllowGet);
            }
    
        }
    }
    

    Il codice contiene un costruttore che inizializza il controller di convalida con un parametro di interfaccia del repository di dati. Il costruttore simula il costruttore del controller Home nel modo in cui inizializza il repository di dati. Se si desidera utilizzare un archivio dati diverso, è possibile modificare le proprietà del progetto in modo che la costante di compilazione InMemDB non sia definita. In tal caso, vengono utilizzati Entity Framework e un database SQL Server come repository di dati. Gli unit test inclusi nel progetto scaricabile utilizzano l'archivio dati in memoria.

    L'attributo OutputCacheAttribute è necessario per non consentire a ASP.NET MVC di memorizzare nella cache i risultati dei metodi di convalida.

    Il metodo IsUID_Available controlla l'univocità del nome utente del candidato. Se il nome utente inviato è univoco, il metodo restituisce true come contenuto in formato JSON. Se il nome utente inviato è già utilizzato, il metodo tenta di trovare un nome univoco aggiungendo un numero intero al nome inviato. Se viene trovato un nome univoco, il metodo restituisce il nome suggerito come contenuto in formato JSON. Poiché qualsiasi risposta diversa da true viene considerata false, il client visualizza il messaggio restituito come messaggio di errore, ad esempio "BenM già utilizzato, provare BenM1".

  4. Aprire il file Models\UserModel e aggiungere l'attributo RemoteAttribute alla proprietà del nome utente nel modello di creazione utente. Nell'esempio seguente viene illustrato il codice completato.

    public class CreateUserModel : EditUserModel {
        [Required]
        [StringLength(6, MinimumLength = 3)]
        [Remote("IsUID_Available", "Validation")]
        [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed.")]
        [Editable(true)]
        public override string UserName { get; set; }
    }
    

    L'attributo RemoteAttribute nell'esempio prende il nome del metodo di azione IsUID_Available e il nome del controller in cui viene eseguita la convalida.

    La classe RemoteAttribute crea una stringa che rappresenta l'URL da utilizzare per richiamare la convalida basata su server. Il framework ASP.NET MVC invia quindi la richiesta GET dell'URL con codifica JSON. Se nell'esempio l'utente immette "BenM" nella casella di testo Nome utente, il client richiederà l'URL seguente:

    /Validation/IsUID_Available?UserName=BenM

In questa sezione verrà eseguito il test dell'applicazione e verrà analizzato l'HTML generato dalla visualizzazione Create.

Test della convalida remota

  1. Avviare l'applicazione e fare clic sul collegamento Crea nuovo.

  2. Nel campo di input del nome utente immettere "BenM" e premere TAB.

    Verrà visualizzato in rosso l'errore di convalida seguente: "BenM non è disponibile. Provare BenM1". L'ID immesso dagli utenti viene convalidato non appena si esce dalla casella di testo Nome utente, ovvero quando la casella di testo perde lo stato attivo. La convalida non richiede un postback completo.

  3. Facoltativamente, utilizzare uno strumento come Fiddler o Firebug per monitorare la chiamata di convalida IsUID_Available al server. Nell'immagine seguente vengono illustrate la richiesta e la risposta del server Web per la chiamata di convalida IsUID_Available in Fiddler.

    Strumento Fiddler
    NotaNota:

    Con Internet Explorer versione 8 e versioni precedenti è necessario aggiungere un punto a localhost nell'URL della richiesta del proxy Fiddler per acquisire il traffico HTTP. In alternativa, utilizzare http://ipv4.fiddler o http://nomecomputer/ anziché localhost nell'URL.

  4. Analizzare l'origine HTML visualizzata dal browser per la visualizzazione Create.

    L'elemento input del campo nome utente contiene gli attributi HTML5 data-val-*, dove la parte -val indica la convalida. Questi attributi compatibili con HTML5 descrivono i validator da associare ai campi di input e forniscono la convalida jQuery non intrusiva. Il formato degli attributi non intrusivi è data-val-rule="Error Message", dove rule indica la regola di convalida, ad esempio la lunghezza minima e la lunghezza massima della stringa richieste. Se nell'attributo viene fornito un messaggio di errore, esso verrà visualizzato come valore dell'attributo data-val-rule. L'attributo RegularExpressionAttribute applicato al modello dell'utente insieme al metodo EditorForModel(HtmlHelper, Object) nella visualizzazione Create determina la generazione degli attributi client HTML5 non intrusivi e dei valori degli attributi seguenti:

    
       data-val-regex="White space is not allowed." 
       data-val-regex-pattern="(\S)+" 
    

    Il messaggio di errore "Spazio vuoto non consentito" deriva dal messaggio di errore dell'attributo RegularExpressionAttribute applicato alla proprietà del nome utente nel modello dell'utente.

    L'attributo RemoteAttribute utilizzato nel modello dell'utente determina la generazione degli attributi di convalida client non intrusivi e dei valori degli attributi seguenti:

    data-val-remote="&amp;#39;UserName&amp;#39; is invalid." data-val-remote-additionalfields="*.UserName" data-val-remote-url="/Validation/IsUID_Available"
    

    La sequenza &amp;#39;UserName&amp;#39; è codificata in formato HTML e rappresenta il nome dell'utente. Il valore dell'attributo data-val-remote contiene il messaggio di errore predefinito (Nome utente non valido). UserName è un segnaposto per il nome utente effettivo inviato. Il valore dell'attributo data-val-remote-additionalfields specifica il campo o la proprietà da convalidare. Il valore dell'attributo data-val-remote-url specifica il metodo di azione che convaliderà il campo.

Aggiunte alla community

AGGIUNGI
Microsoft sta conducendo un sondaggio in linea per comprendere l'opinione degli utenti in merito al sito Web di MSDN. Se si sceglie di partecipare, quando si lascia il sito Web di MSDN verrà visualizzato il sondaggio in linea.

Si desidera partecipare?
Mostra:
© 2014 Microsoft