Dodawanie kontrolek walidacji do interfejsów edycji i wstawiania (VB)

Autor : Scott Mitchell

Pobierz plik PDF

W tym samouczku zobaczymy, jak łatwo jest dodać kontrolki walidacji do kontrolek EditItemTemplate i InsertItemTemplate kontrolki sieci Web danych, aby zapewnić bardziej niezawodny interfejs użytkownika.

Wprowadzenie

Kontrolki GridView i DetailsView w przykładach omówionych w poprzednich trzech samouczkach składają się z pól BoundFields i CheckBoxFields (typy pól automatycznie dodawane przez program Visual Studio podczas tworzenia powiązania kontrolki GridView lub DetailsView z kontrolką źródła danych za pomocą tagu inteligentnego). Podczas edytowania wiersza w elementy GridView lub DetailsView te pola, które nie są tylko do odczytu, są konwertowane na pola tekstowe, z których użytkownik końcowy może modyfikować istniejące dane. Podobnie podczas wstawiania nowego rekordu do kontrolki DetailsView wartości pól BoundField, których InsertVisible właściwość jest ustawiona na True (wartość domyślna) są renderowane jako puste pola tekstowe, do których użytkownik może podać wartości pól nowego rekordu. Podobnie pola CheckBoxFields, które są wyłączone w standardowym interfejsie tylko do odczytu, są konwertowane na włączone pola wyboru w interfejsach edycji i wstawiania.

Chociaż domyślne interfejsy edytowania i wstawiania dla pola BoundField i CheckBoxField mogą być przydatne, interfejs nie ma dowolnego rodzaju walidacji. Jeśli użytkownik popełni błąd podczas wprowadzania danych , taki jak pominięcie ProductName pola lub wprowadzenie nieprawidłowej wartości dla UnitsInStock (np. -50), wyjątek zostanie zgłoszony z głębi architektury aplikacji. Chociaż ten wyjątek można bezpiecznie obsłużyć, jak pokazano w poprzednim samouczku, w idealnym przypadku edytowanie lub wstawianie interfejsu użytkownika obejmuje kontrolki weryfikacji, aby uniemożliwić użytkownikowi wprowadzanie takich nieprawidłowych danych.

Aby zapewnić dostosowany interfejs edytowania lub wstawiania, musimy zastąpić pole BoundField lub CheckBoxField polem szablonu. TemplateFields, które były tematem dyskusji w temacie Using TemplateFields in the GridView Control and Using TemplateFields (Używanie pól szablonów) w samouczkach kontrolki DetailsView , mogą składać się z wielu szablonów definiujących oddzielne interfejsy dla różnych stanów wierszy. Pole TemplateField ItemTemplate jest używane do renderowania pól tylko do odczytu lub wierszy w kontrolkach DetailsView lub GridView, podczas gdy EditItemTemplateInsertItemTemplate i wskazują interfejsy do użycia do edycji i wstawiania trybów, odpowiednio.

W tym samouczku zobaczymy, jak łatwo jest dodać kontrolki walidacji do pola templatefield EditItemTemplate i InsertItemTemplate zapewnić bardziej niezawodny interfejs użytkownika. W szczególności w tym samouczku przedstawiono przykład utworzony w samouczku Badanie zdarzeń skojarzonych z wstawianiem, aktualizowaniem i usuwaniem oraz rozszerzanie interfejsów edycji i wstawiania w celu uwzględnienia odpowiedniej walidacji.

Krok 1. Replikowanie przykładu zbadania zdarzeń skojarzonych z wstawianiem, aktualizowaniem i usuwaniem

W samouczku Badanie zdarzeń skojarzonych z wstawianiem, aktualizowaniem i usuwaniem utworzyliśmy stronę zawierającą nazwy i ceny produktów w edytowalnym elemecie GridView. Ponadto strona zawierała element DetailsView, którego DefaultMode właściwość została ustawiona na Insertwartość , co zawsze powoduje renderowanie w trybie wstawiania. W tym widoku DetailsView użytkownik może wprowadzić nazwę i cenę nowego produktu, kliknąć przycisk Wstaw i dodać go do systemu (zobacz Rysunek 1).

Rysunek 1. Poprzedni przykład umożliwia użytkownikom dodawanie nowych produktów i edytowanie istniejących (kliknij, aby wyświetlić obraz pełnowymiarowy)

Naszym celem tego samouczka jest rozszerzenie kontrolki DetailsView i GridView w celu zapewnienia kontrolek walidacji. W szczególności nasza logika walidacji będzie:

• Wymagaj podania nazwy podczas wstawiania lub edytowania produktu
• Wymagaj podania ceny podczas wstawiania rekordu; podczas edytowania rekordu nadal będziemy wymagać ceny, ale użyjemy logiki programowej w procedurze obsługi zdarzeń gridView RowUpdating , która jest już obecna we wcześniejszym samouczku
• Upewnij się, że wartość wprowadzona dla ceny jest prawidłowym formatem waluty

Zanim przyjrzymy się rozszerzaniu poprzedniego przykładu w celu uwzględnienia walidacji, najpierw musimy zreplikować przykład ze DataModificationEvents.aspx strony do strony na potrzeby tego samouczka. UIValidation.aspx Aby to osiągnąć, musimy skopiować zarówno DataModificationEvents.aspx deklaratywną adiustację strony, jak i jej kod źródłowy. Najpierw skopiuj znacznik deklaratywny, wykonując następujące kroki:

1. DataModificationEvents.aspx Otwieranie strony w programie Visual Studio
2. Przejdź do deklaratywnego narzutu strony (kliknij przycisk Źródło w dolnej części strony)
3. Skopiuj tekst w tagach <asp:Content> i </asp:Content> (wiersze od 3 do 44), jak pokazano na rysunku 2.

Rysunek 2. Kopiowanie tekstu w kontrolce <asp:Content> (kliknij, aby wyświetlić obraz pełnowymiarowy)

1. UIValidation.aspx Otwórz stronę
2. Przejdź do deklaratywnego narzutu strony
3. Wklej tekst w kontrolce <asp:Content> .

Aby skopiować kod źródłowy, otwórz DataModificationEvents.aspx.vb stronę i skopiuj tylko tekst wEditInsertDelete_DataModificationEvents klasie. Skopiuj trzy programy obsługi zdarzeń (Page_Load, GridView1_RowUpdatingi ObjectDataSource1_Inserting), ale nie kopiują deklaracji klasy. Wklej skopiowany tekst wEditInsertDelete_UIValidation klasie w pliku UIValidation.aspx.vb.

Po przeniesieniu zawartości i kodu z DataModificationEvents.aspx do UIValidation.aspxprogramu poświęć chwilę na przetestowanie postępu w przeglądarce. Powinny zostać wyświetlone te same dane wyjściowe i te same funkcje na każdej z tych dwóch stron (zapoznaj się z rysunkiem 1, aby zapoznać się z DataModificationEvents.aspx zrzutem ekranu w akcji).

Krok 2. Konwertowanie pól powiązanych na pola szablonów

Aby dodać kontrolki walidacji do interfejsów edycji i wstawiania, kontrolki BoundFields używane przez kontrolki DetailsView i GridView muszą zostać przekonwertowane na pola szablonów. Aby to osiągnąć, kliknij linki Edytuj kolumny i Edytuj pola odpowiednio w tagach inteligentnych GridView i DetailsView. W tym miejscu zaznacz każde pole BoundFields i kliknij link "Konwertuj to pole na pole szablonu".

Rysunek 3. Konwertowanie pól BoundFields kontrolki DetailsView i GridView na pola szablonów (kliknij, aby wyświetlić obraz pełnowymiarowy)

Konwertowanie pola powiązanego na pole szablonu za pomocą okna dialogowego Pola powoduje wygenerowanie pola szablonu, który zawiera te same interfejsy tylko do odczytu, edycji i wstawiania, co samo Pole Powiązane. Poniższy znacznik przedstawia składnię deklaratywną ProductName dla pola w obiekcie DetailsView po przekonwertowaniu go na pole 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>

Należy pamiętać, że pole TemplateField ma trzy automatycznie utworzone ItemTemplateszablony , EditItemTemplatei InsertItemTemplate. Spowoduje ItemTemplate to wyświetlenie pojedynczej wartości pola danych (ProductName) przy użyciu kontrolki Sieć Web etykiety, a EditItemTemplate właściwość i InsertItemTemplate przedstawia wartość pola danych w kontrolce internetowej TextBox, która kojarzy pole danych z właściwością TextBox Text przy użyciu dwukierunkowego powiązania danych. Ponieważ do wstawiania używamy tylko kontrolki DetailsView na tej stronie, można usunąć ItemTemplate elementy i EditItemTemplate z tych dwóch pól szablonów, chociaż nie ma żadnych szkód w ich pozostawieniu.

Ponieważ kontrolka GridView nie obsługuje wbudowanych funkcji wstawiania kontrolki DetailsView, konwertowanie pola GridView ProductName na pole TemplateField powoduje tylko ItemTemplate elementy i 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>

Klikając pozycję "Konwertuj to pole na pole szablonu", program Visual Studio utworzył pole szablonu, którego szablony naśladują interfejs użytkownika przekonwertowanego pola powiązanego. Możesz to sprawdzić, odwiedzając tę stronę za pośrednictwem przeglądarki. Zobaczysz, że wygląd i zachowanie pola szablonu są identyczne z środowiskiem, gdy zamiast tego użyto pól BoundFields.

Uwaga

Możesz dostosować interfejsy edycji w szablonach zgodnie z potrzebami. Na przykład możemy chcieć użyć kontrolki TextBox w UnitPrice polach szablonów renderowanych jako mniejsze pole tekstowe niż ProductName pole tekstowe. W tym celu można ustawić właściwość TextBox Columns na odpowiednią wartość lub podać bezwzględną szerokość za pośrednictwem Width właściwości . W następnym samouczku zobaczymy, jak całkowicie dostosować interfejs edycji, zastępując kontrolkę TextBox alternatywnym wpisem danych kontrolką internetową.

Krok 3. Dodawanie kontrolek walidacji do kontrolkiEditItemTemplate GridView

Podczas konstruowania formularzy wprowadzania danych ważne jest, aby użytkownicy wprowadzali wszystkie wymagane pola i że wszystkie dostarczone dane wejściowe są legalnymi, prawidłowo sformatowanymi wartościami. Aby upewnić się, że dane wejściowe użytkownika są prawidłowe, ASP.NET udostępnia pięć wbudowanych kontrolek weryfikacji, które są przeznaczone do weryfikowania wartości pojedynczej kontrolki wejściowej:

• RequiredFieldValidator zapewnia, że podano wartość
• Funkcja CompareValidator weryfikuje wartość względem innej wartości kontrolki sieci Web lub stałej wartości albo zapewnia, że format wartości jest legalny dla określonego typu danych
• Funkcja RangeValidator gwarantuje, że wartość mieści się w zakresie wartości
• Element RegularExpressionValidator weryfikuje wartość względem wyrażenia regularnego
• Element CustomValidator weryfikuje wartość dla niestandardowej, zdefiniowanej przez użytkownika metody

Aby uzyskać więcej informacji na temat tych pięciu kontrolek, zapoznaj się z sekcją Kontrole poprawności w samouczkach szybki start ASP.NET.

W naszym samouczku będziemy musieli używać elementu RequiredFieldValidator zarówno w polach DetailsView, jak i w polach TemplateField oraz RequiredFieldValidator w polu TemplateField elementu DetailsView ProductNameUnitPrice . Ponadto musimy dodać element CompareValidator do obu kontrolek UnitPrice TemplateFields, który gwarantuje, że wprowadzona cena ma wartość większą lub równą 0 i jest prezentowana w prawidłowym formacie waluty.

Uwaga

Chociaż ASP.NET 1.x miał te same pięć kontrolek sprawdzania poprawności, ASP.NET 2.0 dodał szereg ulepszeń, główne dwa są obsługą skryptów po stronie klienta dla przeglądarek innych niż Internet Explorer i możliwość partycjonowania kontrolek walidacji na stronie w grupach weryfikacji. Aby uzyskać więcej informacji na temat nowych funkcji kontrolek weryfikacji w wersji 2.0, zobacz Dissecting the Validation Controls in ASP.NET 2.0 (Rozłączanie kontrolek walidacji w programie ASP.NET 2.0).

Zacznijmy od dodania niezbędnych kontrolek walidacji do EditItemTemplate kontrolek w polach TemplateFields obiektu GridView. Aby to osiągnąć, kliknij link Edytuj szablony z tagu inteligentnego GridView, aby wyświetlić interfejs edytowania szablonu. W tym miejscu możesz wybrać szablon do edycji z listy rozwijanej. Ponieważ chcemy rozszerzyć interfejs edycji, musimy dodać kontrolki walidacji do elementów ProductName i UnitPrice.s EditItemTemplate .

Rysunek 4. Musimy rozszerzyć wartości ProductNameEditItemTemplate i UnitPrice(kliknij, aby wyświetlić obraz w pełnym rozmiarze)

W pliku ProductNameEditItemTemplatedodaj element RequiredFieldValidator, przeciągając go z przybornika do interfejsu edycji szablonu, umieszczając go po polu TextBox.

Rysunek 5. Dodawanie obiektu RequiredFieldValidator do obiektu ProductNameEditItemTemplate (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Wszystkie kontrolki sprawdzania poprawności działają, sprawdzając dane wejściowe pojedynczej kontrolki sieci Web ASP.NET. W związku z tym musimy wskazać, że właśnie dodany element RequiredFieldValidator powinien sprawdzić poprawność względem kontrolki TextBox w elemecie EditItemTemplate; jest to realizowane przez ustawienie właściwości ControlToValidate kontrolki walidacji na ID odpowiednią kontrolkę sieci Web. Pole TextBox ma obecnie raczej niedekrypcję IDTextBox1elementu , ale zmieńmy ją na bardziej odpowiednią. Kliknij pozycję TextBox w szablonie, a następnie z okno Właściwości zmień wartość z IDTextBox1 na EditProductName.

Rysunek 6. Zmienianie wartości TextBox na IDEditProductName (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Następnie ustaw właściwość RequiredFieldValidator ControlToValidate na EditProductNamewartość . Na koniec ustaw właściwość ErrorMessage na wartość "Musisz podać nazwę produktu" i właściwość Text na wartość "*". Wartość Text właściwości, jeśli zostanie podana, jest tekstem wyświetlanym przez kontrolkę walidacji, jeśli walidacja zakończy się niepowodzeniem. Wartość ErrorMessage właściwości, która jest wymagana, jest używana przez kontrolkę ValidationSummary. Jeśli Text wartość właściwości zostanie pominięta, ErrorMessage wartość właściwości jest również tekstem wyświetlanym przez kontrolkę walidacji dla nieprawidłowych danych wejściowych.

Po ustawieniu tych trzech właściwości elementu RequiredFieldValidator ekran powinien wyglądać podobnie do rysunku 7.

Rysunek 7. Ustawianie właściwości elementu RequiredFieldValidator (ControlToValidateErrorMessageTextKliknij, aby wyświetlić obraz pełnowymiarowy)

Po dodaniu elementu RequiredFieldValidator do elementu ProductNameEditItemTemplatewszystkie pozostałe elementy to dodanie niezbędnej weryfikacji do elementu UnitPriceEditItemTemplate. Ponieważ postanowiliśmy, UnitPrice że dla tej strony element jest opcjonalny podczas edytowania rekordu, nie musimy dodawać elementu RequiredFieldValidator. Musimy jednak dodać moduł CompareValidator, aby upewnić się, że UnitPriceparametr , jeśli podano, jest poprawnie sformatowany jako waluta i jest większy lub równy 0.

Zanim dodamy element CompareValidator do elementu UnitPriceEditItemTemplate, najpierw zmieńmy identyfikator kontrolki web TextBox z TextBox2 na EditUnitPrice. Po wprowadzeniu tej zmiany dodaj właściwość CompareValidator, ustawiając jej ControlToValidate właściwość na EditUnitPrice, ErrorMessage na wartość "Cena musi być większa lub równa zero i nie może zawierać symbolu waluty", a jej Text właściwość na "*".

Aby wskazać, że UnitPrice wartość musi być większa lub równa 0, ustaw właściwość Operator elementu CompareValidator na GreaterThanEqual, jej właściwość ValueToCompare na "0" i jej właściwość Type na Currency. Następująca składnia deklaratywna pokazuje pole szablonu UnitPriceEditItemTemplate po wprowadzeniu tych zmian:

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

Po wprowadzeniu tych zmian otwórz stronę w przeglądarce. Jeśli próbujesz pominąć nazwę lub wprowadzić nieprawidłową wartość ceny podczas edytowania produktu, obok pola tekstowego pojawi się gwiazdka. Jak pokazano na rysunku 8, wartość ceny, która zawiera symbol waluty, taki jak $19.95, jest uważana za nieprawidłową. Funkcja CompareValidator CurrencyType umożliwia separatory cyfr (takie jak przecinki lub kropki, w zależności od ustawień kultury) oraz wiodący znak plus lub minus, ale nie zezwala na symbol waluty. To zachowanie może zakłopotać użytkowników, ponieważ interfejs do edycji renderuje UnitPrice obecnie format waluty.

Uwaga

Pamiętaj, że w samouczku Zdarzenia skojarzone z wstawianiem, aktualizowaniem i usuwaniem ustawiliśmy właściwość BoundField DataFormatString na {0:c} wartość , aby sformatować ją jako walutę. Ponadto ustawiliśmy ApplyFormatInEditMode właściwość na true, powodując, że interfejs edycji GridView ma formatować jako UnitPrice walutę. Podczas konwertowania pola BoundField na element TemplateField program Visual Studio zanotował te ustawienia i sformatował właściwość TextBox Text jako walutę przy użyciu składni <%# Bind("UnitPrice", "{0:c}") %>powiązania danych .

Rysunek 8. Gwiazdka pojawia się obok pola tekstowego z nieprawidłowym wejściem (kliknij, aby wyświetlić obraz pełnowymiarowy)

Podczas gdy walidacja działa zgodnie z rzeczywistym stanem, użytkownik musi ręcznie usunąć symbol waluty podczas edytowania rekordu, co nie jest dopuszczalne. Aby rozwiązać ten problem, mamy trzy opcje:

1. EditItemTemplate Skonfiguruj tak, aby UnitPrice wartość nie została sformatowana jako waluta.
2. Zezwalaj użytkownikowi na wprowadzanie symbolu waluty przez usunięcie elementu CompareValidator i zastąpienie go wartością RegularExpressionValidator, która prawidłowo sprawdza poprawną wartość waluty sformatowanej. Problem polega na tym, że wyrażenie regularne do sprawdzania poprawności wartości waluty nie jest ładne i wymagałoby pisania kodu, jeśli chcemy włączyć ustawienia kultury.
3. Całkowicie usuń kontrolkę weryfikacji i polegaj na logice weryfikacji po stronie serwera w procedurze obsługi zdarzeń usługi GridView RowUpdating .

Przejdźmy do opcji #1 w tym ćwiczeniu. UnitPrice Obecnie element jest sformatowany jako waluta ze względu na wyrażenie powiązania danych dla pola TextBox w elemecie EditItemTemplate: <%# Bind("UnitPrice", "{0:c}") %>. Zmień instrukcję Bind na Bind("UnitPrice", "{0:n2}"), która formatuje wynik jako liczbę z dwiema cyframi dokładności. Można to zrobić bezpośrednio za pomocą składni deklaratywnej lub klikając link Edit DataBindings (Edytuj daneBindings) z EditUnitPrice pola TextBox w polach UnitPriceEditItemTemplate szablonów (zobacz Rysunek 9 i 10).

Rysunek 9. Kliknij link Edytuj daneBindings pola tekstowego (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rysunek 10. Określ specyfikator formatu w instrukcji Bind (kliknij, aby wyświetlić obraz pełnowymiarowy)

Dzięki tej zmianie sformatowana cena w interfejsie edycji zawiera przecinki jako separator grupy i kropkę jako separator dziesiętny, ale pozostawia symbol waluty.

Uwaga

Element UnitPriceEditItemTemplate nie zawiera elementu RequiredFieldValidator, co umożliwia rozpoczęcie powrotu po awarii i logikę aktualizowania. RowUpdating Jednak procedura obsługi zdarzeń skopiowana z samouczka Badanie zdarzeń skojarzonych z wstawianiem, aktualizowaniem i usuwaniem zawiera sprawdzanie programowe, które gwarantuje, że UnitPrice jest dostarczany. Możesz usunąć tę logikę, pozostawić ją w stanie takim, w jakim jest, lub dodać element RequiredFieldValidator do obiektu UnitPriceEditItemTemplate.

Krok 4. Podsumowanie problemów z wpisem danych

Oprócz pięciu kontrolek weryfikacji ASP.NET zawiera kontrolkę ValidationSummary, która wyświetla ErrorMessage s tych kontrolek weryfikacji, które wykryły nieprawidłowe dane. Te dane podsumowania mogą być wyświetlane jako tekst na stronie internetowej lub za pośrednictwem modalnego, po stronie klienta pola komunikatów. Ulepszymy ten samouczek, aby uwzględnić pole komunikatów po stronie klienta podsumowujące wszelkie problemy z walidacją.

Aby to zrobić, przeciągnij kontrolkę ValidationSummary z przybornika na Projektant. Lokalizacja kontrolki Walidacja nie ma znaczenia, ponieważ skonfigurujemy ją tylko w celu wyświetlenia podsumowania jako skrzynki odbiorczej. Po dodaniu kontrolki ustaw jej właściwość ShowSummary na False i jej właściwość ShowMessageBox na True. Dzięki temu wszelkie błędy weryfikacji są sumowane w skrzynce komunikatów po stronie klienta.

Rysunek 11. Błędy walidacji są podsumowane w polu komunikatów Client-Side (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 5. Dodawanie kontrolek weryfikacji do elementu DetailsViewInsertItemTemplate

Wszystko, co pozostaje w tym samouczku, to dodanie kontrolek weryfikacji do interfejsu wstawiania elementu DetailsView. Proces dodawania kontrolek weryfikacji do szablonów elementu DetailsView jest identyczny z analizą w kroku 3; w związku z tym będziemy przechodzić przez zadanie w tym kroku. Tak jak w przypadku elementu GridViewEditItemTemplate, zachęcamy do zmiany nazwy ID elementów TextBoxes z nieskrypcji TextBox1 i na InsertProductName i TextBox2InsertUnitPrice.

Dodaj element RequiredFieldValidator do elementu ProductNameInsertItemTemplate. ControlToValidateID Ustaw wartość elementu TextBox w szablonie, jego Text właściwość na "*" i jej ErrorMessage właściwość na "Musisz podać nazwę produktu".

UnitPrice Ponieważ ta strona jest wymagana podczas dodawania nowego rekordu, dodaj element RequiredFieldValidator doInsertItemTemplateUnitPrice elementu , odpowiednio ustawiając jego ControlToValidatewłaściwości , Texti ErrorMessage . Na koniec dodaj element CompareValidator do UnitPriceInsertItemTemplate elementu , a także skonfiguruj jego ControlToValidatewłaściwości , Text, ErrorMessageType, Operatori ValueToCompare tak jak w przypadku UnitPriceelementu CompareValidator w elemecie GridView EditItemTemplate.

Po dodaniu tych kontrolek weryfikacji nie można dodać nowego produktu do systemu, jeśli jego nazwa nie jest podana lub jeśli jego cena jest liczbą ujemną lub nielegalnie sformatowanym.

Rysunek 12. Logika walidacji została dodana do interfejsu wstawiania elementu DetailsView (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 6. Partycjonowanie kontrolek walidacji w grupach weryfikacji

Nasza strona składa się z dwóch logicznie różnych zestawów kontrolek weryfikacji: tych, które odpowiadają interfejsowi edycji elementu GridView i tym, które odpowiadają interfejsowi wstawiania elementu DetailsView. Domyślnie po zakończeniu powrotu wszystkie kontrolki weryfikacji na stronie są sprawdzane. Jednak podczas edytowania rekordu nie chcemy, aby kontrolki sprawdzania poprawności wstawiania interfejsu DetailsView zostały zweryfikowane. Rysunek 13 ilustruje nasz bieżący dylemat, gdy użytkownik edytuje produkt z doskonale legalnymi wartościami, klikając pozycję Aktualizuj powoduje błąd weryfikacji, ponieważ nazwy i wartości cen w interfejsie wstawiania są puste.

Rysunek 13. Aktualizowanie produktu powoduje uruchomienie kontrolek walidacji interfejsu wstawiania (kliknij, aby wyświetlić obraz pełnowymiarowy)

Kontrolki sprawdzania poprawności w ASP.NET 2.0 można podzielić na grupy weryfikacji za pośrednictwem ich ValidationGroup właściwości. Aby skojarzyć zestaw kontrolek weryfikacji w grupie, po prostu ustaw ich ValidationGroup właściwość na tę samą wartość. W naszym samouczku ustaw ValidationGroup właściwości kontrolek weryfikacji w polach TemplateFields elementu GridView na EditValidationControls i ValidationGroup właściwości pola szablonów elementu DetailsView na InsertValidationControls. Te zmiany można wykonywać bezpośrednio w deklaratywnej adiustacji lub za pośrednictwem okno Właściwości podczas korzystania z interfejsu edytowania szablonu Projektant.

Oprócz kontrolek sprawdzania poprawności kontrolki Związane z przyciskiem i przyciskiem w ASP.NET 2.0 zawierają ValidationGroup również właściwość. Moduły sprawdzania poprawności grupy weryfikacji są sprawdzane pod kątem ważności tylko wtedy, gdy powrót jest wywoływany przez przycisk, który ma to samo ValidationGroup ustawienie właściwości. Aby na przykład przycisk Wstaw kontrolki DetailsView wyzwolił InsertValidationControls grupę weryfikacji, musimy ustawić właściwość CommandField ValidationGroup na InsertValidationControls (zobacz Rysunek 14). Ponadto ustaw właściwość CommandField ValidationGroup elementu GridView na EditValidationControls.

Rysunek 14. Ustaw właściwość CommandField ValidationGroup elementu DetailsView na InsertValidationControls (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po tych zmianach kontrolki DetailsView i GridView TemplateFields i CommandFields powinny wyglądać podobnie do następujących:

Pola szablonów elementu DetailsView i 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" />

Pole poleceń i pola szablonów elementu 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>

Na tym etapie kontrolki sprawdzania poprawności specyficzne dla edycji są uruchamiane tylko wtedy, gdy zostanie kliknięty przycisk Aktualizuj kontrolki GridView, a kontrolki sprawdzania poprawności specyficzne dla wstawiania są uruchamiane tylko wtedy, gdy zostanie kliknięty przycisk Wstaw elementu DetailsView, usuwając problem wyróżniony na rysunku 13. Jednak w przypadku tej zmiany nasza kontrolka ValidationSummary nie jest już wyświetlana podczas wprowadzania nieprawidłowych danych. Kontrolka ValidationSummary zawiera ValidationGroup również właściwość i zawiera tylko podsumowanie informacji dotyczących tych kontrolek walidacji w grupie walidacji. W związku z tym musimy mieć dwie kontrolki weryfikacji na tej stronie, jedną dla InsertValidationControls grupy walidacji i jedną dla 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" />

Po dodaniu nasz samouczek został ukończony!

Podsumowanie

Mimo że obiekty BoundFields mogą zapewniać zarówno interfejs wstawiania, jak i edytowania, interfejs nie można dostosowywać. Często chcemy dodać kontrolki weryfikacji do interfejsu edycji i wstawiania, aby upewnić się, że użytkownik wprowadza wymagane dane wejściowe w formacie prawnym. Aby to osiągnąć, musimy przekonwertować pola BoundFields na pola szablonów i dodać kontrolki walidacji do odpowiednich szablonów. W tym samouczku rozszerzyliśmy przykład z samouczka Badanie zdarzeń skojarzonych z wstawianiem, aktualizowaniem i usuwaniem , dodając kontrolki weryfikacji zarówno do interfejsu wstawiania elementu DetailsView, jak i interfejsu edycji elementu GridView. Ponadto pokazano, jak wyświetlić informacje o weryfikacji podsumowania przy użyciu kontrolki ValidationSummary i jak podzielić kontrolki walidacji na stronie na odrębne grupy weryfikacji.

Jak pokazano w tym samouczku, pola szablonów umożliwiają rozszerzanie interfejsów edycji i wstawiania w celu uwzględnienia kontrolek weryfikacji. Pola szablonów można również rozszerzyć w celu uwzględnienia dodatkowych kontrolek sieci Web wejściowych, umożliwiając zamianę pola textBox na bardziej odpowiednią kontrolkę sieci Web. W następnym samouczku zobaczymy, jak zastąpić kontrolkę TextBox kontrolką DropDownList powiązaną z danymi, która jest idealna podczas edytowania klucza obcego (na przykład CategoryID lub SupplierID w Products tabeli).

Szczęśliwe programowanie!

Informacje o autorze

Scott Mitchell, autor siedmiu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 2.0 w ciągu 24 godzin. Można do niego dotrzeć pod adresem mitchell@4GuysFromRolla.com. Lub za pośrednictwem swojego bloga, który można znaleźć na stronie http://ScottOnWriting.NET.

Specjalne podziękowania

Ta seria samouczków została sprawdzona przez wielu pomocnych recenzentów. Recenzenci z tego samouczka byli Liz Shulok i Zack Jones. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi wiersz pod adresem mitchell@4GuysFromRolla.com.

WsteczDalej