Validatiebesturingselementen toevoegen aan de bewerkingsinterface van DataList (VB)

door Scott Mitchell

PDF downloaden

In deze zelfstudie zien we hoe eenvoudig het is om validatiebesturingselementen toe te voegen aan de EditItemTemplate van DataList om een veiligere gebruikersinterface voor bewerken te bieden.

Introductie

In de handleidingen voor het bewerken van DataLists hebben de bewerkingsinterfaces van DataLists tot nu toe geen proactieve validatie van gebruikersinvoer opgenomen, zelfs niet wanneer ongeldige invoer, zoals een ontbrekende productnaam of negatieve prijs, in een foutmelding resulteert. In de voorgaande zelfstudie hebben we onderzocht hoe u uitzonderingsafhandelingscode toevoegt aan de DataList-gebeurtenis-handler UpdateCommand om informatie te vangen en correct weer te geven over eventuele uitzonderingen die zijn gegenereerd. Idealiter zou de bewerkingsinterface echter validatiebesturingselementen bevatten om te voorkomen dat een gebruiker dergelijke ongeldige gegevens in de eerste plaats invoert.

In deze zelfstudie zien we hoe eenvoudig het is om validatiebesturingselementen toe te voegen aan de DataList s EditItemTemplate om een veiligere gebruikersinterface voor bewerken te bieden. Specifiek richt deze tutorial zich op het gebruiken van het voorbeeld dat in de vorige tutorial is gemaakt, en op het uitbreiden van de bewerkingsinterface met de juiste validatie.

Stap 1: Het voorbeeld repliceren vanhet verwerken van BLL- en DAL-Level-uitzonderingen

In de zelfstudie Handling BLL- en DAL-Level Exceptions hebben we een pagina gemaakt die de namen en prijzen van de producten oplijst in een bewerkbare DataList met twee kolommen. Ons doel voor deze zelfstudie is het uitbreiden van de bewerkingsinterface van DataList om validatiebesturingselementen op te nemen. Onze validatielogica zal met name het volgende doen:

• Vereisen dat de productnaam wordt opgegeven
• Zorg ervoor dat de waarde die voor de prijs is ingevoerd, een geldige valutanotatie is
• Zorg ervoor dat de ingevoerde waarde voor de prijs groter is dan of gelijk is aan nul, omdat een negatieve UnitPrice waarde ongeldig is

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

1. ErrorHandling.aspx De pagina openen in Visual Studio
2. Ga naar de declaratieve markeringen 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 32), zoals weergegeven in afbeelding 1.

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. Naar de declaratieve markeringen van de pagina gaan
3. Plak de tekst in de <asp:Content> controle.

Als u de broncode wilt kopiëren, opent u de ErrorHandling.aspx.vb pagina en kopieert u alleen de tekst in de EditDeleteDataList_ErrorHandling klasse. Kopieer de drie gebeurtenis-handlers (Products_EditCommand, Products_CancelCommanden Products_UpdateCommand) samen met de DisplayExceptionDetails methode, maar kopieer de klassedeclaratie of using instructies niet. Plak de gekopieerde tekst in de EditDeleteDataList_UIValidation klasse in UIValidation.aspx.vb.

Nadat u de inhoud en code hebt verplaatst van ErrorHandling.aspx naar UIValidation.aspx, kunt u de pagina's in een browser even testen. U ziet dezelfde uitvoer en dezelfde functionaliteit op elk van deze twee pagina's (zie afbeelding 2).

Afbeelding 2: De UIValidation.aspx pagina mimiceert de functionaliteit in ErrorHandling.aspx (klik om de afbeelding op volledige grootte weer te geven)

Stap 2: De validatiebesturingselementen toevoegen aan de EditItemTemplate van DataList

Bij het maken van formulieren voor gegevensinvoer is het belangrijk dat gebruikers alle vereiste velden invoeren en dat al hun 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 invoerwebbesturingselement 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 voor meer informatie over deze vijf besturingselementen de handleiding Validatiebesturingselementen toevoegen aan de bewerkings- en invoeginterfaces of bekijk de sectie Validatiebesturingselementen van de ASP.NET Quickstart-handleidingen.

Voor onze zelfstudie moeten we een RequiredFieldValidator gebruiken om ervoor te zorgen dat een waarde voor de productnaam is opgegeven en een CompareValidator om ervoor te 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, naast Internet Explorer en de mogelijkheid om besturingselementen voor validatie op een pagina te partitioneren in validatiegroepen. Raadpleeg "Dissecting the Validation Controls in ASP.NET 2.0" voor meer informatie over de nieuwe functies van validatiebesturingselementen in 2.0.

Laten we beginnen met het toevoegen van de benodigde validatiebesturingselementen aan de DataList s EditItemTemplate. Deze taak kan worden uitgevoerd via de ontwerpfunctie door te klikken op de koppeling Sjablonen bewerken vanuit de infotag van DataList of via de declaratieve syntaxis. Laten we het proces doorlopen met behulp van de optie Sjablonen bewerken vanuit de ontwerpweergave. Nadat u ervoor hebt gekozen om de DataList s EditItemTemplatete bewerken, voegt u een RequiredFieldValidator toe door deze vanuit de werkset naar de bewerkingsinterface van de sjabloon te slepen en deze na het ProductName tekstvak te plaatsen.

Afbeelding 3: Voeg een RequiredFieldValidator toe aan het EditItemTemplate AfterProductName tekstvak (klik om de afbeelding op volledige grootte 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, moet valideren tegen het ProductName tekstvak. Dit gebeurt door de eigenschap van het validatiebesturingselement ControlToValidate in te stellen op het ID van het juiste webbesturingselement (ProductName, in dit geval). Stel vervolgens de ErrorMessage eigenschap in op U moet de naam van het product en de Text eigenschap opgeven 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, wordt de ErrorMessage eigenschapswaarde 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 4.

De eigenschappen ControlToValidate, ErrorMessage en Text van de RequiredFieldValidator instellen

Afbeelding 4: De RequiredFieldValidator-s ControlToValidateen ErrorMessageText Eigenschappen instellen (klik om de afbeelding op volledige grootte weer te geven)

Nu de RequiredFieldValidator is toegevoegd aan het EditItemTemplatebestand, hoeft u alleen maar de benodigde validatie toe te voegen voor het tekstvak voor de prijs van het product. Omdat de optie optioneel is bij het UnitPrice bewerken van een record, hoeven we geen 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.

Voeg de CompareValidator toe aan de EditItemTemplate en stel de eigenschap ControlToValidate in op UnitPrice, de eigenschap ErrorMessage op De prijs moet groter dan of gelijk aan nul zijn en mag het valutasymbool niet bevatten, en stel de eigenschap Text in op *. Als u wilt aangeven dat de UnitPrice waarde groter dan of gelijk aan 0 moet zijn, stelt u de Operator eigenschap van de CompareValidator in op GreaterThanEqual, de ValueToCompare eigenschap op 0 en de Type eigenschap op Currency.

Nadat u deze twee validatiebesturingselementen hebt toegevoegd, moet de declaratieve syntaxis van EditItemTemplate DataList er ongeveer als volgt uitzien:

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

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 5 wordt weergegeven, wordt een prijswaarde met het valutasymbool zoals $ 19,95 als ongeldig beschouwd. De CompareValidator s 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.

Afbeelding 5: 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. Als er bovendien ongeldige invoer in de bewerkingsinterface staat, zullen de knoppen Bijwerken en Annuleren, wanneer erop wordt geklikt, geen postback uitvoeren. In het ideale geval retourneert de knop Annuleren de DataList naar de status van voorbewerking, ongeacht de geldigheid van de invoer van de gebruiker. We moeten er ook voor zorgen dat de gegevens van de pagina geldig zijn voordat we de productinformatie in de UpdateCommand gebeurtenis-handler van de DataList bijwerken. Dit komt omdat de client-side validatie logica kan worden omzeild door gebruikers waarvan de browsers geen JavaScript ondersteunen of die deze functie hebben uitgeschakeld.

Het valutasymbool verwijderen uit het tekstvak EditItemTemplate s UnitPrice

Wanneer u de CompareValidator s Currency``Typegebruikt, mag de invoer die wordt gevalideerd geen valutasymbolen bevatten. De aanwezigheid van dergelijke symbolen zorgt ervoor dat de CompareValidator de invoer als ongeldig markeert. De bewerkingsinterface bevat momenteel echter een valutasymbool in het UnitPrice tekstvak, wat betekent dat de gebruiker het valutasymbool expliciet moet verwijderen voordat de wijzigingen worden opgeslagen. Om dit te verhelpen hebben we drie opties:

1. Configureer de EditItemTemplate indeling zodanig dat de waarde van het UnitPrice tekstvak niet is opgemaakt als een valuta.
2. Hiermee kan de gebruiker een valutasymbool invoeren door de CompareValidator te verwijderen en te vervangen door een RegularExpressionValidator die controleert op een goed opgemaakte valutawaarde. De uitdaging hier is dat de reguliere expressie voor het valideren van een valutawaarde niet zo eenvoudig is als de CompareValidator en dat code moet worden geschreven als we cultuurinstellingen willen opnemen.
3. Verwijder het validatiebesturingselement helemaal en vertrouw op aangepaste validatielogica aan de serverzijde in de gebeurtenis-handler van RowUpdating GridView.

Laten we beginnen met optie 1 voor deze zelfstudie. Momenteel is de UnitPrice geformatteerd als een valutawaarde vanwege de databindingexpressie voor het tekstvak in het EditItemTemplate: <%# Eval("UnitPrice", "{0:c}") %>. Wijzig de Eval instructie in Eval("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 vanuit het UnitPrice tekstvak in de DataList s EditItemTemplate.

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

Wanneer ik de valutanotatie uit de bewerkbare interface verwijder, vind ik het handig om het valutasymbool als tekst buiten het tekstvak te plaatsen. Dit is een hint voor de gebruiker die het valutasymbool niet hoeft op te geven.

De Annuleren-knop herstellen

Standaard verzenden de webbesturingselementen voor validatie JavaScript om validatie aan de clientzijde uit te voeren. Wanneer op een knop, LinkButton of ImageButton wordt geklikt, worden de validatiebesturingselementen op de pagina gecontroleerd aan de clientzijde voordat de postback plaatsvindt. Als er ongeldige gegevens zijn, wordt de terugdraaiactie geannuleerd. Voor bepaalde knoppen kan de geldigheid van de gegevens echter immateriële zijn; in dat geval is het vervelend dat de terugzending wordt geannuleerd vanwege ongeldige gegevens.

De knop Annuleren is zo'n voorbeeld. Stel dat een gebruiker ongeldige gegevens invoert, zoals het weglaten van de productnaam en vervolgens besluit dat ze het product niet meer wil opslaan en de knop Annuleren bereikt. Op dit moment activeert de knop Annuleren de validatiebesturingselementen op de pagina, die rapporteren dat de productnaam ontbreekt en voorkomen dat de terugdraaiactie wordt uitgevoerd. Onze gebruiker moet tekst in het ProductName tekstvak typen om het bewerkingsproces te annuleren.

Gelukkig hebben de Button, LinkButton en ImageButton een CausesValidation eigenschap waarmee kan worden aangegeven of het klikken op de Button de validatielogica moet starten (standaard op True). Stel de eigenschap van de knop Annuleren in op CausesValidationFalse.

Controleren of de invoer geldig is in de gebeurtenis-handler UpdateCommand

Vanwege het client-side script dat door de validatiebesturingselementen wordt uitgestuurd, annuleren de validatiebesturingselementen elke postback die wordt geïnitieerd door Button-, LinkButton- of ImageButton-besturingselementen waarvan de CausesValidation-eigenschappen True zijn (de standaardinstelling), als een gebruiker ongeldige invoer invoert. Als een gebruiker echter een bezoek brengt aan een verouderde browser of een browser waarvan de JavaScript-ondersteuning is uitgeschakeld, worden de validatiecontroles aan de clientzijde niet uitgevoerd.

Alle ASP.NET validatiebesturingselementen herhalen hun validatielogica onmiddellijk na het terugdraaien en rapporteren de algehele geldigheid van de invoer van de pagina's via de Page.IsValid eigenschap. De paginastroom wordt echter niet onderbroken of gestopt op basis van de waarde van Page.IsValid. Als ontwikkelaars is het onze verantwoordelijkheid om ervoor te zorgen dat de Page.IsValid eigenschap een waarde heeft van True voordat u doorgaat met code die uitgaat van geldige invoergegevens.

Als een gebruiker JavaScript heeft uitgeschakeld, gaat u naar onze pagina, bewerkt u een product, voert u een prijswaarde in van Te duur en klikt u op de knop Bijwerken, wordt de validatie aan de clientzijde overgeslagen en wordt er een terugdraaiactie weergegeven. Bij postback wordt de gebeurtenishandler van de ASP.NET-pagina UpdateCommand uitgevoerd en wordt er een uitzondering gegenereerd bij het parseren van "Too expensive" naar een Decimal. Omdat we uitzonderingsafhandeling hebben, wordt een dergelijke uitzondering probleemloos verwerkt, maar we kunnen in de eerste plaats voorkomen dat ongeldige gegevens erdoor slippen door alleen door te gaan met de UpdateCommand gebeurtenis-handler als Page.IsValid een waarde heeft van True.

Voeg de volgende code toe aan het begin van de UpdateCommand gebeurtenis-handler, direct voor het Try blok:

If Not Page.IsValid Then
    Exit Sub
End If

Met deze toevoeging probeert het product alleen te worden bijgewerkt als de ingediende gegevens geldig zijn. De meeste gebruikers kunnen ongeldige gegevens niet terugsturen vanwege scripts aan de clientzijde van de validatiecontroles, maar gebruikers die geen ondersteuning bieden voor JavaScript of waarvoor JavaScript-ondersteuning is uitgeschakeld, kunnen de controles aan de clientzijde omzeilen en ongeldige gegevens verzenden.

Opmerking

De astutelezer herinnert zich eraan dat we bij het bijwerken van gegevens met de GridView de Page.IsValid eigenschap in de code-behind-klasse van onze pagina niet expliciet hoeven te controleren. Dit komt doordat de GridView de Page.IsValid eigenschap voor ons raadpleegt en alleen doorgaat met het bijwerken als deze een waarde van True teruggeeft.

Stap 3: 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 berichtenvak 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 ValidationSummary 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 (zie afbeelding 6).

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

Samenvatting

In deze zelfstudie hebben we gezien hoe we de kans op uitzonderingen verminderen door validatiebesturingselementen te gebruiken om ervoor te zorgen dat onze gebruikersinvoer geldig zijn voordat ze worden gebruikt in de updatewerkstroom. ASP.NET biedt vijf validatiewebbesturingselementen die zijn ontworpen om de invoer van een bepaald webbesturingselement te inspecteren en terug te rapporteren over de geldigheid van de invoer. In deze handleiding hebben we twee van de vijf besturingselementen, de RequiredFieldValidator en de CompareValidator, gebruikt om ervoor te zorgen dat de naam van het product is opgegeven en dat de prijs een valutaformaat heeft met een waarde die groter is dan of gelijk is aan nul.

Het toevoegen van validatiecontroles aan de bewerkingsinterface van de DataList is net zo eenvoudig als het slepen naar de EditItemTemplate vanuit de Toolbox en het instellen van enkele eigenschappen. Standaard verzenden de validatiebesturingselementen automatisch validatiescript aan clientzijde; ze bieden ook validatie aan de serverzijde bij een postback, waarbij het cumulatieve resultaat in de Page.IsValid eigenschap wordt opgeslagen. Als u de validatie aan de clientzijde wilt omzeilen wanneer op een knop, LinkButton of ImageButton wordt geklikt, stelt u de eigenschap van de knop in CausesValidation op False. Zorg er ook voor dat de Page.IsValid eigenschap True retourneert voordat u taken uitvoert met de gegevens die bij terugzending zijn ingediend.

Alle Datalist zelfstudies over bewerkingen die we tot nu toe hebben onderzocht, hebben zeer eenvoudige bewerkingsinterfaces met een TextBox voor zowel de naam van het product als de prijs. De bewerkingsinterface kan echter een combinatie van verschillende webbesturingselementen bevatten, zoals DropDownLists, Agenda's, RadioButtons, Selectievakjes enzovoort. In onze volgende zelfstudie kijken we naar het bouwen van een interface die gebruikmaakt van verschillende webbesturingselementen.

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. Hoofdbeoordelaars voor deze handleiding waren Dennis Patterson, Ken Pespisa en Liz Shulok. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.

VorigeVolgende