Przyciski niestandardowe w kontrolkach DataList i Repeater (C#)

2025-05-05

W tym samouczku utworzymy interfejs, który używa repeatera do wyświetlania kategorii w systemie, a każda kategoria udostępnia przycisk umożliwiający wyświetlenie skojarzonych produktów przy użyciu kontrolki BulletedList.

Wprowadzenie

W ciągu ostatnich siedmiu samouczków dotyczących elementów DataList i Repeater utworzyliśmy przykłady tylko do odczytu, a także edytowaliśmy i usuwaliśmy przykłady. Aby ułatwić możliwość edycji i usuwania w komponencie DataList, dodaliśmy przyciski w DataList ItemTemplate, które po kliknięciu powodowały postback i wywoływały zdarzenie DataList zgodne z właściwością przycisku CommandName. Na przykład dodanie przycisku do obiektu ItemTemplate z wartością właściwości CommandName jako Edit powoduje, że kontrolka DataList wyzwala EditCommand podczas ogłaszania zwrotnego; dodanie z wartością CommandName jako Delete wywołuje DeleteCommand.

Oprócz przycisków Edytuj i Usuń kontrolki DataList i Repeater mogą również zawierać elementy typu Button, LinkButton lub ImageButton, które po kliknięciu wykonują niestandardową logikę po stronie serwera. W tym samouczku utworzymy interfejs, który używa repeatera do wyświetlania listy kategorii w systemie. Dla każdej kategorii Repeater będzie miał przycisk, który pokaże powiązane z kategorią produkty przy użyciu kontrolki BulletedList (patrz Rysunek 1).

Rysunek 1. Kliknięcie linku Pokaż produkty powoduje wyświetlenie kategorii produktów na liście punktowanej (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 1: Dodawanie stron internetowych samouczka dotyczącego niestandardowego przycisku.

Zanim przyjrzymy się sposobie dodawania przycisku niestandardowego, najpierw zajmijmy się chwilą, aby utworzyć strony ASP.NET w projekcie witryny internetowej, które będą potrzebne w tym samouczku. Zacznij od dodania nowego folderu o nazwie CustomButtonsDataListRepeater. Następnie dodaj następujące dwie strony ASP.NET do tego folderu, aby skojarzyć każdą stronę ze stroną wzorcową Site.master :

Default.aspx
CustomButtons.aspx

Dodaj strony ASP.NET dla niestandardowych samouczków Buttons-Related

Rysunek 2. Dodaj strony ASP.NET dla samouczków niestandardowych Buttons-Related

Podobnie jak w innych folderach, Default.aspx w folderze CustomButtonsDataListRepeater wyświetli listę samouczków w swojej sekcji. Pamiętaj, że kontrolka SectionLevelTutorialListing.ascx użytkownika udostępnia tę funkcję. Dodaj tę kontrolkę użytkownika do Default.aspx, przeciągając ją z Eksploratora rozwiązań na stronę w Widoku projektowania.

Rysunek 3. Dodawanie kontrolki SectionLevelTutorialListing.ascx użytkownika do Default.aspx (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Na koniec dodaj strony jako wpisy do Web.sitemap pliku. W szczególności dodaj następujący znacznik po stronicowaniu i sortowaniu za pomocą elementu DataList i 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>

Po zaktualizowaniu Web.sitemap programu, poświęć chwilę, aby wyświetlić witrynę internetową samouczków za pośrednictwem przeglądarki. Menu po lewej stronie zawiera teraz elementy do edycji, wstawiania i usuwania samouczków.

Mapa witryny teraz zawiera wpis dotyczący samouczka o przyciskach niestandardowych

Rysunek 4: Mapa witryny zawiera teraz wpis dla samouczka dotyczącego przycisków dostosowanych

Krok 2. Dodawanie listy kategorii

Na potrzeby tego samouczka musimy utworzyć komponent o nazwie "Repeater", który wyświetla wszystkie kategorie wraz z przyciskiem "Pokaż produkty". Po kliknięciu, produkty związane z daną kategorią są prezentowane na wypunktowanej liście. Najpierw utwórzmy prosty repeater, który wyświetla listę kategorii w systemie. Rozpocznij od otwarcia strony CustomButtons.aspx w folderze CustomButtonsDataListRepeater. Przeciągnij Repeater z przybornika do obszaru projektowania i ustaw jego ID właściwość na Categories. Następnie utwórz nową kontrolkę źródła danych na podstawie inteligentnego tagu Repeater s. W szczególności utwórz nową kontrolkę ObjectDataSource o nazwie CategoriesDataSource , która wybiera swoje dane z CategoriesBLL metody klasy s GetCategories() .

Rysunek 5: Skonfiguruj ObjectDataSource do użycia metody klasy CategoriesBLLGetCategories() (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)

W przeciwieństwie do kontrolki DataList, dla której program Visual Studio tworzy wartość domyślną ItemTemplate na podstawie źródła danych, szablony repeaterów muszą być definiowane ręcznie. Ponadto szablony repeaterów muszą być tworzone i edytowane deklaratywnie (czyli nie ma opcji Edytuj szablony w tagu inteligentnym Repeater s).

Kliknij kartę Źródło w lewym dolnym rogu i dodaj element ItemTemplate, który wyświetla nazwę kategorii w elemencie <h3> oraz jego opis w tagu akapitu. Dołącz SeparatorTemplate, aby wyświetlać poziomą linię (<hr />) pomiędzy poszczególnymi kategoriami. Dodaj również LinkButton i ustaw jego właściwość Text na Pokaż produkty. Po wykonaniu tych kroków znacznik deklaratywny Twojej strony powinien wyglądać następująco:

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

Rysunek 6 przedstawia stronę po wyświetleniu za pośrednictwem przeglądarki. Na liście znajduje się nazwa i opis każdej kategorii. Przycisk Pokaż Produkty po kliknięciu powoduje odświeżenie, ale nie wykonuje żadnej czynności.

Rysunek 6. Wyświetlana jest nazwa i opis każdej kategorii wraz z przyciskiem LinkButton Pokaż produkty (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 3. Wykonywanie logiki Server-Side po kliknięciu przycisku LinkButton Pokaż produkty

Za każdym razem, gdy klikniesz przycisk, linkbutton lub element ImageButton w szablonie w elemencie DataList lub Repeater, nastąpi powrót, a zdarzenie DataList lub Repeater zostanie ItemCommand wyzwolone. Oprócz ItemCommand zdarzenia kontrolka DataList może także wywołać inne, bardziej szczegółowe zdarzenie, jeśli właściwość przycisku CommandName zostanie ustawiona na jedną z zastrzeżonych wartości (Delete, Edit, Cancel, Update lub Select), jednak ItemCommand zdarzenie jest zawsze wyzwalane.

Gdy kliknięty jest przycisk w kontrolce DataList lub Repeater, często potrzebujemy przekazać informację, który dokładnie przycisk został kliknięty (jeśli w kontrolce znajduje się wiele przycisków, na przykład Edytuj i Usuń), a także być może dodatkowe informacje (takie jak wartość klucza głównego elementu, którego przycisk został kliknięty). Przycisk, LinkButton i ImageButton udostępniają dwie właściwości, których wartości są przekazywane do programu obsługi zdarzeń ItemCommand :

CommandName ciąg używany zazwyczaj do identyfikowania każdego przycisku w szablonie
CommandArgument często używane do przechowywania wartości niektórych pól danych, takich jak wartość klucza podstawowego

W tym przykładzie ustaw właściwość CommandName dla LinkButton na ShowProducts i powiąż wartość klucza podstawowego bieżącego rekordu CategoryID z właściwością CommandArgument przy użyciu składni CategoryArgument='<%# Eval("CategoryID") %>' powiązania danych. Po określeniu tych dwóch właściwości składnia deklaratywna elementu LinkButton powinna wyglądać następująco:

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

Po kliknięciu przycisku nastąpi postback i zostanie wywołane zdarzenie ItemCommand DataList lub Repeater. Procedura obsługi zdarzeń otrzymuje wartości przycisku CommandName i CommandArgument.

Utwórz procedurę obsługi zdarzeń dla zdarzenia repeatera ItemCommand i zanotuj drugi parametr przekazany do programu obsługi zdarzeń (o nazwie e). Ten drugi parametr jest typu RepeaterCommandEventArgs i ma następujące cztery właściwości:

CommandArgumentwartość właściwości klikniętego przycisku CommandArgument
CommandNamewartość właściwości przycisku s CommandName
CommandSource odwołanie do kontrolki przycisku, która została kliknięta
Item odwołanie do RepeaterItem obiektu zawierającego kliknięty przycisk ; każdy rekord powiązany z repeaterem jest manifestowany jako RepeaterItem

Ponieważ wybrana kategoria jest CategoryID przekazywana za pośrednictwem właściwości CommandArgument, możemy pobrać zestaw produktów skojarzonych z wybraną kategorią w obsłudze zdarzenia ItemCommand. Te produkty można następnie powiązać z kontrolką BulletedList w elemencie ItemTemplate (którego jeszcze nie dodaliśmy). Pozostaje więc dodanie listy BulletedList, odwołanie do niej w ItemCommand procedurze obsługi zdarzeń i powiązanie z nim zestawu produktów dla wybranej kategorii, którą zajmiemy się w kroku 4.

Uwaga / Notatka

Procedura obsługi zdarzeń dla DataList ItemCommand jest przekazywana obiektowi typu DataListCommandEventArgs, który oferuje te same cztery właściwości, co klasa RepeaterCommandEventArgs.

Krok 4. Wyświetlanie wybranych produktów kategorii na liście punktowanej

Wybrane produkty z kategorii można wyświetlić w elemencie Repeater przy użyciu dowolnej liczby sterowników. Możemy dodać kolejny zagnieżdżony Repeater, DataList, DropDownList, GridView i tak dalej. Ponieważ chcemy wyświetlić produkty jako listę punktowaną, użyjemy jednak kontrolki BulletedList. Wracając do strony CustomButtons.aspx z deklaratywną składnią, dodaj kontrolkę BulletedList do ItemTemplate po kontrolce LinkButton Pokaż produkty. Ustaw parametr BulletedLists s ID na ProductsInCategory. Lista BulletedList wyświetla wartość pola danych określonego za pośrednictwem właściwości DataTextField. Ponieważ ta kontrolka będzie mieć powiązane informacje o produkcie, ustaw właściwość DataTextField na wartość ProductName.

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

W procedurze obsługi zdarzeń ItemCommand należy odwołać się do tej kontrolki przy użyciu metody e.Item.FindControl("ProductsInCategory") i powiązać ją z zestawem produktów skojarzonych z wybraną kategorią.

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

Przed wykonaniem jakiejkolwiek czynności w procedurze obsługi zdarzeń ItemCommand, należy najpierw sprawdzić wartość przychodzącego elementu CommandName. Ponieważ program obsługi zdarzeń jest uruchamiany po kliknięciu ItemCommanddowolnego przycisku, jeśli w szablonie istnieje wiele przycisków, użyj CommandName wartości , aby określić, jakie działania należy podjąć. Sprawdzanie CommandName tutaj jest nieistotne, ponieważ mamy tylko jeden przycisk, ale warto to robić dla wyrobienia dobrych nawyków. CategoryID Następnie element wybranej kategorii zostanie pobrany z CommandArgument właściwości . Kontrolka BulletedList w szablonie jest następnie przywoływana i powiązana z wynikami metody klasy ProductsBLL s GetProductsByCategoryID(categoryID).

W poprzednich samouczkach, które używały przycisków w elemencie DataList, takich jak Przegląd edytowania i usuwania danych w liście DataList, ustaliliśmy wartość klucza podstawowego danego elementu za pośrednictwem DataKeys kolekcji. Chociaż takie podejście działa dobrze w przypadku elementu DataList, Repeater nie ma właściwości DataKeys. Zamiast tego musimy użyć alternatywnego podejścia do podawania wartości klucza podstawowego, na przykład za pomocą właściwości przycisku CommandArgument lub przez przypisanie wartości klucza podstawowego do ukrytej kontrolki etykiety Sieci Web w szablonie i odczytanie tej wartości z powrotem w procedurze obsługi zdarzeń ItemCommand przy użyciu metody e.Item.FindControl("LabelID").

Po zakończeniu obsługi zdarzeń ItemCommand poświęć chwilę na przetestowania tej strony w przeglądarce. Jak pokazano na rysunku 7, kliknięcie linku Pokaż produkty powoduje powrót i wyświetlenie produktów dla wybranej kategorii w liście punktowanej. Ponadto należy pamiętać, że te informacje o produkcie pozostają, nawet jeśli inne kategorie Pokaż linki produktów są klikane.

Uwaga / Notatka

Jeśli chcesz zmodyfikować zachowanie tego raportu, tak aby wyświetlane były wyłącznie produkty jednej kategorii na raz, wystarczy ustawić właściwość kontrolki EnableViewState BulletedList na False.

Rysunek 7. Lista punktowana służy do wyświetlania produktów wybranej kategorii (kliknij, aby wyświetlić obraz pełnowymiarowy)

Podsumowanie

Kontrolki DataList i Repeater mogą zawierać dowolną liczbę przycisków, w tym LinkButton lub ImageButton, w swoich szablonach. Takie przyciski, po kliknięciu, powodują odświeżenie strony i zgłaszają zdarzenie ItemCommand. Aby powiązać niestandardową akcję po stronie serwera z kliknięciem przycisku, utwórz procedurę obsługi zdarzeń dla ItemCommand. W tym programie obsługi zdarzeń najpierw sprawdź wartość przychodzącą CommandName , aby określić, który przycisk został kliknięty. Dodatkowe informacje można opcjonalnie dostarczyć za pomocą właściwości przycisku.CommandArgument

Szczęśliwe programowanie!

Informacje o autorze

Scott Mitchell, autor siedmiu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 2.0 w ciągu 24 godzin. Można go uzyskać pod adresem mitchell@4GuysFromRolla.com.

Specjalne podziękowania

Ta seria samouczków została omówiona przez wielu przydatnych recenzentów. Główny recenzent tego samouczka to Dennis Patterson. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, napisz do mnie na adres mitchell@4GuysFromRolla.com.

Dalej

Udostępnij za pośrednictwem