Übersicht über das Bearbeiten und Löschen von Daten in dataList (VB)

von Scott Mitchell

PDF herunterladen

Obwohl 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 Datenänderungsschnittstellen ein Kinderspiel und beinhaltete lediglich das Ankreuzen eines Kontrollkästchens aus einem Smarttag. Es musste kein Code geschrieben werden.

Leider fehlen der DataList die integrierten Bearbeitungs- und Löschfunktionen, die dem GridView-Steuerelement innewohnen. Diese fehlende Funktionalität ist zum Teil darauf zurückzuführen, dass 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 die gleichen standardmäßigen 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 das DataList-Steuerelement fehlt dem Repeater-Steuerelement die standardmäßige Funktionalität zum Einfügen, Aktualisieren oder Löschen. Obwohl solche Funktionen hinzugefügt werden können, enthält dataList Eigenschaften und Ereignisse, die im Repeater nicht gefunden wurden, 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 Und die nächsten Schritte benötigen. Fügen Sie zunächst einen neuen Ordner mit dem Namen hinzu EditDeleteDataList. Fügen Sie als Nächstes die folgenden ASP.NET Seiten zu diesem Ordner hinzu, und stellen Sie sicher, dass Sie jede Seite der Site.master master Seite zuordnen:

• 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 Pages 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 zu Default.aspx hinzu, indem Sie es vom Projektmappen-Explorer in die Entwurfsansicht der Seite ziehen.

Abbildung 2: Hinzufügen des SectionLevelTutorialListing.ascx Benutzersteuerelements zu (Klicken Sie hier, umDefault.aspx 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 nun 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 GridView ist so einfach, weil GridView und ObjectDataSource im Deckel zusammenarbeiten. Wie im Tutorial Untersuchen der Ereignisse im Zusammenhang mit Einfügen, Aktualisieren und Löschen erläutert, weist gridView beim Klicken auf eine Schaltfläche aktualisieren der Zeile automatisch seine Felder zu, die bidirektionale Datenbindung verwendet haben, an die UpdateParameters Auflistung seiner ObjectDataSource und ruft dann die ObjectDataSource-Methode Update() auf.

Leider bietet dataList keine dieser integrierten Funktionen. Es liegt in unserer Verantwortung sicherzustellen, dass die Werte des Benutzers den Parametern von ObjectDataSource zugewiesen werden und dass die Update() -Methode aufgerufen wird. Um uns bei diesem Vorhaben 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 ein Button-, LinkButton- oder ImageButton-Element geklickt wird, dessen CommandName Eigenschaft auf Bearbeiten festgelegt ist.
• Das CancelCommand -Ereignis wird ausgelöst, wenn auf ein Button-, LinkButton- oder ImageButton-Element geklickt wird, dessen CommandName Eigenschaft auf Cancel festgelegt ist.
• Das UpdateCommand Ereignis wird ausgelöst, wenn auf ein Button-, LinkButton- oder ImageButton-Element geklickt wird, dessen CommandName Eigenschaft auf Update festgelegt ist.
• Das DeleteCommand -Ereignis wird ausgelöst, wenn auf ein Button-, LinkButton- oder ImageButton-Element geklickt wird, dessen CommandName Eigenschaft auf Löschen festgelegt ist.

Mithilfe dieser Eigenschaften und Ereignisse gibt es vier Ansätze, die wir verwenden können, 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. Diese Technik entfernt 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 inhärenten 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 genau wie in den GridView-Beispielen, müssen aber einen Ereignishandler für das DataList-Ereignis UpdateCommand erstellen, in dem wir die ObjectDataSource-Parameter festlegen und dessen Update() Methode aufrufen.
3. Mithilfe eines ObjectDataSource-Steuerelements zum Auswählen, aber direktes Aktualisieren und Löschen für die BLL bei Verwendung von Option 2 müssen wir im UpdateCommand Ereignis etwas Code 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 durchführen (wie bei Option 1). Meiner Meinung nach führt das Aktualisieren von Daten durch direkte Interfacing mit der BLL zu einem lesbareren 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 erfordern alle ein wenig Code. Wenn Sie lieber so viel deklarative Syntax wie möglich verwenden möchten, besteht eine letzte Option darin, mehrere ObjectDataSources auf der Seite einzuschließen. 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 unterstützung für das Löschen einzuschließen, wäre noch eine weitere ObjectDataSource im 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 überladen, was die allgemeine Lesbarkeit beeinträchtigt.

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 weil 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 Anzuzeigenden Daten und zum Weiterleiten von Aufrufen an die BLL verwendet, um Daten zu aktualisieren und zu löschen (Option 3).

Schritt 3: Hinzufügen der DataList und Konfigurieren der zugehörigen 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 rufen wir die anzuzeigenden Datensätze mithilfe einer ObjectDataSource ab, führen jedoch die Aktualisierungs- und Löschaktionen aus, indem wir direkt mit der BLL interfacieren. Bevor wir uns gedanken über die Implementierung der Bearbeitungs- und Löschfunktionen für dataList machen, rufen wir zunächst die Seite auf, um die Produkte in einer schreibgeschützten Benutzeroberfläche anzuzeigen. Da wir diese Schritte in den vorherigen Tutorials untersucht haben, werde ich sie schnell durchlaufen.

Ö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 DataList 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 gridView nicht für das Einfügen neuer Daten konzipiert. Wählen Sie daher in der Dropdownliste auf der Registerkarte INSERT 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 hier, 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 Abschließen 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, dass wir die Eigenschaft aus dem OldValuesParameterFormatString deklarativen Markup der ObjectDataSource entfernen (oder auf den Standardwert zurücksetzen, {0}). In diesem Tutorial verwenden wir 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 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") %>'></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 hier, 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, wichtig, dass der Ansichtsstatus der DataList aktiviert wird.

Der kluge Leser erinnert sich möglicherweise daran, dass wir den Ansichtszustand beim Erstellen bearbeitbarer GridViews, DetailsViews und FormViews deaktivieren konnten. Dies liegt daran, dass ASP.NET 2.0-Websteuerelemente den Steuerelementzustand enthalten können, der für Postbacks wie den Ansichtszustand beibehalten wird, aber als unerlässlich erachtet wird.

Beim Deaktivieren des Ansichtszustands in der GridView werden lediglich triviale Zustandsinformationen weggelassen, aber der Steuerungszustand beibehalten (einschließlich des zustands, der zum Bearbeiten und Löschen erforderlich ist). Die DataList, die im ASP.NET 1.x-Zeitrahmen erstellt wurde, verwendet keinen Steuerungszustand und muss daher den Ansichtszustand aktiviert haben. Weitere Informationen zum Zweck des Steuerelementzustands und seiner Unterschiedliche vom Ansichtszustand finden Sie unter Steuerungsstatus im Vergleich zum 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 wird ein TextBox-Websteuerelement gerendert, dessen Text Eigenschaft der Datenfeldwert zugewiesen ist.

Die DataList hingegen rendert ihre Elemente mithilfe von Vorlagen. Schreibgeschützte Elemente werden gerendert, wobei ItemTemplate Elemente im Bearbeitungsmodus über EditItemTemplategerendert werden. An diesem Punkt enthält unsere DataList nur einen ItemTemplate. Um 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 im Smarttag des DataList-Smarttags 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 s EditItemTemplate (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Geben Sie als Nächstes Product name: and Price: ein, und ziehen Sie dann zwei TextBox-Steuerelemente aus der Toolbox in die EditItemTemplate Schnittstelle auf der Designer. Legen Sie die TextBoxes-Eigenschaften ID auf und UnitPricefestProductName.

Abbildung 9: Hinzufügen eines Textfelds für den Namen und den 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 TextBox-Objekte 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" Text binden, können Sie es als Währungswert ({0:C}), als allgemeine Zahl ({0:N}) formatieren oder es unformatiert lassen.

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

Beachten Sie, dass das Dialogfeld DataBindings bearbeiten in Abbildung 10 das Kontrollkästchen Bidirektionale Datenbindung nicht enthält, das beim Bearbeiten eines TemplateField in der 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 s 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 seine Ä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 Update und Abbrechen hinzufügen. Wie wir im Tutorial Master/Detail Using a Bulleted List of Master Records with a Details DataList gezeigt haben, wird das Repeater- oder DataList-Ereignis ItemCommand ausgelöst, wenn ein Button, LinkButton oder ImageButton, dessen CommandName Eigenschaft festgelegt ist, aus einem Repeater oder DataList-Element geklickt 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 besonderen CommandName Eigenschaftswerten zählen u. a.:

• 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 Schaltflächen-Websteuerelemente sollte die Designer wie folgt aussehen:

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

Mit dem vollständigen EditItemTemplate deklarativen Markup sollte Ihr DataList-Markup 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 in den Bearbeitungsmodus

An diesem Punkt verfügt unsere DataList über eine Bearbeitungsschnittstelle, die über ihre EditItemTemplatedefiniert ist. Es gibt jedoch derzeit keine Möglichkeit für einen Benutzer, der unsere Seite besucht, anzugeben, dass er eine Produktinformation bearbeiten möchte. Wir müssen jedem Produkt eine Schaltfläche Bearbeiten hinzufügen, das dieses DataList-Element beim Klicken im Bearbeitungsmodus rendert. Fügen Sie zunächst eine Schaltfläche Bearbeiten hinzu, entweder über die ItemTemplateDesigner oder deklarativ. Legen Sie die Eigenschaft der Schaltfläche Bearbeiten CommandName 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 jede Produktliste 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)

Das Klicken auf die Schaltfläche führt zu einem Postback, aber nicht dazu, dass die Produktliste in den Bearbeitungsmodus versetzt wird. Um das Produkt bearbeitbar zu machen, müssen wir Folgendes ausführen:

1. Legen Sie die DataList-Eigenschaft EditItemIndex auf den Index der Schaltfläche Bearbeiten fest, auf die DataListItem gerade geklickt wurde.
2. Binden Sie die Daten erneut an die DataList. Wenn die DataList erneut gerendert wird, wird die DataListItem gerendert, deren ItemIndex Den DataList s EditItemIndex entspricht, mithilfe dessen 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 Sub DataList1_EditCommand(source As Object, e As DataListCommandEventArgs) _
    Handles DataList1.EditCommand
    ' 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()
End Sub

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 zunächst die DataList s EditItemIndex auf den ItemIndex des bearbeitbaren DataListItem fest und rebiniert die Daten dann an die DataList, indem die DataList s-Methode DataBind() aufgerufen wird.

Nachdem Sie diesen Ereignishandler hinzugefügt haben, besuchen Sie die Seite in einem Browser erneut. Wenn Sie jetzt auf die Schaltfläche Bearbeiten klicken, kann das angeklickte Produkt 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 Benutzeränderungen

Wenn Sie auf die Schaltflächen "Aktualisieren" oder "Abbrechen" des bearbeiteten Produkts 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. Beginnen Sie mit dem Erstellen des CancelCommand Ereignishandlers, 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 die DataList alle zugehörigen Elemente im schreibgeschützten Modus rendert, müssen Wir Folgendes ausführen:

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 die DataList. Da keine DataListItemItemIndex Es den DataList s EditItemIndexentsprechen, wird die gesamte DataList in einem schreibgeschützten Modus gerendert.

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

Protected Sub DataList1_CancelCommand(source As Object, e As DataListCommandEventArgs) _
    Handles DataList1.CancelCommand
    ' Set the DataList's EditItemIndex property to -1
    DataList1.EditItemIndex = -1
    ' Rebind the data to the DataList
    DataList1.DataBind()
End Sub

Wenn Sie auf die Schaltfläche Abbrechen klicken, wird die DataList in den Zustand vor der Bearbeitung versetzt.

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

1. Programmgesteuerter Zugriff auf den vom Benutzer eingegebenen Produktnamen und -preis sowie auf die bearbeiteten Produkte ProductID.
2. Initiieren Sie den Aktualisierungsprozess, 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 die DataList. Da keine DataListItemItemIndex Es den DataList s 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 CancelCommand Bearbeitung versetzt und sind mit den im Ereignishandler ausgeführten Schritten identisch.

Um den aktualisierten Produktnamen und den aktualisierten Preis abzurufen, müssen wir die FindControl -Methode verwenden, um programmgesteuert auf die TextBox-Websteuerelemente innerhalb von EditItemTemplatezu verweisen. Wir müssen auch den wert des bearbeiteten Produkts ProductID abrufen. Wenn die ObjectDataSource anfänglich an die DataList gebunden wurde, weist Visual Studio die DataList-Eigenschaft DataKeyField dem Primärschlüsselwert aus der Datenquelle (ProductID) zu. 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 Sub DataList1_UpdateCommand(source As Object, e As DataListCommandEventArgs) _
    Handles DataList1.UpdateCommand
    ' Read in the ProductID from the DataKeys collection
    Dim productID As Integer = Convert.ToInt32(DataList1.DataKeys(e.Item.ItemIndex))
    ' Read in the product name and price values
    Dim productName As TextBox = CType(e.Item.FindControl("ProductName"), TextBox)
    Dim unitPrice As TextBox = CType(e.Item.FindControl("UnitPrice"), TextBox)
    Dim productNameValue As String = Nothing
    If productName.Text.Trim().Length > 0 Then
        productNameValue = productName.Text.Trim()
    End If
    Dim unitPriceValue As Nullable(Of Decimal) = Nothing
    If unitPrice.Text.Trim().Length > 0 Then
        unitPriceValue = Decimal.Parse(unitPrice.Text.Trim(), NumberStyles.Currency)
    End If
    ' Call the ProductsBLL's UpdateProduct method...
    Dim productsAPI As New ProductsBLL()
    productsAPI.UpdateProduct(productNameValue, unitPriceValue, productID)
    ' Revert the DataList back to its pre-editing state
    DataList1.EditItemIndex = -1
    DataList1.DataBind()
End Sub

Der Ereignishandler liest zunächst die bearbeiteten Produkte 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 productNameValue und unitPriceValuegespeichert. Wir verwenden die Decimal.Parse() -Methode, um den Wert aus dem UnitPrice Textfeld zu lesen, sodass der eingegebene Wert weiterhin ordnungsgemäß in einen Wert konvertiert werden kann, wenn der eingegebene Wert über ein Decimal Währungssymbol verfügt.

Hinweis

Die Werte aus den ProductName Und UnitPrice TextBoxes werden nur den Variablen productNameValue und unitPriceValue zugewiesen, wenn für die TextBoxes Text-Eigenschaft ein Wert angegeben ist. Andernfalls wird ein Wert von Nothing für die Variablen verwendet, was zur Folge hat, dass die Daten mit einem Datenbankwert NULL aktualisiert werden. Das heißt, unser Code behandelt konvertiert leere Zeichenfolgen in Datenbankwerte NULL , was das Standardverhalten der Bearbeitungsschnittstelle in den GridView-, DetailsView- und FormView-Steuerelementen ist.

Nach dem Lesen der Werte wird die Methode s UpdateProduct der ProductsBLL Klasse aufgerufen, die den Namen des Produkts, den Preis und ProductIDübergeben. Der Ereignishandler schließt ab, indem die DataList mit exakt derselben 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: Um den Namen oder Preis eines Produkts zu aktualisieren, klicken Sie 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, 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 ItemTemplate Löschen hinzufügen, wenn darauf geklickt wird:

1. Liest die entsprechenden Produkte über ProductID die DataKeys Sammlung ein.
2. Führt den Löschvorgang durch Aufrufen der Methode s DeleteProduct der ProductsBLL Klasse aus.
3. Rebiniert die Daten an die DataList.

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

Beim Klicken löst eine Schaltfläche CommandName mit bearbeiten, aktualisieren oder abbrechen das DataList-Ereignis ItemCommand zusammen mit einem zusätzlichen Ereignis aus (z. B. bei Verwendung von Bearbeiten wird das EditCommand Ereignis ebenfalls ausgelöst). In ähnlicher Weise wird das DeleteCommand -Ereignis bei jeder Schaltfläche, LinkButton oder ImageButton in der DataList, deren CommandName Eigenschaft auf Delete festgelegt ist, ausgelöst (zusammen mit ItemCommand).

Fügen Sie eine Schaltfläche Löschen neben der Schaltfläche Bearbeiten in hinzu, und legen Sie ihre ItemTemplateCommandName Eigenschaft auf Löschen fest. Nach dem Hinzufügen dieses Schaltflächensteuerelements ItemTemplate sollte Ihre deklarative Syntax für DataList 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 mithilfe des folgenden Codes einen Ereignishandler für das DataList-Ereignis DeleteCommand :

Protected Sub DataList1_DeleteCommand(source As Object, e As DataListCommandEventArgs) _
    Handles DataList1.DeleteCommand
    ' Read in the ProductID from the DataKeys collection
    Dim productID As Integer = Convert.ToInt32(DataList1.DataKeys(e.Item.ItemIndex))
    ' Delete the data
    Dim productsAPI As New ProductsBLL()
    productsAPI.DeleteProduct(productID)
    ' Rebind the data to the DataList
    DataList1.DataBind()
End Sub

Durch Klicken auf die Schaltfläche Löschen wird ein Postback ausgelöst und das DataList-Ereignis DeleteCommand ausgelöst. Im Ereignishandler wird von der Auflistung aus auf den Wert des ProductIDDataKeys angeklickten Produkts zugegriffen. Als Nächstes wird das Produkt gelöscht, indem die Methode der ProductsBLL Klasse s DeleteProduct aufgerufen wird.

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 Produkt an, das gerade gelöscht wurde.

Zusammenfassung

Während der DataList die Unterstützung für das Bearbeiten und Löschen von Point-and-Click fehlt, die von GridView genossen wird, kann sie mit einem kurzen Wenig Code um diese Features erweitert werden. 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önnten. Das Hinzufügen von Bearbeitungs- und Löschunterstützung besteht darin, die entsprechenden Websteuerelemente in und ItemTemplateEditItemTemplateaufzunehmen, die entsprechenden Ereignishandler zu erstellen, die vom Benutzer eingegebenen Und Primärschlüsselwerte zu lesen und mit der Geschäftslogikebene zu interfacieren.

Wir haben der DataList zwar grundlegende Bearbeitungs- und Löschfunktionen hinzugefügt, es fehlen jedoch erweiterte Features. Beispielsweise gibt es keine Eingabefeldvalidierung. Wenn ein Benutzer den Preis "Zu teuer" eingibt, wird Decimal.Parse eine Ausnahme ausgelöst, wenn versucht wird, Zu teuer in einen Decimalumzuwandeln. Wenn beim Aktualisieren der Daten auf der Geschäftslogik- oder Datenzugriffsebene ein Problem 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 Sie, wie Sie die Benutzeroberfläche 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 Stunden. 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. Hauptprüfer für dieses Tutorial waren Zack Jones, Ken Pespisa und Randy Schmidt. Möchten Sie meine anstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.

ZurückWeiter