Dela via

Anpassade knappar i DataList och Repeater (C#)

av Scott Mitchell

Ladda ned PDF

I den här handledningen skapar vi ett gränssnitt som använder en Repeater för att lista kategorierna i systemet, där varje kategori tillhandahåller en knapp för att visa sina associerade produkter med hjälp av en punktlista-kontroll.

Inledning

Under de senaste sjutton handledningarna i DataList och Repeater har vi skapat både skrivskyddade exempel och redigerings- och borttagningsfunktioner. För att underlätta redigering och borttagning av poster i en datalista har vi lagt till knappar i datalistan ItemTemplate som, vid klickning, orsakade en postback och utlöste en DataList-händelse som motsvarar knappens egenskap CommandName. Om du till exempel lägger till en knapp i ItemTemplate med egenskapsvärdet CommandName för Redigera, utlöses DataList-objektet EditCommand vid postback. En med egenskapsvärdet CommandName för Ta bort genererar DeleteCommand.

Förutom knapparna Redigera och Ta bort kan kontrollerna DataList och Repeater även innehålla Knappar, LinkButtons eller ImageButtons som, när de klickas, utför viss anpassad logik på serversidan. I den här handledningen skapar vi ett gränssnitt som använder en återkommande komponent för att lista kategorierna i systemet. För varje kategori innehåller Repeater en knapp för att visa kategorins associerade produkter med hjälp av en bulletedList-kontroll (se bild 1).

Om du klickar på länken Visa produkter visas kategorins produkter i en punktlista

Bild 1: Om du klickar på länken Visa produkter visas kategorins produkter i en punktlista (klicka om du vill visa en bild i full storlek)

Steg 1: Lägga till anpassade knappsjälvstudiesidor

Innan vi tittar på hur du lägger till en anpassad knapp ska vi först ta en stund att skapa de ASP.NET sidor i vårt webbplatsprojekt som vi behöver för den här självstudien. Börja med att lägga till en ny mapp med namnet CustomButtonsDataListRepeater. Lägg sedan till följande två ASP.NET sidor i mappen och se till att associera varje sida med Site.master huvudsidan:

  • Default.aspx
  • CustomButtons.aspx

Lägg till ASP.NET-sidorna för anpassade Buttons-Related-självstudier

Bild 2: Lägg till ASP.NET-sidorna för de anpassade Buttons-Related-tutorials.

Precis som i de andra mapparna kommer Default.aspx i CustomButtonsDataListRepeater-mappen att lista självstudierna i dess avsnitt. Kom ihåg att SectionLevelTutorialListing.ascx användarkontrollen innehåller den här funktionen. Lägg till den här användarkontrollen genom att Default.aspx dra den från Solution Explorer till sidans designvy.

Lägg till sectionLevelTutorialListing.ascx-användarkontrollen i Default.aspx

Bild 3: Lägg till SectionLevelTutorialListing.ascx användarkontrollen Default.aspx i (Klicka om du vill visa en bild i full storlek)

Slutligen lägger du till sidorna som poster i Web.sitemap filen. Mer specifikt, lägg till följande markering efter Paging och Sorting med DataList och 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>

När du har uppdaterat Web.sitemap, ta en stund att besöka självstudiernas webbplats via en webbläsare. Menyn till vänster innehåller nu alternativ för redigering, infogning och borttagning av handledningar.

Webbplatskartan innehåller nu posten för handledningen om anpassade knappar

Bild 4: Webbplatskartan innehåller nu posten för självstudien för anpassade knappar

Steg 2: Lägga till listan över kategorier

I denna handledning behöver vi skapa en Repeater som listar alla kategorier tillsammans med en knapp för att visa produkter. När den klickas, visas produkterna i den associerade kategorin i en punktlista. Låt oss först skapa en enkel Repeater som visar kategorierna i systemet. Börja med att öppna sidan CustomButtons.aspx i CustomButtonsDataListRepeater mappen. Dra en Repeater från verktygslådan till designvyn och ange dess ID värde till Categories. Skapa sedan en ny datakällakontroll från den smarta taggen Repeater. Mer specifikt skapar du en ny ObjectDataSource-kontroll med namnet CategoriesDataSource som väljer dess data från CategoriesBLL klassens GetCategories() -metod.

Konfigurera ObjectDataSource att använda metoden CategoriesBLL Class s GetCategories()

Bild 5: Konfigurera ObjectDataSource att använda CategoriesBLL klassens GetCategories() metod (Klicka om du vill visa en bild i full storlek)

Till skillnad från DataList-kontrollen, där Visual Studio skapar ett standardvärde ItemTemplate baserat på datakällan, måste Repeater-mallarna definieras manuellt. Dessutom måste Repeater-mallarna skapas och redigeras deklarativt (det vill säga det finns inget alternativ för att redigera mallar i repeaterns smarta tagg).

Klicka på fliken Källa i det nedre vänstra hörnet och lägg till en ItemTemplate som visar kategorins namn i ett <h3> element och dess beskrivning i en stycketagg. Inkludera en SeparatorTemplate som visar en vågrät regel (<hr />) mellan varje kategori. Lägg också till en LinkButton med dess Text egenskap inställd på Visa produkter. När du har slutfört de här stegen bör sidans deklarativa markering se ut så här:

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

Bild 6 visar sidan när den visas via en webbläsare. Varje kategorinamn och beskrivning visas. Knappen Visa produkter genererar ett återanrop när den klickas på men utför ännu ingen åtgärd.

Varje kategoris namn och beskrivning visas, tillsammans med länken Visa produkter

Bild 6: Varje kategoris namn och beskrivning visas tillsammans med linkbuttonen Visa produkter (Klicka om du vill visa en bild i full storlek)

Steg 3: Köra logiken Server-Side när länkknappen Visa produkter klickas

Varje gång du klickar på en Knapp, LinkButton eller ImageButton i en mall i en DataList eller Repeater, sker en postback och händelsen i DataList eller Repeater ItemCommand utlöses. Förutom ItemCommand händelsen kan kontrollen DataList också generera en annan, mer specifik händelse om knappens CommandName egenskap är inställd på en av de reserverade strängarna ( Ta bort, Redigera, Avbryt, Uppdatera eller Välj ), men ItemCommand händelsen utlöses alltid .

När en knapp klickas i en DataList eller Repeater måste vi ofta skicka vidare vilken knapp som klickades (om det kan finnas flera knappar i kontrollen, till exempel både knappen Redigera och Ta bort) och kanske lite ytterligare information (till exempel primärnyckelvärdet för det objekt vars knapp klickades på). Knappen, LinkButton och ImageButton innehåller två egenskaper vars värden skickas till ItemCommand händelsehanteraren:

  • CommandName en sträng som vanligtvis används för att identifiera varje knapp i mallen
  • CommandArgument används ofta för att lagra värdet för vissa datafält, till exempel primärnyckelvärdet

I det här exemplet anger du egenskapen LinkButton s till ShowProducts och binder den aktuella postens primära nyckelvärde CommandName till CategoryID egenskapen med hjälp av databindningssyntaxen CommandArgumentCategoryArgument='<%# Eval("CategoryID") %>'. När du har angett dessa två egenskaper bör LinkButtons deklarativa syntax se ut så här:

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

När knappen klickas, inträffar ett återanrop och händelsen utlöses för DataList eller Repeater ItemCommand. Händelsehanteraren får knappens CommandName och CommandArgument värden.

Skapa en händelsehanterare för Repeater-händelsen ItemCommand och notera den andra parametern som skickades till händelsehanteraren (med namnet e). Den andra parametern är av typen RepeaterCommandEventArgs och har följande fyra egenskaper:

  • CommandArgument värdet av den klickade knappens egenskap CommandArgument
  • CommandNamevärdet för knappens egenskap CommandName
  • CommandSource en referens till knappen som klickades på
  • Item en referens till RepeaterItem som innehåller knappen som klickades. Varje post som är bunden till Repeater visas som en RepeaterItem

Eftersom den valda kategorin är skickad CategoryID via CommandArgument egenskapen kan vi hämta produktuppsättningen som är associerad med den valda kategorin i ItemCommand händelsehanteraren. Dessa produkter kan sedan bindas till en BulletedList-kontroll i ItemTemplate (som vi ännu inte har lagt till). Allt som återstår är sedan att lägga till punktlistan, referera till den ItemCommand i händelsehanteraren och binda till den uppsättningen produkter för den valda kategorin, som vi ska ta itu med i steg 4.

Anmärkning

DataLists ItemCommand händelsehanterare får ett objekt av typen DataListCommandEventArgs, som erbjuder samma fyra egenskaper som RepeaterCommandEventArgs klassens.

Steg 4: Visa de valda kategoriprodukterna i en punktlista

Den valda kategorins produkter kan visas i Repeater s ItemTemplate med valfritt antal kontroller. Vi kan lägga till en annan kapslad Repeater, en datalista, en listruta, en GridView och så vidare. Eftersom vi vill visa produkterna som en punktlista använder vi dock kontrollen Punktlista. När du återgår till sidans CustomButtons.aspx deklarativa markering lägger du till en BulletedList-kontroll i ItemTemplate efter LinkButtonen Visa Produkter. Ange bulletedLists s ID till ProductsInCategory. BulletedList visar värdet för det datafält som anges via DataTextField egenskapen. Eftersom den här kontrollen har produktinformation bunden till sig anger du DataTextField egenskapen till ProductName.

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

ItemCommand I händelsehanteraren refererar du till den här kontrollen med hjälp av e.Item.FindControl("ProductsInCategory") och binder den till den uppsättning produkter som är associerade med den valda kategorin.

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());
    }
}

Innan du utför någon åtgärd i ItemCommand händelsehanteraren är det klokt att först kontrollera värdet för den inkommande CommandName. ItemCommand Eftersom händelsehanteraren utlöses när någon knapp klickas använder du värdet för att urskilja vilken åtgärd som ska vidtas om det finns flera knappar i mallenCommandName. CommandName Att kontrollera här är irrelevant, eftersom vi bara har en enda knapp, men det är en bra vana att skapa. Därefter hämtas CategoryID för den valda kategorin från egenskapen CommandArgument. Kontrollen BulletedList i mallen refereras sedan till och binds till resultatet av ProductsBLL metoden class s GetProductsByCategoryID(categoryID) .

I tidigare självstudier som använde knapparna i en datalista, till exempel En översikt över redigering och borttagning av data i datalistan, fastställde vi det primära nyckelvärdet för ett visst objekt via DataKeys samlingen. Även om den här metoden fungerar bra med DataList har Repeater inte någon DataKeys egenskap. I stället måste vi använda en alternativ metod för att ange det primära nyckelvärdet, till exempel genom knappens CommandArgument egenskap eller genom att tilldela primärnyckelvärdet till en dold etikettwebbkontroll i mallen och läsa dess värde i ItemCommand händelsehanteraren igen med hjälp av e.Item.FindControl("LabelID").

När du har slutfört ItemCommand händelsehanteraren kan du testa den här sidan i en webbläsare. Som bild 7 visar orsakar en postback när du klickar på länken Visa produkter och visar produkterna för den valda kategorin i en punkterad lista. Observera dessutom att den här produktinformationen finns kvar, även om andra kategorier Visa produktlänkar klickas på.

Anmärkning

Om du vill ändra beteendet för den här rapporten så att produkterna från endast en kategori visas åt gången, ställer du helt enkelt in egenskapen för BulletedList-kontrollen till EnableViewStateFalse.

En punktlista används för att visa produkter i den valda kategorin

Bild 7: En punktlista används för att visa produkter i den valda kategorin (Klicka om du vill visa en bild i full storlek)

Sammanfattning

Kontrollerna DataList och Repeater kan innehålla valfritt antal knappar, länkknappar eller imagebuttons i sina mallar. När du klickar på sådana knappar orsakar du ett återanrop och genererar händelsen ItemCommand . Om du vill associera anpassad åtgärd på serversidan med en knapp som klickas skapar du en händelsehanterare för ItemCommand händelsen. I den här händelsehanteraren kontrollerar du först det inkommande CommandName värdet för att avgöra vilken knapp som klickades. Du kan också ange ytterligare information via knappegenskapen CommandArgument .

Lycka till med programmerandet!

Om författaren

Scott Mitchell, författare till sju ASP/ASP.NET-böcker och grundare av 4GuysFromRolla.com, har arbetat med Microsofts webbtekniker sedan 1998. Scott arbetar som oberoende konsult, tränare och författare. Hans senaste bok är Sams Teach Yourself ASP.NET 2.0 på 24 timmar. Han kan nås på mitchell@4GuysFromRolla.com.

Särskilt tack till

Den här självstudieserien granskades av många användbara granskare. Ansvarig granskare för den här handledningen var Dennis Patterson. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.

Nästa

  • Last updated on