Aangepaste knoppen in de DataList en Repeater (C#)

door Scott Mitchell

PDF downloaden

In deze tutorial bouwen we een interface die gebruikmaakt van een Repeater om de categorieën in het systeem weer te geven, waarbij elke categorie een knop biedt om de bijbehorende producten weer te geven met behulp van een besturingselement Opsommingstekenlijst.

Introductie

In de afgelopen zeventien handleidingen voor DataList en Repeater hebben we zowel alleen-lezen voorbeelden als voorbeelden voor het bewerken en verwijderen gemaakt. Om de bewerk- en verwijderfunctionaliteit in een DataList te vergemakkelijken, hebben we knoppen toegevoegd aan de DataList ItemTemplate die, wanneer erop wordt geklikt, een postback veroorzaken en een DataList-gebeurtenis hebben opgewekt die overeenkomt met de eigenschap van de knop.CommandName Als u bijvoorbeeld een knop toevoegt aan de ItemTemplate met een CommandName eigenschapswaarde Bewerken, wordt de DataList s EditCommand geactiveerd op een postback. Een knop met CommandName Delete veroorzaakt dat de DeleteCommand wordt aangeroepen.

Naast de knoppen Bewerken en Verwijderen kunnen de besturingselementen DataList en Repeater ook Knoppen, LinkButtons of ImageButtons bevatten die, wanneer erop wordt geklikt, aangepaste logica op de server uitvoeren. In deze zelfstudie bouwen we een interface die gebruikmaakt van een Repeater om de categorieën in het systeem weer te geven. Voor elke categorie bevat de Repeater een knop om de bijbehorende producten van de categorie weer te geven met behulp van een Opsommingstekenlijst (zie afbeelding 1).

Afbeelding 1: Als u op de koppeling Producten weergeven klikt, worden de producten van de categorie weergegeven in een lijst met opsommingstekens (klik om de volledige afbeelding weer te geven)

Stap 1: Webpagina's van de Handleiding voor Aangepaste Knoppen Toevoegen

Voordat we kijken hoe we een aangepaste knop kunnen toevoegen, gaan we eerst de ASP.NET pagina's maken in ons websiteproject die we nodig hebben voor deze zelfstudie. Begin met het toevoegen van een nieuwe map met de naam CustomButtonsDataListRepeater. Voeg vervolgens de volgende twee ASP.NET pagina's toe aan die map en zorg ervoor dat u elke pagina koppelt aan de Site.master basispagina:

• Default.aspx
• CustomButtons.aspx

Afbeelding 2: Voeg de ASP.NET-pagina's toe voor de aangepaste Buttons-Related-tutorials

Net als in de andere mappen, zal Default.aspx in de map CustomButtonsDataListRepeater de zelfstudies in zijn sectie weergeven. Zoals u weet, biedt het SectionLevelTutorialListing.ascx gebruikersbeheer deze functionaliteit. Voeg dit gebruikersbesturingselement toe aan Default.aspx door het vanuit de Solution Explorer naar de ontwerpweergave van de pagina te slepen.

Afbeelding 3: 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 paging en sortering met de DataList en Repeater <siteMapNode>:

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</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 bewerken, invoegen, en verwijderen van tutorials.

Afbeelding 4: De sitemap bevat nu de vermelding voor de zelfstudie voor aangepaste knoppen

Stap 2: De lijst met categorieën toevoegen

Voor deze handleiding moeten we een Repeater maken waarin alle categorieën worden vermeld, samen met een hyperlinkknop Producten weergeven waarop, wanneer erop wordt geklikt, de producten van de bijbehorende categorie worden weergegeven als een opsomming. Laten we eerst een eenvoudige Repeater maken waarin de categorieën in het systeem worden vermeld. Open eerst de CustomButtons.aspx pagina in de CustomButtonsDataListRepeater map. Sleep een Repeater vanuit de Gereedschapskist naar de Ontwerper en stel de eigenschap ID in op Categories. Maak vervolgens een nieuw gegevensbronbesturingselement vanuit de slimme tag van de Repeater. Maak met name een nieuw ObjectDataSource-besturingselement met de naam CategoriesDataSource dat de gegevens van de CategoriesBLL klassemethode GetCategories() selecteert.

Afbeelding 5: Configureer de ObjectDataSource om de methode CategoriesBLL van de klasse GetCategories() te gebruiken (Klik om de afbeelding op volledige grootte weer te geven)

In tegenstelling tot het besturingselement DataList, waarvoor Visual Studio een standaardinstelling ItemTemplate maakt op basis van de gegevensbron, moeten de sjablonen van Repeater handmatig worden gedefinieerd. Bovendien moeten de sjablonen van repeater worden gemaakt en declaratief worden bewerkt (dat wil gezegd, er is geen optie Sjablonen bewerken in de infotag van Repeater).

Klik op het tabblad Bron in de linkerbenedenhoek en voeg een ItemTemplate naam toe waarmee de naam van de categorie in een <h3> element en de beschrijving in een alineatag wordt weergegeven. Voeg een SeparatorTemplate regel () toe die een horizontale regel (<hr />) tussen elke categorie weergeeft. Voeg ook een LinkButton toe met de Text eigenschap ingesteld op Producten weergeven. Nadat u deze stappen hebt voltooid, moet de declaratieve markering van uw pagina er als volgt uitzien:

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

Afbeelding 6 toont de pagina wanneer deze wordt bekeken via een browser. Elke categorienaam en beschrijving worden vermeld. De knop Producten weergeven, wanneer erop wordt geklikt, veroorzaakt een postback, maar er wordt nog geen actie uitgevoerd.

Afbeelding 6: De naam en beschrijving van elke categorie worden weergegeven, samen met een koppelingsknop Producten weergeven (klik om de volledige afbeelding weer te geven)

Stap 3: Server-Side logica uitvoeren wanneer op de koppelingsknop Producten weergeven wordt geklikt

Wanneer op een Knop, LinkButton of ImageButton in een sjabloon in een DataList of Repeater wordt geklikt, vindt er een postback plaats en wordt het ItemCommand-evenement van de DataList of Repeater geactiveerd. Naast de ItemCommand gebeurtenis kan het besturingselement DataList ook een andere, specifiekere gebeurtenis genereren als de eigenschap van CommandName de knop is ingesteld op een van de gereserveerde tekenreeksen (Verwijderen, Bewerken, Annuleren, Bijwerken of Selecteren), maar de ItemCommand gebeurtenis wordt altijd geactiveerd.

Wanneer er in een DataList of Repeater op een knop wordt geklikt, moeten we vaak doorgeven op welke knop is geklikt (in het geval dat er mogelijk meerdere knoppen in het besturingselement zijn, zoals een knop Bewerken en Verwijderen) en misschien nog wat aanvullende informatie (zoals de primaire sleutelwaarde van het item waarvan op de knop is geklikt). De knop, LinkButton en ImageButton bieden twee eigenschappen waarvan de waarden worden doorgegeven aan de ItemCommand gebeurtenis-handler:

• CommandName een tekenreeks die doorgaans wordt gebruikt om elke knop in de sjabloon te identificeren
• CommandArgument wordt vaak gebruikt voor het opslaan van de waarde van een bepaald gegevensveld, zoals de primaire-sleutelwaarde

Stel bij dit voorbeeld de eigenschap van LinkButton in op CommandName ShowProducts en verbind de primaire sleutelwaarde van de huidige record CategoryID met de eigenschap CommandArgument met behulp van de databinding syntaxis CategoryArgument='<%# Eval("CategoryID") %>'. Nadat u deze twee eigenschappen hebt opgegeven, moet de declaratieve syntaxis van LinkButton er als volgt uitzien:

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

Wanneer op de knop wordt geklikt, vindt er een postback plaats en wordt het DataList- of RepeaterItemCommand-event gestart. Aan de event-handler worden de CommandName en CommandArgument waarden van de knop doorgegeven.

Maak een gebeurtenis-handler voor de repeater-gebeurtenis ItemCommand en noteer de tweede parameter die is doorgegeven aan de gebeurtenis-handler (benoemd e). Deze tweede parameter is van het type RepeaterCommandEventArgs en heeft de volgende vier eigenschappen:

• CommandArgumentde waarde van de eigenschap van de aangeklikte knopCommandArgument
• CommandNamede waarde van de eigenschap van de knopCommandName
• CommandSource een verwijzing naar de knopbediening waarop is geklikt
• Item een verwijzing naar de RepeaterItem knop waarop is geklikt; elke record die aan de repeater is gebonden, wordt weergegeven als een RepeaterItem

Omdat de geselecteerde categorie CategoryID wordt doorgegeven via de CommandArgument eigenschap, kunnen we de set producten ophalen die zijn gekoppeld aan de geselecteerde categorie in de ItemCommand evenementenhandler. Deze producten kunnen vervolgens worden gebonden aan een opsommingstekenslijst-besturingselement in ItemTemplate (dat we nog moeten toevoegen). Het enige dat overblijft, is om de Opsommingstekenlijst toe te voegen, ernaar te verwijzen in de ItemCommand gebeurtenis-handler en deze te binden aan de set producten voor de geselecteerde categorie, die we in stap 4 gaan aanpakken.

Opmerking

De gebeurtenis-handler van ItemCommand DataList wordt doorgegeven aan een object van het type DataListCommandEventArgs, dat dezelfde vier eigenschappen biedt als de RepeaterCommandEventArgs klasse.

Stap 4: de producten van de geselecteerde categorie weergeven in een lijst met opsommingstekens

De producten van de geselecteerde categorie kunnen worden weergegeven in de Repeater s ItemTemplate met behulp van een willekeurig aantal besturingselementen. We kunnen nog een geneste Repeater, een DataList, een DropDownList, een GridView enzovoort toevoegen. Omdat we de producten echter als een lijst met opsommingstekens willen weergeven, gebruiken we de BulletedList-control. Bij terugkeer naar de declaratieve opmaak van de CustomButtons.aspx pagina, voegt u een BulletedList-besturingselement toe aan de ItemTemplate na de Show Products LinkButton. Stel de opsommingstekens in ID op ProductsInCategory. De opsommingstekenlijst geeft de waarde weer van het gegevensveld dat is opgegeven via de DataTextField eigenschap. Omdat voor dit besturingselement productgegevens zijn gebonden, stelt u de DataTextField eigenschap in op ProductName.

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

Verwijs in de ItemCommand gebeurtenishandler naar dit besturingselement en e.Item.FindControl("ProductsInCategory") bind dit aan de set producten die aan de geselecteerde categorie zijn gekoppeld.

protected void Categories_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "ShowProducts")
    {
        // Determine the CategoryID
        int categoryID = Convert.ToInt32(e.CommandArgument);
        // Get the associated products from the ProudctsBLL and bind
        // them to the BulletedList
        BulletedList products =
            (BulletedList)e.Item.FindControl("ProductsInCategory");
        ProductsBLL productsAPI = new ProductsBLL();
        products.DataSource =
            productsAPI.GetProductsByCategoryID(categoryID);
        products.DataBind());
    }
}

Voordat u een actie uitvoert in de ItemCommand gebeurtenis-handler, is het verstandig eerst de waarde van de binnenkomende CommandNamewaarde te controleren. Omdat de ItemCommand gebeurtenis-handler wordt geactiveerd wanneer er op een knop wordt geklikt, gebruikt u de CommandName waarde om te bepalen welke actie u moet ondernemen als er meerdere knoppen in de sjabloon staan. Het controleren van de CommandName hier is irrelevant, omdat we slechts één knop hebben, maar het is een goede gewoonte om aan te wennen. Vervolgens wordt de CategoryID geselecteerde categorie opgehaald uit de CommandArgument eigenschap. Het besturingselement BulletedList in de sjabloon wordt vervolgens gerefereerd naar en gebonden aan de resultaten van de ProductsBLL klassemethode GetProductsByCategoryID(categoryID).

In eerdere zelfstudies die de knoppen in een DataList hebben gebruikt, zoals Een overzicht van bewerken en verwijderen van gegevens in de DataList, hebben we de primaire sleutelwaarde van een bepaald item bepaald via de DataKeys verzameling. Hoewel deze benadering goed werkt met de DataList, heeft de Repeater geen DataKeys eigenschap. In plaats daarvan moeten we een alternatieve benadering gebruiken voor het opgeven van de primaire-sleutelwaarde, zoals via de eigenschap van CommandArgument de knop of door de primaire sleutelwaarde toe te wijzen aan een verborgen labelwebbesturingselement in de sjabloon en de waarde ervan terug te lezen in de ItemCommand gebeurtenishandler met behulp van e.Item.FindControl("LabelID").

Nadat u de ItemCommand gebeurtenis-handler hebt voltooid, test deze pagina even in een browser. Zoals afbeelding 7 laat zien, zorgt het klikken op de koppeling 'Producten weergeven' ervoor dat de pagina vernieuwt en worden de producten voor de geselecteerde categorie weergegeven in een lijst met opsommingstekens. Houd er bovendien rekening mee dat deze productinformatie behouden blijft, zelfs als er op koppelingen naar Producten weergeven in andere categorieën wordt geklikt.

Opmerking

Als u het gedrag van dit rapport wilt wijzigen, zodat de producten van slechts één categorie tegelijk worden vermeld, stelt u de eigenschap van EnableViewState het besturingselement Opsommingstekenlijst in op False.

Afbeelding 7: Er wordt een lijst met opsommingstekens gebruikt om de producten van de geselecteerde categorie weer te geven (klik om de afbeelding op volledige grootte weer te geven)

Samenvatting

De besturingselementen DataList en Repeater kunnen een willekeurig aantal knoppen, LinkButtons of ImageButtons in hun sjablonen bevatten. Dergelijke knoppen veroorzaken, wanneer erop wordt geklikt, een postback en genereren het ItemCommand-evenement. Als u aangepaste actie aan de serverzijde wilt koppelen aan een knop waarop wordt geklikt, maakt u een gebeurtenis-handler voor de ItemCommand gebeurtenis. In deze gebeurtenishandler controleert u eerst de binnenkomende CommandName waarde om te bepalen op welke knop is geklikt. Aanvullende informatie kan eventueel worden opgegeven via de eigenschap knop CommandArgument .

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. Hoofdbeoordelaar voor deze handleiding was Dennis Patterson. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.

Volgende