Aggiunta di controlli di convalida all'interfaccia di modifica di DataList (C#)

di Scott Mitchell

Scarica il PDF

In questa esercitazione verrà illustrato come è facile aggiungere controlli di convalida all'oggetto EditItemTemplate di DataList per fornire un'interfaccia utente di modifica più insodibile.

Introduzione

Nell'esercitazione sulla modifica di DataList finora, le interfacce di modifica dataLists non includevano alcuna convalida di input utente proattiva, anche se l'input utente non valido, ad esempio un nome prodotto mancante o un prezzo negativo, genera un'eccezione. Nell'esercitazione precedente è stato illustrato come aggiungere codice di gestione delle eccezioni al gestore eventi di DataList per UpdateCommand rilevare e visualizzare correttamente informazioni su eventuali eccezioni generate. Idealmente, tuttavia, l'interfaccia di modifica include controlli di convalida per impedire a un utente di immettere tali dati non validi al primo posto.

In questa esercitazione verrà illustrato come è facile aggiungere controlli di convalida all'oggetto EditItemTemplate DataList per fornire un'interfaccia utente più insodibile. In particolare, questa esercitazione accetta l'esempio creato nell'esercitazione precedente e aumenta l'interfaccia di modifica per includere la convalida appropriata.

Passaggio 1: Replica dell'esempio dallagestione di eccezioni BLL e DAL-Level

Nell'esercitazione Gestione BLL- e DAL-Level Eccezioni è stata creata una pagina che elenca i nomi e i prezzi dei prodotti in una colonna due, modificabile DataList. L'obiettivo di questa esercitazione è aumentare l'interfaccia di modifica di DataList per includere i controlli di convalida. In particolare, la logica di convalida:

• Richiedere che il nome del prodotto venga fornito
• Assicurarsi che il valore immesso per il prezzo sia un formato di valuta valido
• Assicurarsi che il valore immesso per il prezzo sia maggiore o uguale a zero, poiché un valore negativo UnitPrice è illegale

Prima di poter esaminare l'aumento dell'esempio precedente per includere la convalida, è prima necessario replicare l'esempio dalla ErrorHandling.aspxEditDeleteDataList pagina nella cartella alla pagina per questa esercitazione. UIValidation.aspx Per ottenere questo risultato, è necessario copiare sia il markup dichiarativo della pagina che il ErrorHandling.aspx relativo codice sorgente. Prima di tutto copiare il markup dichiarativo eseguendo la procedura seguente:

1. Aprire la ErrorHandling.aspx pagina in Visual Studio
2. Passare al markup dichiarativo della pagina (fare clic sul pulsante Origine nella parte inferiore della pagina)
3. Copiare il testo all'interno dei <asp:Content> tag e </asp:Content> (righe da 3 a 32), come illustrato nella figura 1.

Figura 1: Copiare il testo all'interno del <asp:Content> controllo (fare clic per visualizzare l'immagine full-size)

1. Aprire la UIValidation.aspx pagina
2. Passare al markup dichiarativo della pagina
3. Incollare il testo all'interno del <asp:Content> controllo.

Per copiare il codice sorgente, aprire la ErrorHandling.aspx.vb pagina e copiare solo il testo all'interno della EditDeleteDataList_ErrorHandling classe. Copiare i tre gestori eventi (Products_EditCommand, Products_CancelCommande ) Products_UpdateCommandinsieme al DisplayExceptionDetails metodo, ma non copiare la dichiarazione o using le istruzioni della classe. Incollare il testo copiato all'interno della EditDeleteDataList_UIValidation classe in UIValidation.aspx.vb.

Dopo aver spostato il contenuto e il codice da ErrorHandling.aspx a UIValidation.aspx, provare le pagine in un browser. Verrà visualizzato lo stesso output e la stessa funzionalità in ognuna di queste due pagine (vedere la figura 2).

Figura 2: La UIValidation.aspx pagina simula la funzionalità in ErrorHandling.aspx (fare clic per visualizzare l'immagine full-size)

Passaggio 2: Aggiunta dei controlli di convalida a DataList s EditItemTemplate

Quando si costruiscono moduli di immissione dati, è importante che gli utenti immettono tutti i campi obbligatori e che tutti gli input forniti siano legali, formattati correttamente. Per assicurarsi che gli input di un utente siano validi, ASP.NET fornisce cinque controlli di convalida predefiniti progettati per convalidare il valore di un singolo controllo Web di input:

• RequiredFieldValidator assicura che sia stato fornito un valore
• CompareValidator convalida un valore rispetto a un altro valore del controllo Web o un valore costante oppure assicura che il formato del valore sia legale per un tipo di dati specificato
• RangeValidator garantisce che un valore si trova all'interno di un intervallo di valori
• RegularExpressionValidator convalida un valore rispetto a un'espressione regolare
• CustomValidator convalida un valore rispetto a un metodo personalizzato e definito dall'utente

Per altre informazioni su questi cinque controlli, vedere l'esercitazione Aggiunta di controlli di convalida all'esercitazione Modifica e inserimento di interfacce oppure vedere la sezione Controlli di convalida delle esercitazioni di avvio rapido di ASP.NET.

Per l'esercitazione sarà necessario usare un oggetto RequiredFieldValidator per assicurarsi che sia stato fornito un valore per il nome del prodotto e un CompareValidator per assicurarsi che il prezzo immesso abbia un valore maggiore o uguale a 0 e venga presentato in un formato valuta valido.

Nota

Mentre ASP.NET 1.x hanno avuto questi stessi cinque controlli di convalida, ASP.NET 2.0 ha aggiunto un numero di miglioramenti, i due principali sono il supporto per script lato client per i browser oltre a Internet Explorer e la possibilità di partizionare i controlli di convalida in una pagina nei gruppi di convalida. Per altre informazioni sulle nuove funzionalità di controllo di convalida nella versione 2.0, vedere Dissecting the Validation Controls in ASP.NET 2.0.

Iniziamo aggiungendo i controlli di convalida necessari a DataList s EditItemTemplate. Questa attività può essere eseguita tramite il Designer facendo clic sul collegamento Modifica modelli dallo smart tag di DataList o tramite la sintassi dichiarativa. Eseguire il passaggio del processo usando l'opzione Modifica modelli dalla visualizzazione Progettazione. Dopo aver scelto di modificare DataList s EditItemTemplate, aggiungere un oggetto RequiredFieldValidator trascinandolo dalla casella degli strumenti nell'interfaccia ProductName di modifica del modello, posizionandolo dopo TextBox.

Figura 3: Aggiungere un oggetto RequiredFieldValidator alla EditItemTemplate AfterProductName casella di testo (Fare clic per visualizzare l'immagine full-size)

Tutti i controlli di convalida funzionano convalidando l'input di un singolo controllo Web ASP.NET. Pertanto, è necessario indicare che l'oggetto RequiredFieldValidator appena aggiunto deve essere convalidato con ProductName TextBox. Questa operazione viene eseguita impostando la proprietà delControlToValidate controllo di convalida sull'oggetto ID del controllo Web appropriato (ProductNamein questa istanza). Impostare quindi la ErrorMessage proprietà su È necessario specificare il nome del prodotto e la Text proprietà su *. Il valore della Text proprietà, se specificato, è il testo visualizzato dal controllo di convalida se la convalida ha esito negativo. Il ErrorMessage valore della proprietà, obbligatorio, viene usato dal controllo ValidationSummary. Se il valore della proprietà viene omesso, il TextErrorMessage valore della proprietà viene visualizzato dal controllo di convalida in input non valido.

Dopo aver impostato queste tre proprietà dell'oggetto RequiredFieldValidator, la schermata dovrebbe essere simile alla figura 4.

Figura 4: Impostare l'oggetto RequiredFieldValidator s ControlToValidate, ErrorMessage, e Text Proprietà (Fare clic per visualizzare l'immagine full-size)

Con l'oggetto RequiredFieldValidator aggiunto a , tutto ciò che rimane consiste nell'aggiungere EditItemTemplatela convalida necessaria per il prezzo del prodotto TextBox. Poiché l'oggetto è facoltativo durante la UnitPrice modifica di un record, non è necessario aggiungere un oggetto RequiredFieldValidator. Tuttavia, è necessario aggiungere un CompareValidator per assicurarsi che , UnitPricese fornito, sia formattato correttamente come valuta ed è maggiore o uguale a 0.

Aggiungere CompareValidator nell'oggetto EditItemTemplate e impostarne ControlToValidate la proprietà su UnitPrice, la ErrorMessage relativa proprietà su Il prezzo deve essere maggiore o uguale a zero e non può includere il simbolo di valuta e la relativa Text proprietà su *. Per indicare che il UnitPrice valore deve essere maggiore o uguale a 0, impostare la proprietà CompareValidator su Operator , la ValueToCompare relativa proprietà su 0 e la relativa Type proprietàGreaterThanEqualsu Currency.

Dopo aver aggiunto questi due controlli di convalida, la sintassi dichiarativa di EditItemTemplate DataList deve essere simile alla seguente:

<EditItemTemplate>
    Product name:
        <asp:TextBox ID="ProductName" runat="server"
            Text='<%# Eval("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            ControlToValidate="ProductName"
            ErrorMessage="You must provide the product's name"
            runat="server">*</asp:RequiredFieldValidator>
    <br />
    Price:
        <asp:TextBox ID="UnitPrice" runat="server"
            Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1"
            ControlToValidate="UnitPrice"
            ErrorMessage="The price must be greater than or equal to zero
                          and cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
            runat="server">*</asp:CompareValidator><br />
    <br />
    <asp:Button ID="UpdateProduct" runat="server" CommandName="Update"
        Text="Update" /> 
    <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel"
        Text="Cancel" />
</EditItemTemplate>

Dopo aver apportato queste modifiche, aprire la pagina in un browser. Se si tenta di omettere il nome o immettere un valore di prezzo non valido durante la modifica di un prodotto, viene visualizzato un asterisco accanto alla casella di testo. Come illustrato nella figura 5, viene considerato non valido un valore di prezzo che include il simbolo di valuta, ad esempio $19,95. CompareValidator CurrencyType consente separatori di cifre (ad esempio virgole o punti, a seconda delle impostazioni cultura) e un segno più o meno iniziale, ma non consente un simbolo di valuta. Questo comportamento può perplessare gli utenti quando l'interfaccia di modifica esegue attualmente il rendering dell'uso UnitPrice del formato valuta.

Figura 5: Viene visualizzato un asterisco accanto alle caselle di testo con input non valido (fare clic per visualizzare l'immagine full-size)

Anche se la convalida funziona così come è, l'utente deve rimuovere manualmente il simbolo di valuta durante la modifica di un record, che non è accettabile. Inoltre, se nell'interfaccia di modifica non sono presenti input non validi né i pulsanti Aggiorna né Annulla, quando si fa clic, richiama un postback. Idealmente, il pulsante Annulla restituirà l'oggetto DataList allo stato di pre-modifica indipendentemente dalla validità degli input dell'utente. È inoltre necessario assicurarsi che i dati della pagina siano validi prima di aggiornare le informazioni sul prodotto nel gestore eventi di UpdateCommand DataList, poiché la logica lato client dei controlli di convalida può essere ignorata dagli utenti i cui browser non supportano JavaScript o hanno il supporto disabilitato.

Rimozione del simbolo di valuta dalla casella di testo UnitPrice s EditItemTemplate

Quando si usa CompareValidator s Currency``Type, l'input convalidato non deve includere alcun simbolo di valuta. La presenza di tali simboli causa l'errore CompareValidator per contrassegnare l'input come non valido. Tuttavia, l'interfaccia di modifica attualmente include un simbolo di valuta nella UnitPrice Casella di testo, il che significa che l'utente deve rimuovere in modo esplicito il simbolo di valuta prima di salvare le modifiche. Per risolvere questo problema sono disponibili tre opzioni:

1. Configurare in EditItemTemplate modo che il UnitPrice valore TextBox non sia formattato come valuta.
2. Consentire all'utente di immettere un simbolo di valuta rimuovendo CompareValidator e sostituendolo con un RegularExpressionValidator che controlla un valore di valuta formattato correttamente. La sfida è che l'espressione regolare per convalidare un valore di valuta non è semplice come compareValidator e richiederebbe la scrittura di codice se si desidera incorporare le impostazioni cultura.
3. Rimuovere completamente il controllo di convalida e basarsi sulla logica di convalida lato server personalizzata nel gestore eventi di GridView.RowUpdating

Passare con l'opzione 1 per questa esercitazione. Attualmente viene UnitPrice formattato come valore di valuta a causa dell'espressione databinding per textBox in EditItemTemplate: <%# Eval("UnitPrice", "{0:c}") %>. Modificare l'istruzione su Eval("UnitPrice", "{0:n2}"), che formatta il Eval risultato come numero con due cifre di precisione. Questa operazione può essere eseguita direttamente tramite la sintassi dichiarativa o facendo clic sul collegamento Modifica DataBindings da UnitPrice TextBox in DataList s EditItemTemplate.

Con questa modifica, il prezzo formattato nell'interfaccia di modifica include virgole come separatore di gruppo e un punto come separatore decimale, ma lascia fuori il simbolo di valuta.

Nota

Quando si rimuove il formato di valuta dall'interfaccia modificabile, è utile inserire il simbolo di valuta come testo all'esterno della Casella di testo. Ciò funge da suggerimento all'utente che non deve fornire il simbolo di valuta.

Correzione del pulsante Annulla

Per impostazione predefinita, i controlli Web di convalida generano JavaScript per eseguire la convalida sul lato client. Quando si fa clic su Button, LinkButton o ImageButton, i controlli di convalida nella pagina vengono controllati sul lato client prima che si verifichi il postback. Se sono presenti dati non validi, il postback viene annullato. Per alcuni pulsanti, tuttavia, la validità dei dati potrebbe essere irrilevante; in questo caso, l'annullamento del postback a causa di dati non validi è un problema.

Il pulsante Annulla è un esempio. Si supponga che un utente immetta dati non validi, ad esempio omettendo il nome del prodotto, e quindi decide di non voler salvare il prodotto dopo tutto e premere il pulsante Annulla. Attualmente, il pulsante Annulla attiva i controlli di convalida nella pagina, che segnalano che il nome del prodotto è mancante e impedisce il postback. L'utente deve digitare del testo nel ProductName controllo TextBox solo per annullare il processo di modifica.

Fortunatamente, Button, LinkButton e ImageButton hanno una CausesValidation proprietà che può indicare se fare clic su Button deve avviare la logica di convalida (il valore predefinito è True). Impostare la proprietà Cancel Button s CausesValidation su False.

Verifica che gli input siano validi nel gestore eventi UpdateCommand

A causa dello script lato client generato dai controlli di convalida, se un utente immette input non valido, i controlli di convalida annullano eventuali postback avviati dai controlli Button, LinkButton o ImageButton le cui CausesValidation proprietà sono True (impostazione predefinita). Tuttavia, se un utente visita con un browser antiquato o uno il cui supporto JavaScript è stato disabilitato, i controlli di convalida lato client non verranno eseguiti.

Tutti i controlli di convalida ASP.NET ripetono la logica di convalida immediatamente dopo il postback e segnalano la validità complessiva degli input della pagina tramite la Page.IsValid proprietà . Tuttavia, il flusso di pagina non viene interrotto o arrestato in alcun modo in base al valore di Page.IsValid. Gli sviluppatori hanno la responsabilità di assicurarsi che la Page.IsValid proprietà abbia un valore prima di procedere con il codice che presuppone dati di True input validi.

Se un utente ha JavaScript disabilitato, visita la pagina, modifica un prodotto, immette un valore di prezzo troppo costoso e fa clic sul pulsante Aggiorna, la convalida lato client verrà ignorata e verrà eseguito un postback. Al postback, il gestore eventi della UpdateCommand pagina ASP.NET viene eseguito e viene generata un'eccezione quando si tenta di analizzare Troppo costoso in un oggetto Decimal. Poiché è disponibile la gestione delle eccezioni, tale eccezione verrà gestita normalmente, ma è possibile evitare che i dati non validi vengano spostati al primo posto solo procedendo con il UpdateCommand gestore eventi se Page.IsValid ha un valore pari Truea .

Aggiungere il codice seguente all'inizio del UpdateCommand gestore eventi, immediatamente prima del Try blocco:

if (!Page.IsValid)
    return;

Con questa aggiunta, il prodotto tenterà di essere aggiornato solo se i dati inviati sono validi. La maggior parte degli utenti non sarà in grado di eseguire il postback di dati non validi a causa dei controlli di convalida degli script lato client, ma gli utenti i cui browser non supportano JavaScript o che hanno il supporto JavaScript disabilitato, possono ignorare i controlli lato client e inviare dati non validi.

Nota

Il lettore astuto ricorderà che durante l'aggiornamento dei dati con GridView non è necessario controllare in modo esplicito la Page.IsValid proprietà nella classe code-behind della pagina. Ciò è dovuto al fatto che GridView consulta la Page.IsValid proprietà per noi e procede solo con l'aggiornamento solo se restituisce un valore di True.

Passaggio 3: Riepilogo dei problemi di immissione dei dati

Oltre ai cinque controlli di convalida, ASP.NET include il controllo ValidationSummary, che visualizza i ErrorMessage controlli di convalida che hanno rilevato dati non validi. Questi dati di riepilogo possono essere visualizzati come testo nella pagina Web o tramite una finestra di messaggio modale sul lato client. È possibile migliorare questa esercitazione per includere una finestra di messaggio sul lato client che riepiloga eventuali problemi di convalida.

A tale scopo, trascinare un controllo ValidationSummary dalla casella degli strumenti nella Designer. La posizione del controllo ValidationSummary non è rilevante, poiché verrà configurata in modo da visualizzare solo il riepilogo come finestra di messaggio. Dopo aver aggiunto il controllo, impostarne la ShowSummary proprietà su False e la relativaShowMessageBox proprietà su True. Con questa aggiunta, eventuali errori di convalida vengono riepilogati in una finestra di messaggio sul lato client (vedere la figura 6).

Figura 6: Gli errori di convalida vengono riepilogati in una casella di messaggio Client-Side (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

In questa esercitazione è stato illustrato come ridurre la probabilità di eccezioni usando i controlli di convalida per garantire in modo proattivo che gli input degli utenti siano validi prima di tentare di usarli nel flusso di lavoro di aggiornamento. ASP.NET fornisce cinque controlli Web di convalida progettati per controllare l'input di un determinato controllo Web e segnalare di nuovo la validità dell'input. In questa esercitazione sono stati usati due di questi cinque controlli RequiredFieldValidator e CompareValidator per assicurarsi che il nome del prodotto sia stato fornito e che il prezzo avesse un formato di valuta maggiore o uguale a zero.

L'aggiunta di controlli di convalida all'interfaccia di modifica di DataList è semplice quanto trascinarli nella EditItemTemplate casella degli strumenti e impostare alcune proprietà. Per impostazione predefinita, i controlli di convalida generano automaticamente uno script di convalida lato client; forniscono anche la convalida lato server al postback, archiviando il risultato cumulativo nella Page.IsValid proprietà . Per ignorare la convalida lato client quando si fa clic su Button, LinkButton o ImageButton, impostare la proprietà del pulsante su CausesValidationFalse. Prima di eseguire attività con i dati inviati al postback, assicurarsi inoltre che la Page.IsValid proprietà restituisca True.

Tutte le esercitazioni di modifica di DataList esaminate finora hanno avuto interfacce di modifica molto semplici un controllo TextBox per il nome del prodotto e un altro per il prezzo. L'interfaccia di modifica, tuttavia, può contenere una combinazione di controlli Web diversi, ad esempio DropDownList, Calendari, RadioButton, CheckBox e così via. Nell'esercitazione successiva verrà esaminata la creazione di un'interfaccia che usa un'ampia gamma di controlli Web.

Buon programmatori!

Informazioni sull'autore

Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, lavora con le tecnologie Web Microsoft dal 1998. Scott lavora come consulente indipendente, formatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2.0 in 24 ore. Può essere raggiunto all'indirizzo mitchell@4GuysFromRolla.com. o tramite il suo blog, disponibile all'indirizzo http://ScottOnWriting.NET.

Grazie speciale a

Questa serie di esercitazioni è stata esaminata da molti revisori utili. I revisori principali di questa esercitazione erano Dennis Patterson, Ken Pespisa e Liz Shulok. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, rilasciami una riga in mitchell@4GuysFromRolla.com.

IndietroAvanti