Hinzufügen von Validierungssteuerelementen zu Schnittstellen zum Bearbeiten und Einfügen (C#)

von Scott Mitchell

PDF herunterladen

In diesem Tutorial erfahren Sie, wie einfach das Hinzufügen von Validierungssteuerelementen zu EditItemTemplate und InsertItemTemplate eines Datenwebsteuerelements ist, um eine narrensicherere Benutzeroberfläche bereitzustellen.

Einführung

Die GridView- und DetailsView-Steuerelemente in den Beispielen, die wir in den letzten drei Tutorials untersucht haben, bestehen alle aus BoundFields und CheckBoxFields (die Feldtypen, die von Visual Studio automatisch hinzugefügt werden, wenn ein GridView- oder DetailsView-Objekt über das Smarttag an ein Datenquellensteuerelement gebunden wird). Beim Bearbeiten einer Zeile in einer GridView oder DetailsView werden die boundFields, die nicht schreibgeschützt sind, in Textfelder konvertiert, aus denen der Endbenutzer die vorhandenen Daten ändern kann. Ebenso werden beim Einfügen eines neuen Datensatzes in ein DetailsView-Steuerelement die BoundFields, deren InsertVisible Eigenschaft auf true festgelegt ist (standard) als leere Textfelder gerendert, in denen der Benutzer die Feldwerte des neuen Datensatzes angeben kann. Ebenso werden CheckBoxFields, die in der schreibgeschützten Standardschnittstelle deaktiviert sind, in aktivierte Kontrollkästchen in den Bearbeitungs- und Einfügeschnittstellen konvertiert.

Während die standardmäßigen Bearbeitungs- und Einfügeschnittstellen für BoundField und CheckBoxField hilfreich sein können, fehlt der Schnittstelle jede Art von Validierung. Wenn ein Benutzer einen Fehler bei der Dateneingabe macht, z. B. das ProductName Feld weglassen oder einen ungültigen Wert für UnitsInStock (z. B. -50) eingibt, wird eine Ausnahme innerhalb der Tiefen der Anwendungsarchitektur ausgelöst. Obwohl diese Ausnahme ordnungsgemäß behandelt werden kann, wie im vorherigen Tutorial gezeigt, enthält die Benutzeroberfläche zum Bearbeiten oder Einfügen im Idealfall Validierungssteuerelemente, um zu verhindern, dass ein Benutzer solche ungültigen Daten überhaupt eingibt.

Um eine benutzerdefinierte Bearbeitungs- oder Einfügeschnittstelle bereitzustellen, müssen wir BoundField oder CheckBoxField durch ein TemplateField ersetzen. TemplateFields, die in den Tutorials Verwenden von TemplateFields im GridView-Steuerelement und Verwenden von TemplateFields in den DetailsView-Steuerelementen thema waren, können aus mehreren Vorlagen bestehen, die separate Schnittstellen für verschiedene Zeilenzustände definieren. Das TemplateField wird ItemTemplate verwendet, wenn schreibgeschützte Felder oder Zeilen in den Steuerelementen DetailsView oder GridView gerendert werden, während die EditItemTemplate und InsertItemTemplate die Schnittstellen angeben, die für den Bearbeitungs- bzw. Einfügemodus verwendet werden sollen.

In diesem Tutorial erfahren Sie, wie einfach es ist, validierungssteuerelemente EditItemTemplate zu den TemplateField-Steuerelementen hinzuzufügen und InsertItemTemplate eine narrensicherere Benutzeroberfläche bereitzustellen. In diesem Tutorial wird insbesondere das Beispiel verwendet, das im Tutorial Untersuchen der ereignisse im Zusammenhang mit Einfügen, Aktualisieren und Löschen erstellt wurde, und erweitert die Bearbeitungs- und Einfügeschnittstellen, um eine entsprechende Validierung einzuschließen.

Schritt 1: Replizieren des Beispiels ausder Untersuchung der Ereignisse im Zusammenhang mit dem Einfügen, Aktualisieren und Löschen

Im Tutorial Untersuchen der Ereignisse im Zusammenhang mit Einfügen, Aktualisieren und Löschen haben wir eine Seite erstellt, auf der die Namen und Preise der Produkte in einer bearbeitbaren GridView aufgeführt sind. Darüber hinaus enthielt die Seite eine DetailsView, deren DefaultMode Eigenschaft auf Insertfestgelegt wurde, wodurch immer im Einfügemodus gerendert wird. In dieser Detailansicht kann der Benutzer den Namen und den Preis für ein neues Produkt eingeben, auf Einfügen klicken und es dem System hinzufügen lassen (siehe Abbildung 1).

Abbildung 1: Im vorherigen Beispiel können Benutzer neue Produkte hinzufügen und vorhandene produkte bearbeiten (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Unser Ziel für dieses Tutorial ist die Erweiterung von DetailsView und GridView, um Validierungssteuerelemente bereitzustellen. Insbesondere wird unsere Validierungslogik Folgendes ausführen:

• Anfordern, dass der Name beim Einfügen oder Bearbeiten eines Produkts angegeben wird
• Verlangen, dass der Preis beim Einfügen eines Datensatzes angegeben wird; Beim Bearbeiten eines Datensatzes benötigen wir weiterhin einen Preis, verwenden jedoch die programmgesteuerte Logik im GridView-Ereignishandler RowUpdating , der bereits aus dem vorherigen Tutorial vorhanden ist.
• Stellen Sie sicher, dass der für den Preis eingegebene Wert ein gültiges Währungsformat ist.

Bevor wir das vorherige Beispiel erweitern können, um die Validierung einzuschließen, müssen wir das Beispiel zunächst von der DataModificationEvents.aspx Seite auf die Seite für dieses Tutorial replizieren UIValidation.aspx. Um dies zu erreichen, müssen wir sowohl das deklarative Markup der Seite als auch den DataModificationEvents.aspx zugehörigen Quellcode kopieren. Kopieren Sie zunächst das deklarative Markup, indem Sie die folgenden Schritte ausführen:

1. Öffnen der DataModificationEvents.aspx Seite in Visual Studio
2. Wechseln Sie zum deklarativen Markup der Seite (klicken Sie unten auf der Seite auf die Schaltfläche Quelle).
3. Kopieren Sie den Text in den <asp:Content> Tags und </asp:Content> (Zeilen 3 bis 44), wie in Abbildung 2 dargestellt.

Abbildung 2: Kopieren des Texts innerhalb des <asp:Content> Steuerelements (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

1. Öffnen der UIValidation.aspx Seite
2. Wechseln zum deklarativen Markup der Seite
3. Fügen Sie den Text in das <asp:Content> Steuerelement ein.

Um den Quellcode zu kopieren, öffnen Sie die DataModificationEvents.aspx.cs Seite, und kopieren Sie nur den Text in der EditInsertDelete_DataModificationEvents -Klasse. Kopieren Sie die drei Ereignishandler (Page_Load, GridView1_RowUpdatingund ObjectDataSource1_Inserting), aber kopieren Sie nicht die Klassendeklaration oder using -anweisungen. Fügen Sie den kopierten Text in die EditInsertDelete_UIValidation -Klasse ein UIValidation.aspx.cs.

Nachdem Sie den Inhalt und den Code von DataModificationEvents.aspx zu verschoben haben UIValidation.aspx, nehmen Sie sich einen Moment Zeit, um Ihren Fortschritt in einem Browser zu testen. Auf jeder dieser beiden Seiten sollte dieselbe Ausgabe und dieselbe Funktionalität angezeigt werden (siehe Abbildung 1 für einen Screenshot von DataModificationEvents.aspx in Aktion).

Schritt 2: Konvertieren von BoundFields in TemplateFields

Um den Bearbeitungs- und Einfügeschnittstellen Validierungssteuerelemente hinzuzufügen, müssen die von den DetailsView- und GridView-Steuerelementen verwendeten BoundFields in TemplateFields konvertiert werden. Klicken Sie dazu in den Smarttags von GridView bzw. DetailsView auf die Verknüpfungen Spalten bearbeiten und Felder bearbeiten. Wählen Sie dort jedes der BoundFields aus, und klicken Sie auf den Link "Dieses Feld in ein TemplateField konvertieren".

Abbildung 3: Konvertieren jedes der BoundFields von DetailsView und GridView in TemplateFields (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Beim Konvertieren eines BoundField in ein TemplateField über das Dialogfeld Felder wird ein TemplateField generiert, das die gleichen schreibgeschützten, bearbeitungs- und einfügeschützten Schnittstellen wie das BoundField selbst aufweist. Das folgende Markup zeigt die deklarative Syntax für das ProductName Feld in der DetailsView, nachdem es in ein TemplateField konvertiert wurde:

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

Beachten Sie, dass in diesem TemplateField automatisch drei Vorlagen erstellt wurden ItemTemplate: EditItemTemplate, und InsertItemTemplate. Zeigt ItemTemplate einen einzelnen Datenfeldwert (ProductName) mithilfe eines Label Web-Steuerelements Text an, während InsertItemTemplate und EditItemTemplate den Datenfeldwert in einem TextBox-Websteuerelement darstellen, das das Datenfeld mithilfe der bidirektionalen Datenbindung der TextBox-Eigenschaft zuordnet. Da wir die DetailsView auf dieser Seite nur zum Einfügen verwenden, können Sie und ItemTemplateEditItemTemplate aus den beiden TemplateFields entfernen, obwohl es keinen Schaden anrichtet, sie zu belassen.

Da GridView die integrierten Einfügefeatures der DetailsView nicht unterstützt, ergibt die Konvertierung des GridView-Felds ProductName in ein TemplateField nur ein ItemTemplate und 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>

Durch Klicken auf "Dieses Feld in ein TemplateField konvertieren" hat Visual Studio ein TemplateField erstellt, dessen Vorlagen die Benutzeroberfläche des konvertierten BoundField imitieren. Sie können dies überprüfen, indem Sie diese Seite über einen Browser besuchen. Sie werden feststellen, dass die Darstellung und das Verhalten von TemplateFields mit der Benutzeroberfläche identisch sind, als stattdessen BoundFields verwendet wurde.

Hinweis

Sie können die Bearbeitungsschnittstellen in den Vorlagen nach Bedarf anpassen. Es kann z. B. sein, dass textBox in TemplateFields UnitPrice als kleineres Textfeld als das ProductName Textfeld gerendert werden soll. Um dies zu erreichen, können Sie die Eigenschaft von Columns TextBox auf einen geeigneten Wert festlegen oder über die Width -Eigenschaft eine absolute Breite angeben. Im nächsten Tutorial erfahren Sie, wie Sie die Bearbeitungsoberfläche vollständig anpassen, indem Sie textBox durch ein alternatives Dateneingabe-Websteuerelement ersetzen.

Schritt 3: Hinzufügen der Validierungssteuerelemente zu den GridViewsEditItemTemplate

Beim Erstellen von Dateneingabeformularen ist es wichtig, dass Benutzer alle erforderlichen Felder eingeben und dass es sich bei allen bereitgestellten Eingaben um legale, ordnungsgemäß formatierte Werte handelt. Um sicherzustellen, dass die Eingaben eines Benutzers gültig sind, stellt ASP.NET fünf integrierte Validierungssteuerelemente bereit, die zum Überprüfen des Werts eines einzelnen Eingabesteuerelements entwickelt wurden:

• RequiredFieldValidator stellt sicher, dass ein Wert bereitgestellt wurde.
• CompareValidator überprüft einen Wert mit einem anderen Websteuerelementwert oder einem konstanten Wert oder stellt sicher, dass das Format des Werts für einen angegebenen Datentyp zulässig ist.
• RangeValidator stellt sicher, dass ein Wert innerhalb eines Wertebereichs liegt.
• RegularExpressionValidator überprüft einen Wert anhand eines regulären Ausdrucks.
• CustomValidator überprüft einen Wert anhand einer benutzerdefinierten, benutzerdefinierten Methode.

Weitere Informationen zu diesen fünf Steuerelementen finden Sie im Abschnitt Validierungssteuerelemente der ASP.NET Schnellstarttutorials.

Für unser Tutorial müssen wir einen RequiredFieldValidator sowohl in den TemplateFields ProductName von DetailsView und GridView als auch einen RequiredFieldValidator im TemplateField von DetailsView UnitPrice verwenden. Darüber hinaus müssen wir einen CompareValidator zu templateFields beider Steuerelemente UnitPrice hinzufügen, der sicherstellt, dass der eingegebene Preis einen Wert größer oder gleich 0 hat und in einem gültigen Währungsformat angezeigt wird.

Hinweis

Während ASP.NET 1.x über die gleichen fünf Validierungssteuerelemente verfügte, hat ASP.NET 2.0 eine Reihe von Verbesserungen hinzugefügt. Die Standard zwei sind clientseitige Skriptunterstützung für Browser außer Internet Explorer und die Möglichkeit, Validierungssteuerelemente auf einer Seite in Validierungsgruppen zu partitionieren.

Beginnen wir mit dem Hinzufügen der erforderlichen Validierungssteuerelemente zu den EditItemTemplate -Steuerelementen in den TemplateFields von GridView. Klicken Sie dazu im Smarttag von GridView auf den Link Vorlagen bearbeiten, um die Bearbeitungsoberfläche für Vorlagen anzuzeigen. Hier können Sie in der Dropdownliste auswählen, welche Vorlage bearbeitet werden soll. Da wir die Bearbeitungsoberfläche erweitern möchten, müssen wir Validierungssteuerelemente EditItemTemplate zu den ProductName - und UnitPrice-Steuerelementen hinzufügen.

Abbildung 4: Wir müssen die ProductName - und UnitPrice- EditItemTemplate s erweitern (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Fügen Sie in einen ProductNameEditItemTemplateRequiredFieldValidator hinzu, indem Sie ihn aus der Toolbox in die Bearbeitungsoberfläche der Vorlage ziehen und hinter textBox platzieren.

Abbildung 5: Hinzufügen eines RequiredFieldValidator zu (ProductNameEditItemTemplateKlicken Sie hier, um das Bild in voller Größe anzuzeigen)

Alle Validierungssteuerelemente funktionieren, indem die Eingabe eines einzelnen ASP.NET Websteuerelements überprüft wird. Daher müssen wir angeben, dass der RequiredFieldValidator, den wir gerade hinzugefügt haben, anhand des TextBox-Objekts im EditItemTemplateüberprüfen soll. Dies wird erreicht, indem die ControlToValidate-Eigenschaft des Validierungssteuerelements auf die ID des entsprechenden Websteuerelements festgelegt wird. Das TextBox-Element verfügt derzeit über das eher unskripte ID von TextBox1, aber wir ändern es in etwas geeigneteres. Klicken Sie in der Vorlage auf das Textfeld, und ändern Sie dann im Eigenschaftenfenster von ID in TextBox1EditProductName.

Abbildung 6: Ändern der TextBox in IDEditProductName (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Legen Sie als Nächstes ControlToValidate die RequiredFieldValidator-Eigenschaft auf fest EditProductName. Legen Sie schließlich die ErrorMessage-Eigenschaft auf "Sie müssen den Namen des Produkts angeben" und die Text-Eigenschaft auf "*" fest. Der Text -Eigenschaftswert, sofern angegeben, ist der Text, der vom Validierungssteuerelement angezeigt wird, wenn die Überprüfung fehlschlägt. Der ErrorMessage erforderliche Eigenschaftswert wird vom ValidationSummary-Steuerelement verwendet. Wenn der Text Eigenschaftswert ausgelassen wird, ist der ErrorMessage Eigenschaftswert auch der Text, der vom Validierungssteuerelement bei ungültiger Eingabe angezeigt wird.

Nachdem Sie diese drei Eigenschaften des RequiredFieldValidator festgelegt haben, sollte Ihr Bildschirm ähnlich wie Abbildung 7 aussehen.

Abbildung 7: Festlegen der Eigenschaften , ErrorMessageund Text von ControlToValidateRequiredFieldValidator (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nachdem der RequiredFieldValidator hinzugefügt ProductNameEditItemTemplatewurde, bleibt nur noch das Hinzufügen der erforderlichen Validierung zu UnitPriceEditItemTemplate. Da wir entschieden haben, dass für diese Seite beim UnitPrice Bearbeiten eines Datensatzes optional ist, müssen wir keinen RequiredFieldValidator hinzufügen. Wir müssen jedoch einen CompareValidator hinzufügen, um sicherzustellen, dass , UnitPricefalls angegeben, ordnungsgemäß als Währung formatiert ist und größer oder gleich 0 ist.

Bevor wir compareValidator zu UnitPriceEditItemTemplatehinzufügen, ändern wir zunächst die ID des TextBox-Websteuerelements von in TextBox2EditUnitPrice. Nachdem Sie diese Änderung vorgenommen haben, fügen Sie den CompareValidator hinzu, und legen Sie dessen ControlToValidate Eigenschaft auf EditUnitPrice, seine ErrorMessage Eigenschaft auf "Der Preis muss größer oder gleich Null sein und kann das Währungssymbol nicht enthalten" und seine Text Eigenschaft auf "*" festlegen.

Um anzugeben, dass der UnitPrice Wert größer oder gleich 0 sein muss, legen Sie die Eigenschaft Operator von CompareValidator auf GreaterThanEqual, die ValueToCompare-Eigenschaft auf "0" und die Type-Eigenschaft auf Currencyfest. Die folgende deklarative Syntax zeigt das UnitPrice TemplateField-Objekt EditItemTemplate , nachdem diese Änderungen vorgenommen wurden:

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

Nachdem Sie diese Änderungen vorgenommen haben, öffnen Sie die Seite in einem Browser. Wenn Sie versuchen, den Namen auszulassen oder einen ungültigen Preiswert beim Bearbeiten eines Produkts einzugeben, wird neben dem Textfeld ein Sternchen angezeigt. Wie Abbildung 8 zeigt, gilt ein Preiswert, der das Währungssymbol enthält, z. B. 19,95 USD, als ungültig. Der CompareValidator ermöglicht Zifferntrennzeichen (z. B. Kommas oder Punkte, abhängig von den Kultureinstellungen) und ein führendes CurrencyType Plus- oder Minuszeichen, lässt jedoch kein Währungssymbol zu. Dieses Verhalten kann Benutzer verstutzen, da die Bearbeitungsoberfläche derzeit mithilfe des UnitPrice Währungsformats gerendert wird.

Hinweis

Erinnern Sie sich daran, dass im Tutorial Ereignisse im Zusammenhang mit Einfügen, Aktualisieren und Löschen die Eigenschaft von DataFormatString BoundField auf {0:c} festgelegt wird, um sie als Währung zu formatieren. Darüber hinaus legen wir die ApplyFormatInEditMode -Eigenschaft auf true fest, sodass die Bearbeitungsschnittstelle von GridView die UnitPrice als Währung formatiert. Beim Konvertieren von BoundField in ein TemplateField hat Visual Studio diese Einstellungen notiert und die TextBox-Eigenschaft mithilfe der Datenbindungssyntax Text<%# Bind("UnitPrice", "{0:c}") %>als Währung formatiert.

Abbildung 8: Ein Sternchen wird neben den Textfelds mit ungültiger Eingabe angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Während die Überprüfung unverändert funktioniert, muss der Benutzer das Währungssymbol beim Bearbeiten eines Datensatzes manuell entfernen, was nicht akzeptabel ist. Um dies zu beheben, haben wir drei Möglichkeiten:

1. Konfigurieren Sie so EditItemTemplate , dass der UnitPrice Wert nicht als Währung formatiert ist.
2. Lassen Sie dem Benutzer die Eingabe eines Währungssymbols zu, indem Sie compareValidator entfernen und durch einen RegularExpressionValidator ersetzen, der ordnungsgemäß nach einem ordnungsgemäß formatierten Währungswert sucht. Das Problem besteht hier darin, dass der reguläre Ausdruck zum Überprüfen eines Währungswerts nicht hübsch ist und code geschrieben werden muss, wenn wir Kultureinstellungen integrieren möchten.
3. Entfernen Sie das Validierungssteuerelement vollständig, und verlassen Sie sich auf serverseitige Validierungslogik RowUpdating im GridView-Ereignishandler.

Lassen Sie uns mit Option 1 für diese Übung beginnen. Derzeit ist die UnitPrice aufgrund des Datenbindungsausdrucks für das TextBox-Element in der EditItemTemplate<%# Bind("UnitPrice", "{0:c}") %>als Währung formatiert. Ändern Sie die Bind-Anweisung in Bind("UnitPrice", "{0:n2}"), wodurch das Ergebnis als Zahl mit zwei Ziffern der Genauigkeit formatiert wird. Dies kann direkt über die deklarative Syntax oder durch Klicken auf den Link DataBindings bearbeiten im EditUnitPrice TextBox-Element des UnitPrice TemplateFields EditItemTemplate erfolgen (siehe Abbildungen 9 und 10).

Abbildung 9: Klicken Sie auf den Link DataBindings bearbeiten von TextBox (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 10: Angeben des Formatbezeichners in der Bind -Anweisung (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Mit dieser Änderung enthält der formatierte Preis in der Bearbeitungsoberfläche Kommas als Gruppentrennzeichen und einen Punkt als Dezimaltrennzeichen, lässt jedoch das Währungssymbol aus.

Hinweis

Enthält UnitPriceEditItemTemplate keinen RequiredFieldValidator, sodass das Postback und die Aktualisierungslogik gestartet werden kann. Der Ereignishandler, der RowUpdating aus dem Tutorial Untersuchen der ereignisse im Zusammenhang mit Einfügen, Aktualisieren und Löschen kopiert wurde, enthält jedoch eine programmgesteuerte Überprüfung, mit der sichergestellt wird, dass bereitgestellt UnitPrice wird. Sie können diese Logik entfernen, unverändert lassen oder einen RequiredFieldValidator zu hinzufügen UnitPriceEditItemTemplate.

Schritt 4: Zusammenfassen von Dateneingabeproblemen

Zusätzlich zu den fünf Validierungssteuerelementen enthält ASP.NET das ValidationSummary-Steuerelement, das die ErrorMessage Überprüfungssteuerelemente anzeigt, die ungültige Daten erkannt haben. Diese Zusammenfassungsdaten können als Text auf der Webseite oder über ein modales, clientseitiges Meldungsfeld angezeigt werden. Lassen Sie uns dieses Tutorial erweitern, um ein clientseitiges Meldungsfeld einzuschließen, in dem alle Validierungsprobleme zusammengefasst sind.

Ziehen Sie dazu ein ValidationSummary-Steuerelement aus der Toolbox auf die Designer. Der Speicherort des Validierungssteuerelements spielt keine rolle, da wir es so konfigurieren, dass nur die Zusammenfassung als Meldungsfeld angezeigt wird. Legen Sie nach dem Hinzufügen des Steuerelements die ShowSummary-Eigenschaft auf false und die ShowMessageBox-Eigenschaft auf fest true. Mit dieser Ergänzung werden alle Validierungsfehler in einem clientseitigen Meldungsfeld zusammengefasst.

Abbildung 11: Die Validierungsfehler werden in einem Client-Side Meldungsfeld zusammengefasst (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 5: Hinzufügen der Validierungssteuerelemente zu den DetailsViewsInsertItemTemplate

Für dieses Tutorial bleibt nur das Hinzufügen der Validierungssteuerelemente zur Einfügeschnittstelle von DetailsView. Der Prozess zum Hinzufügen von Validierungssteuerelementen zu den DetailsView-Vorlagen ist identisch mit dem in Schritt 3 untersuchten. Daher werden wir die Aufgabe in diesem Schritt durchgehen. Wie bei den GridViews EditItemTemplate ermuntere ich Sie, die ID -Elemente der TextBoxen von unskript und TextBox1TextBox2 in und InsertUnitPriceumzubenennenInsertProductName.

Fügen Sie dem einen RequiredFieldValidator hinzu ProductNameInsertItemTemplate. Legen Sie die ControlToValidate auf die ID des TextBox-Objekts in der Vorlage, die - Text Eigenschaft auf "*" und die - ErrorMessage Eigenschaft auf "Sie müssen den Namen des Produkts angeben" fest.

Da für UnitPrice diese Seite beim Hinzufügen eines neuen Datensatzes erforderlich ist, fügen Sie dem einen RequiredFieldValidator hinzu, und legen Sie die UnitPriceControlToValidateInsertItemTemplateEigenschaften , Textund ErrorMessage entsprechend fest. Fügen Sie schließlich auch einen CompareValidator hinzuUnitPriceInsertItemTemplate, und konfigurieren Sie die ControlToValidateEigenschaften , Text, TypeErrorMessage, Operator, und ValueToCompare genau wie beim UnitPriceCompareValidator in der GridViewEditItemTemplate.

Nach dem Hinzufügen dieser Validierungssteuerelemente kann ein neues Produkt nicht zum System hinzugefügt werden, wenn sein Name nicht angegeben wird oder wenn der Preis eine negative Zahl oder eine unzulässige Formatierung ist.

Abbildung 12: Validierungslogik wurde der Einfügeschnittstelle von DetailsView hinzugefügt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 6: Partitionieren der Validierungssteuerelemente in Validierungsgruppen

Unsere Seite besteht aus zwei logisch unterschiedlichen Sätzen von Validierungssteuerelementen: denen, die der Bearbeitungsschnittstelle von GridView entsprechen, und denen, die der Einfügeschnittstelle von DetailsView entsprechen. Wenn ein Postback auftritt, werden standardmäßig alle Validierungssteuerelemente auf der Seite überprüft. Beim Bearbeiten eines Datensatzes möchten wir jedoch nicht, dass die Überprüfungssteuerelemente der Einfügeschnittstelle der DetailsView-Schnittstelle überprüft werden. Abbildung 13 veranschaulicht unser aktuelles Dilemma, wenn ein Benutzer ein Produkt mit vollkommen legalen Werten bearbeitet. Durch Klicken auf Aktualisieren wird ein Validierungsfehler ausgelöst, da der Name und der Preis in der Einfügeschnittstelle leer sind.

Abbildung 13: Aktualisieren eines Produkts bewirkt, dass die Validierungssteuerelemente der Einfügeschnittstelle ausgelöst werden (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Die Validierungssteuerelemente in ASP.NET 2.0 können über ihre ValidationGroup -Eigenschaft in Validierungsgruppen partitioniert werden. Um eine Gruppe von Validierungssteuerelementen in einer Gruppe zuzuordnen, legen Sie einfach deren ValidationGroup Eigenschaft auf den gleichen Wert fest. Legen Sie für unser Tutorial die ValidationGroup Eigenschaften der Validierungssteuerelemente in den TemplateFields von GridView auf EditValidationControls und die ValidationGroup Eigenschaften der TemplateFields von DetailsView auf fest InsertValidationControls. Diese Änderungen können direkt im deklarativen Markup oder über die Eigenschaftenfenster vorgenommen werden, wenn sie die Benutzeroberfläche zum Bearbeiten von Vorlagen des Designer verwenden.

Zusätzlich zu den Validierungssteuerelementen enthalten die Schaltflächen- und Schaltflächen-bezogenen Steuerelemente in ASP.NET 2.0 auch eine ValidationGroup -Eigenschaft. Die Validierungssteuerelemente einer Validierungsgruppe werden nur dann auf Gültigkeit überprüft, wenn ein Postback durch eine Schaltfläche mit derselben ValidationGroup Eigenschaftseinstellung induziert wird. Damit beispielsweise die Schaltfläche Einfügen von DetailsView die InsertValidationControls Validierungsgruppe auslöst, müssen wir die CommandField-Eigenschaft ValidationGroup auf InsertValidationControls festlegen (siehe Abbildung 14). Legen Sie außerdem die CommandField-Eigenschaft ValidationGroup von GridView auf fest EditValidationControls.

Abbildung 14: Festlegen der CommandField-Eigenschaft von ValidationGroup DetailsView auf InsertValidationControls (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nach diesen Änderungen sollten die DetailsView- und GridView-Vorlagenfelder und CommandFields in etwa wie folgt aussehen:

TemplateFields und CommandField von 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" />

CommandField und TemplateFields von 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>

An diesem Punkt werden die bearbeitungsspezifischen Validierungssteuerelemente nur ausgelöst, wenn auf die Schaltfläche Aktualisieren von GridView geklickt wird und die einfügespezifischen Validierungssteuerelemente nur ausgelöst werden, wenn auf die Schaltfläche Einfügen von DetailsView geklickt wird, wodurch das in Abbildung 13 hervorgehobene Problem behoben wird. Mit dieser Änderung wird das ValidationSummary-Steuerelement jedoch nicht mehr angezeigt, wenn ungültige Daten eingegeben werden. Das ValidationSummary-Steuerelement enthält auch eine ValidationGroup -Eigenschaft und zeigt nur Zusammenfassungsinformationen für diese Validierungssteuerelemente in seiner Validierungsgruppe an. Daher müssen auf dieser Seite zwei Validierungssteuerelemente vorhanden sein: eines für die InsertValidationControls Validierungsgruppe und eins 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" />

Mit diesem Zusatz ist unser Tutorial abgeschlossen!

Zusammenfassung

BoundFields kann zwar sowohl eine Einfüge- als auch eine Bearbeitungsschnittstelle bereitstellen, die Schnittstelle kann jedoch nicht angepasst werden. In der Regel möchten wir der Bearbeitungs- und Einfügeoberfläche Validierungssteuerelemente hinzufügen, um sicherzustellen, dass der Benutzer die erforderlichen Eingaben in einem gesetzlichen Format eingibt. Um dies zu erreichen, müssen wir boundFields in TemplateFields konvertieren und die Validierungssteuerelemente den entsprechenden Vorlagen hinzufügen. In diesem Tutorial haben wir das Beispiel aus dem Tutorial Untersuchen der ereignisse im Zusammenhang mit Einfügen, Aktualisieren und Löschen erweitert und sowohl der Einfügeschnittstelle von DetailsView als auch der Bearbeitungsoberfläche von GridView Validierungssteuerelemente hinzugefügt. Darüber hinaus haben wir erfahren, wie Sie zusammenfassende Validierungsinformationen mithilfe des ValidationSummary-Steuerelements anzeigen und die Validierungssteuerelemente auf der Seite in verschiedene Validierungsgruppen partitionieren.

Wie in diesem Tutorial gezeigt, ermöglicht TemplateFields die Erweiterung der Bearbeitungs- und Einfügeschnittstellen, um Validierungssteuerelemente einzuschließen. TemplateFields kann auch erweitert werden, um zusätzliche Eingabewebsteuerelemente einzuschließen, sodass textBox durch ein geeigneteres Websteuerelement ersetzt werden kann. In unserem nächsten Tutorial erfahren Sie, wie Sie das TextBox-Steuerelement durch ein datengebundenes DropDownList-Steuerelement ersetzen. Dies ist ideal beim Bearbeiten eines Fremdschlüssels (z CategoryID . B. oder SupplierID in der Products Tabelle).

Viel Spaß beim Programmieren!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Besonderen Dank an

Diese Tutorialreihe wurde von vielen hilfreichen Prüfern überprüft. Leitende Prüfer für dieses Tutorial waren Liz Shulok und Zack Jones. Möchten Sie meine anstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.

ZurückWeiter