Validatiebesturingselementen toevoegen aan de bewerkings- en invoeginterfaces (C#)

door Scott Mitchell

PDF downloaden

In deze zelfstudie zien we hoe eenvoudig het is om validatiebesturingselementen toe te voegen aan de EditItemTemplate en InsertItemTemplate van een gegevenswebbesturingselement, om een veiligere gebruikersinterface te bieden.

Introductie

De besturingselementen GridView en DetailsView in de voorbeelden die we in de afgelopen drie zelfstudies hebben verkend, zijn allemaal samengesteld uit BoundFields en CheckBoxFields (de veldtypen die automatisch door Visual Studio worden toegevoegd bij het koppelen van een GridView of DetailsView aan een gegevensbronbesturingselement via de infotag). Wanneer u een rij in een GridView of DetailsView bewerkt, worden die BoundFields die geen alleen-lezen status hebben geconverteerd naar tekstvakken, zodat de eindgebruiker de bestaande gegevens kan aanpassen. Wanneer u een nieuw record invoegt in een DetailsView-besturingselement, worden die BoundFields waarvan de eigenschap InsertVisible is ingesteld op true (de standaardinstelling), weergegeven als lege tekstvakken waarin de gebruiker de veldwaarden van het nieuwe record kan opgeven. Op dezelfde manier worden CheckBoxFields, die zijn uitgeschakeld in de standaardinterface met het kenmerk Alleen-lezen, geconverteerd naar ingeschakelde selectievakjes in de bewerkings- en invoeginterfaces.

Hoewel de standaardinterfaces voor het bewerken en invoegen van het BoundField- en CheckBoxField handig kunnen zijn, missen ze elke vorm van validatie. Als een gebruiker een gegevensinvoerfout maakt, zoals het weglaten van het veld of het ProductName invoeren van een ongeldige waarde voor UnitsInStock (zoals -50) wordt een uitzondering gegenereerd vanuit de diepten van de toepassingsarchitectuur. Hoewel deze uitzondering probleemloos kan worden verwerkt zoals in de vorige zelfstudie is gedemonstreerd, zou de gebruikersinterface voor bewerken of invoegen idealiter validatiemechanismen bevatten om te voorkomen dat een gebruiker dergelijke ongeldige gegevens in de eerste plaats invoert.

Als u een aangepaste bewerkings- of invoeginterface wilt bieden, moeten we het BoundField of CheckBoxField vervangen door een TemplateField. TemplateFields, die het onderwerp van discussie waren in de tutorials TemplateFields gebruiken in de GridView Control en TemplateFields gebruiken in de DetailsView Control, kunnen bestaan uit meerdere sjablonen die afzonderlijke interfaces voor verschillende rijtoestanden definiëren. Het TemplateField ItemTemplate wordt gebruikt bij het weergeven van alleen-lezen velden of rijen in de besturingselementen DetailsView of GridView, terwijl de interfaces EditItemTemplate en InsertItemTemplate worden aangegeven voor de respectievelijke bewerkings- en invoegmodi.

In deze zelfstudie zien we hoe eenvoudig het is om validatiebesturingselementen toe te voegen aan de templatefields EditItemTemplate en InsertItemTemplate om een veiligere gebruikersinterface te bieden. In deze zelfstudie wordt het voorbeeld gebruikt dat is gemaakt in de zelfstudie Gebeurtenissen onderzoeken die zijn gekoppeld aan het invoegen, bijwerken en verwijderen, en worden de interfaces voor bewerken en invoegen uitgebreid om de juiste validatie op te nemen.

Stap 1: het voorbeeld repliceren vanhet onderzoeken van de gebeurtenissen die zijn gekoppeld aan invoegen, bijwerken en verwijderen

In de zelfstudie Gebeurtenissen onderzocht die verbonden zijn met het invoegen, bijwerken en verwijderen hebben we een pagina gemaakt met de namen en prijzen van de producten in een bewerkbare GridView. Bovendien bevat de pagina een DetailsView waarvan de eigenschap DefaultMode is ingesteld op Insert, waardoor deze altijd in de invoegmodus wordt weergegeven. In deze DetailsView kan de gebruiker de naam en prijs voor een nieuw product invoeren, op Invoegen klikken en toevoegen aan het systeem (zie afbeelding 1).

Afbeelding 1: In het vorige voorbeeld kunnen gebruikers nieuwe producten toevoegen en bestaande producten bewerken (klik om de afbeelding op volledige grootte weer te geven)

Ons doel voor deze tutorial is het uitbreiden van de DetailsView en GridView, zodat ze validatiecontroles bieden. Onze validatielogica zal met name het volgende doen:

• Vereisen dat de naam wordt opgegeven bij het invoegen of bewerken van een product
• Vereisen dat de prijs wordt opgegeven bij het invoegen van een record; bij het bewerken van een record hebben we nog steeds een prijs nodig, maar gebruiken we de programmatische logica in de gebeurtenis-handler van RowUpdating GridView die al aanwezig is in de eerdere zelfstudie
• Zorg ervoor dat de waarde die voor de prijs is ingevoerd, een geldige valutanotatie is

Voordat we het vorige voorbeeld kunnen uitbreiden om validatie op te nemen, moeten we eerst het voorbeeld van de DataModificationEvents.aspx pagina naar de pagina voor deze zelfstudie repliceren. UIValidation.aspx Hiervoor moeten we zowel de declaratieve markeringen als de broncode van de DataModificationEvents.aspx pagina kopiëren. Kopieer eerst de declaratieve markeringen door de volgende stappen uit te voeren:

1. DataModificationEvents.aspx De pagina openen in Visual Studio
2. Ga naar de declaratieve markering van de pagina (klik op de knop Bron onder aan de pagina)
3. Kopieer de tekst binnen de <asp:Content> en </asp:Content> labels (regel 3 tot en met 44), zoals wordt weergegeven in afbeelding 2.

Afbeelding 2: De tekst in het <asp:Content> besturingselement kopiëren (klik om de volledige afbeelding weer te geven)

1. UIValidation.aspx De pagina openen
2. Ga naar de declaratieve markeringen van de pagina
3. Plak de tekst in de <asp:Content> controle.

Als u de broncode wilt kopiëren, opent u de DataModificationEvents.aspx.cs pagina en kopieert u alleen de tekst in de EditInsertDelete_DataModificationEvents klasse. Kopieer de drie gebeurtenis-handlers (Page_Load, GridView1_RowUpdating, en ObjectDataSource1_Inserting), maar kopieer de klassedeclaratie of -instructies niet. Plak de gekopieerde tekst in de EditInsertDelete_UIValidation klasse in UIValidation.aspx.cs.

Nadat u de inhoud en code hebt verplaatst van DataModificationEvents.aspx naar UIValidation.aspx, neemt u even de tijd om uw voortgang in een browser te testen. U ziet dezelfde uitvoer en dezelfde functionaliteit op elk van deze twee pagina's (raadpleeg afbeelding 1 voor een schermafbeelding van DataModificationEvents.aspx in actie).

Stap 2: de BoundFields converteren naar TemplateFields

Als u validatiebesturingselementen wilt toevoegen aan de bewerkings- en invoeginterfaces, moeten de BoundFields die worden gebruikt door de besturingselementen DetailsView en GridView worden geconverteerd naar TemplateFields. Klik hiervoor op respectievelijk de koppelingen Kolommen bewerken en Velden bewerken in de infolabels GridView en DetailsView. Selecteer daar elk van de BoundFields en klik op de koppeling Dit veld converteren naar een TemplateField.

Afbeelding 3: Converteer elk van de DetailsView's en GridView's BoundFields naar TemplateFields (klik om de volledige afbeelding weer te geven)

Als u een BoundField converteert naar een TemplateField via het dialoogvenster Velden, wordt een Sjabloonveld gegenereerd dat dezelfde alleen-lezeninterfaces, bewerkings- en invoeginterfaces vertoont als het BoundField zelf. In de volgende markeringen ziet u de declaratieve syntaxis voor het ProductName veld in de DetailsView nadat het is geconverteerd naar een TemplateField:

<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>

Houd er rekening mee dat dit TemplateField automatisch drie sjablonen heeft aangemaakt ItemTemplate, EditItemTemplate, en InsertItemTemplate. De ItemTemplate geeft een enkele gegevensveldwaarde (ProductName) weer met behulp van een Label Web-besturingselement, terwijl de EditItemTemplate en InsertItemTemplate de waarde van het gegevensveld weergeven in een TextBox Web-besturingselement dat het gegevensveld koppelt aan de Text-eigenschap van de TextBox met behulp van tweerichtingsgegevensbinding. Omdat we alleen de DetailsView op deze pagina gebruiken om in te voegen, kunt u de ItemTemplate en EditItemTemplate van de twee TemplateFields verwijderen, hoewel er geen kwaad is om ze te verlaten.

Aangezien gridView geen ondersteuning biedt voor de ingebouwde functies voor het invoegen van de DetailsView, resulteert het converteren van het veld van GridView ProductName in een TemplateField alleen in een ItemTemplate en 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>

Door te klikken op 'Dit veld converteren naar een TemplateField', heeft Visual Studio een TemplateField gemaakt waarvan de sjablonen de gebruikersinterface van het geconverteerde BoundField nabootsen. U kunt dit controleren door naar deze pagina te gaan via een browser. U zult merken dat het uiterlijk en gedrag van de TemplateFields identiek is aan de ervaring wanneer BoundFields in plaats daarvan werd gebruikt.

Opmerking

U kunt de bewerkingsinterfaces in de sjablonen desgewenst aanpassen. We willen bijvoorbeeld het tekstvak in de UnitPrice TemplateFields weergeven als een kleiner tekstvak dan het ProductName tekstvak. Hiervoor kunt u de eigenschap van het tekstvak Columns instellen op een geschikte waarde of een absolute breedte opgeven via de Width eigenschap. In de volgende handleiding leren we hoe we de bewerkingsinterface volledig kunnen aanpassen door het tekstvak te vervangen door een alternatief webbesturingselement voor gegevensinvoer.

Stap 3: de validatiebesturingselementen toevoegen aan de GridView'sEditItemTemplate

Bij het maken van formulieren voor gegevensinvoer is het belangrijk dat gebruikers alle vereiste velden invoeren en dat alle opgegeven invoer juridische, goed opgemaakte waarden zijn. Om ervoor te zorgen dat de invoer van een gebruiker geldig is, biedt ASP.NET vijf ingebouwde validatiebesturingselementen die zijn ontworpen om de waarde van één invoerbesturingselement te valideren:

• RequiredFieldValidator zorgt ervoor dat er een waarde is opgegeven
• CompareValidator valideert een waarde met een andere webbesturingswaarde of een constante waarde, of zorgt ervoor dat de notatie van de waarde legaal is voor een opgegeven gegevenstype
• RangeValidator zorgt ervoor dat een waarde zich binnen een bereik van waarden bevindt
• RegularExpressionValidator valideert een waarde op basis van een reguliere expressie
• CustomValidator valideert een waarde op basis van een aangepaste, door de gebruiker gedefinieerde methode

Raadpleeg de sectie Validatiebesturingselementen van de zelfstudies voor ASP.NET quickstart voor meer informatie over deze vijf besturingselementen.

Voor onze zelfstudie moeten we een RequiredFieldValidator gebruiken in zowel de TemplateFields van ProductName DetailsView als de TemplateFields van GridView en een RequiredFieldValidator in het TemplateField van UnitPrice DetailsView. Bovendien moeten we een CompareValidator toevoegen aan de TemplateFields van beide besturingselementen UnitPrice die ervoor zorgen dat de ingevoerde prijs een waarde heeft die groter is dan of gelijk is aan 0 en wordt weergegeven in een geldige valutanotatie.

Opmerking

Hoewel ASP.NET 1.x dezelfde vijf validatiebesturingselementen had, heeft ASP.NET 2.0 een aantal verbeteringen toegevoegd, de belangrijkste twee zijn scriptondersteuning aan de clientzijde voor browsers anders dan Internet Explorer en de mogelijkheid om besturingselementen voor validatie op een pagina te partitioneren in validatiegroepen.

Laten we beginnen met het toevoegen van de benodigde validatiebesturingselementen aan de EditItemTemplate s in de TemplateFields van GridView. Klik hiervoor op de koppeling Sjablonen bewerken vanuit de infolabel van GridView om de interface voor het bewerken van sjablonen weer te geven. Hier kunt u selecteren welke sjabloon u wilt bewerken in de vervolgkeuzelijst. Omdat we de bewerkingsinterface willen uitbreiden, moeten we validatiecontroles toevoegen aan de ProductName en de UnitPrice's EditItemTemplates.

Afbeelding 4: We moeten de ProductName en UnitPrice's EditItemTemplate uitbreiden (klik om de volledige afbeelding weer te geven)

Voeg een RequiredFieldValidator toe in de ProductNameEditItemTemplate door deze vanuit de toolbox naar de bewerkingsinterface van de sjabloon te slepen en vervolgens na de TextBox te plaatsen.

Afbeelding 5: Voeg een RequiredFieldValidator toe aan de ProductNameEditItemTemplate afbeelding (Klik om de afbeelding volledig weer te geven)

Alle validatiebesturingselementen werken door de invoer van één ASP.NET webbesturingselement te valideren. Daarom moeten we aangeven dat de RequiredFieldValidator die we zojuist hebben toegevoegd, het tekstvak in het EditItemTemplate moet valideren; dit wordt bereikt door de eigenschap ControlToValidate van het validatiebesturingselement in te stellen op het ID van het juiste webbesturingselement. Het tekstvak heeft momenteel het tamelijk nietszeggende ID van TextBox1, maar laten we het wijzigen in iets geschikters. Klik op het tekstvak in de sjabloon en wijzig vervolgens in het venster Eigenschappen het ID van TextBox1 in EditProductName.

Afbeelding 6: Wijzig het tekstvak ID in EditProductName (klik om de afbeelding op volledige grootte weer te geven)

Stel vervolgens de eigenschap ControlToValidate van RequiredFieldValidator in op EditProductName. Stel ten slotte de eigenschap ErrorMessage in op 'U moet de naam van het product opgeven' en de eigenschap Tekst op *. De Text eigenschapswaarde, indien opgegeven, is de tekst die wordt weergegeven door het validatiebesturingselement als de validatie mislukt. De ErrorMessage eigenschapswaarde, die vereist is, wordt gebruikt door het besturingselement ValidationSummary. Als de Text eigenschapswaarde wordt weggelaten, is de ErrorMessage eigenschapswaarde ook de tekst die wordt weergegeven door het validatiebesturingselement voor ongeldige invoer.

Nadat u deze drie eigenschappen van de RequiredFieldValidator hebt ingesteld, moet uw scherm er ongeveer uitzien als afbeelding 7.

Afbeelding 7: Stel de ControlToValidate, ErrorMessage, en Text eigenschappen van RequiredFieldValidator in (klik om de afbeelding op volledige grootte weer te geven)

Nu de RequiredFieldValidator is toegevoegd aan de ProductNameEditItemTemplate, alles wat overblijft is om de benodigde validatie toe te voegen aan de UnitPriceEditItemTemplate. Aangezien we hebben besloten dat op deze pagina de UnitPrice optioneel is bij het bewerken van een record, is het niet nodig om een RequiredFieldValidator toe te voegen. We moeten echter een CompareValidator toevoegen om ervoor te zorgen dat de UnitPrice, indien opgegeven, correct is opgemaakt als een valuta en groter is dan of gelijk is aan 0.

Voordat we de CompareValidator aan de UnitPriceEditItemTemplate Webcontrole toevoegen, gaan we eerst de ID van de TextBox Webcontrole wijzigen van TextBox2 in EditUnitPrice. Nadat u deze wijziging hebt aangebracht, voegt u de CompareValidator toe, stelt u de ControlToValidate eigenschap EditUnitPriceervan in op ErrorMessage 'De prijs moet groter dan of gelijk zijn aan nul en kan het valutasymbool niet bevatten' en de Text eigenschap ervan op *.

Als u wilt aangeven dat de UnitPrice waarde groter dan of gelijk moet zijn aan 0, stelt u de operatoreigenschapGreaterThanEqualCompareValidator in op , de eigenschap ValueToCompare op 0 en de eigenschap Type op Currency. In de volgende declaratieve syntaxis ziet u de UnitPrice waarden van EditItemTemplate TemplateField nadat deze wijzigingen zijn aangebracht:

<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>

Nadat u deze wijzigingen hebt aangebracht, opent u de pagina in een browser. Als u de naam weglaat of een ongeldige prijswaarde invoert bij het bewerken van een product, verschijnt er een sterretje naast het tekstvak. Zoals in afbeelding 8 wordt weergegeven, wordt een prijswaarde met het valutasymbool, zoals $19,95, als ongeldig beschouwd. De CompareValidator CurrencyType staat scheidingstekens voor cijfers (zoals komma's of punten, afhankelijk van de cultuurinstellingen) en een voorloop-plus- of minteken toe, maar staat geen valutasymbool toe. Dit gedrag kan gebruikers perplex stellen, omdat de bewerkingsinterface momenteel het UnitPrice valutaformaat weergeeft.

Opmerking

Zoals u weet, hebben we in de zelfstudie Gebeurtenissen die zijn gekoppeld aan invoegen, bijwerken en verwijderen de eigenschap DataFormatString van BoundField op {0:c} ingesteld om het als een valuta op te maken. Bovendien stellen we de ApplyFormatInEditMode eigenschap in op true, waardoor de bewerkingsinterface van GridView de UnitPrice als een valuta formatteert. Bij het converteren van het BoundField naar een TemplateField, noteerde Visual Studio deze instellingen en formatteerde de Text eigenschap van de TextBox als een valuta, met behulp van de gegevensbinding syntaxis <%# Bind("UnitPrice", "{0:c}") %>.

Afbeelding 8: Er wordt een sterretje weergegeven naast de tekstvakken met ongeldige invoer (klik om de afbeelding op volledige grootte weer te geven)

Hoewel de validatie werkt as-is, moet de gebruiker het valutasymbool handmatig verwijderen bij het bewerken van een record, wat niet acceptabel is. Om dit te verhelpen, hebben we drie opties:

1. Configureer de EditItemTemplate indeling zodanig dat de UnitPrice waarde niet is opgemaakt als een valuta.
2. Hiermee staat u toe dat de gebruiker een valutasymbool invoert door de CompareValidator te verwijderen en te vervangen door een RegularExpressionValidator die op de juiste manier controleert op een goed opgemaakte valutawaarde. Het probleem hier is dat de reguliere expressie voor het valideren van een valutawaarde niet mooi is en dat code moet worden geschreven als we cultuurinstellingen wilden opnemen.
3. Verwijder het validatiebesturingselement helemaal en vertrouw op validatielogica aan de serverzijde in de gebeurtenis-handler van RowUpdating GridView.

Laten we de optie 1 voor deze oefening gebruiken. Momenteel is de UnitPrice genoteerd als valuta door de databinding-expressie voor het Tekstvak in het EditItemTemplate: <%# Bind("UnitPrice", "{0:c}") %>. Wijzig de bindingsinstructie in Bind("UnitPrice", "{0:n2}"), waarmee het resultaat wordt opgemaakt als een getal met twee cijfers precisie. Dit kan rechtstreeks via de declaratieve syntaxis of door te klikken op de koppeling DataBindings bewerken in het EditUnitPrice tekstvak in de UnitPrice TemplateField EditItemTemplate (zie Afbeeldingen 9 en 10).

Afbeelding 9: Klik op de koppeling DataBindings bewerken van het tekstvak (klik om de afbeelding op volledige grootte weer te geven)

Afbeelding 10: Geef de opmaakaanduiding op in de Bind instructie (klik om de afbeelding op volledige grootte weer te geven)

Met deze wijziging bevat de opgemaakte prijs in de bewerkingsinterface komma's als groepsscheidingsteken en een punt als het decimaalteken, maar blijft het valutasymbool weg.

Opmerking

Het UnitPriceEditItemTemplate bevat geen RequiredFieldValidator, waardoor de postback kan doorgaan en de updatelogica kan worden gestart. De gekopieerde RowUpdating gebeurtenis-handler uit de zelfstudie Gebeurtenissen onderzoeken die zijn gekoppeld aan het invoegen, bijwerken en verwijderen, bevat echter een programmatische controle die ervoor zorgt dat de UnitPrice wordt geleverd. U kunt deze logica verwijderen, deze in as-islaten staan of een RequiredFieldValidator toevoegen aan de UnitPriceEditItemTemplate.

Stap 4: Problemen met gegevensinvoer samenvatten

Naast de vijf validatiebesturingselementen bevat ASP.NET het besturingselement ValidationSummary, waarin de ErrorMessage s van die validatiebesturingselementen worden weergegeven die ongeldige gegevens hebben gedetecteerd. Deze samenvattingsgegevens kunnen worden weergegeven als tekst op de webpagina of via een modaal berichtvak aan de clientzijde. Laten we deze zelfstudie uitbreiden om een berichtvak aan de clientzijde toe te voegen waarin eventuele validatieproblemen worden samengevat.

Om dit te doen, sleept u een ValidationSummary-besturingselement van de Toolbox naar de Ontwerper. De locatie van het besturingselement Validatie maakt niet echt uit, omdat we het zo configureren dat alleen de samenvatting als een berichtvak wordt weergegeven. Nadat u het besturingselement hebt toegevoegd, stelt u de eigenschap ShowSummary in op false en de eigenschap ShowMessageBox op true. Met deze toevoeging worden eventuele validatiefouten samengevat in een berichtvak aan de clientzijde.

Afbeelding 11: De validatiefouten worden samengevat in een Client-Side Berichtvak (klik om de afbeelding op volledige grootte weer te geven)

Stap 5: De validatiebesturingselementen toevoegen aan de detailsweergaveInsertItemTemplate

Het enige wat overblijft voor deze zelfstudie is het toevoegen van de validatiebesturingselementen aan de invoeginterface van DetailsView. Het proces voor het toevoegen van validatiebesturingselementen aan de sjablonen van DetailsView is identiek aan het proces dat in stap 3 is onderzocht; Daarom doorlopen we de taak in deze stap. Net als bij de GridView's EditItemTemplate moedig ik u aan de namen van de TextBoxen te wijzigen van de niet-beschrijvende ID en TextBox1 naar TextBox2 en InsertProductName.

Voeg een RequiredFieldValidator toe aan de ProductNameInsertItemTemplate. Stel de ControlToValidate eigenschap in op het ID tekstvak in de sjabloon, Text de eigenschap ervan op *en de ErrorMessage eigenschap op 'U moet de naam van het product opgeven'.

Aangezien de UnitPrice vereist is voor deze pagina bij het toevoegen van een nieuw record, voegt u een RequiredFieldValidator toe aan UnitPriceInsertItemTemplate en stelt u de eigenschappen ControlToValidate, Text, en ErrorMessage op de juiste manier in. Voeg ten slotte ook een CompareValidator toe aan de UnitPriceInsertItemTemplate, configureer de eigenschappen ControlToValidate, Text, ErrorMessage, Type, Operator, en ValueToCompare, net zoals we deden met de CompareValidator van de UnitPrice in de GridView EditItemTemplate.

Nadat u deze validatiebesturingselementen hebt toegevoegd, kan een nieuw product niet aan het systeem worden toegevoegd als de naam niet is opgegeven of als de prijs een negatief getal is of illegaal is opgemaakt.

Afbeelding 12: Validatielogica is toegevoegd aan de invoeginterface van DetailsView (klik om de afbeelding op volledige grootte weer te geven)

Stap 6: De validatiebesturingselementen partitioneren in validatiegroepen

Onze pagina bestaat uit twee logisch verschillende sets validatiebesturingselementen: die overeenkomen met de bewerkingsinterface van GridView en die overeenkomen met de invoeginterface van DetailsView. Standaard worden alle validatiebesturingselementen op de pagina gecontroleerd wanneer er een postback plaatsvindt. Bij het bewerken van een record willen we echter niet dat de validatiebesturingselementen van de invoerinterface van de DetailView worden gevalideerd. Afbeelding 13 illustreert ons huidige dilemma wanneer een gebruiker een product bewerkt met perfect juridische waarden. Als u op Update klikt, wordt een validatiefout veroorzaakt omdat de naam en prijswaarden in de invoeginterface leeg zijn.

Afbeelding 13: Bijwerken van een product zorgt ervoor dat de validatiebesturingselementen van de invoeginterface worden geactiveerd (klik om de afbeelding op volledige grootte weer te geven)

De validatiebesturingselementen in ASP.NET 2.0 kunnen worden gepartitioneerd in validatiegroepen via hun ValidationGroup eigenschap. Als u een set validatiebesturingselementen in een groep wilt koppelen, stelt u de ValidationGroup eigenschap ervan in op dezelfde waarde. Voor onze zelfstudie stelt u de ValidationGroup eigenschappen van de validatiebesturingselementen in de TemplateFields EditValidationControls van GridView in op en de ValidationGroup eigenschappen van de TemplateFields van DetailsView op InsertValidationControls. Deze wijzigingen kunnen rechtstreeks worden aangebracht in de declaratieve markeringen of via het venster Eigenschappen wanneer u de interface van de ontwerpfunctie voor het bewerken van sjablonen gebruikt.

Naast de validatiebesturingselementen bevatten de knoppen en aan knoppen gerelateerde besturingselementen in ASP.NET 2.0 ook een ValidationGroup eigenschap. De validators van een validatiegroep worden alleen gecontroleerd op geldigheid wanneer een postback wordt veroorzaakt door een knop met dezelfde ValidationGroup eigenschapinstelling. Bijvoorbeeld, om de validatiegroep van DetailsView's knop Invoegen te activeren, moeten we de eigenschap van CommandField instellen op InsertValidationControlsValidationGroupInsertValidationControls (zie afbeelding 14). Stel bovendien de eigenschap CommandField ValidationGroup van GridView in op EditValidationControls.

Afbeelding 14: Stel de eigenschap CommandField van ValidationGroup De DetailsView in op InsertValidationControls (klik om de afbeelding op volledige grootte weer te geven)

Na deze wijzigingen moeten de TemplateFields en CommandFields van DetailsView en GridView er ongeveer als volgt uitzien:

de TemplateFields en CommandField van de 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" />

De CommandField en TemplateFields van de 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>

Op dit punt worden de bewerkingsspecifieke validatiebesturingselementen alleen geactiveerd wanneer op de knop Bijwerken van GridView wordt geklikt en de invoegspecifieke validatiebesturingselementen alleen worden geactiveerd wanneer op de knop Invoegen van DetailsView wordt geklikt, waardoor het probleem wordt opgelost dat is gemarkeerd in afbeelding 13. Door deze wijziging wordt het ValidationSummary-besturingselement echter niet meer weergegeven wanneer er ongeldige gegevens worden ingevoerd. Het besturingselement ValidationSummary bevat ook een ValidationGroup eigenschap en toont alleen samenvattingsgegevens voor die validatiebesturingselementen in de validatiegroep. Daarom moeten we twee validatiebesturingselementen op deze pagina hebben, één voor de InsertValidationControls validatiegroep en één voor 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" />

Met deze toevoeging is onze zelfstudie voltooid!

Samenvatting

Hoewel BoundFields zowel een invoeg- als bewerkingsinterface kan bieden, kan de interface niet worden aangepast. Meestal willen we validatiebesturingselementen toevoegen aan de bewerkings- en invoeginterface om ervoor te zorgen dat de gebruiker de vereiste gegevens in een juist formaat invoert. Hiervoor moeten we de BoundFields converteren naar TemplateFields en de validatiebesturingselementen toevoegen aan de juiste sjabloon(en). In deze zelfstudie hebben we het voorbeeld uit de tutorial Onderzoek van gebeurtenissen bij het invoegen, bijwerken en verwijderen uitgebreid door validatiecontroles toe te voegen aan zowel de invoeginterface van DetailsView als de bewerkingsinterface van GridView. Bovendien hebben we gezien hoe we samenvattingsvalidatiegegevens kunnen weergeven met behulp van het besturingselement ValidationSummary en hoe we de validatiebesturingselementen op de pagina kunnen partitioneren in afzonderlijke validatiegroepen.

Zoals we in deze zelfstudie hebben gezien, kunnen in TemplateFields de bewerkings- en invoeginterfaces worden uitgebreid met validatiebesturingselementen. TemplateFields kunnen ook worden uitgebreid met extra invoerwebbesturingselementen, waardoor het tekstvak kan worden vervangen door een geschikter webbesturingselement. In onze volgende handleiding zullen we zien hoe u de Tekstvakcontrole kunt vervangen door een data-gebonden Vervolgkeuzelijstcontrole, wat ideaal is bij het bewerken van een refererende sleutel (zoals CategoryID of SupplierID in de Products tabel).

Veel plezier met programmeren!

Over de auteur

Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.

Speciale dank aan

Deze tutorialreeks is beoordeeld door veel behulpzame beoordelers. Hoofdrevisoren voor deze tutorial waren Liz Shulok en Zack Jones. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.

VorigeVolgende