Anpassade knappar i DataList och Repeater (VB)

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 visar en knapp för att visa sina associerade produkter med hjälp av en BulletedList-kontroll.

Inledning

Under de senaste sjutton handledningarna i DataList och Repeater har vi skapat både skrivskyddade exempel och exempel för redigering och borttagning. För att underlätta redigering och borttagning i en datalista har vi lagt till knappar i datalistan som ItemTemplate, som när de klickas, orsakade en återkoppling och utlöste en DataList-händelse som motsvarar egenskapen för knappen CommandName. Om du till exempel lägger till en knapp i ItemTemplate med ett CommandName-egenskapsvärde för Redigera, utlöses DataList-objektens EditCommand vid efteråterställning. En med egenskapsvärdet Radera CommandName 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 Repeater 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).

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 webbsidor för handledning av anpassad knapp

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

Bild 2: Lägg till ASP.NET-sidor för anpassade handledningar Buttons-Related

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.

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. Specifikt, lägg till följande markering efter paginering och sortering 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 för att besöka självstudiesajten genom en webbläsare. Menyn till vänster innehåller nu alternativ för redigering, infogning och borttagning av genomgångar.

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

Steg 2: Lägga till listan över kategorier

I den här handledningen måste vi skapa en Repeater som visar alla kategorier tillsammans med en Visa Produkter-knapp som, när den klickas, visar produkterna från 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 designern och ställ in dess ID-egenskap till Categories. Skapa sedan en ny kontroll för datakälla från Repeaters smarta tagg. Mer specifikt skapar du en ny ObjectDataSource-kontroll med namnet CategoriesDataSource som väljer dess data från CategoriesBLL klassens GetCategories() -metod.

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. Visa produkter-knappen, när den klickas på, skapar en postback men utför ännu ingen åtgärd.

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: Steg 3: Utföra Server-Side-logik när knappen Visa produkter klickas

Varje gång en Knapp, LinkButton eller ImageButton i en mall i en DataList eller Repeater klickas på 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 ItemCommand-händelsen för DataList eller Repeater utlöses. Händelsehanteraren får knappen CommandName och CommandArgument värdena.

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 på den klickade knappens egenskap CommandArgument
• CommandNamevärdet för knappens egenskap CommandName
• CommandSource en referens till den knappkontroll 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 passeras in via den CategoryID egenskapen kan vi hämta den uppsättning produkter som är associerade med den valda kategorin i den CommandArgument 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 i händelsehanteraren ItemCommand och binda den uppsättning produkter som hör till den valda kategorin, vilket vi ska ta itu med i steg 4.

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ägg till en BulletedList-kontroll till ItemTemplate efter Show Products LinkButton. 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 Sub Categories_ItemCommand _
    (source As Object, e As RepeaterCommandEventArgs) _
    Handles Categories.ItemCommand
    If e.CommandName = "ShowProducts" Then
        ' Determine the CategoryID
        Dim categoryID As Integer = Convert.ToInt32(e.CommandArgument)
        ' Get the associated products from the ProudctsBLL and
        ' bind them to the BulletedList
        Dim products As BulletedList = _
            CType(e.Item.FindControl("ProductsInCategory"), BulletedList)
        Dim productsAPI As New ProductsBLL()
        products.DataSource = productsAPI.GetProductsByCategoryID(categoryID)
        products.DataBind()
    End If
End Sub

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 meningslöst, eftersom vi bara har en enda knapp, men det är en bra vana att bilda. Därefter hämtas CategoryID av den valda kategorin från CommandArgument-egenskapen. 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 klick på länken Visa produkter en postback och visar produkterna för den valda kategorin i en punktlista. Observera dessutom att den här produktinformationen finns kvar, även om andra kategorier Visa produktlänkar klickas på.

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 sådana knappar klickas orsakar de 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 självstudien var Dennis Patterson. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.