Een overzicht van het bewerken en verwijderen van gegevens in de DataList (VB)

door Scott Mitchell

PDF downloaden

Hoewel de DataList geen ingebouwde bewerkings- en verwijderingsmogelijkheden heeft, zien we in deze zelfstudie hoe u een DataList maakt die ondersteuning biedt voor het bewerken en verwijderen van de onderliggende gegevens.

Introductie

In de zelfstudie Een overzicht van het invoegen, bijwerken en verwijderen van gegevens hebben we gekeken naar het invoegen, bijwerken en verwijderen van gegevens met behulp van de toepassingsarchitectuur, een ObjectDataSource en de besturingselementen GridView, DetailsView en FormView. Met de ObjectDataSource en deze drie gegevenswebbesturingselementen, was het implementeren van eenvoudige interfaces voor gegevenswijziging een fluitje van een cent en vereiste slechts het aanvinken van een selectievakje bij een slimme tag. Er hoeft geen code te worden geschreven.

Helaas ontbreekt de DataList aan de ingebouwde bewerkings- en verwijderingsmogelijkheden die inherent zijn aan het GridView-besturingselement. Deze ontbrekende functionaliteit wordt deels veroorzaakt door het feit dat datalist een relic is uit de vorige versie van ASP.NET, wanneer declaratieve besturingselementen voor gegevensbronnen en pagina's voor het wijzigen van gegevens zonder code niet beschikbaar waren. Hoewel de DataList in ASP.NET 2.0 niet dezelfde out-of-the-box-mogelijkheden biedt voor het wijzigen van gegevens als de GridView, kunnen we ASP.NET 1.x-technieken gebruiken om dergelijke functionaliteit op te nemen. Voor deze aanpak is een beetje code vereist, maar zoals we in deze zelfstudie zullen zien, bevat DataList enkele gebeurtenissen en eigenschappen om dit proces te helpen.

In deze zelfstudie ziet u hoe u een DataList maakt die ondersteuning biedt voor het bewerken en verwijderen van de onderliggende gegevens. Toekomstige handleidingen zullen meer geavanceerde bewerkings- en verwijderingsscenario's onderzoeken, inclusief validatie van invoervelden, het gracieus afhandelen van uitzonderingen afkomstig uit de gegevenstoegangs- of businesslogicalagen, et cetera.

Opmerking

Net als bij de DataList ontbreekt bij het Repeater-besturingselement de standaard functionaliteit voor invoegen, bijwerken en verwijderen. Hoewel dergelijke functionaliteit kan worden toegevoegd, bevat de DataList eigenschappen en gebeurtenissen die niet worden gevonden in de repeater die het toevoegen van dergelijke mogelijkheden vereenvoudigen. Daarom richt deze handleiding en toekomstige handleidingen over bewerken en verwijderen zich strikt op de DataList.

Stap 1: Het maken van de webpagina's voor de zelfstudies over bewerken en verwijderen.

Voordat we beginnen met het bijwerken en verwijderen van gegevens uit een DataList, gaan we eerst de ASP.NET pagina's in ons websiteproject maken die we nodig hebben voor deze zelfstudie en de volgende. Begin met het toevoegen van een nieuwe map met de naam EditDeleteDataList. Voeg vervolgens de volgende ASP.NET pagina's toe aan die map en zorg ervoor dat u elke pagina koppelt aan de Site.master basispagina:

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

Afbeelding 1: De ASP.NET Pagina's voor de zelfstudies toevoegen

Net als in de andere mappen Default.aspx worden in de EditDeleteDataList map de zelfstudies in de sectie weergegeven. Zoals u weet, biedt het SectionLevelTutorialListing.ascx gebruikersbeheer deze functionaliteit. Voeg daarom deze gebruikerscontrole toe aan Default.aspx door het vanuit de Solution Explorer naar de ontwerpweergave van de pagina te slepen.

Afbeelding 2: Het gebruikersbesturingselement toevoegen SectionLevelTutorialListing.ascx aan Default.aspx (klik om de afbeelding op volledige grootte weer te geven)

Voeg tot slot de pagina's toe als vermeldingen aan het Web.sitemap bestand. Voeg met name de volgende markeringen toe na de master-/detailrapporten met de DataList en Repeater <siteMapNode>:

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

Neem na het bijwerken Web.sitemap even de moeite om de tutorialswebsite via een browser te bekijken. Het menu aan de linkerkant bevat nu items voor de tutorials over het bewerken en verwijderen van DataList.

Afbeelding 3: Het siteoverzicht bevat nu vermeldingen voor de zelfstudies voor bewerken en verwijderen van DataList

Stap 2: Technieken voor het bijwerken en verwijderen van gegevens onderzoeken

Het bewerken en verwijderen van gegevens met de GridView is zo eenvoudig omdat de GridView en ObjectDataSource achter de schermen samenwerken. Zoals besproken in de zelfstudie Gebeurtenissen onderzoeken die zijn gekoppeld aan het invoegen, bijwerken en verwijderen, wijst GridView, wanneer de Update-knop van een rij wordt ingedrukt, automatisch de velden toe die gebruikmaken van gegevensbinding in twee richtingen aan de verzameling van de ObjectDataSource UpdateParameters en roept vervolgens de Update()-methode van deze ObjectDataSource aan.

Helaas biedt de DataList geen van deze ingebouwde functionaliteit. Het is onze verantwoordelijkheid om ervoor te zorgen dat de waarden van de gebruiker worden toegewezen aan de parameters van ObjectDataSource en dat de Update() methode wordt aangeroepen. Om ons te helpen bij dit streven, biedt de DataList de volgende eigenschappen en gebeurtenissen:

• De DataKeyField eigenschap bij het bijwerken of verwijderen, moeten we elk item in de DataList uniek kunnen identificeren. Stel deze eigenschap in op het primaire-sleutelveld van de weergegeven gegevens. Als u dit doet, wordt de verzameling DataList gevuld DataKeys met de opgegeven DataKeyField waarde voor elk DataList-item.
• De EditCommand gebeurtenis wordt geactiveerd wanneer op een knop, LinkButton of ImageButton waarvan CommandName de eigenschap is ingesteld op Bewerken, wordt geklikt.
• De CancelCommand gebeurtenis wordt geactiveerd wanneer op een knop, LinkButton of ImageButton waarvan CommandName de eigenschap is ingesteld op Annuleren wordt geklikt.
• De UpdateCommand gebeurtenis wordt geactiveerd wanneer op een knop, LinkButton of ImageButton waarvan CommandName de eigenschap is ingesteld op Bijwerken, wordt geklikt.
• De DeleteCommand gebeurtenis wordt geactiveerd wanneer op een knop, LinkButton of ImageButton waarvan de CommandName eigenschap is ingesteld op Verwijderen, wordt geklikt.

Met behulp van deze eigenschappen en gebeurtenissen zijn er vier benaderingen die we kunnen gebruiken om gegevens bij te werken en te verwijderen uit de DataList:

1. Met behulp van ASP.NET 1.x-technieken bestond de DataList vóór ASP.NET 2.0 en ObjectDataSources en kon gegevens volledig worden bijgewerkt en verwijderd via programmatische middelen. Met deze techniek wordt de ObjectDataSource helemaal verwijderd en moeten we de gegevens rechtstreeks vanuit de bedrijfslogicalaag binden aan de DataList, zowel bij het ophalen van de gegevens die moeten worden weergegeven als bij het bijwerken of verwijderen van een record.
2. Het gebruik van één ObjectDataSource-besturingselement op de pagina voor selecteren, bijwerken en verwijderen terwijl de DataList de inherente bewerkings- en verwijderingsmogelijkheden van GridView mist, is er geen reden waarom we ze niet zelf kunnen toevoegen. Met deze benadering gebruiken we een ObjectDataSource net als in de GridView-voorbeelden, maar moeten we een gebeurtenis-handler maken voor de DataList-gebeurtenis UpdateCommand waarin we de parameters van ObjectDataSource instellen en de methode aanroepen Update() .
3. Met behulp van een ObjectDataSource-besturingselement voor selecteren, maar rechtstreeks bijwerken en verwijderen via de BLL bij gebruik van optie 2, moeten we een beetje code schrijven in de UpdateCommand event, parameterwaarden toewijzen enzovoort. In plaats daarvan kunnen we de ObjectDataSource gebruiken voor het selecteren, maar het bijwerken en de verwijderingsaanroepen direct tegen de BLL uitvoeren, zoals bij optie 1. Naar mijn mening leidt het bijwerken van gegevens door rechtstreeks met de BLL te werken, tot meer leesbare code dan het toewijzen van de ObjectDataSource-s UpdateParameters en het aanroepen van de Update() methode.
4. Het gebruik van declaratieve means via meerdere ObjectDataSources de vorige drie benaderingen vereisen allemaal een beetje code. Als u liever zoveel mogelijk declaratieve syntaxis wilt gebruiken, kunt u ten slotte meerdere ObjectDataSources op de pagina opnemen. De eerste ObjectDataSource haalt de gegevens op uit de BLL en verbindt deze met de DataList. Voor het bijwerken wordt een andere ObjectDataSource toegevoegd, maar rechtstreeks toegevoegd binnen de DataList s EditItemTemplate. Als u ondersteuning voor verwijderen wilt opnemen, is er nog een ObjectDataSource nodig in de ItemTemplate. Met deze methode gebruiken deze ingesloten ObjectDataSource's ControlParameters om de parameters van ObjectDataSource declaratief te verbinden met de besturingselementen voor gebruikersinvoer (in plaats van ze programmatisch op te geven in de DataList-gebeurtenis-handler UpdateCommand ). Deze benadering vereist nog steeds een beetje code die we nodig hebben om de ingesloten ObjectDataSource-s Update() of Delete() -opdracht aan te roepen, maar vereist veel minder dan met de andere drie benaderingen. Het nadeel is dat de meerdere ObjectDataSources de pagina rommelig maken, wat afdoet aan de algehele leesbaarheid.

Als ik slechts één van deze benaderingen wil gebruiken, kies ik optie 1 omdat het de meeste flexibiliteit biedt en omdat de DataList oorspronkelijk is ontworpen om dit patroon aan te passen. Hoewel de DataList is uitgebreid om te werken met de besturingselementen van de ASP.NET 2.0-gegevensbron, beschikt deze niet over alle uitbreidbaarheidspunten of -functies van de officiële ASP.NET 2.0-besturingselementen (de GridView, DetailsView en FormView). Opties 2 tot en met 4 zijn echter niet zonder verdiensten.

Dit en de toekomstige zelfstudies voor bewerken en verwijderen gebruiken een ObjectDataSource voor het ophalen en weergeven van de gegevens en maken daarbij rechtstreeks gebruik van de BLL om gegevens bij te werken en te verwijderen (optie 3).

Stap 3: De DataList toevoegen en de ObjectDataSource configureren

In deze zelfstudie maken we een DataList waarin productgegevens worden vermeld en, voor elk product, de gebruiker de mogelijkheid biedt om de naam en prijs te bewerken en het product helemaal te verwijderen. In het bijzonder halen we de records op die moeten worden weergegeven met behulp van een ObjectDataSource, maar voeren we de update- en verwijderacties uit door rechtstreeks met de BLL te werken. Voordat we ons zorgen maken over het implementeren van de bewerkings- en verwijdermogelijkheden voor de DataList, gaan we eerst de pagina ophalen om de producten weer te geven in een alleen-lezen interface. Omdat we deze stappen in de vorige zelfstudies hebben onderzocht, ga ik ze snel doorlopen.

Open eerst de Basics.aspx pagina in de EditDeleteDataList map en voeg in de ontwerpweergave een DataList toe aan de pagina. Maak vervolgens vanuit de infotag van DataList een nieuwe ObjectDataSource. Omdat we met productgegevens werken, configureert u deze om de ProductsBLL klasse te gebruiken. Als u alle producten wilt ophalen, kiest u de GetProducts() methode op het tabblad SELECT.

Afbeelding 4: De ObjectDataSource configureren om de ProductsBLL klasse te gebruiken (klik om de afbeelding op volledige grootte weer te geven)

Afbeelding 5: Retourneer de productgegevens met behulp van de GetProducts() methode (klik om de afbeelding op volledige grootte weer te geven)

De DataList, zoals de GridView, is niet ontworpen voor het invoegen van nieuwe gegevens; Selecteer daarom de optie (Geen) in de vervolgkeuzelijst op het tabblad INVOEGEN. Kies ook (Geen) voor de tabbladen BIJWERKEN en VERWIJDEREN, omdat de updates en verwijderingen programmatisch worden uitgevoerd via de BLL.

Afbeelding 6: Controleer of de Drop-Down-lijsten in de tabbladen INSERT, UPDATE en DELETE van ObjectDataSource zijn ingesteld op (Geen) (Klik om de volledige afbeelding weer te geven)

Nadat u de ObjectDataSource hebt geconfigureerd, klikt u op Voltooien en keert u terug naar de ontwerpfunctie. Zoals we in het verleden hebben gezien, maakt Visual Studio bij het voltooien van de ObjectDataSource-configuratie automatisch een ItemTemplate voor de vervolgkeuzelijst, waarin elk van de gegevensvelden wordt weergegeven. Vervang dit ItemTemplate door er een dat alleen de naam en prijs weergeeft. Stel de RepeatColumns eigenschap ook in op 2.

Opmerking

Zoals besproken in de zelfstudie Overzicht van het invoegen, bijwerken en verwijderen van gegevens, moet u bij het wijzigen van gegevens met de ObjectDataSource-architectuur de OldValuesParameterFormatString eigenschap verwijderen uit de declaratieve markeringen van ObjectDataSource (of deze opnieuw instellen op de standaardwaarde). {0} In deze zelfstudie gebruiken we echter alleen ObjectDataSource voor het ophalen van gegevens. Daarom hoeven we de eigenschapswaarde van ObjectDataSource OldValuesParameterFormatString niet te wijzigen (hoewel dit geen kwaad doet).

Nadat u de standaardGegevenslijst ItemTemplate hebt vervangen door een aangepaste lijst, moet de declaratieve markering op uw pagina er ongeveer als volgt uitzien:

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

Neem even de tijd om onze voortgang via een browser te bekijken. Zoals in afbeelding 7 wordt weergegeven, worden in de DataList de productnaam en eenheidsprijs voor elk product in twee kolommen weergegeven.

Afbeelding 7: De namen en prijzen van producten worden weergegeven in een Two-Column DataList (klik om de volledige afbeelding weer te geven)

Opmerking

De DataList heeft een aantal eigenschappen die vereist zijn voor het proces voor het bijwerken en verwijderen, en deze waarden worden opgeslagen in de weergavestatus. Bij het bouwen van een DataList die ondersteuning biedt voor het bewerken of verwijderen van gegevens, is het daarom essentieel dat de weergavestatus van DataList is ingeschakeld.

De astutelezer kan zich misschien herinneren dat we de weergavestatus konden uitschakelen bij het maken van bewerkbare GridViews, DetailsViews en FormViews. Dit komt doordat ASP.NET 2.0-webbesturingselementen controlestatus kunnen bevatten. Dit is de status die behouden blijft voor postbacks, zoals de weergavestatus, maar als essentieel wordt beschouwd.

Als u de weergavestatus in de GridView uitschakelt, worden alleen triviale statusgegevens weggelaten, maar blijft de controlestatus behouden (inclusief de status die nodig is voor bewerken en verwijderen). De DataList, die is gemaakt in het ASP.NET 1.x-tijdsbestek, maakt geen gebruik van de besturingsstatus en moet daarom de weergavestatus hebben ingeschakeld. Zie Control State versus View State voor meer informatie over het doel van de controlestatus en hoe deze verschilt van de weergavestatus.

Stap 4: Een gebruikersinterface voor bewerken toevoegen

Het besturingselement GridView bestaat uit een verzameling velden (BoundFields, CheckBoxFields, TemplateFields, enzovoort). Deze velden kunnen hun weergegeven markeringen aanpassen, afhankelijk van hun modus. Bijvoorbeeld, wanneer een BoundField in de modus Alleen-lezen staat, wordt de waarde van het gegevensveld als tekst weergegeven; in de bewerkingsmodus wordt een TextBox-webcontrole weergegeven, waarvan de eigenschap Text is toegewezen aan de waarde van het gegevensveld.

De DataList geeft daarentegen de items weer met behulp van sjablonen. Alleen-lezen items worden weergegeven met behulp van de ItemTemplate terwijl items in de bewerkingsmodus worden weergegeven via de EditItemTemplate. Op dit moment heeft onze DataList slechts een ItemTemplate. Ter ondersteuning van de bewerkingsfunctionaliteit op itemniveau moeten we een EditItemTemplate item toevoegen dat de markeringen bevat die moeten worden weergegeven voor het bewerkbare item. Voor deze zelfstudie gebruiken we tekstveld-webcontroles voor het bewerken van de naam en de eenheidsprijs van het product.

Je kunt EditItemTemplate declaratief maken of via de ontwerpfunctie (door de optie Sjablonen bewerken te selecteren in de slimme tag van DataList). Als u de optie Sjablonen bewerken wilt gebruiken, klikt u eerst op de koppeling Sjablonen bewerken in de infolabel en selecteert u vervolgens het EditItemTemplate item in de vervolgkeuzelijst.

Afbeelding 8: Kiezen om te werken met de DataList s EditItemTemplate (klik om de afbeelding op volledige grootte weer te geven)

Typ vervolgens in: productnaam: en Prijs: en sleep vervolgens twee tekstvakbesturingselementen vanuit de Toolbox/werkset naar de EditItemTemplate interface in de ontwerpfunctie. Stel de eigenschappen van tekstvakken ID in op ProductName en UnitPrice.

Afbeelding 9: Voeg een tekstvak toe voor de productnaam en -prijs (klik hier om de volledige afbeelding weer te geven)

We moeten de overeenkomende waarden voor productgegevensvelden binden aan de Text eigenschappen van de twee tekstvaken. Klik in de smarttags van tekstvakken op de koppeling om de DataBindings te bewerken en koppel het juiste gegevensveld aan de Text eigenschap, zoals te zien in afbeelding 10.

Opmerking

Wanneer u het UnitPrice gegevensveld aan het veld prijstekstvak Text koppelt, kunt u het opmaken als een valutawaarde ({0:C}), een algemeen getal ({0:N}) of het veld niet opmaken.

Afbeelding 10: Bind de ProductName en UnitPrice gegevensvelden aan de Text eigenschappen van de tekstvakken

U ziet dat het dialoogvenster DataBindings bewerken in afbeelding 10 niet het selectievakje Gegevensbinding in twee richtingen bevat dat aanwezig is bij het bewerken van een TemplateField in de GridView of DetailsView, of een sjabloon in de FormView. Met de functie voor gegevensbinding in twee richtingen kon de waarde die in het invoerwebbesturingselement is ingevoerd, automatisch worden toegewezen aan de bijbehorende ObjectDataSource-s InsertParameters of UpdateParameters bij het invoegen of bijwerken van gegevens. DataList biedt geen ondersteuning voor gegevensbinding in twee richtingen, zoals we later in deze zelfstudie zullen zien, nadat de gebruiker haar wijzigingen heeft aangebracht en klaar is om de gegevens bij te werken, moeten we deze eigenschappen van Tekstvakken Text programmatisch openen en hun waarden doorgeven aan de juiste UpdateProduct methode in de ProductsBLL klasse.

Ten slotte moeten we de knoppen Bijwerken en Annuleren toevoegen aan de EditItemTemplateknop . Zoals we zagen in de zelfstudie Master/Detail met behulp van een lijst met opsommingstekens van hoofdrecords en een Details DataList, wordt het CommandName-evenement van de Repeater of DataList gegenereerd wanneer op een knop, linkknop of afbeeldingsknop waarvan de ItemCommand-eigenschap is ingesteld, wordt geklikt vanuit een Repeater of DataList. Als voor de DataList de CommandName eigenschap is ingesteld op een bepaalde waarde, kan er ook een extra gebeurtenis worden gegenereerd. De speciale CommandName eigenschapswaarden zijn onder andere:

• Annuleren genereert de CancelCommand-gebeurtenis.
• Het bewerken genereert de EditCommand gebeurtenis
• De update genereert de UpdateCommand gebeurtenis

Houd er rekening mee dat deze gebeurtenissen naast de ItemCommand gebeurtenis worden gegenereerd.

Voeg toe aan de EditItemTemplate twee webknoppen, waarvan de ene is ingesteld op Bijwerken en de andere op Annuleren. Nadat u deze twee knopwebbesturingselementen hebt toegevoegd, moet de ontwerpfunctie er ongeveer als volgt uitzien:

Afbeelding 11: De knoppen Bijwerken en Annuleren toevoegen aan de EditItemTemplate knop (Klik om de volledige afbeelding weer te geven)

Nu de EditItemTemplate declaratieve markeringen van DataList zijn voltooid, moet er ongeveer als volgt uitzien:

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

Stap 5: De sanitair toevoegen om de bewerkingsmodus in te voeren

Op dit moment heeft onze DataList een bewerkingsinterface gedefinieerd via de EditItemTemplateinterface; er is momenteel echter geen manier voor een gebruiker die onze pagina bezoekt om aan te geven dat hij de informatie van een product wil bewerken. We moeten een knop Bewerken toevoegen aan elk product dat, wanneer erop wordt geklikt, dat DataList-item weergeeft in de bewerkingsmodus. Begin met het toevoegen van een knop Bewerken aan de ItemTemplateknop , hetzij via de ontwerpfunctie of declaratief. Zorg ervoor dat u de eigenschap van de Bewerkknop CommandName instelt op 'Bewerken'.

Nadat u deze knop Bewerken hebt toegevoegd, neemt u even de tijd om de pagina via een browser weer te geven. Met deze toevoeging moet elke productvermelding een knop Bewerken bevatten.

Afbeelding 12: De knoppen Bijwerken en Annuleren toevoegen aan de EditItemTemplate knop (Klik om de afbeelding op volledige grootte weer te geven)

Als u op de knop klikt, wordt er een postback uitgevoerd, maar wordt de productvermelding niet in de bewerkingsmodus geplaatst. Om het product te kunnen bewerken, moeten we het volgende doen:

1. Stel de eigenschap DataList in EditItemIndex op de index van de DataListItem knop Bewerken die zojuist is geklikt.
2. De gegevens opnieuw koppelen aan de DataList. Wanneer de DataList opnieuw wordt weergegeven, zal de DataListItem waarvan ItemIndex overeenkomt met de EditItemIndex van de DataList, worden gerenderd met behulp van EditItemTemplate.

Omdat de datalist-gebeurtenis EditCommand wordt geactiveerd wanneer op de knop Bewerken wordt geklikt, maakt u een EditCommand gebeurtenis-handler met de volgende 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

De EditCommand gebeurtenis-handler wordt doorgegeven in een object van het type DataListCommandEventArgs als de tweede invoerparameter, die een verwijzing bevat naar de DataListItem knop Bewerken waarop is geklikt (e.Item). De gebeurtenis-handler stelt eerst de EditItemIndex van de DataList in op de ItemIndex van de bewerkbare DataListItem en vervolgens herbindt hij de gegevens aan de DataList door de DataBind() methode van de DataList aan te roepen.

Nadat u deze gebeurtenis-handler hebt toegevoegd, gaat u opnieuw naar de pagina in een browser. Als u op de knop Bewerken klikt, kunt u het product bewerken dat erop is geklikt (zie afbeelding 13).

Afbeelding 13: Als u op de knop Bewerken klikt, kan het product worden bewerkt (klik hier om de volledige afbeelding weer te geven)

Stap 6: de wijzigingen van de gebruiker opslaan

Als u op de bewerkte knoppen Bijwerken of Annuleren klikt, gebeurt er op dit moment niets; om deze functionaliteit toe te voegen, moeten we gebeurtenis-handlers maken voor de DataList s UpdateCommand en CancelCommand gebeurtenissen. Begin met het maken van de CancelCommand gebeurtenis-handler, die wordt uitgevoerd wanneer op de Annuleren-knop van het bewerkte product wordt geklikt en die de taak heeft om de DataList naar zijn staat van vóór het bewerken te herstellen.

Als u wilt dat de DataList alle items in de modus Alleen-lezen weergeeft, moet u het volgende doen:

1. Stel de eigenschap DataList in EditItemIndex op de index van een niet-bestaande DataListItem index. -1 is een veilige keuze, omdat de DataListItem indexen beginnen bij 0.
2. De gegevens opnieuw koppelen aan de DataList. Omdat er geen DataListItemItemIndex es overeenkomen met de DataList s EditItemIndex, wordt de volledige DataList weergegeven in een alleen-lezenmodus.

Deze stappen kunnen worden uitgevoerd met de volgende gebeurtenis-handlercode:

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

Met deze toevoeging wordt, wanneer u op de knop Annuleren klikt, de DataList teruggebracht naar de situatie van voor het bewerken.

De laatste gebeurtenis-handler die we moeten voltooien, is de UpdateCommand gebeurtenis-handler. Deze event-handler moet:

1. Programmatisch toegang krijgen tot de door de gebruiker ingevoerde productnaam en -prijs, evenals de bewerkte producten ProductID.
2. Start het updateproces door de juiste UpdateProduct overbelasting in de ProductsBLL klasse aan te roepen.
3. Stel de eigenschap DataList in EditItemIndex op de index van een niet-bestaande DataListItem index. -1 is een veilige keuze, omdat de DataListItem indexen beginnen bij 0.
4. De gegevens opnieuw koppelen aan de DataList. Omdat er geen DataListItemItemIndex es overeenkomen met de DataList s EditItemIndex, wordt de volledige DataList weergegeven in een alleen-lezenmodus.

Stap 1 en 2 zijn verantwoordelijk voor het opslaan van de wijzigingen van de gebruiker; stap 3 en 4 retourneren de DataList naar de status van voorbewerking nadat de wijzigingen zijn opgeslagen en identiek zijn aan de stappen die in de CancelCommand gebeurtenis-handler worden uitgevoerd.

Als u de bijgewerkte productnaam en -prijs wilt ophalen, moet u de FindControl methode gebruiken om programmatisch te verwijzen naar de besturingselementen van het tekstvakweb in de EditItemTemplate. De bewerkte productwaarde ProductID moeten we ook ophalen. Toen we de ObjectDataSource in eerste instantie aan DataList hebben gebonden, heeft Visual Studio de eigenschap DataList toegewezen DataKeyField aan de primaire-sleutelwaarde uit de gegevensbron (ProductID). Deze waarde kan vervolgens worden opgehaald uit de verzameling DataList DataKeys . Neem even de tijd om ervoor te zorgen dat de DataKeyField eigenschap inderdaad is ingesteld op ProductID.

Met de volgende code worden de vier stappen geïmplementeerd:

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

De event handler begint met het inlezen van het bewerkte product ProductID uit de DataKeys verzameling. Vervolgens worden naar de twee tekstvaken in de EditItemTemplate vakken verwezen en worden de Text eigenschappen ervan opgeslagen in lokale variabelen, productNameValue en unitPriceValue. We gebruiken de methode om de Decimal.Parse() waarde uit het UnitPrice tekstvak te lezen, zodat als de ingevoerde waarde een valutasymbool heeft, deze nog steeds correct kan worden geconverteerd naar een Decimal waarde.

Opmerking

De waarden uit de ProductName en UnitPrice Textvakken worden alleen toegewezen aan de variabelen productNameValue en unitPriceValue als de Text-eigenschappen van de Textvakken een waarde hebben. Anders wordt er een waarde van Nothing aan de variabelen toegekend, wat het effect heeft van het bijwerken van beide gegevens met een databasewaarde NULL. In onze code worden lege tekenreeksen geconverteerd naar databasewaarden NULL . Dit is het standaardgedrag van de bewerkingsinterface in de besturingselementen GridView, DetailsView en FormView.

Na het lezen van de waarden wordt de klasse ProductsBLL methode UpdateProduct aangeroepen, met de productnaam, prijs en ProductID. De event-handler wordt voltooid door de DataList terug te zetten naar de status van vóór het bewerken met behulp van dezelfde logica als in de CancelCommand-event-handler.

Als de EditCommand, CancelCommanden UpdateCommand gebeurtenishandlers zijn voltooid, kan een bezoeker de naam en prijs van een product bewerken. In afbeeldingen 14-16 wordt deze bewerkingswerkstroom in actie weergegeven.

Afbeelding 14: Wanneer u de pagina voor het eerst bezoekt, bevinden alle producten zich in Read-Only modus (klik om de volledige afbeelding weer te geven)

Afbeelding 15: Als u de naam of prijs van een product wilt bijwerken, klikt u op de knop Bewerken (klik om de volledige afbeelding weer te geven)

Afbeelding 16: Nadat u de waarde hebt gewijzigd, klikt u op Bijwerken om terug te keren naar de Read-Only-modus (klik om de volledige afbeelding weer te geven)

Stap 7: Mogelijkheden voor verwijderen toevoegen

De stappen voor het toevoegen van verwijdermogelijkheden aan een DataList zijn vergelijkbaar met die voor het toevoegen van bewerkingsmogelijkheden. Kortom, we moeten een knop Verwijderen aan ItemTemplate toevoegen die, wanneer erop wordt geklikt:

1. Leest in het bijbehorende product ProductID via de DataKeys verzameling.
2. Hiermee wordt de verwijdering uitgevoerd door de ProductsBLL klassemethode DeleteProduct aan te roepen.
3. Hiermee worden de gegevens opnieuw gekoppeld aan de DataList.

Laten we beginnen met het toevoegen van een Verwijderen-knop aan de knop ItemTemplate.

Wanneer erop wordt geklikt, genereert een knop waarvan CommandName Bewerken, Bijwerken of Annuleren de DataList-gebeurtenis ItemCommand samen met een extra gebeurtenis (bijvoorbeeld, wanneer de gebeurtenis Bewerken wordt gebruikt, wordt EditCommand ook geactiveerd). Op dezelfde manier zorgt een knop, LinkButton of ImageButton in de DataList waarvan CommandName de eigenschap is ingesteld op Verwijderen, dat de DeleteCommand gebeurtenis wordt geactiveerd (samen met ItemCommand).

Voeg een knop Verwijderen toe naast de knop Bewerken in ItemTemplate, en stel de eigenschap CommandName ervan in op Verwijderen. Nadat u deze knop hebt toegevoegd, moet uw declaratieve syntaxis van DataList ItemTemplate er als volgt uitzien:

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

Maak vervolgens een gebeurtenis-handler voor de DataList-gebeurtenis DeleteCommand met behulp van de volgende code:

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

Als u op de knop Verwijderen klikt, veroorzaakt dit een postback en wordt het DataList-evenement DeleteCommand uitgevoerd. In de gebeurtenis-handler wordt de waarde van ProductID het geklikte product geopend vanuit de DataKeys verzameling. Vervolgens wordt het product verwijderd door de ProductsBLL klasse's DeleteProduct methode aan te roepen.

Nadat het product is verwijderd, is het belangrijk dat we de gegevens opnieuw koppelen aan de DataList (DataList1.DataBind()), anders blijft de DataList het product weergeven dat zojuist is verwijderd.

Samenvatting

Hoewel de DataList niet beschikt over de ondersteuning voor bewerken en verwijderen die de GridView heeft, kan deze met een beetje code verbeterd worden om deze functies toe te voegen. In deze zelfstudie hebben we gezien hoe u een lijst met twee kolommen kunt maken met producten die kunnen worden verwijderd en waarvan de naam en prijs kunnen worden bewerkt. Het toevoegen van ondersteuning voor bewerken en verwijderen is een kwestie van het opnemen van de juiste webbesturingselementen in de ItemTemplate en EditItemTemplate, het maken van de bijbehorende gebeurtenis-handlers, het lezen van de waarden van de door de gebruiker ingevoerde en primaire sleutel en het afhandelen van communicatie met de bedrijfslogicalaag.

Hoewel we eenvoudige bewerkings- en verwijderingsmogelijkheden aan de DataList hebben toegevoegd, ontbreken er meer geavanceerde functies. Er is bijvoorbeeld geen invoerveldvalidatie: als een gebruiker een te dure prijs invoert, wordt er een uitzondering gegenereerd wanneer Decimal.Parse wordt geprobeerd te duur te converteren naar een Decimal. Op dezelfde manier krijgt de gebruiker het standaardfoutscherm te zien als er een probleem is bij het bijwerken van de gegevens op de lagen bedrijfslogica of Gegevenstoegang. Zonder enige bevestiging op de knop Verwijderen is het per ongeluk verwijderen van een product te waarschijnlijk.

In toekomstige zelfstudies zien we hoe u de gebruikerservaring voor bewerken kunt verbeteren.

Veel plezier met programmeren!

Over de auteur

Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.

Speciale dank aan

Deze tutorialreeks is beoordeeld door veel behulpzame beoordelers. Hoofdbeoordelaars voor deze zelfstudie waren Zack Jones, Ken Pespisa en Randy Schmidt. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.

VorigeVolgende