Pulsanti personalizzati con DataList e Repeater (C#)

Articolo
2024-03-11

In questa esercitazione verrà creata un'interfaccia che usa un repeater per elencare le categorie nel sistema, con ogni categoria che fornisce un pulsante per visualizzare i prodotti associati usando un controllo BulletedList.

Introduzione

Nelle ultime diciassette esercitazioni su DataList e Repeater sono stati creati esempi di sola lettura ed esempi di modifica ed eliminazione. Per facilitare la modifica e l'eliminazione di funzionalità all'interno di un oggetto DataList, sono stati aggiunti pulsanti all'oggetto DataList ItemTemplate che, quando si fa clic, ha causato un postback e ha generato un evento DataList corrispondente alla proprietà del CommandName pulsante. Ad esempio, l'aggiunta di un pulsante a con un valore della proprietà Edit fa sì che l'oggetto DataList venga EditCommand attivato sul postback. Uno con l'oggetto Delete genera l'oggetto CommandNameDeleteCommand.CommandNameItemTemplate

Oltre ai pulsanti Modifica ed Elimina, i controlli DataList e Repeater possono includere anche Pulsanti, LinkButton o ImageButton che, quando si fa clic, eseguono una logica sul lato server personalizzata. In questa esercitazione verrà creata un'interfaccia che usa un repeater per elencare le categorie nel sistema. Per ogni categoria, repeater includerà un pulsante per visualizzare i prodotti associati alla categoria usando un controllo BulletedList (vedere la figura 1).

Figura 1: Facendo clic sul collegamento Mostra prodotti vengono visualizzati i prodotti della categoria in un elenco puntato (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 1: Aggiunta delle pagine Web dell'esercitazione sul pulsante personalizzata

Prima di esaminare come aggiungere un pulsante personalizzato, è necessario prima di tutto creare le pagine di ASP.NET nel progetto del sito Web necessarie per questa esercitazione. Per iniziare, aggiungere una nuova cartella denominata CustomButtonsDataListRepeater. Aggiungere quindi le due pagine ASP.NET seguenti a tale cartella, assicurandosi di associare ogni pagina alla Site.master pagina master:

Default.aspx
CustomButtons.aspx

Aggiungere le pagine di ASP.NET per le esercitazioni di Buttons-Related personalizzate

Figura 2: Aggiungere le pagine di ASP.NET per le esercitazioni personalizzate Buttons-Related

Come nelle altre cartelle, Default.aspx nella CustomButtonsDataListRepeater cartella verranno elencate le esercitazioni nella relativa sezione. Tenere presente che il SectionLevelTutorialListing.ascx controllo utente fornisce questa funzionalità. Aggiungere questo controllo utente a Default.aspx trascinandolo dalla Esplora soluzioni nella visualizzazione Struttura della pagina.

Figura 3: Aggiungere il SectionLevelTutorialListing.ascx controllo utente a Default.aspx (fare clic per visualizzare l'immagine a dimensioni intere)

Infine, aggiungere le pagine come voci al Web.sitemap file. In particolare, aggiungere il markup seguente dopo il paging e l'ordinamento con DataList e 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>

Dopo l'aggiornamento Web.sitemap, dedicare qualche minuto alla visualizzazione del sito Web delle esercitazioni tramite un browser. Il menu a sinistra include ora elementi per le esercitazioni di modifica, inserimento ed eliminazione.

La mappa del sito include ora la voce per l'esercitazione sui pulsanti personalizzati

Figura 4: La mappa del sito include ora la voce per l'esercitazione pulsanti personalizzati

Passaggio 2: Aggiunta dell'elenco di categorie

Per questa esercitazione è necessario creare un ripetitore che elenca tutte le categorie insieme a un controllo Show Products LinkButton che, quando si fa clic, visualizza i prodotti della categoria associata in un elenco puntato. Creare prima di tutto un semplice ripetitore che elenca le categorie nel sistema. Per iniziare, aprire la CustomButtons.aspx pagina nella CustomButtonsDataListRepeater cartella . Trascinare un ripetitore dalla casella degli strumenti nella Designer e impostarne la ID proprietà su Categories. Creare quindi un nuovo controllo origine dati dallo smart tag repeater. In particolare, creare un nuovo controllo ObjectDataSource denominato CategoriesDataSource che seleziona i dati dal CategoriesBLL metodo della GetCategories() classe.

Figura 5: Configurare ObjectDataSource per l'uso del CategoriesBLL metodo della GetCategories() classe (fare clic per visualizzare l'immagine a dimensione intera)

A differenza del controllo DataList, per il quale Visual Studio crea un valore predefinito ItemTemplate basato sull'origine dati, i modelli di Repeater devono essere definiti manualmente. Inoltre, i modelli di Repeater devono essere creati e modificati in modo dichiarativo( ovvero non è disponibile alcuna opzione Modifica modelli nello smart tag repeater).

Fare clic sulla scheda Origine nell'angolo inferiore sinistro e aggiungere un oggetto ItemTemplate che visualizza il nome della categoria in un <h3> elemento e la relativa descrizione in un tag di paragrafo. Includere un SeparatorTemplate oggetto che visualizza una regola orizzontale (<hr />) tra ogni categoria. Aggiungere anche un controllo LinkButton con la relativa proprietà impostata su Show Products.Add a LinkButton with its Text property set to Show Products. Dopo aver completato questi passaggi, il markup dichiarativo della pagina avrà un aspetto simile al seguente:

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

La figura 6 mostra la pagina visualizzata tramite un browser. Ogni nome di categoria e descrizione è elencato. Il pulsante Mostra prodotti, quando si fa clic, causa un postback ma non esegue ancora alcuna azione.

Figura 6: Viene visualizzato il nome e la descrizione di ogni categoria, insieme a un pulsante Mostra prodotti (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 3: Esecuzione della logica di Server-Side quando si fa clic su Show Products LinkButton

Ogni volta che si fa clic su un controllo Button, LinkButton o ImageButton all'interno di un modello in un oggetto DataList o Repeater, viene generato un postback e viene generato l'evento DataList o Repeater.ItemCommand Oltre all'evento ItemCommand , il controllo DataList può anche generare un altro evento più specifico se la proprietà del CommandName pulsante è impostata su una delle stringhe riservate ( Delete, Edit, Cancel, Update o Select ), ma l'evento ItemCommand viene sempre generato.

Quando si fa clic su un pulsante all'interno di un oggetto DataList o Repeater, spesso è necessario passare lungo il pulsante su cui è stato fatto clic (nel caso in cui siano presenti più pulsanti all'interno del controllo, ad esempio un pulsante Modifica ed Elimina) e forse alcune informazioni aggiuntive (ad esempio il valore della chiave primaria dell'elemento su cui è stato fatto clic sul pulsante). Button, LinkButton e ImageButton forniscono due proprietà i cui valori vengono passati al ItemCommand gestore eventi:

CommandName una stringa in genere usata per identificare ogni pulsante nel modello
CommandArgument comunemente usato per contenere il valore di alcuni campi dati, ad esempio il valore della chiave primaria

Per questo esempio, impostare la proprietà LinkButton su CommandName ShowProducts e associare il valore CategoryID della chiave primaria del record corrente alla CommandArgument proprietà utilizzando la sintassi CategoryArgument='<%# Eval("CategoryID") %>'databinding . Dopo aver specificato queste due proprietà, la sintassi dichiarativa di LinkButton dovrebbe essere simile alla seguente:

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

Quando si fa clic sul pulsante, si verifica un postback e viene generato l'evento DataList ItemCommand o Repeater. Il gestore eventi viene passato al pulsante s CommandName e CommandArgument ai valori.

Creare un gestore eventi per l'evento Repeater ItemCommand e prendere nota del secondo parametro passato al gestore eventi (denominato e). Questo secondo parametro è di tipo RepeaterCommandEventArgs e ha le quattro proprietà seguenti:

CommandArgument valore della proprietà del CommandArgument pulsante selezionato
CommandName valore della proprietà del CommandName pulsante
CommandSource riferimento al controllo pulsante su cui è stato fatto clic
Item riferimento all'oggetto RepeaterItem che contiene il pulsante selezionato; ogni record associato al ripetitore viene visualizzato come RepeaterItem

Poiché la categoria selezionata viene CategoryID passata tramite la CommandArgument proprietà , è possibile ottenere il set di prodotti associati alla categoria selezionata nel ItemCommand gestore eventi. Questi prodotti possono quindi essere associati a un controllo BulletedList in ItemTemplate (che abbiamo ancora da aggiungere). Tutto ciò che rimane, quindi, consiste nell'aggiungere BulletedList, farvi riferimento nel ItemCommand gestore eventi e associarvi il set di prodotti per la categoria selezionata, che verrà affrontata nel Passaggio 4.

Nota

Al gestore eventi di ItemCommand DataList viene passato un oggetto di tipo DataListCommandEventArgs, che offre le stesse quattro proprietà della RepeaterCommandEventArgs classe .

Passaggio 4: Visualizzazione dei prodotti della categoria selezionata in un elenco puntato

I prodotti della categoria selezionata possono essere visualizzati all'interno di Repeater utilizzando ItemTemplate un numero qualsiasi di controlli. È possibile aggiungere un altro ripetitore annidato, un oggetto DataList, un oggetto DropDownList, un controllo GridView e così via. Poiché si vogliono visualizzare i prodotti come elenco puntato, tuttavia, si userà il controllo BulletedList. Tornare al markup dichiarativo della CustomButtons.aspx pagina, aggiungere un controllo BulletedList a ItemTemplate dopo show products LinkButton. Impostare bulletedLists su IDProductsInCategory. BulletedList visualizza il valore del campo dati specificato tramite la DataTextField proprietà . Poiché a questo controllo saranno associate informazioni sul prodotto, impostare la DataTextField proprietà su ProductName.

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

ItemCommand Nel gestore eventi fare riferimento a questo controllo utilizzando e.Item.FindControl("ProductsInCategory") e associarlo al set di prodotti associati alla categoria selezionata.

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

Prima di eseguire qualsiasi azione nel ItemCommand gestore eventi, è consigliabile controllare prima il valore dell'oggetto in ingresso CommandName. Poiché il ItemCommand gestore eventi viene attivato quando si fa clic su un pulsante, se sono presenti più pulsanti nel modello, usare il CommandName valore per distinguere l'azione da eseguire. Controllare qui CommandName è moot, poiché abbiamo un solo pulsante, ma è una buona abitudine formare. Successivamente, l'oggetto CategoryID della categoria selezionata viene recuperato dalla CommandArgument proprietà . Viene quindi fatto riferimento al controllo BulletedList nel modello e associato ai risultati del ProductsBLL metodo della GetProductsByCategoryID(categoryID) classe .

Nelle esercitazioni precedenti che hanno usato i pulsanti all'interno di un oggetto DataList, ad esempio Una panoramica della modifica e dell'eliminazione di dati in DataList, è stato determinato il valore della chiave primaria di un determinato elemento tramite la DataKeys raccolta. Anche se questo approccio funziona bene con DataList, il Repeater non dispone di una DataKeys proprietà . È invece necessario usare un approccio alternativo per fornire il valore della chiave primaria, ad esempio tramite la proprietà del CommandArgument pulsante o assegnando il valore della chiave primaria a un controllo Web Etichetta nascosto all'interno del modello e leggendo il relativo valore nel ItemCommand gestore eventi usando e.Item.FindControl("LabelID").

Dopo aver completato il ItemCommand gestore eventi, provare questa pagina in un browser. Come illustrato nella figura 7, facendo clic sul collegamento Mostra prodotti viene generato un postback e vengono visualizzati i prodotti per la categoria selezionata in un elenco puntato. Inoltre, si noti che queste informazioni sul prodotto rimangono, anche se si fa clic su altre categorie Mostra collegamenti prodotti.

Nota

Se si desidera modificare il comportamento di questo report, in modo che gli unici prodotti di una categoria siano elencati alla volta, è sufficiente impostare la proprietà del EnableViewState controllo BulletedList su False.

Figura 7: Un elenco puntato viene usato per visualizzare i prodotti della categoria selezionata (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

I controlli DataList e Repeater possono includere qualsiasi numero di pulsanti, linkbutton o imagebutton all'interno dei modelli. Tali pulsanti, quando si fa clic, generano un postback e generano l'evento ItemCommand . Per associare un'azione lato server personalizzata a un pulsante da fare clic, creare un gestore eventi per l'evento ItemCommand . In questo gestore eventi controllare prima il valore in ingresso CommandName per determinare quale pulsante è stato fatto clic. Altre informazioni possono essere fornite facoltativamente tramite la proprietà del CommandArgument pulsante.

Programmazione felice!

Informazioni sull'autore

Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, ha lavorato con le tecnologie Microsoft Web dal 1998. Scott lavora come consulente indipendente, allenatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2,0 in 24 Ore. Può essere raggiunto a mitchell@4GuysFromRolla.com. o tramite il suo blog, che può essere trovato in http://ScottOnWriting.NET.

Grazie speciali

Questa serie di esercitazioni è stata esaminata da molti revisori utili. Il revisore principale per questa esercitazione è stato Dennis Patterson. Interessati a esaminare i prossimi articoli MSDN? In tal caso, lasciami una riga in mitchell@4GuysFromRolla.com.

Avanti

Condividi tramite