Aggiunta di controlli di convalida alle interfacce di modifica e inserimento (C#)

di Scott Mitchell

Scarica il PDF

In questa esercitazione verrà illustrato come è facile aggiungere controlli di convalida all'oggetto EditItemTemplate e InsertItemTemplate di un controllo Web dati, per fornire un'interfaccia utente più insodibile.

Introduzione

I controlli GridView e DetailsView negli esempi esaminati negli ultimi tre esercitazioni sono stati tutti costituiti da BoundFields e CheckBoxFields (i tipi di campo aggiunti automaticamente da Visual Studio quando si associa un controllo GridView o DetailsView a un controllo origine dati tramite lo smart tag). Quando si modifica una riga in un oggetto GridView o DetailsView, tali campi delimitati non di sola lettura vengono convertiti in caselle di testo, da cui l'utente finale può modificare i dati esistenti. Analogamente, quando si inserisce un nuovo record in un controllo DetailsView, le proprietà BoundFields InsertVisible impostate su true (impostazione predefinita) vengono visualizzate come caselle di testo vuote, in cui l'utente può fornire i valori del campo del nuovo record. Analogamente, CheckBoxFields, disabilitati nell'interfaccia standard, di sola lettura, vengono convertiti in caselle di controllo abilitate nelle interfacce di modifica e inserimento.

Anche se le interfacce di modifica e inserimento predefinite per BoundField e CheckBoxField possono essere utili, l'interfaccia manca di qualsiasi tipo di convalida. Se un utente fa un errore di immissione dati, ad esempio omettendo il ProductName campo o immettendo un valore non valido per UnitsInStock (ad esempio -50) verrà generata un'eccezione dalle profondità dell'architettura dell'applicazione. Anche se questa eccezione può essere gestita correttamente come illustrato nell'esercitazione precedente, idealmente la modifica o l'inserimento dell'interfaccia utente includono controlli di convalida per impedire a un utente di immettere tali dati non validi al primo posto.

Per fornire un'interfaccia personalizzata di modifica o inserimento, è necessario sostituire BoundField o CheckBoxField con un ModelloField. TemplateFields, che sono stati l'argomento della discussione nell'uso di TemplateFields nel controllo GridView e nell'uso di TemplateFields nell'esercitazione DetailsView Control , può essere costituito da più modelli che definiscono interfacce separate per stati di riga diversi. Il ModelloField viene usato per eseguire il rendering di campi o righe di sola lettura nei controlli DetailsView o GridView, mentre l'oggetto ItemTemplateEditItemTemplate e InsertItemTemplate indicare le interfacce da usare rispettivamente per la modifica e l'inserimento delle modalità.

In questa esercitazione verrà illustrato come è facile aggiungere controlli di convalida all'oggetto EditItemTemplate TemplateField e InsertItemTemplate fornire un'interfaccia utente più insodibile. In particolare, questa esercitazione accetta l'esempio creato nell'analisi degli eventi associati all'inserimento, all'aggiornamento e all'eliminazione dell'esercitazione e aumenta le interfacce di modifica e inserimento per includere la convalida appropriata.

Passaggio 1: Replica dell'esempiodall'esame degli eventi associati all'inserimento, all'aggiornamento e all'eliminazione

Nell'esercitazione Analisi degli eventi associati all'inserimento, all'aggiornamento e all'eliminazione è stata creata una pagina che elenca i nomi e i prezzi dei prodotti in un controllo GridView modificabile. Inoltre, la pagina include un Oggetto DetailsView la cui DefaultMode proprietà è stata impostata su Insert, quindi sempre il rendering in modalità inserimento. Da questo detailsView l'utente potrebbe immettere il nome e il prezzo per un nuovo prodotto, fare clic su Inserisci e aggiungerlo al sistema (vedere la figura 1).

Figura 1: l'esempio precedente consente agli utenti di aggiungere nuovi prodotti e modificare quelli esistenti (fare clic per visualizzare l'immagine full-size)

L'obiettivo di questa esercitazione è aumentare DetailsView e GridView per fornire controlli di convalida. In particolare, la logica di convalida:

• Richiedere che il nome venga fornito durante l'inserimento o la modifica di un prodotto
• Richiedere che il prezzo venga fornito durante l'inserimento di un record; quando si modifica un record, sarà comunque necessario un prezzo, ma userà la logica programmatica nel gestore eventi RowUpdating di GridView già presente dall'esercitazione precedente
• Assicurarsi che il valore immesso per il prezzo sia un formato di valuta valido

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

1. Aprire la DataModificationEvents.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 44), come illustrato nella figura 2.

Figura 2: 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 DataModificationEvents.aspx.cs pagina e copiare solo il testo all'interno della EditInsertDelete_DataModificationEvents classe. Copiare i tre gestori eventi (Page_Load, GridView1_RowUpdatinge ), ObjectDataSource1_Insertingma non copiare la dichiarazione o using le istruzioni della classe. Incollare il testo copiato all'interno della EditInsertDelete_UIValidation classe in UIValidation.aspx.cs.

Dopo aver spostato il contenuto e il codice da DataModificationEvents.aspx a UIValidation.aspx, eseguire un momento per testare lo stato di avanzamento in un browser. Verrà visualizzato lo stesso output e la stessa funzionalità in ognuna di queste due pagine (fare riferimento alla figura 1 per una schermata di DataModificationEvents.aspx in azione).

Passaggio 2: Conversione di BoundFields in templateFields

Per aggiungere controlli di convalida alle interfacce di modifica e inserimento, è necessario convertire i controlli DetailsView e GridView in TemplateFields. A questo scopo, fare clic sui collegamenti Modifica colonne e Modifica campi rispettivamente negli smart tag GridView e DetailsView. Selezionare ognuna delle proprietà BoundFields e fare clic sul collegamento "Convert this field in a TemplateField".

Figura 3: Convertire ogni oggetto DetailsView e GridView's BoundFields In TemplateFields (Fare clic per visualizzare l'immagine full-size)

La conversione di un oggetto BoundField in un oggetto TemplateField tramite la finestra di dialogo Campi genera un oggetto TemplateField che mostra le stesse interfacce di sola lettura, modifica e inserimento di interfacce come BoundField stesso. Il markup seguente mostra la sintassi dichiarativa per il ProductName campo in DetailsView dopo la conversione in un ModelloField:

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </EditItemTemplate>
    <InsertItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </InsertItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Si noti che questo ModelloField aveva tre modelli creati ItemTemplateautomaticamente , EditItemTemplatee InsertItemTemplate. Viene ItemTemplate visualizzato un singolo valore del campo dati (ProductName) usando un controllo Web Etichetta, mentre il InsertItemTemplateEditItemTemplate valore del campo dati viene presentato in un controllo Web TextBox che associa il campo dati alla proprietà TextBox Text usando il databinding bidirezionale. Poiché si usa solo DetailsView in questa pagina per l'inserimento, è possibile rimuovere e ItemTemplateEditItemTemplate dai due Campi di modello, anche se non vi è alcun danno per lasciarli.

Poiché GridView non supporta le funzionalità di inserimento predefinite di DetailsView, convertendo il campo di GridView ProductName in un ModelloField viene generato solo un ItemTemplate oggetto e EditItemTemplate:

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Facendo clic su "Convert this field in a TemplateField", Visual Studio ha creato un TemplateField i cui modelli simulano l'interfaccia utente di BoundField convertita. È possibile verificare questa operazione visitando questa pagina tramite un browser. Si troverà che l'aspetto e il comportamento di TemplateFields è identico all'esperienza in cui sono stati usati BoundFields.

Nota

È possibile personalizzare le interfacce di modifica nei modelli in base alle esigenze. Ad esempio, potrebbe essere necessario avere TextBox nel UnitPrice rendering di TemplateFields come casella di testo più piccola rispetto alla ProductName casella di testo. A tale scopo, è possibile impostare la proprietà TextBox Columns su un valore appropriato o specificare una larghezza assoluta tramite la Width proprietà . Nell'esercitazione successiva verrà illustrato come personalizzare completamente l'interfaccia di modifica sostituendo TextBox con un controllo Web di immissione dati alternativo.

Passaggio 3: Aggiunta dei controlli di convalida a GridViewEditItemTemplate

Quando si costruiscono moduli di immissione dati, è importante che gli utenti immettono i campi obbligatori e che tutti gli input forniti siano legali, formattati correttamente. Per garantire che gli input di un utente siano validi, ASP.NET fornisce cinque controlli di convalida predefiniti progettati per essere usati per convalidare il valore di un singolo controllo 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 la sezione Controlli di convalida delle esercitazioni di avvio rapido ASP.NET.

Per l'esercitazione sarà necessario usare un oggetto RequiredFieldValidator sia nei Campi modello di DetailsView che in GridView ProductName e in Un oggetto RequiredFieldValidator nel TemplateField di UnitPrice DetailsView. Inoltre, sarà necessario aggiungere un CompareValidator a entrambi i controlli UnitPrice TemplateFields che garantisce che il prezzo immesso abbia un valore maggiore o uguale a 0 ed è presentato in un formato valuta valido.

Nota

Mentre ASP.NET 1.x aveva questi stessi cinque controlli di convalida, ASP.NET 2.0 ha aggiunto un numero di miglioramenti, i due principali sono il supporto dello script lato client per browser diversi da Internet Explorer e la possibilità di partizionare i controlli di convalida in una pagina nei gruppi di convalida.

Iniziamo aggiungendo i controlli di convalida necessari all'oggetto EditItemTemplate nel TemplateFields di GridView. A tale scopo, fare clic sul collegamento Modifica modelli dallo smart tag di GridView per visualizzare l'interfaccia di modifica del modello. Da qui è possibile selezionare il modello da modificare dall'elenco a discesa. Poiché si vuole aumentare l'interfaccia di modifica, è necessario aggiungere controlli di convalida all'oggetto ProductNameEditItemTemplate eUnitPrice.

Figura 4: È necessario estendere l'oggetto EditItemTemplate e UnitPrice(fare clic per visualizzare l'immagineProductName full-size)

ProductNameEditItemTemplateNella casella degli strumenti aggiungere un oggetto RequiredFieldValidator trascinandolo dalla casella degli strumenti nell'interfaccia di modifica del modello, inserendo dopo TextBox.

Figura 5: Aggiungere un oggetto RequiredFieldValidator all'oggetto ProductNameEditItemTemplate (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 rispetto a TextBox in EditItemTemplate. Questa operazione viene eseguita impostando la proprietà ControlToValidate del controllo di convalida sull'oggetto ID del controllo Web appropriato. TextBox ha attualmente il valore piuttosto non descritto ID di TextBox1, ma è possibile modificarlo in un elemento più appropriato. Fare clic su TextBox nel modello e quindi, dal Finestra Proprietà, modificare l'oggetto ID da TextBox1 a EditProductName.

Figura 6: Modificare la casella di testo su EditProductName (Fare clic per visualizzare l'immagineID a dimensioni complete)

Impostare quindi la proprietà RequiredFieldValidator ControlToValidate su EditProductName. Infine, impostare la proprietà ErrorMessage su "È necessario specificare il nome del prodotto" e la proprietà Text 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 Text proprietà viene omesso, il ErrorMessage valore della proprietà è anche il testo visualizzato dal controllo di convalida sull'input non valido.

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

Figura 7: Impostare le proprietà , ErrorMessagee Text di ControlToValidateRequiredFieldValidator (fare clic per visualizzare l'immagine a dimensione intera)

Con RequiredFieldValidator aggiunto a ProductNameEditItemTemplate, tutto ciò che rimane consiste nell'aggiungere la convalida necessaria a UnitPriceEditItemTemplate. Poiché abbiamo deciso che, per questa pagina, è UnitPrice facoltativo quando si modifica un record, non è necessario aggiungere un RequiredFieldValidator. È tuttavia necessario aggiungere un CompareValidator per assicurarsi che , UnitPricese specificato, sia formattato correttamente come valuta ed è maggiore o uguale a 0.

Prima di aggiungere CompareValidator a UnitPriceEditItemTemplate, è necessario prima modificare l'ID del controllo Web TextBox da TextBox2 a EditUnitPrice. Dopo aver apportato questa modifica, aggiungere CompareValidator, impostandone la ControlToValidate proprietà su EditUnitPrice, la relativa ErrorMessage 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à Operator di CompareValidator su GreaterThanEqual, la relativa proprietà ValueToCompare su "0" e la relativa proprietà Type su Currency. La sintassi dichiarativa seguente mostra l'oggetto UnitPriceEditItemTemplate TemplateField dopo aver apportato queste modifiche:

<EditItemTemplate>
    <asp:TextBox ID="EditUnitPrice" runat="server"
      Text='<%# Bind("UnitPrice", "{0:c}") %>'
      Columns="6"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator1" runat="server"
        ControlToValidate="EditUnitPrice"
        ErrorMessage="The price must be greater than or equal to zero and
                       cannot include the currency symbol"
        Operator="GreaterThanEqual" Type="Currency"
        ValueToCompare="0">*</asp:CompareValidator>
</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, accanto alla casella di testo viene visualizzato un asterisco. Come illustrato nella figura 8, un valore di prezzo che include il simbolo di valuta, ad esempio $19,95, è considerato non valido. 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ò perplessi per gli utenti perché l'interfaccia di modifica esegue attualmente il rendering dell'oggetto UnitPrice utilizzando il formato di valuta.

Nota

Tenere presente che nell'esercitazione Eventi associati all'inserimento, all'aggiornamento e all'eliminazione è stata impostata la proprietà {0:c} di DataFormatString BoundField su per formattarla come valuta. Inoltre, impostiamo la ApplyFormatInEditMode proprietà su true, causando la formattazione dell'interfaccia UnitPrice di modifica di GridView come valuta. Quando si converte BoundField in un oggetto TemplateField, Visual Studio ha annotato queste impostazioni e formattato la proprietà di Text TextBox come valuta usando la sintassi <%# Bind("UnitPrice", "{0:c}") %>databinding .

Figura 8: Viene visualizzato un asterisco accanto alle caselle di testo con input non valido (fare clic per visualizzare l'immagine a dimensione intera)

Mentre la convalida funziona così come è, l'utente deve rimuovere manualmente il simbolo di valuta durante la modifica di un record, che non è accettabile. Per risolvere questo problema, sono disponibili tre opzioni:

1. Configurare in EditItemTemplate modo che il UnitPrice valore non sia formattato come valuta.
2. Consentire all'utente di immettere un simbolo di valuta rimuovendo CompareValidator e sostituendolo con un RegularExpressionValidator che verifica correttamente la presenza di un valore di valuta formattato correttamente. Il problema è che l'espressione regolare per convalidare un valore di valuta non è abbastanza 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 nel gestore eventi di RowUpdating GridView.

Per questo esercizio verrà ora visualizzata l'opzione n. 1. Attualmente l'oggetto UnitPrice è formattato come valuta a causa dell'espressione databinding per textBox in EditItemTemplate: <%# Bind("UnitPrice", "{0:c}") %>. Modificare l'istruzione Bind in Bind("UnitPrice", "{0:n2}"), che formatta il risultato come numero con due cifre di precisione. Questa operazione può essere eseguita direttamente tramite la sintassi dichiarativa o facendo clic sul collegamento Edit DataBindings (Modifica DataBindings) da EditUnitPrice TextBox nel UnitPrice campo Template ( EditItemTemplate vedere le figure 9 e 10).

Figura 9: Fare clic sul collegamento Edit DataBindings di TextBox (Fare clic per visualizzare l'immagine a dimensione intera)

Figura 10: Specificare l'identificatore di formato nell'istruzione (fare clic per visualizzare l'immagineBind a dimensione intera)

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

Nota

Non UnitPriceEditItemTemplate include requiredFieldValidator, consentendo al postback di eseguire l'esecuzione e la logica di aggiornamento per iniziare. Tuttavia, il RowUpdating gestore eventi copiato dall'esercitazione Analisi degli eventi associati all'inserimento, all'aggiornamento e all'eliminazione include un controllo programmatico che garantisce che venga fornito .UnitPrice È possibile rimuovere questa logica, lasciarla così com'è UnitPriceEditItemTemplateo aggiungere requiredFieldValidator a .

Passaggio 4: 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 casella 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 Convalida non è rilevante, perché verrà configurata in modo da visualizzare solo il riepilogo come una finestra di messaggio. Dopo aver aggiunto il controllo, impostare la proprietà ShowSummary su false e la relativa proprietà ShowMessageBox su true. Con questa aggiunta, tutti gli errori di convalida vengono riepilogati in una finestra di messaggio sul lato client.

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

Passaggio 5: Aggiunta dei controlli di convalida a DetailsViewInsertItemTemplate

Tutto ciò che rimane per questa esercitazione consiste nell'aggiungere i controlli di convalida all'interfaccia di inserimento di DetailsView. Il processo di aggiunta di controlli di convalida ai modelli di DetailsView è identico a quello esaminato nel passaggio 3; di conseguenza, l'attività verrà brezza in questo passaggio. Come abbiamo fatto con il GridView EditItemTemplate , ti invito a rinominare gli ID oggetti TextBox da nondescript TextBox1 e TextBox2 in InsertProductName e InsertUnitPrice.

Aggiungere un oggetto RequiredFieldValidator all'oggetto ProductNameInsertItemTemplate. Impostare su ControlToValidate dell'oggetto ID textBox nel modello, la relativa Text proprietà su "*" e la relativa ErrorMessage proprietà su "È necessario specificare il nome del prodotto".

Poiché è UnitPrice necessario per questa pagina quando si aggiunge un nuovo record, aggiungere un RequiredFieldValidator a UnitPriceInsertItemTemplate, impostando ControlToValidatele relative proprietà , Texte ErrorMessage in modo appropriato. Infine, aggiungere un CompareValidator anche alle UnitPriceInsertItemTemplateControlToValidateproprietà , , ErrorMessageText, Type, Operatore ValueToCompare come è stato fatto con UnitPriceCompareValidator in GridView.EditItemTemplate

Dopo aver aggiunto questi controlli di convalida, non è possibile aggiungere un nuovo prodotto al sistema se il nome non viene fornito o se il relativo prezzo è un numero negativo o formattato in modo non valido.

Figura 12: La logica di convalida è stata aggiunta all'interfaccia di inserimento di DetailsView (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 6: Partizionamento dei controlli di convalida in gruppi di convalida

La pagina è costituita da due set logicamente diversi di controlli di convalida: quelli che corrispondono all'interfaccia di modifica di GridView e quelli che corrispondono all'interfaccia di inserimento di DetailsView. Per impostazione predefinita, quando viene eseguito un postback vengono controllati tutti i controlli di convalida nella pagina. Tuttavia, quando si modifica un record, non si vuole che i controlli di convalida dell'interfaccia di inserimento di DetailsView eseperiamo. La figura 13 illustra il dilemma corrente quando un utente sta modificando un prodotto con valori perfettamente legali, facendo clic su Aggiorna si verifica un errore di convalida perché i valori di nome e prezzo nell'interfaccia di inserimento sono vuoti.

Figura 13: L'aggiornamento di un prodotto causa l'attivazione dei controlli di convalida dell'interfaccia di inserimento (fare clic per visualizzare l'immagine a dimensione intera)

I controlli di convalida in ASP.NET 2.0 possono essere partizionati in gruppi di convalida tramite la relativa ValidationGroup proprietà. Per associare un set di controlli di convalida in un gruppo, è sufficiente impostarne ValidationGroup la proprietà sullo stesso valore. Per l'esercitazione, impostare le ValidationGroup proprietà dei controlli di convalida in TemplateFields di GridView su EditValidationControls e le ValidationGroup proprietà di DetailsView TemplateFields su InsertValidationControls. Queste modifiche possono essere eseguite direttamente nel markup dichiarativo o tramite il Finestra Proprietà quando si usa l'interfaccia del modello di modifica del Designer.

Oltre ai controlli di convalida, i controlli correlati a Button e Button in ASP.NET 2.0 includono anche una ValidationGroup proprietà . I validator di un gruppo di convalida vengono controllati per la validità solo quando un postback viene indotto da un controllo Button con la stessa ValidationGroup impostazione di proprietà. Ad esempio, per consentire al pulsante Inserisci di DetailsView di attivare il InsertValidationControls gruppo di convalida, è necessario impostare la proprietà CommandField ValidationGroup su InsertValidationControls (vedere la figura 14). Inoltre, impostare la proprietà CommandField di GridView su ValidationGroupEditValidationControls.

Figura 14: Impostare la proprietà CommandField di ValidationGroup DetailsView su InsertValidationControls (fare clic per visualizzare l'immagine a dimensione intera)

Dopo queste modifiche, i campi TemplateFields e CommandFields di DetailsView e GridView dovrebbero essere simili ai seguenti:

Campi modello e campo di comando di DetailsView

<asp:TemplateField HeaderText="ProductName"
  SortExpression="ProductName">
    <InsertItemTemplate>
        <asp:TextBox ID="InsertProductName" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2"
          runat="server" ControlToValidate="InsertProductName"
            ErrorMessage="You must provide the product name"
            ValidationGroup="InsertValidationControls">*
        </asp:RequiredFieldValidator>
    </InsertItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
    <InsertItemTemplate>
         <asp:TextBox ID="InsertUnitPrice" runat="server"
           Text='<%# Bind("UnitPrice") %>' Columns="6">
         </asp:TextBox>
         <asp:RequiredFieldValidator ID="RequiredFieldValidator3"
           runat="server" ControlToValidate="InsertUnitPrice"
            ErrorMessage="You must provide the product price"
            ValidationGroup="InsertValidationControls">*
         </asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator2" runat="server"
           ControlToValidate="InsertUnitPrice"
           ErrorMessage="The price must be greater than or equal to zero and
                          cannot include the currency symbol"
           Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
           ValidationGroup="InsertValidationControls">*
        </asp:CompareValidator>
     </InsertItemTemplate>
 </asp:TemplateField>
<asp:CommandField ShowInsertButton="True"
  ValidationGroup="InsertValidationControls" />

Campo di comando e campi modello di GridView

<asp:CommandField ShowEditButton="True" ValidationGroup="EditValidationControls" />
<asp:TemplateField HeaderText="ProductName"
  SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="EditProductName" runat="server"
          Text='<%# Bind("ProductName") %>'>
        </asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            runat="server" ControlToValidate="EditProductName"
            ErrorMessage="You must provide the product name"
            ValidationGroup="EditValidationControls">*
        </asp:RequiredFieldValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
    <EditItemTemplate>
        <asp:TextBox ID="EditUnitPrice" runat="server"
          Text='<%# Bind("UnitPrice", "{0:n2}") %>' Columns="6"></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1" runat="server"
            ControlToValidate="EditUnitPrice"
            ErrorMessage="The price must be greater than or equal to zero and
                           cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency"
            ValueToCompare="0"
            ValidationGroup="EditValidationControls">*
        </asp:CompareValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("UnitPrice", "{0:c}") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:TemplateField>

A questo punto, i controlli di convalida specifici della modifica vengono attivati solo quando si fa clic sul pulsante Update di GridView e i controlli di convalida specifici dell'inserimento vengono attivati solo quando si fa clic sul pulsante Inserisci di DetailsView, risolvendo il problema evidenziato nella figura 13. Tuttavia, con questa modifica il controllo ValidationSummary non viene più visualizzato quando si immettono dati non validi. Il controllo ValidationSummary contiene anche una ValidationGroup proprietà e visualizza solo informazioni di riepilogo per tali controlli di convalida nel relativo gruppo di convalida. Pertanto, è necessario disporre di due controlli di convalida in questa pagina, uno per il InsertValidationControls gruppo di convalida e uno per EditValidationControls.

<asp:ValidationSummary ID="ValidationSummary1" runat="server"
    ShowMessageBox="True" ShowSummary="False"
    ValidationGroup="EditValidationControls" />
<asp:ValidationSummary ID="ValidationSummary2" runat="server"
    ShowMessageBox="True" ShowSummary="False"
    ValidationGroup="InsertValidationControls" />

Con questa aggiunta, l'esercitazione è completa.

Riepilogo

Sebbene BoundFields possa fornire sia un'interfaccia di inserimento che di modifica, l'interfaccia non è personalizzabile. In genere, si vogliono aggiungere controlli di convalida all'interfaccia di modifica e inserimento per assicurarsi che l'utente inserisca gli input necessari in un formato legale. A tale scopo, è necessario convertire BoundFields in TemplateFields e aggiungere i controlli di convalida ai modelli appropriati. In questa esercitazione è stato esteso l'esempio dell'esercitazione Analisi degli eventi associati all'inserimento, all'aggiornamento e all'eliminazione , aggiungendo controlli di convalida all'interfaccia di inserimento di DetailsView e all'interfaccia di modifica di GridView. È stato inoltre illustrato come visualizzare le informazioni di convalida di riepilogo usando il controllo ValidationSummary e come partizionare i controlli di convalida nella pagina in gruppi di convalida distinti.

Come illustrato in questa esercitazione, TemplateFields consente l'aumento delle interfacce di modifica e inserimento per includere i controlli di convalida. TemplateFields può anche essere esteso per includere controlli Web di input aggiuntivi, consentendo di sostituire TextBox con un controllo Web più appropriato. Nell'esercitazione successiva verrà illustrato come sostituire il controllo TextBox con un controllo DropDownList associato a dati, ideale per la modifica di una chiave esterna, ad esempio CategoryID o SupplierID nella Products tabella.

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 speciali

Questa serie di esercitazioni è stata esaminata da molti revisori utili. I revisori principali per questa esercitazione sono stati Liz Shulok e Zack Jones. Interessati a esaminare i prossimi articoli MSDN? In tal caso, lasciami una riga in mitchell@4GuysFromRolla.com.

IndietroAvanti