Lägga till verifieringskontroller i redigerings- och infogningsgränssnitt (VB)

av Scott Mitchell

Ladda ned PDF

I den här handledningen får vi se hur enkelt det är att lägga till verifieringskontroller i EditItemTemplate och InsertItemTemplate för en datawebbkontroll för att tillhandahålla ett mer säkert användargränssnitt.

Inledning

Kontrollerna GridView och DetailsView i de exempel som vi har utforskat under de senaste tre självstudierna har alla består av BoundFields och CheckBoxFields (fälttyperna som läggs till automatiskt av Visual Studio när du binder en GridView- eller DetailsView-kontroll till en datakälla via den smarta taggen). När du redigerar en rad i en GridView eller DetailsView konverteras de BoundFields som inte är skrivskyddade till textrutor, från vilka slutanvändaren kan ändra befintliga data. När du infogar en ny post i en DetailsView-kontroll återges på samma sätt de BoundFields vars InsertVisible egenskap är inställd på True (standard) som tomma textrutor, där användaren kan ange den nya postens fältvärden. På samma sätt konverteras CheckBoxFields, som är inaktiverade i det skrivskyddade standardgränssnittet, till aktiverade kryssrutor i redigerings- och infogningsgränssnitten.

Även om standardgränssnitten för redigering och infogning för BoundField och CheckBoxField kan vara till hjälp, saknar gränssnittet någon form av validering. Om en användare gör ett datainmatningsfel , till exempel om du utelämnar ProductName fältet eller anger ett ogiltigt värde för UnitsInStock (till exempel -50) genereras ett undantag från djupet i programarkitekturen. Även om det här undantaget kan hanteras korrekt, vilket visas i föregående självstudie, skulle redigeringen eller infogningen av användargränssnittet helst innehålla verifieringskontroller för att förhindra att en användare anger sådana ogiltiga data i första hand.

För att kunna tillhandahålla ett anpassat redigerings- eller infogningsgränssnitt måste vi ersätta BoundField eller CheckBoxField med ett TemplateField. TemplateFields, som var diskussionsämnet i Using TemplateFields i GridView Control och Using TemplateFields i DetailsView Control-tutorials, kan bestå av flera mallar som definierar olika gränssnitt för separata radtillstånd. TemplateField:s ItemTemplate används vid rendering av skrivskyddade fält eller rader i kontrollerna DetailsView eller GridView, medan EditItemTemplate och InsertItemTemplate anger vilka gränssnitt som ska användas för redigerings- respektive infogningslägena.

I den här självstudien får vi se hur enkelt det är att lägga till valideringskontroller EditItemTemplate i TemplateFields och InsertItemTemplate tillhandahålla ett mer idiotsäkert användargränssnitt. Specifikt tar den här självstudien exemplet från Undersöka händelser som är associerade med infoga, uppdatera och ta bort och utökar redigerings- och inmatningsgränssnitten för att inkludera lämplig validering.

Steg 1: Replikera exemplet frånatt undersöka de händelser som är associerade med infogning, uppdatering och borttagning

I självstudien Undersöka händelser som är associerade med infoga, uppdatera och ta bort skapade vi en sida som listade namnen och priserna på produkterna i ett redigerbart GridView. Dessutom innehöll sidan en DetailsView vars DefaultMode egenskap var inställd på Insert, vilket alltid återges i infogningsläge. Från den här DetailsView kan användaren ange namn och pris för en ny produkt, klicka på Infoga och få den tillagd i systemet (se bild 1).

Bild 1: I föregående exempel kan användare lägga till nya produkter och redigera befintliga (Klicka om du vill visa en bild i full storlek)

Vårt mål med den här handledningen är att utöka DetailsView och GridView för att tillhandahålla valideringskontroller. I synnerhet kommer vår valideringslogik att:

• Kräv att namnet anges när du infogar eller redigerar en produkt
• Kräv att priset anges när du infogar en post. När du redigerar en post kommer vi fortfarande att kräva ett pris, men vi kommer att använda den programmatiska logiken i GridViews RowUpdating händelsehanterare som redan finns i den tidigare handledningen.
• Kontrollera att värdet som angetts för priset är ett giltigt valutaformat

Innan vi kan titta på hur du utökar föregående exempel för att inkludera validering måste vi först replikera exemplet från DataModificationEvents.aspx sidan till sidan för den här självstudiekursen. UIValidation.aspx För att åstadkomma detta måste vi kopiera över både sidans DataModificationEvents.aspx deklarativa markering och dess källkod. Kopiera först över den deklarativa markeringen genom att utföra följande steg:

1. Öppna sidan DataModificationEvents.aspx i Visual Studio
2. Gå till sidans deklarativa markering (klicka på knappen Källa längst ned på sidan)
3. Kopiera texten i taggarna <asp:Content> och </asp:Content> (raderna 3 till 44), enligt bild 2.

Bild 2: Kopiera texten i <asp:Content> kontrollen (Klicka om du vill visa en bild i full storlek)

1. Öppna sidan UIValidation.aspx
2. Gå till sidans kodmarkering
3. Klistra in texten i <asp:Content> kontrollen.

Om du vill kopiera över källkoden öppnar du DataModificationEvents.aspx.vb sidan och kopierar bara texten iEditInsertDelete_DataModificationEvents klassen. Kopiera de tre händelsehanterarna (Page_Load, GridView1_RowUpdatingoch ObjectDataSource1_Inserting), men kopiera inte klassdeklarationen. Klistra in den kopierade texten inomEditInsertDelete_UIValidation klassen i UIValidation.aspx.vb.

När du har flyttat över innehållet och koden från DataModificationEvents.aspx till UIValidation.aspxtar du en stund att testa förloppet i en webbläsare. Du bör se samma utdata och uppleva samma funktioner på var och en av dessa två sidor (se bild 1 för en skärmbild av DataModificationEvents.aspx i praktiken).

Steg 2: Konvertera BoundFields till TemplateFields

Om du vill lägga till verifieringskontroller i redigerings- och infogningsgränssnitten måste de BoundFields som används av kontrollerna DetailsView och GridView konverteras till TemplateFields. För att uppnå detta klickar du på länkarna Redigera kolumner och Redigera fält i GridView respektive DetailsViews smarta taggar. Där väljer du vart och ett av BoundFields och klickar på länken "Konvertera det här fältet till ett TemplateField".

Bild 3: Konvertera var och en av DetailsViews och GridViews BoundFields till TemplateFields (Klicka om du vill visa en bild i full storlek)

Om du konverterar ett BoundField till ett TemplateField via dialogrutan Fält genereras ett TemplateField som har samma skrivskyddade, redigerande och infogande gränssnitt som BoundField. Följande markering visar deklarativ syntax för ProductName fältet i DetailsView när det har konverterats till ett 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>

Observera att det här TemplateField hade tre mallar som skapades automatiskt ItemTemplate, EditItemTemplateoch InsertItemTemplate. ItemTemplate Visar ett enda datafältvärde (ProductName) med hjälp av en etikettwebbkontroll, medan EditItemTemplate och InsertItemTemplate visar datafältvärdet i en TextBox-webbkontroll som associerar datafältet med egenskapen TextBox Text med hjälp av dubbelriktad databindning. Eftersom vi bara använder DetailsView på den här sidan för att infoga kan du ta bort ItemTemplate och EditItemTemplate från de två TemplateFields, även om det inte skadar att lämna dem.

Eftersom GridView inte stöder de inbyggda infogningsfunktionerna i DetailsView resulterar konverteringen av GridView-fältet ProductName till ett TemplateField endast i ett ItemTemplate och 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>

Genom att klicka på "Konvertera det här fältet till ett mallfält" har Visual Studio skapat ett TemplateField vars mallar efterliknar användargränssnittet för det konverterade BoundField. Du kan kontrollera detta genom att besöka den här sidan via en webbläsare. Du kommer att upptäcka att utseendet och beteendet för TemplateFields är identiskt med upplevelsen när BoundFields användes i stället.

Anmärkning

Anpassa redigeringsgränssnitten i mallarna efter behov. Vi kanske till exempel vill att textrutan i UnitPrice TemplateFields ska återges som en mindre textruta än ProductName textrutan. För att åstadkomma detta kan du ange egenskapen TextBox Columns till ett lämpligt värde eller ange en absolut bredd via egenskapen Width . I nästa självstudie får vi se hur du helt anpassar redigeringsgränssnittet genom att ersätta textrutan med en alternativ webbkontroll för datainmatning.

Steg 3: Lägga till valideringskontrollerna i GridViewsEditItemTemplate

När du skapar formulär för datainmatning är det viktigt att användarna anger obligatoriska fält och att alla angivna indata är lagliga, korrekt formaterade värden. För att säkerställa att en användares indata är giltiga tillhandahåller ASP.NET fem inbyggda valideringskontroller som är utformade för att användas för att verifiera värdet för en enda indatakontroll:

• RequiredFieldValidator säkerställer att ett värde har angetts
• CompareValidator validerar ett värde mot ett annat webbkontrollvärde eller ett konstant värde, eller säkerställer att värdets format är lagligt för en angiven datatyp
• RangeValidator säkerställer att ett värde ligger inom ett värdeintervall
• RegularExpressionValidator validerar ett värde mot ett reguljärt uttryck
• CustomValidator validerar ett värde mot en anpassad, användardefinierad metod

Mer information om dessa fem kontroller finns i avsnittet Verifieringskontroller i ASP.NET snabbstartsguider.

För vår självstudie behöver vi använda en RequiredFieldValidator i både DetailsView och GridViews TemplateFields ProductName och en RequiredFieldValidator i DetailsViews UnitPrice TemplateField. Dessutom måste vi lägga till en CompareValidator i båda kontrollernas UnitPrice TemplateFields som säkerställer att det angivna priset har ett värde som är större än eller lika med 0 och visas i ett giltigt valutaformat.

Anmärkning

Även om ASP.NET 1.x hade samma fem verifieringskontroller har ASP.NET 2.0 lagt till ett antal förbättringar, varav de två viktigaste är stöd för skript på klientsidan för andra webbläsare än Internet Explorer och möjligheten att partitionera valideringskontroller på en sida i valideringsgrupper. Mer information om de nya funktionerna för valideringskontroll i 2.0 finns i Dissekera valideringskontrollerna i ASP.NET 2.0.

Vi börjar med att lägga till de nödvändiga verifieringskontrollerna till EditItemTemplate som finns i GridViewens TemplateFields. Det gör du genom att klicka på länken Redigera mallar från GridViews smarta tagg för att ta upp mallredigeringsgränssnittet. Härifrån kan du välja vilken mall som ska redigeras från listrutan. Eftersom vi vill utöka redigeringsgränssnittet måste vi lägga till valideringskontroller till ProductNames och UnitPrices EditItemTemplate.

Bild 4: Vi behöver utöka ProductName och UnitPrice(EditItemTemplateklicka för att visa en bild i full storlek)

ProductName EditItemTemplateLägg till en RequiredFieldValidator genom att dra den från verktygslådan till mallredigeringsgränssnittet, och placera efter textrutan.

Bild 5: Lägg till en RequiredFieldValidator i ProductNameEditItemTemplate (Klicka om du vill visa en bild i full storlek)

Alla valideringskontroller fungerar genom att verifiera indata för en enda ASP.NET webbkontroll. Därför måste vi ange att den RequiredFieldValidator som vi precis har lagt till ska verifiera mot textrutan i EditItemTemplate. Detta uppnås genom att ange verifieringskontrollens ControlToValidate-egenskap till ID lämplig webbkontroll. TextBox har för närvarande den ganska icke-beskrivande ID, TextBox1 men vi ska ändra den till något mer lämpligt. Klicka på textrutan i mallen, och ändra i fönstret Egenskaper ID från TextBox1 till EditProductName.

Bild 6: Ändra textrutans ID till EditProductName (Klicka om du vill visa en bild i full storlek)

Ange sedan egenskapen RequiredFieldValidator ControlToValidate till EditProductName. Ange slutligen egenskapen ErrorMessage till "Du måste ange produktens namn" och egenskapen Text till "*". Egenskapsvärdet Text , om det anges, är den text som visas av verifieringskontrollen om verifieringen misslyckas. Egenskapsvärdet ErrorMessage, som är obligatoriskt, används av ValidationSummary-kontrollen. Om egenskapsvärdet Text utelämnas, är egenskapsvärdet ErrorMessage också den text som verifieringskontrollen visar vid ogiltiga indata.

När du har angett dessa tre egenskaper för RequiredFieldValidator bör skärmen se ut ungefär som i bild 7.

Bild 7: Ange RequiredFieldValidators ControlToValidate, ErrorMessageoch Text egenskaper (Klicka om du vill visa en bild i full storlek)

När RequiredFieldValidator har lagts till i ProductNameEditItemTemplate, är det enda som återstår att lägga till den nödvändiga verifieringen i UnitPriceEditItemTemplate. Eftersom vi har bestämt att för den UnitPrice här sidan är det valfritt när du redigerar en post, behöver vi inte lägga till en RequiredFieldValidator. Vi behöver dock lägga till en CompareValidator för att säkerställa att UnitPrice, om den tillhandahålls, är korrekt formaterad som en valuta och är större än eller lika med 0.

Innan vi lägger till CompareValidator i UnitPriceEditItemTemplateska vi först ändra textbox-webbkontrollens ID från TextBox2 till EditUnitPrice. När du har gjort den här ändringen lägger du till CompareValidator och anger egenskapen ControlToValidate till , dess EditUnitPrice egenskap till "Priset måste vara större än eller lika med noll och kan inte inkludera valutasymbolen" och dess ErrorMessage egenskap till Text"*".

Om du vill ange att UnitPrice värdet måste vara större än eller lika med 0 anger du egenskapen CompareValidator's Operator till GreaterThanEqual, dess ValueToCompare-egenskap till "0" och dess typegenskap till Currency. Följande deklarativa syntax visar UnitPrice TemplateField:s EditItemTemplate efter att dessa ändringar har gjorts.

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

När du har gjort dessa ändringar öppnar du sidan i en webbläsare. Om du försöker utelämna namnet eller ange ett ogiltigt prisvärde när du redigerar en produkt visas en asterisk bredvid textrutan. Som bild 8 visar anses ett prisvärde som innehåller valutasymbolen, till exempel 19,95 USD, vara ogiltigt. CompareValidator tillåter CurrencyType sifferavgränsare (till exempel kommatecken eller perioder, beroende på kulturinställningarna) och ett inledande plus- eller minustecken, men tillåter inte en valutasymbol. Det här beteendet kan förbrylla användare eftersom redigeringsgränssnittet återger UnitPrice för närvarande i valutaformatet.

Anmärkning

Kom ihåg att i genomgången Händelser som är associerade med infoga, uppdatera och ta bort anger vi den egenskapen BoundField DataFormatString till {0:c} för att formatera den som valuta. Dessutom ställer vi in ApplyFormatInEditMode-egenskapen till true, vilket leder till att GridViews redigeringsgränssnitt formaterar UnitPrice som en valuta. När du konverterade BoundField till ett TemplateField noterade Visual Studio dessa inställningar och formaterade TextBox-egenskapen Text som valuta med hjälp av databindningssyntaxen <%# Bind("UnitPrice", "{0:c}") %>.

Bild 8: En Asterisk visas bredvid textrutorna med ogiltiga indata (Klicka om du vill visa en bild i full storlek)

Även om valideringen fungerar as-ismåste användaren manuellt ta bort valutasymbolen när en post redigeras, vilket inte är acceptabelt. För att åtgärda detta har vi tre alternativ:

1. EditItemTemplate Konfigurera så att värdet UnitPrice inte formateras som en valuta.
2. Tillåt att användaren anger en valutasymbol genom att ta bort CompareValidator och ersätta den med en RegularExpressionValidator som söker efter ett korrekt formaterat valutavärde. Problemet här är att det reguljära uttrycket för att verifiera ett valutavärde inte är vackert och skulle kräva att du skriver kod om vi vill införliva kulturinställningar.
3. Ta bort verifieringskontrollen helt och hållet och förlita dig på valideringslogik på serversidan i GridViews RowUpdating händelsehanterare.

Låt oss gå med alternativ 1 för den här övningen. För närvarande formateras UnitPrice som en valuta på grund av databindningsuttrycket för TextBoxen i EditItemTemplate: <%# Bind("UnitPrice", "{0:c}") %>. Ändra bindningssatsen till Bind("UnitPrice", "{0:n2}"), som formaterar resultatet som ett tal med två siffror med precision. Detta kan göras direkt via deklarativ syntax eller genom att klicka på länken Redigera databindningar från EditUnitPrice textrutan i UnitPrice TemplateFields EditItemTemplate (se figurerna 9 och 10).

Bild 9: Klicka på länken Redigera databindningar i textrutan (Klicka om du vill visa en bild i full storlek)

Bild 10: Ange formatspecificeraren i instruktionen Bind (Klicka om du vill visa en bild i full storlek)

Med den här ändringen innehåller det formaterade priset i redigeringsgränssnittet kommatecken som gruppavgränsare och en period som decimalavgränsare, men lämnar valutasymbolen utanför.

Anmärkning

UnitPrice EditItemTemplate Saknar en RequiredFieldValidator, vilket tillåter att postback kan ske och uppdateringslogiken kan påbörjas. Däremot innehåller den kopierade RowUpdating händelsehanteraren från självstudiekursen Undersöka händelser som är associerade med infoga, uppdatera och ta bort en programmatisk kontroll som säkerställer att UnitPrice tillhandahålls. Ta bort den här logiken, lämna den i as-iseller lägg till en RequiredFieldValidator i UnitPriceEditItemTemplate.

Steg 4: Sammanfatta problem med datainmatning

Förutom de fem valideringskontrollerna innehåller ASP.NET kontrollen ValidationSummary, som visar s för ErrorMessage de valideringskontroller som identifierade ogiltiga data. Sammanfattningsdata kan visas som text på webbsidan eller via en modal meddelanderuta på klientsidan. Nu ska vi förbättra den här handledningen för att inkludera en meddelanderuta på klientsidan som sammanfattar eventuella valideringsproblem.

Det gör du genom att dra en ValidationSummary-kontroll från verktygslådan till designern. Platsen för verifieringskontrollen spelar egentligen ingen roll eftersom vi ska konfigurera den så att den bara visar sammanfattningen som en meddelanderuta. När du har lagt till kontrollen anger du dess ShowSummary-egenskap till False och dess ShowMessageBox-egenskap till True. Med det här tillägget sammanfattas eventuella valideringsfel i en meddelanderuta på klientsidan.

Bild 11: Valideringsfelen sammanfattas i en Client-Side Meddelanderuta (Klicka om du vill visa en bild i full storlek)

Steg 5: Lägga till valideringskontrollerna i DetailsViewInsertItemTemplate

Allt som återstår för den här handledningen är att lägga till valideringskontrollerna i gränssnittet för infogning i DetailsView. Processen för att lägga till valideringskontroller i DetailsView-mallarna är identisk med den som undersöktes i steg 3. Därför går vi igenom uppgiften i det här steget. Som vi gjorde med GridViews EditItemTemplate rekommenderar jag att du byter ID namn på textrutorna från nondescript TextBox1 och TextBox2 till InsertProductName och InsertUnitPrice.

Lägg till en RequiredFieldValidator i ProductNameInsertItemTemplate. Ställ in ControlToValidate för ID textrutan i mallen, dess Text egenskap till "*" och dess ErrorMessage egenskap till "Produktens namn måste anges".

Eftersom UnitPrice är nödvändig för den här sidan när du lägger till en ny post, lägg till en RequiredFieldValidator på UnitPriceInsertItemTemplate, och ange dess ControlToValidate, Text och ErrorMessage egenskaper på rätt sätt. Lägg slutligen till en CompareValidator till UnitPriceInsertItemTemplate och konfigurera dess egenskaper ControlToValidate, Text, ErrorMessage, Type, Operator och ValueToCompare på samma sätt som vi gjorde med UnitPrices CompareValidator i GridViews EditItemTemplate.

När du har lagt till dessa valideringskontroller kan en ny produkt inte läggas till i systemet om dess namn inte har angetts eller om priset är ett negativt tal eller felaktigt formaterat.

Bild 12: Valideringslogik har lagts till i DetailsView-infogningsgränssnittet (Klicka om du vill visa en bild i full storlek)

Steg 6: Partitionera valideringskontrollerna i valideringsgrupper

Vår sida består av två logiskt olika uppsättningar verifieringskontroller: de som motsvarar GridViews redigeringsgränssnitt och de som motsvarar DetailsView-infogningsgränssnittet. Som standard kontrolleras alla valideringskontroller på sidan när en efterpost inträffar. Men när vi redigerar en post vill vi inte att valideringskontrollerna i DetailsViews infogningsgränssnitt ska aktiveras. Bild 13 illustrerar vårt aktuella dilemma när en användare redigerar en produkt med helt juridiska värden. Om du klickar på Uppdatera uppstår ett valideringsfel eftersom namnet och prisvärdena i infogningsgränssnittet är tomma.

Bild 13: Om du uppdaterar en produkt utlöses verifieringskontrollerna i infogningsgränssnittet (klicka om du vill visa en bild i full storlek)

Valideringskontrollerna i ASP.NET 2.0 kan partitioneras i valideringsgrupper via deras ValidationGroup egenskap. Om du vill associera en uppsättning verifieringskontroller i en grupp anger du helt enkelt deras ValidationGroup egenskap till samma värde. I vår självstudie anger du ValidationGroup egenskaperna för valideringskontrollerna i GridViews TemplateFields till EditValidationControls och ValidationGroup egenskaperna för DetailsViews TemplateFields till InsertValidationControls. Dessa ändringar kan göras direkt i den deklarativa markeringen eller genom fönstret Egenskaper när du använder designerns redigeringsmallsgränssnitt.

Förutom verifieringskontrollerna innehåller även de knapp- och knapprelaterade kontrollerna i ASP.NET 2.0 en ValidationGroup egenskap. Valideringsgruppens validerare kontrolleras endast för giltighet när en postback orsakas av en knapp som har samma ValidationGroup egenskapsinställning. För att knappen Infoga i DetailsView ska utlösa InsertValidationControls verifieringsgruppen måste vi till exempel ange egenskapen CommandField ValidationGroup till InsertValidationControls (se bild 14). Ange dessutom egenskapen för GridView CommandField ValidationGroup till EditValidationControls.

Bild 14: Ange egenskapen för DetailsView CommandField ValidationGroup till InsertValidationControls (Klicka om du vill visa en bild i full storlek)

Efter dessa ändringar bör DetailsView och GridViews TemplateFields och CommandFields se ut ungefär så här:

DetailsViewens TemplateFields och CommandField

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

GridViews Kommandofält och Mallfält

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

I det här läget utlöses endast redigeringsspecifika valideringskontroller när knappen Uppdatera i GridView klickas och de infogningsspecifika valideringskontrollerna endast utlöses när knappen Infoga i DetailsView klickas, vilket löser problemet som markerats med bild 13. Men med den här ändringen visas inte längre kontrollen ValidationSummary när ogiltiga data anges. Kontrollen ValidationSummary innehåller också en ValidationGroup egenskap och visar endast sammanfattningsinformation för valideringskontrollerna i valideringsgruppen. Därför måste vi ha två verifieringskontroller på den här sidan, en för InsertValidationControls valideringsgruppen och en för 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" />

Med detta tillägg är vår handledning klar!

Sammanfattning

Även om BoundFields kan tillhandahålla både ett infognings- och redigeringsgränssnitt är gränssnittet inte anpassningsbart. Vanligtvis vill vi lägga till valideringskontroller i redigerings- och infogningsgränssnittet för att säkerställa att användaren anger nödvändiga indata i ett juridiskt format. För att åstadkomma detta måste vi konvertera BoundFields till TemplateFields och lägga till valideringskontrollerna i lämpliga mallar. I den här självstudien har vi utökat exemplet från självstudiekursen Undersöka händelser som är associerade med infoga, uppdatera och ta bort , och lägga till verifieringskontroller i både DetailsView-infogningsgränssnittet och GridViews redigeringsgränssnitt. Dessutom såg vi hur du visar sammanfattningsverifieringsinformation med hjälp av kontrollen ValidationSummary och hur du partitionera valideringskontrollerna på sidan i distinkta valideringsgrupper.

Som vi såg i den här självstudien tillåter TemplateFields att redigerings- och infogningsgränssnitten utökas till att omfatta verifieringskontroller. TemplateFields kan också utökas till att omfatta ytterligare indatawebbkontroller, vilket gör att textrutan kan ersättas av en lämpligare webbkontroll. I nästa självstudie kommer vi se hur vi ersätter TextBox-kontrollen med en databunden listruta, vilket är idealiskt när man redigerar en sekundärnyckel (till exempel CategoryID eller SupplierID i Products-tabellen).

Lycka till med programmerandet!

Om författaren

Scott Mitchell, författare till sju ASP/ASP.NET-böcker och grundare av 4GuysFromRolla.com, har arbetat med Microsofts webbtekniker sedan 1998. Scott arbetar som oberoende konsult, tränare och författare. Hans senaste bok är Sams Teach Yourself ASP.NET 2.0 på 24 timmar. Han kan nås på mitchell@4GuysFromRolla.com.

Särskilt tack till

Den här självstudieserien granskades av många användbara granskare. Huvudgranskare för den här handledningen var Liz Shulok och Zack Jones. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.

FöregåendeNästa