Übersicht über das Bearbeiten und Löschen von Daten in der DataList (C#)

von Scott Mitchell

PDF herunterladen

Obwohl die DataList keine integrierten Bearbeitungs- und Löschfunktionen bietet, erfahren Sie in diesem Tutorial, wie Sie eine DataList erstellen, die das Bearbeiten und Löschen der zugrunde liegenden Daten unterstützt.

Einführung

Im Tutorial Eine Übersicht über das Einfügen, Aktualisieren und Löschen von Daten haben wir uns mit dem Einfügen, Aktualisieren und Löschen von Daten mit der Anwendungsarchitektur, einer ObjectDataSource und den GridView-, DetailsView- und FormView-Steuerelementen befasst. Mit der ObjectDataSource und diesen drei Datenwebsteuerelementen war die Implementierung einfacher Schnittstellen zur Datenänderung ein Kinderspiel und beinhaltete lediglich das Aktivieren eines Kontrollkästchens aus einem Smarttag. Es musste kein Code geschrieben werden.

Leider fehlen der DataList die integrierten Bearbeitungs- und Löschfunktionen des GridView-Steuerelements. Diese fehlende Funktionalität ist teilweise darauf zurückzuführen, dass die DataList ein Relikt aus der vorherigen Version von ASP.NET ist, als deklarative Datenquellensteuerelemente und codefreie Datenänderungsseiten nicht verfügbar waren. DataList in ASP.NET 2.0 bietet zwar nicht dieselben sofort einsatzbereiten Datenänderungsfunktionen wie GridView, wir können jedoch ASP.NET 1.x-Techniken verwenden, um diese Funktionalität einzuschließen. Dieser Ansatz erfordert ein wenig Code, aber wie wir in diesem Tutorial sehen werden, verfügt dataList über einige Ereignisse und Eigenschaften, die diesen Prozess unterstützen.

In diesem Tutorial erfahren Sie, wie Sie eine DataList erstellen, die das Bearbeiten und Löschen der zugrunde liegenden Daten unterstützt. In zukünftigen Tutorials werden komplexere Bearbeitungs- und Löschszenarien untersucht, einschließlich der Überprüfung von Eingabefeldern, der ordnungsgemäßen Behandlung von Ausnahmen, die von den Datenzugriffs- oder Geschäftslogikebenen ausgelöst werden, usw.

Hinweis

Wie die DataList fehlt dem Repeater-Steuerelement die vordefinierte Funktionalität zum Einfügen, Aktualisieren oder Löschen. Während solche Funktionen hinzugefügt werden können, enthält die DataList Eigenschaften und Ereignisse, die nicht im Repeater gefunden werden, die das Hinzufügen solcher Funktionen vereinfachen. Daher konzentrieren sich dieses Tutorial und zukünftige, die sich mit dem Bearbeiten und Löschen befassen, ausschließlich auf die DataList.

Schritt 1: Erstellen der Tutorials-Webseiten zum Bearbeiten und Löschen

Bevor wir mit dem Aktualisieren und Löschen von Daten aus einer DataList beginnen, nehmen wir uns zunächst einen Moment Zeit, um die ASP.NET Seiten in unserem Websiteprojekt zu erstellen, die wir für dieses Tutorial und die nächsten mehrere benötigen. Beginnen Sie mit dem Hinzufügen eines neuen Ordners mit dem Namen EditDeleteDataList. Fügen Sie als Nächstes die folgenden ASP.NET Seiten zu diesem Ordner hinzu, und stellen Sie sicher, dass jede Seite der Site.master master Seite zugeordnet wird:

• Default.aspx
• Basics.aspx
• BatchUpdate.aspx
• ErrorHandling.aspx
• UIValidation.aspx
• CustomizedUI.aspx
• OptimisticConcurrency.aspx
• ConfirmationOnDelete.aspx
• UserLevelAccess.aspx

Abbildung 1: Hinzufügen der ASP.NET Seiten für die Tutorials

Wie in den anderen Ordnern werden Default.aspx im EditDeleteDataList Ordner die Tutorials im zugehörigen Abschnitt aufgelistet. Denken Sie daran, dass das SectionLevelTutorialListing.ascx Benutzersteuerelement diese Funktionalität bereitstellt. Fügen Sie daher dieses Benutzersteuerelement hinzuDefault.aspx, indem Sie es aus dem Projektmappen-Explorer auf die Entwurfsansicht der Seite ziehen.

Abbildung 2: Hinzufügen des SectionLevelTutorialListing.ascx Benutzersteuerelements zu Default.aspx (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Fügen Sie schließlich die Seiten als Einträge zur Web.sitemap Datei hinzu. Fügen Sie insbesondere das folgende Markup nach den Master-/Detailberichten mit dataList und Repeater <siteMapNode>hinzu:

<siteMapNode
    title="Editing and Deleting with the DataList"
    description="Samples of Reports that Provide Editing and Deleting Capabilities"
    url="~/EditDeleteDataList/Default.aspx" >
    <siteMapNode
        title="Basics"
        description="Examines the basics of editing and deleting with the
                     DataList control."
        url="~/EditDeleteDataList/Basics.aspx" />
    <siteMapNode
        title="Batch Update"
        description="Examines how to update multiple records at once in a
                     fully-editable DataList."
        url="~/EditDeleteDataList/BatchUpdate.aspx" />
    <siteMapNode
        title="Error Handling"
        description="Learn how to gracefully handle exceptions raised during the
                     data modification workflow."
        url="~/EditDeleteDataList/ErrorHandling.aspx" />
    <siteMapNode
        title="Adding Data Entry Validation"
        description="Help prevent data entry errors by providing validation."
        url="~/EditDeleteDataList/UIValidation.aspx" />
    <siteMapNode
        title="Customize the User Interface"
        description="Customize the editing user interfaces."
        url="~/EditDeleteDataList/CustomizedUI.aspx" />
    <siteMapNode
        title="Optimistic Concurrency"
        description="Learn how to help prevent simultaneous users from
                     overwritting one another s changes."
        url="~/EditDeleteDataList/OptimisticConcurrency.aspx" />
    <siteMapNode
        title="Confirm On Delete"
        description="Prompt a user for confirmation when deleting a record."
        url="~/EditDeleteDataList/ConfirmationOnDelete.aspx" />
    <siteMapNode
        title="Limit Capabilities Based on User"
        description="Learn how to limit the data modification functionality
                     based on the user s role or permissions."
        url="~/EditDeleteDataList/UserLevelAccess.aspx" />
</siteMapNode>

Nehmen Sie sich nach dem Aktualisieren Web.sitemapeinen Moment Zeit, um die Tutorials-Website über einen Browser anzuzeigen. Das Menü auf der linken Seite enthält jetzt Elemente für die Tutorials zum Bearbeiten und Löschen von DataList.

Abbildung 3: Die Siteübersicht enthält jetzt Einträge für die Tutorials zum Bearbeiten und Löschen von DataList

Schritt 2: Untersuchen von Techniken zum Aktualisieren und Löschen von Daten

Das Bearbeiten und Löschen von Daten mit der GridView ist so einfach, da gridView und ObjectDataSource unter den Abdeckungen gemeinsam funktionieren. Wie im Tutorial Untersuchen der Ereignisse im Zusammenhang mit Einfügen, Aktualisieren und Löschen erläutert, weist gridView beim Klicken auf die Schaltfläche Aktualisieren der Zeile automatisch die Felder zu, die die bidirektionale Datenbindung verwendet haben, der UpdateParameters Auflistung ihrer ObjectDataSource-Methode und ruft dann die ObjectDataSource-Methode Update() auf.

Leider bietet die DataList keine dieser integrierten Funktionen. Es liegt in unserer Verantwortung sicherzustellen, dass die Werte des Benutzers den Parametern von ObjectDataSource zugewiesen werden und die Update() Methode aufgerufen wird. Um uns bei diesem Unterfangen zu unterstützen, stellt die DataList die folgenden Eigenschaften und Ereignisse bereit:

• Die DataKeyField -Eigenschaft beim Aktualisieren oder Löschen muss in der Lage sein, jedes Element in der DataList eindeutig zu identifizieren. Legen Sie diese Eigenschaft auf das Primärschlüsselfeld der angezeigten Daten fest. Dadurch wird die DataList-Auflistung DataKeys mit dem angegebenen DataKeyField Wert für jedes DataList-Element aufgefüllt.
• Das EditCommand Ereignis wird ausgelöst, wenn auf einen Button, LinkButton oder ImageButton, deren CommandName Eigenschaft auf Bearbeiten festgelegt ist, geklickt wird.
• Das CancelCommand Ereignis wird ausgelöst, wenn auf einen Button, LinkButton oder ImageButton, deren CommandName Eigenschaft auf Cancel festgelegt ist, geklickt wird.
• Das UpdateCommand Ereignis wird ausgelöst, wenn auf einen Button, LinkButton oder ImageButton, deren CommandName Eigenschaft auf Update festgelegt ist, geklickt wird.
• Das DeleteCommand Ereignis wird ausgelöst, wenn auf einen Button, LinkButton oder ImageButton, deren CommandName Eigenschaft auf Löschen festgelegt ist, geklickt wird.

Mithilfe dieser Eigenschaften und Ereignisse können wir vier Ansätze verwenden, um Daten aus der DataList zu aktualisieren und zu löschen:

1. Mit ASP.NET 1.x-Techniken war die DataList vor ASP.NET 2.0 und ObjectDataSources vorhanden und konnte Daten vollständig programmgesteuert aktualisieren und löschen. Dieses Verfahren entfernt die ObjectDataSource vollständig und erfordert, dass wir die Daten direkt aus der Geschäftslogikebene an die DataList binden, sowohl beim Abrufen der anzuzeigenden Daten als auch beim Aktualisieren oder Löschen eines Datensatzes.
2. Wenn Sie ein einzelnes ObjectDataSource-Steuerelement auf der Seite zum Auswählen, Aktualisieren und Löschen verwenden, während der DataList die innewohnenden Bearbeitungs- und Löschfunktionen von GridView fehlen, gibt es keinen Grund, warum wir sie nicht selbst hinzufügen können. Bei diesem Ansatz verwenden wir eine ObjectDataSource wie in den GridView-Beispielen, müssen jedoch einen Ereignishandler für das DataList-Ereignis UpdateCommand erstellen, in dem wir die Parameter der ObjectDataSource festlegen und dessen Update() Methode aufrufen.
3. Bei Verwendung eines ObjectDataSource-Steuerelements zum Auswählen, aber beim Direkten Aktualisieren und Löschen für die BLL müssen wir bei Verwendung von Option 2 ein wenig Code im UpdateCommand Ereignis schreiben, Parameterwerte zuweisen usw. Stattdessen können wir bei der Verwendung der ObjectDataSource für die Auswahl bleiben, aber die Aktualisierungs- und Löschungsaufrufe direkt für die BLL vornehmen (wie bei Option 1). Meiner Meinung nach führt das Aktualisieren von Daten durch direkte Interfacing mit der BLL zu besser lesbarem Code als das Zuweisen der ObjectDataSource s UpdateParameters und das Aufrufen der - Update() Methode.
4. Die Verwendung deklarativer Mittel über mehrere ObjectDataSources für die vorherigen drei Ansätze erfordert ein wenig Code. Wenn Sie lieber weiterhin so viel deklarative Syntax wie möglich verwenden möchten, besteht eine letzte Option darin, mehrere ObjectDataSources auf der Seite aufzunehmen. Die erste ObjectDataSource ruft die Daten aus der BLL ab und bindet sie an die DataList. Zum Aktualisieren wird eine weitere ObjectDataSource hinzugefügt, die jedoch direkt innerhalb der DataList-Datei EditItemTemplatehinzugefügt wird. Um die Unterstützung zum Löschen einzuschließen, wäre ein weiteres ObjectDataSource-Objekt in der ItemTemplateerforderlich. Bei diesem Ansatz verwenden diese eingebetteten ObjectDataSource-Elemente ControlParameters , um die ObjectDataSource-Parameter deklarativ an die Benutzereingabesteuerelemente zu binden (anstatt sie programmgesteuert im DataList-Ereignishandler UpdateCommand angeben zu müssen). Dieser Ansatz erfordert noch ein wenig Code, den wir zum Aufrufen des eingebetteten ObjectDataSource-Befehls Update() oder Delete() des Befehls benötigen, aber viel weniger als bei den anderen drei Ansätzen. Der Nachteil ist hier, dass die mehreren ObjectDataSources die Seite übereinander ansetzen und die allgemeine Lesbarkeit beeinträchtigen.

Wenn sie gezwungen ist, immer nur einen dieser Ansätze zu verwenden, würde ich Option 1 wählen, da sie die größte Flexibilität bietet und die DataList ursprünglich für dieses Muster konzipiert wurde. DataList wurde zwar erweitert, um mit den ASP.NET 2.0-Datenquellensteuerelementen zu arbeiten, verfügt aber nicht über alle Erweiterbarkeitspunkte oder Features der offiziellen ASP.NET 2.0-Datenwebsteuerelemente (GridView, DetailsView und FormView). Die Optionen 2 bis 4 sind jedoch nicht ohne Verdienst.

Für diese und die zukünftigen Bearbeitungs- und Löschungstutorials wird eine ObjectDataSource zum Abrufen der Daten zum Anzeigen und Direkteinrufen der BLL zum Aktualisieren und Löschen von Daten verwendet (Option 3).

Schritt 3: Hinzufügen der DataList und Konfigurieren derEn ObjectDataSource

In diesem Tutorial erstellen wir eine DataList, die Produktinformationen auflistet und dem Benutzer für jedes Produkt die Möglichkeit bietet, den Namen und den Preis zu bearbeiten und das Produkt vollständig zu löschen. Insbesondere werden die Datensätze abgerufen, die mithilfe einer ObjectDataSource angezeigt werden sollen, aber die Aktualisierungs- und Löschaktionen ausführen, indem wir direkt mit der BLL interfacieren. Bevor wir uns um die Implementierung der Bearbeitungs- und Löschungsfunktionen in der DataList kümmern, rufen wir zuerst die Seite auf, um die Produkte in einer schreibgeschützten Schnittstelle anzuzeigen. Da wir diese Schritte in früheren Tutorials untersucht haben, werde ich sie schnell durcharbeiten.

Öffnen Sie zunächst die Basics.aspx Seite im EditDeleteDataList Ordner, und fügen Sie der Seite in der Entwurfsansicht eine DataList hinzu. Erstellen Sie als Nächstes aus dem Smarttag des DataList-Objekts eine neue ObjectDataSource. Da wir mit Produktdaten arbeiten, konfigurieren Sie sie für die Verwendung der ProductsBLL -Klasse. Um alle Produkte abzurufen, wählen Sie die GetProducts() -Methode auf der Registerkarte SELECT aus.

Abbildung 4: Konfigurieren der ObjectDataSource für die Verwendung der ProductsBLL -Klasse (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Abbildung 5: Zurückgeben der Produktinformationen mithilfe der GetProducts() -Methode (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Die DataList ist wie die GridView nicht für das Einfügen neuer Daten konzipiert. Wählen Sie daher in der Dropdownliste auf der Registerkarte EINFÜGEN die Option (Keine) aus. Wählen Sie auch (Keine) für die Registerkarten UPDATE und DELETE aus, da die Updates und Löschvorgänge programmgesteuert über die BLL ausgeführt werden.

Abbildung 6: Vergewissern Sie sich, dass die Drop-Down Listen in den Registerkarten INSERT, UPDATE und DELETE von ObjectDataSource auf (Keine) festgelegt sind (Klicken Sie, um das bild in voller Größe anzuzeigen)

Klicken Sie nach dem Konfigurieren der ObjectDataSource auf Fertig stellen, und kehren Sie zum Designer zurück. Wie wir in früheren Beispielen gesehen haben, erstellt Visual Studio beim Abschluss der ObjectDataSource-Konfiguration automatisch eine ItemTemplate für die DropDownList, wobei jedes der Datenfelder angezeigt wird. Ersetzen Sie diese ItemTemplate durch eine, die nur den Namen und den Preis des Produkts anzeigt. Legen Sie außerdem die RepeatColumns Eigenschaft auf 2 fest.

Hinweis

Wie im Tutorial Übersicht über das Einfügen, Aktualisieren und Löschen von Daten erläutert, erfordert unsere Architektur beim Ändern von Daten mithilfe von ObjectDataSource, dass wir die OldValuesParameterFormatString Eigenschaft aus dem deklarativen Markup des ObjectDataSource entfernen (oder sie auf den Standardwert zurücksetzen, {0}). In diesem Tutorial verwenden wir die ObjectDataSource jedoch nur zum Abrufen von Daten. Daher müssen wir den ObjectDataSource-Eigenschaftswert OldValuesParameterFormatString nicht ändern (obwohl dies nicht schadet).

Nachdem Sie die Standard-DataList ItemTemplate durch eine angepasste ersetzt haben, sollte das deklarative Markup auf Ihrer Seite wie folgt aussehen:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" RepeatColumns="2">
    <ItemTemplate>
        <h5>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h5>
        Price: <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
        <br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL"
    OldValuesParameterFormatString="original_{0}">
</asp:ObjectDataSource>

Nehmen Sie sich einen Moment Zeit, um unseren Fortschritt über einen Browser anzuzeigen. Wie Abbildung 7 zeigt, zeigt die DataList den Produktnamen und den Einzelpreis für jedes Produkt in zwei Spalten an.

Abbildung 7: Die Produktnamen und Preise werden in einer Two-Column DataList angezeigt (Klicken Sie, um das bild in voller Größe anzuzeigen)

Hinweis

Die DataList verfügt über eine Reihe von Eigenschaften, die für den Aktualisierungs- und Löschvorgang erforderlich sind, und diese Werte werden im Ansichtszustand gespeichert. Daher ist es beim Erstellen einer DataList, die das Bearbeiten oder Löschen von Daten unterstützt, unbedingt den Ansichtszustand der DataList zu aktivieren.

Der kluge Leser erinnert sich vielleicht daran, dass wir den Ansichtszustand beim Erstellen von bearbeitbaren GridViews, DetailsViews und FormViews deaktivieren konnten. Dies liegt daran, dass ASP.NET 2.0-Websteuerelemente den Steuerungszustand enthalten können, der in Postbacks wie dem Ansichtszustand beibehalten wird, aber als wesentlich angesehen wird.

Beim Deaktivieren des Ansichtszustands in GridView werden lediglich triviale Zustandsinformationen weggelassen, aber der Steuerungszustand (einschließlich des zustands, der zum Bearbeiten und Löschen erforderlich ist). Die DataList, die im zeitrahmen ASP.NET 1.x erstellt wurde, verwendet keinen Steuerungszustand und muss daher den Ansichtszustand aktiviert haben. Weitere Informationen zum Zweck des Steuerelementzustands und seiner Unterschiede vom Ansichtszustand finden Sie unter Steuerelementstatus und Ansichtszustand.

Schritt 4: Hinzufügen einer Bearbeitungs-Benutzeroberfläche

Das GridView-Steuerelement besteht aus einer Auflistung von Feldern (BoundFields, CheckBoxFields, TemplateFields usw.). Diese Felder können ihr gerendertes Markup abhängig von ihrem Modus anpassen. Im schreibgeschützten Modus zeigt ein BoundField beispielsweise seinen Datenfeldwert als Text an. im Bearbeitungsmodus rendert es ein TextBox-Websteuerelement, dessen Text Eigenschaft dem Datenfeldwert zugewiesen ist.

Die DataList hingegen rendert ihre Elemente mithilfe von Vorlagen. Schreibgeschützte Elemente werden mithilfe von ItemTemplate gerendert, während Elemente im Bearbeitungsmodus über EditItemTemplategerendert werden. An diesem Punkt verfügt unsere DataList nur über eine ItemTemplate. Um die Bearbeitungsfunktionen auf Elementebene zu unterstützen, müssen wir ein EditItemTemplate hinzufügen, das das Markup enthält, das für das bearbeitbare Element angezeigt werden soll. In diesem Tutorial verwenden wir TextBox-Websteuerelemente zum Bearbeiten des Produktnamens und des Einzelpreises.

Die EditItemTemplate kann entweder deklarativ oder über die Designer erstellt werden (indem Sie die Option Vorlagen bearbeiten aus dem Smarttag dataList auswählen). Um die Option Vorlagen bearbeiten zu verwenden, klicken Sie zuerst im Smarttag auf den Link Vorlagen bearbeiten, und wählen Sie dann das EditItemTemplate Element aus der Dropdownliste aus.

Abbildung 8: Auswählen der Verwendung der DataList-Elemente EditItemTemplate (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Geben Sie als Nächstes Produktname: und Preis: ein, und ziehen Sie dann zwei TextBox-Steuerelemente aus der Toolbox in die EditItemTemplate Benutzeroberfläche auf der Designer. Legen Sie die TextBoxes-Eigenschaften ID auf und UnitPricefestProductName.

Abbildung 9: Hinzufügen eines TextBox-Steuerelements für den Namen und preis des Produkts (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wir müssen die entsprechenden Produktdatenfeldwerte an die Text Eigenschaften der beiden TextBoxes binden. Klicken Sie in den Smarttags TextBoxes auf den Link DataBindings bearbeiten, und ordnen Sie dann das entsprechende Datenfeld der Text -Eigenschaft zu, wie in Abbildung 10 dargestellt.

Hinweis

Wenn Sie das UnitPrice Datenfeld an das Feld price TextBox s Text binden, können Sie es als Währungswert ({0:C}), als allgemeine Zahl ({0:N}) formatieren oder unformatiert lassen.

Abbildung 10: Binden der ProductName Datenfelder und UnitPrice an die Text Eigenschaften der TextBoxen

Beachten Sie, dass das Dialogfeld DataBindings bearbeiten in Abbildung 10 das Kontrollkästchen Bidirektionale Datenbindung nicht enthält, das beim Bearbeiten eines TemplateField in GridView oder DetailsView oder einer Vorlage in der FormView vorhanden ist. Mit der bidirektionalen Datenbindungsfunktion konnte der in das Eingabewebsteuerelement eingegebene Wert automatisch den entsprechenden ObjectDataSource-Objekten InsertParameters zugewiesen werden, oder UpdateParameters beim Einfügen oder Aktualisieren von Daten. DataList unterstützt keine bidirektionale Datenbindung, wie wir später in diesem Tutorial sehen werden. Nachdem der Benutzer änderungen vorgenommen hat und bereit ist, die Daten zu aktualisieren, müssen wir programmgesteuert auf diese TextBoxes-Eigenschaften Text zugreifen und deren Werte an die entsprechende UpdateProduct Methode in der ProductsBLL Klasse übergeben.

Schließlich müssen wir die EditItemTemplateSchaltflächen Aktualisieren und Abbrechen hinzufügen. Wie wir im Tutorial Master/Detail Using a Bulleted List of Master Records with a Details DataList gesehen haben, wird das Repeater- oder DataList-Ereignis ItemCommand ausgelöst, wenn ein Button-, LinkButton- oder ImageButton-Objekt, dessen CommandName Eigenschaft festgelegt ist, aus einem Repeater oder DataList-Ereignis angeklickt wird. Wenn die CommandName Eigenschaft für dataList auf einen bestimmten Wert festgelegt ist, kann auch ein zusätzliches Ereignis ausgelöst werden. Zu den speziellen CommandName Eigenschaftswerten gehören unter anderem:

• Abbrechen löst das CancelCommand Ereignis aus
• Bearbeiten löst das EditCommand Ereignis aus
• Update löst das UpdateCommand Ereignis aus

Beachten Sie, dass diese Ereignisse zusätzlich zumItemCommand -Ereignis ausgelöst werden.

Fügen Sie den EditItemTemplate beiden Schaltflächen-Websteuerelementen hinzu, von denen CommandName eines auf Aktualisieren und das andere auf Abbrechen festgelegt ist. Nach dem Hinzufügen dieser beiden Button Web-Steuerelemente sollte die Designer wie folgt aussehen:

Abbildung 11: Hinzufügen der Schaltflächen "Aktualisieren" und "Abbrechen" (Klicken Sie hier, um dasEditItemTemplate Bild in voller Größe anzuzeigen)

Wenn Das EditItemTemplate deklarative DataList-Markup abgeschlossen ist, sollte in etwa wie folgt aussehen:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" RepeatColumns="2">
    <ItemTemplate>
        <h5>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>' />
        </h5>
        Price: <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
        <br />
        <br />
    </ItemTemplate>
    <EditItemTemplate>
        Product name:
            <asp:TextBox ID="ProductName" runat="server"
                Text='<%# Eval("ProductName") %>' /><br />
        Price:
            <asp:TextBox ID="UnitPrice" runat="server"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' /><br />
        <br />
        <asp:Button ID="UpdateProduct" runat="server"
            CommandName="Update" Text="Update" /> 
        <asp:Button ID="CancelUpdate" runat="server"
            CommandName="Cancel" Text="Cancel" />
    </EditItemTemplate>
</asp:DataList>

Schritt 5: Hinzufügen der Sanitärinstallation zum Wechseln in den Bearbeitungsmodus

An diesem Punkt verfügt unsere DataList über eine Bearbeitungsoberfläche, die über seine EditItemTemplatedefiniert ist. Es gibt jedoch derzeit keine Möglichkeit, dass ein Benutzer unsere Seite besucht, um anzugeben, dass er die Produktinformationen bearbeiten möchte. Wir müssen jedem Produkt eine Schaltfläche Bearbeiten hinzufügen, das dieses DataList-Element im Bearbeitungsmodus rendert, wenn darauf geklickt wird. Fügen Sie zunächst die Schaltfläche Bearbeiten hinzuItemTemplate, entweder über die Designer oder deklarativ. Legen Sie die Eigenschaft der Schaltfläche CommandName Bearbeiten auf Bearbeiten fest.

Nachdem Sie diese Schaltfläche Bearbeiten hinzugefügt haben, nehmen Sie sich einen Moment Zeit, um die Seite über einen Browser anzuzeigen. Mit dieser Ergänzung sollte jedes Produktlisting eine Schaltfläche Bearbeiten enthalten.

Abbildung 12: Hinzufügen der Schaltflächen "Aktualisieren" und "Abbrechen" (Klicken Sie hier, um dasEditItemTemplate Bild in voller Größe anzuzeigen)

Wenn Sie auf die Schaltfläche klicken, wird ein Postback verursacht, der Produkteintrag wird jedoch nicht in den Bearbeitungsmodus versetzt. Um das Produkt bearbeitbar zu machen, müssen wir:

1. Legen Sie die DataList-Eigenschaft EditItemIndex auf den Index der -Klasse fest, auf deren DataListItem Schaltfläche Bearbeiten gerade geklickt wurde.
2. Binden Sie die Daten erneut an dataList. Wenn die DataList erneut gerendert wird, wird der , dessen DataListItemItemIndex dem DataList-Objekt EditItemIndex entspricht, mithilfe von EditItemTemplategerendert.

Da das DataList-Ereignis EditCommand ausgelöst wird, wenn auf die Schaltfläche Bearbeiten geklickt wird, erstellen Sie einen EditCommand Ereignishandler mit dem folgenden Code:

protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property to the
    // index of the DataListItem that was clicked
    DataList1.EditItemIndex = e.Item.ItemIndex;
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Der EditCommand Ereignishandler wird in einem Objekt vom Typ DataListCommandEventArgs als zweiter Eingabeparameter übergeben, der einen Verweis auf die DataListItem Schaltfläche "Bearbeiten" enthält (e.Item). Der Ereignishandler legt zuerst die DataList s EditItemIndex auf den ItemIndex des bearbeitbaren DataListItem fest und bindet die Daten dann durch Aufrufen der DataList-Methode erneut DataBind() an die DataList-Methode.

Nachdem Sie diesen Ereignishandler hinzugefügt haben, rufen Sie die Seite in einem Browser erneut auf. Wenn Sie auf die Schaltfläche Bearbeiten klicken, kann das angeklickte Produkt nun bearbeitet werden (siehe Abbildung 13).

Abbildung 13: Klicken auf die Schaltfläche Bearbeiten macht das Produkt bearbeitbar (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 6: Speichern der Änderungen des Benutzers

Wenn Sie auf die Schaltflächen "Aktualisieren" oder "Abbrechen" klicken, geschieht an dieser Stelle nichts. Um diese Funktionalität hinzuzufügen, müssen wir Ereignishandler für die DataList-Ereignisse UpdateCommand und CancelCommand -Ereignisse erstellen. Erstellen Sie zunächst den CancelCommand Ereignishandler, der ausgeführt wird, wenn auf die Schaltfläche Abbrechen des bearbeiteten Produkts geklickt wird und die DataList in den Zustand vor der Bearbeitung zurückgegeben wird.

Damit dataList alle elemente im schreibgeschützten Modus rendert, müssen wir:

1. Legen Sie die DataList-Eigenschaft EditItemIndex auf den Index eines nicht vorhandenen Index festDataListItem. -1 ist eine sichere Wahl, da die DataListItem Indizes bei 0beginnen.
2. Binden Sie die Daten erneut an dataList. Da keine DataListItemItemIndex es den DataLists EditItemIndexentsprechen, wird die gesamte DataList in einem schreibgeschützten Modus gerendert.

Diese Schritte können mit dem folgenden Ereignishandlercode ausgeführt werden:

protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property to -1
    DataList1.EditItemIndex = -1;
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Wenn Sie auf die Schaltfläche Abbrechen klicken, wird die DataList in den Vorbearbeitungszustand versetzt.

Der letzte Ereignishandler, den wir abschließen müssen, ist der UpdateCommand Ereignishandler. Dieser Ereignishandler muss folgendes ausführen:

1. Programmgesteuert auf den vom Benutzer eingegebenen Produktnamen und -preis sowie auf die bearbeiteten Produkte zugreifen ProductID.
2. Initiieren Sie den Updatevorgang, indem Sie die entsprechende UpdateProduct Überladung in der ProductsBLL -Klasse aufrufen.
3. Legen Sie die DataList-Eigenschaft EditItemIndex auf den Index eines nicht vorhandenen Index festDataListItem. -1 ist eine sichere Wahl, da die DataListItem Indizes bei 0beginnen.
4. Binden Sie die Daten erneut an dataList. Da keine DataListItemItemIndex es den DataLists EditItemIndexentsprechen, wird die gesamte DataList in einem schreibgeschützten Modus gerendert.

Die Schritte 1 und 2 sind für das Speichern der Änderungen des Benutzers verantwortlich. In den Schritten 3 und 4 wird die DataList nach dem Speichern der Änderungen in den Zustand vor der Bearbeitung versetzt und sind mit den schritten identisch, die CancelCommand im Ereignishandler ausgeführt werden.

Um den aktualisierten Produktnamen und den aktualisierten Preis zu erhalten, müssen wir die FindControl -Methode verwenden, um programmgesteuert auf die TextBox-Websteuerelemente in der EditItemTemplatezu verweisen. Wir müssen auch den wert des bearbeiteten Produkts abrufen ProductID . Als die ObjectDataSource anfänglich an dataList gebunden wurde, hat Visual Studio die DataList-Eigenschaft DataKeyField dem Primärschlüsselwert aus der Datenquelle (ProductID) zugewiesen. Dieser Wert kann dann aus der DataList-Auflistung DataKeys abgerufen werden. Nehmen Sie sich einen Moment Zeit, um sicherzustellen, dass die DataKeyField -Eigenschaft tatsächlich auf ProductIDfestgelegt ist.

Der folgende Code implementiert die vier Schritte:

protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
    // Read in the product name and price values
    TextBox productName = (TextBox)e.Item.FindControl("ProductName");
    TextBox unitPrice = (TextBox)e.Item.FindControl("UnitPrice");
    string productNameValue = null;
    if (productName.Text.Trim().Length > 0)
        productNameValue = productName.Text.Trim();
    decimal? unitPriceValue = null;
    if (unitPrice.Text.Trim().Length > 0)
        unitPriceValue = Decimal.Parse(unitPrice.Text.Trim(),
            System.Globalization.NumberStyles.Currency);
    // Call the ProductsBLL's UpdateProduct method...
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.UpdateProduct(productNameValue, unitPriceValue, productID);
    // Revert the DataList back to its pre-editing state
    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}

Der Ereignishandler liest zunächst die bearbeiteten Produkts ProductID aus der DataKeys Auflistung ein. Als Nächstes werden auf die beiden TextBoxen in der EditItemTemplate verwiesen und ihre Text Eigenschaften in lokalen Variablen productNameValueunitPriceValueund gespeichert. Wir verwenden die Decimal.Parse() -Methode, um den Wert aus dem UnitPrice TextBox-Element zu lesen, sodass der eingegebene Wert ein Währungssymbol aufweist, er trotzdem ordnungsgemäß in einen Decimal Wert konvertiert werden kann.

Hinweis

Die Werte aus den ProductName TextBoxen und UnitPrice werden nur den Variablen productNameValue und unitPriceValue zugewiesen, wenn für die TextBoxes-Texteigenschaften ein Wert angegeben ist. Andernfalls wird für die Variablen der Wert Nothing verwendet, wodurch die Daten mit einem Datenbankwert NULL aktualisiert werden. Das heißt, der Code behandelt konvertiert leere Zeichenfolgen in Datenbankwerte NULL . Dies ist das Standardverhalten der Bearbeitungsschnittstelle in den GridView-, DetailsView- und FormView-Steuerelementen.

Nach dem Lesen der Werte wird die -Methode der ProductsBLL Klasse s UpdateProduct aufgerufen, wobei der Produktname, der Preis und ProductIDübergeben werden. Der Ereignishandler wird abgeschlossen, indem dataList mithilfe der gleichen Logik wie im Ereignishandler in den Zustand vor der CancelCommand Bearbeitung zurückgegeben wird.

Wenn die EditCommandEreignishandler , CancelCommandund UpdateCommand abgeschlossen sind, kann ein Besucher den Namen und den Preis eines Produkts bearbeiten. Abbildungen 14-16 zeigen diesen Bearbeitungsworkflow in Aktion.

Abbildung 14: Beim ersten Besuch der Seite befinden sich alle Produkte im Read-Only Modus (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 15: Klicken Sie zum Aktualisieren des Namens oder Preises eines Produkts auf die Schaltfläche Bearbeiten (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 16: Klicken Sie nach dem Ändern des Werts auf Aktualisieren, um zum Read-Only-Modus zurückzukehren (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 7: Hinzufügen von Löschfunktionen

Die Schritte zum Hinzufügen von Löschfunktionen zu einer DataList ähneln denen zum Hinzufügen von Bearbeitungsfunktionen. Kurz gesagt, wir müssen der schaltfläche Löschen hinzufügen, wenn ItemTemplate Sie darauf geklickt haben:

1. Liest die entsprechenden Produkte ProductID über die DataKeys Sammlung ein.
2. Führt das Löschen durch Aufrufen der s-Methode der ProductsBLL Klasse DeleteProduct aus.
3. Binden Sie die Daten erneut an dataList.

Beginnen wir mit dem Hinzufügen einer Schaltfläche Löschen zu .ItemTemplate

Beim Klicken löst eine Schaltfläche, deren CommandName Wert Bearbeiten, Aktualisieren oder Abbrechen lautet, das DataList-Ereignis ItemCommand zusammen mit einem zusätzlichen Ereignis aus (z. B. wird bei Verwendung von Edit the EditCommand event ebenfalls ausgelöst). Ebenso bewirkt jeder Button, LinkButton oder ImageButton in der DataList, dessen CommandName Eigenschaft auf Delete festgelegt ist, dass das DeleteCommand Ereignis ausgelöst wird (zusammen mit ItemCommand).

Fügen Sie eine Schaltfläche Löschen neben der Schaltfläche Bearbeiten in hinzu, und legen Sie deren ItemTemplateCommandName Eigenschaft auf Löschen fest. Nachdem Sie dieses Button-Steuerelement hinzugefügt haben, sollte Ihre deklarative DataList-Syntax ItemTemplate wie folgt aussehen:

<ItemTemplate>
    <h5>
        <asp:Label runat="server" ID="ProductNameLabel"
            Text='<%# Eval("ProductName") %>' />
    </h5>
    Price: <asp:Label runat="server" ID="Label1"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    <br />
    <asp:Button runat="server" id="EditProduct" CommandName="Edit"
        Text="Edit" />
     
    <asp:Button runat="server" id="DeleteProduct" CommandName="Delete"
        Text="Delete" />
    <br />
    <br />
</ItemTemplate>

Erstellen Sie als Nächstes einen Ereignishandler für das DataList-Ereignis DeleteCommand , indem Sie den folgenden Code verwenden:

protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
{
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
    // Delete the data
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.DeleteProduct(productID);
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Wenn Sie auf die Schaltfläche Löschen klicken, wird ein Postback ausgelöst und das DataList-Ereignis DeleteCommand ausgelöst. Im Ereignishandler wird von der Auflistung aus auf den DataKeys Wert des ProductID geklickten Produkts zugegriffen. Als Nächstes wird das Produkt durch Aufrufen der ProductsBLL Klasse s-Methode DeleteProduct gelöscht.

Nach dem Löschen des Produkts ist es wichtig, dass wir die Daten erneut an die DataList (DataList1.DataBind()) binden, andernfalls zeigt die DataList weiterhin das soeben gelöschte Produkt an.

Zusammenfassung

Obwohl der DataList die Unterstützung für die Bearbeitung und Das Löschen von Point-and-Click fehlt, die von GridView genossen wird, kann es mit einem kurzen Codeelement erweitert werden, um diese Features einzuschließen. In diesem Tutorial haben wir erfahren, wie Sie eine zweispaltige Auflistung von Produkten erstellen, die gelöscht werden können und deren Name und Preis bearbeitet werden können. Beim Hinzufügen von Bearbeitungs- und Löschunterstützung müssen die entsprechenden Websteuerelemente in und ItemTemplateEditItemTemplateeingeschlossen werden, die entsprechenden Ereignishandler erstellt, die vom Benutzer eingegebenen Werte und primärer Schlüssel gelesen und mit der Geschäftslogikebene interfaciert werden.

Wir haben der DataList zwar grundlegende Bearbeitungs- und Löschfunktionen hinzugefügt, es fehlen jedoch erweiterte Funktionen. Beispielsweise gibt es keine Eingabefeldvalidierung. Wenn ein Benutzer den Preis "Zu teuer" eingibt, wird eine Ausnahme ausgelöst Decimal.Parse , wenn versucht wird, Zu teuer in einen Decimalzu konvertieren. Wenn ein Problem beim Aktualisieren der Daten auf der Geschäftslogik- oder Datenzugriffsebene auftritt, wird dem Benutzer der Standardfehlerbildschirm angezeigt. Ohne eine Bestätigung auf der Schaltfläche Löschen ist das versehentliche Löschen eines Produkts nur allzu wahrscheinlich.

In zukünftigen Tutorials erfahren Wir, wie Sie die Benutzererfahrung für die Bearbeitung verbessern können.

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.

Besonderer Dank an

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

Nächste