Wyświetlanie danych za pomocą kontrolek DataList i Repeater (VB)

Autor: Scott Mitchell

Pobierz plik PDF

W poprzednich samouczkach użyliśmy kontrolki GridView do wyświetlania danych. Począwszy od tego samouczka, przyjrzymy się tworzeniu typowych wzorców raportowania za pomocą kontrolek DataList i Repeater, począwszy od podstaw wyświetlania danych za pomocą tych kontrolek.

Wprowadzenie

We wszystkich przykładach z ostatnich 28 samouczków, jeśli musieliśmy wyświetlić wiele rekordów ze źródła danych, zwróciliśmy się do kontrolki GridView. Element GridView renderuje wiersz dla każdego rekordu w źródle danych, wyświetlając pola danych rekordu w kolumnach. Element GridView sprawia, że wyświetlanie, przeglądanie stron, sortowanie, edytowanie i usuwanie danych jest proste, ale jego wygląd jest nieco kanciasty. Co więcej, znaczniki odpowiedzialne za strukturę GridView są stałe i zawierają kod HTML <table> z wierszem tabeli (<tr>) dla każdego rekordu i komórką tabeli (<td>) dla każdego pola.

Aby zapewnić większy stopień dostosowywania wyglądu i renderowanego kodu znaczników podczas wyświetlania wielu rekordów, ASP.NET 2.0 oferuje kontrolki DataList i Repeater, które oba były również dostępne w ASP.NET wersji 1.x. Kontrolki DataList i Repeater renderują zawartość przy użyciu szablonów, a nie pól BoundFields, CheckBoxFields, ButtonFields itd. Podobnie jak w przypadku kontrolki GridView, lista DataList jest renderowana jako kod HTML <table>, ale umożliwia wyświetlanie wielu rekordów źródła danych w wierszu tabeli. Z drugiej strony Repeater nie renderuje żadnych dodatkowych znaczników poza tymi, które jawnie określisz, i jest idealnym kandydatem, gdy potrzebujesz dokładnej kontroli nad emitowanymi znacznikami.

W ciągu najbliższych tuzinów samouczków przyjrzymy się tworzeniu typowych wzorców raportowania za pomocą kontrolek DataList i Repeater, począwszy od podstaw wyświetlania danych przy użyciu tych szablonów kontrolek. Zobaczymy, jak sformatować te kontrolki, jak zmienić układ rekordów źródeł danych w DataList, typowe scenariusze główny/szczegóły, jak edytować i usuwać dane, jak stronicować rekordy itd.

Krok 1. Dodawanie stron internetowych samouczka dotyczącego DataList i Repeater.

Przed rozpoczęciem tego samouczka najpierw poświęćmy chwilę na dodanie stron ASP.NET, które będą potrzebne w tym oraz w kilku kolejnych samouczkach dotyczących wyświetlania danych za pomocą elementów DataList i Repeater. Zacznij od utworzenia nowego folderu w projekcie o nazwie DataListRepeaterBasics. Następnie dodaj do tego folderu następujące pięć ASP.NET stron, które zostały skonfigurowane do korzystania ze strony Site.masterwzorcowej:

• Default.aspx
• Basics.aspx
• Formatting.aspx
• RepeatColumnAndDirection.aspx
• NestedControls.aspx

Rysunek 1: Utwórz DataListRepeaterBasics folder i dodaj strony ASP.NET samouczka

Otwórz stronę Default.aspx i przeciągnij element sterujący SectionLevelTutorialListing.ascx użytkownika z folderu UserControls na powierzchnię projektową. Ta kontrolka użytkownika, którą stworzyliśmy w samouczku Strony wzorcowe i nawigacja, wylicza mapę witryny i wyświetla samouczki z bieżącej sekcji na wypunktowanej liście.

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

Aby lista punktowana wyświetlała samouczki DataList i Repeater, które utworzymy, musimy dodać je do mapy witryny. Web.sitemap Otwórz plik i dodaj następujący znacznik po tagu Dodawanie niestandardowych przycisków w węźle mapy witryny:

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

Rysunek 3. Aktualizowanie mapy witryny w celu uwzględnienia nowych stron ASP.NET

Krok 2. Wyświetlanie informacji o produkcie za pomocą elementu DataList

Podobnie jak w kontrolce FormView, wyjściowe dane renderowane przez kontrolkę DataList zależą od szablonów, a nie od elementów takich jak BoundFields, CheckBoxFields itd. W przeciwieństwie do FormView, DataList jest przeznaczony do wyświetlania zestawu rekordów, a nie pojedynczego. Zacznijmy ten samouczek od omówienia powiązania informacji o produkcie z elementem DataList. Zacznij od otwarcia strony Basics.aspx w folderze DataListRepeaterBasics. Następnie przeciągnij "DataList" z przybornika do projektanta. Jak pokazano na rysunku 4, przed określeniem szablonów DataList projektant wyświetla go jako szare pole.

Rysunek 4. Przeciągnij listę danych z przybornika do projektanta (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Z tagu inteligentnego DataList dodaj nowy obiekt ObjectDataSource i skonfiguruj go tak, aby korzystał z ProductsBLL metody klasy s GetProducts . Ponieważ w tym samouczku tworzymy listę tylko do odczytu typu DataList, ustaw listę rozwijaną na (Brak) na kartach INSERT, UPDATE i DELETE kreatora.

Rysunek 5. Wybranie opcji utworzenia nowego obiektuDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 6. Konfigurowanie obiektu ObjectDataSource do używania ProductsBLL klasy (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 7. Pobieranie informacji o wszystkich produktach przy użyciu GetProducts metody (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po skonfigurowaniu obiektu ObjectDataSource i skojarzeniu go z listą DataList za pomocą tagu inteligentnego program Visual Studio automatycznie utworzy obiekt ItemTemplate w tabeli DataList, która wyświetla nazwę i wartość każdego pola danych zwróconego przez źródło danych (zobacz znacznik poniżej). Ten domyślny ItemTemplate wygląd jest identyczny z wyglądem szablonów automatycznie tworzonych podczas wiązania źródła danych z kontenerem FormView za pomocą Projektanta.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Zróbmy przerwę, aby poprawić wygląd tego szablonu. Zamiast wyświetlać wszystkie pola danych, wyświetlmy tylko nazwę produktu, dostawcę, kategorię, ilość na jednostkę i cenę jednostkową. Ponadto wyświetlmy nazwę w nagłówku <h4> i zorganizujmy pozostałe pola, używając <table> poniżej nagłówka.

Aby wprowadzić te zmiany, możesz użyć funkcji edycji szablonu w Projektancie, klikając link Edytuj szablony w tagu inteligentnym DataList, lub możesz zmodyfikować szablon ręcznie, korzystając ze składni deklaratywnej strony. Jeśli używasz opcji Edytuj szablony w projektancie szablonów, twój wynikowy kod znaczników może nie być dokładnie zgodny z tym, co jest podane poniżej, ale przeglądając w przeglądarce, powinno wyglądać bardzo podobnie do zrzutu ekranu pokazanego na Rysunku 8.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Utrzymanie kontrolek Label w sieci Web oferuje jednak dwie zalety. Po pierwsze, zapewnia łatwiejszy sposób formatowania danych na podstawie danych, jak zobaczymy w następnym samouczku. Po drugie opcja Edytuj szablony w projektancie nie wyświetla deklaratywnej składni powiązania danych, która pojawia się poza kontrolką sieci Web. Zamiast tego interfejs Edytowanie szablonów został zaprojektowany tak, aby ułatwić pracę ze statycznymi znacznikami i kontrolkami Web i zakłada, że wszystkie powiązania danych zostaną wykonane za pomocą okna dialogowego Edytowanie powiązań danych, które jest dostępne z tagów inteligentnych kontrolek Web.

W związku z tym podczas pracy z listą DataList, która zapewnia opcję edytowania szablonów w Projektancie, wolę używać kontrolek serwera typu Label, aby zawartość była dostępna za pośrednictwem interfejsu edycji szablonów. Jak zobaczymy wkrótce, repeater wymaga edytowania zawartości szablonu z widoku źródła. W związku z tym podczas tworzenia szablonów repeatera często pomijam kontrolki sieciowe typu Label, chyba że wiem, że muszę sformatować wygląd tekstów powiązanych z danymi na podstawie logiki programowej.

Rysunek 8. Dane wyjściowe poszczególnych produktów są renderowane przy użyciu elementu DataList s ItemTemplate (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 3. Poprawianie wyglądu elementu DataList

Podobnie jak w przypadku kontrolki GridView, lista DataList oferuje wiele właściwości związanych ze stylem, takich jak Font, ForeColor, BackColorCssClassItemStyleAlternatingItemStylei SelectedItemStyletak dalej. Podczas pracy z kontrolkami GridView i DetailsView utworzyliśmy pliki skóry w DataWebControls motywie, które wstępnie zdefiniowały CssClass właściwości tych dwóch kontrolek i CssClass właściwość dla kilku ich podwłaściwości (RowStyle, itd HeaderStyle). Zróbmy to samo dla elementu DataList.

Zgodnie z opisem w samouczku Wyświetlanie danych za pomocą ObjectDataSource, plik Skin określa domyślne właściwości związane z wyglądem dla kontrolki sieci Web. Motyw to kolekcja plików Skin, CSS, obrazów i JavaScript, które definiują konkretny wygląd i działanie witryny internetowej. W samouczku Wyświetlanie danych za pomocą obiektu ObjectDataSource utworzyliśmy DataWebControls Motyw (zaimplementowany jako folder w App_Themes folderze), który zawiera obecnie dwa pliki stylizacji — GridView.skin i DetailsView.skin. Dodajmy trzeci plik skin, aby określić wstępnie zdefiniowane ustawienia stylu dla elementu DataList.

Aby dodać plik Skin, kliknij prawym przyciskiem myszy folder App_Themes/DataWebControls, wybierz opcję Dodaj nowy element i wybierz opcję Plik Skin z listy. Nazwij plik DataList.skin.

Rysunek 9. Tworzenie nowego pliku skóry o nazwie DataList.skin (kliknij, aby wyświetlić obraz pełnowymiarowy)

Użyj następującego znacznika DataList.skin dla pliku:

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

Te ustawienia przypisują te same klasy CSS do odpowiednich właściwości DataList, które były używane z kontrolkami GridView i DetailsView. Klasy CSS używane tutaj DataWebControlStyle, AlternatingRowStyle, RowStylei tak dalej są zdefiniowane w Styles.css pliku i zostały dodane w poprzednich samouczkach.

Po dodaniu tego pliku Skin wygląd DataList jest aktualizowany w Designerze (może być konieczne odświeżenie widoku Designera, aby zobaczyć efekty nowego pliku Skin; z menu View wybierz opcję Odśwież). Jak pokazano na rysunku 10, każdy naprzemienny produkt ma tło w kolorze jasnoróżowym.

Rysunek 10. Tworzenie nowego pliku skóry o nazwie DataList.skin (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 4: Eksplorowanie innych szablonów DataList

Oprócz elementu ItemTemplate, DataList obsługuje sześć innych opcjonalnych szablonów:

• HeaderTemplate jeśli zostanie podany, dodaje wiersz nagłówka do danych wyjściowych i jest używany do renderowania tego wiersza
• AlternatingItemTemplate służy do renderowania elementów naprzemiennych
• SelectedItemTemplatesłuży do renderowania wybranego elementu; wybrany element jest elementem, którego indeks odpowiada właściwości DataList SelectedIndex
• EditItemTemplate służy do renderowania edytowanego elementu
• SeparatorTemplate jeśli jest podany, dodaje separator między każdymi elementami i służy do renderowania tego separatora.
• FooterTemplate — jeśli podano, dodaje wiersz stopki do danych wyjściowych i jest używany do renderowania tego wiersza

Podczas określania HeaderTemplate lub FooterTemplate, DataList dodaje dodatkowy wiersz nagłówka lub stopki do renderowanego wyjścia. Podobnie jak w przypadku wierszy nagłówka i stopki kontrolki GridView, nagłówek i stopka w kontrolce DataList nie są powiązane z danymi. W związku z tym każda składnia powiązania danych w obiekcie HeaderTemplate lub FooterTemplate , która próbuje uzyskać dostęp do powiązanych danych, zwróci pusty ciąg.

W naszym przykładzie tytuł "Informacje o produkcie" zostanie wyświetlony na górze wyników DataList w nagłówku <h3>. Aby to osiągnąć, dodaj element HeaderTemplate z odpowiednim znacznikiem. W Projektancie można to zrobić, klikając link Edytuj szablony w inteligentnym tagu DataList, wybierając szablon nagłówka z listy rozwijanej i wpisując tekst po wybraniu opcji Nagłówek 3 z listy rozwijanej stylu (zobacz Rysunek 11).

Rysunek 11. Dodawanie elementu HeaderTemplate z informacjami o produkcie tekstowym (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Alternatywnie można to dodać deklaratywnie, wprowadzając następujący znacznik w tagach <asp:DataList> :

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

Aby dodać trochę miejsca między poszczególnymi listami produktów, dodajmy element SeparatorTemplate zawierający wiersz między poszczególnymi sekcjami. Tag reguły poziomej (<hr>), dodaje taki podział. Utwórz element SeparatorTemplate tak, aby miał następujący znacznik:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Po dodaniu tej funkcji podczas przeglądania strony za pośrednictwem przeglądarki powinna ona wyglądać podobnie do rysunku 12. Zanotuj wiersz nagłówka i wiersz między poszczególnymi listami produktów.

Rysunek 12. Lista danych zawiera wiersz nagłówka i regułę poziomą między poszczególnymi produktami (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 5. Renderowanie określonych znaczników za pomocą kontrolki repeater

Jeśli wyświetlisz opcję "Pokaż źródło" w przeglądarce podczas przeglądania przykładu DataList z rysunku 12, zobaczysz, że element DataList generuje kod HTML <table>, który zawiera wiersz tabeli <tr> z pojedynczą komórką tabeli <td> dla każdego elementu powiązanego z DataList. Wynik ten jest w rzeczywistości identyczny z tym, co wyemitowałaby kontrolka GridView z pojedynczym TemplateField. Jak zobaczymy w przyszłym samouczku, DataList umożliwia dalsze dostosowywanie generowanych danych, dzięki czemu możemy wyświetlać wiele rekordów źródła danych w jednym wierszu tabeli.

Co zrobić, choć, jeśli nie chcesz generować kodu HTML <table>? Aby uzyskać całkowitą i pełną kontrolę nad znacznikami wygenerowanymi przez kontrolkę sieci Web danych, musimy użyć kontrolki Repeater. Podobnie jak w przypadku elementu DataList, repeater jest konstruowany na podstawie szablonów. Repeater oferuje jednak tylko następujące pięć szablonów:

• HeaderTemplate jeśli podano, dodaje określony znacznik przed elementami
• ItemTemplate używane do renderowania elementów
• AlternatingItemTemplate jeśli jest dostarczona, służy do wyświetlania przemiennych elementów
• SeparatorTemplate jeśli zostanie podany, dodaje określony znacznik między poszczególnymi elementami
• FooterTemplate - jeśli podano, dodaje określony znacznik po elementach

W ASP.NET 1.x kontrolka Repeater była często używana do wyświetlania listy wypunktowanej, której dane pochodzą ze źródła danych. W takim przypadku HeaderTemplate i FooterTemplates zawierałyby odpowiednio tagi otwierające i zamykające <ul>, a element ItemTemplate zawierałby elementy <li> ze składnią powiązania danych. To podejście można nadal używać w ASP.NET 2.0, jak pokazano w dwóch przykładach w samouczku Strony wzorcowe i Nawigacja po witrynie:

• Na stronie głównej Site.master użyto elementu Repeater do wyświetlania listy wypunktowanej zawartości mapy witryny najwyższego poziomu (raportowanie podstawowe, filtrowanie raportów, dostosowywanie formatowania itd.); inny Repeater, zagnieżdżony, był używany do wyświetlania sekcji podrzędnych wobec sekcji najwyższego poziomu
• W SectionLevelTutorialListing.ascx użyto elementu Repeater do wyświetlenia listy wypunktowanej podrzędnych sekcji bieżącego fragmentu mapy witryny.

Repeater służy jako uniwersalna kontrolka danych sieci Web. Jeśli nie ma istniejącej kontrolki, która generuje wymagany znacznik, można użyć kontrolki Repeater. Aby zilustrować użycie repeatera, zobaczmy listę kategorii wyświetlanych powyżej listy danych informacji o produkcie utworzonej w kroku 2. W szczególności załóżmy, że kategorie są wyświetlane w jednym wierszu kodu HTML <table>, a każda kategoria jest wyświetlana jako kolumna w tabeli.

Aby to osiągnąć, zacznij od przeciągnięcia kontrolki Repeater z przybornika do Projektanta nad listą DataList informacji o produkcie. Podobnie jak w przypadku elementu DataList, repeater początkowo jest wyświetlany jako szare pole, dopóki jego szablony nie zostaną zdefiniowane.

Rysunek 13. Dodawanie repeatera do projektanta (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

W znaczniku inteligentnym repeatera jest dostępna tylko jedna opcja: Wybierz źródło danych. Wybierz opcję utworzenia nowego obiektu ObjectDataSource i skonfiguruj go tak, aby korzystała CategoriesBLL z metody klasy s GetCategories .

Rysunek 14. Tworzenie nowego obiektu ObjectDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 15. Konfigurowanie obiektu ObjectDataSource do używania CategoriesBLL klasy (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 16. Pobieranie informacji o wszystkich kategoriach przy użyciu GetCategories metody (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

W przeciwieństwie do elementu DataList program Visual Studio nie tworzy automatycznie elementu ItemTemplate dla repeatera po powiązaniu go ze źródłem danych. Ponadto szablony Repeater nie mogą być konfigurowane za pomocą Designera i muszą być określone deklaratywnie.

Aby wyświetlić kategorie jako pojedynczy wiersz <table> z kolumną dla każdej kategorii, potrzebujemy modułu Repeater, aby emitować znaczniki podobne do następujących:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

<td>Category X</td> Ponieważ tekst jest częścią powtarzaną, zostanie on wyświetlony w ItemTemplate repeatera. Znacznik, który pojawia się przed — <table><tr> — zostanie umieszczony w HeaderTemplate, podczas gdy końcowy znacznik — </tr></table> — zostanie umieszczony w elemencie FooterTemplate. Aby wprowadzić te ustawienia szablonu, przejdź do deklaratywnej części strony ASP.NET, klikając przycisk Źródło w lewym dolnym rogu i wpisz następującą składnię:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Repeater emituje dokładny znacznik określony przez jego szablony, nic więcej, nic mniej. Rysunek 17 przedstawia dane wyjściowe repeatera po wyświetleniu za pośrednictwem przeglądarki.

Rysunek 17. Pojedynczy wiersz HTML <table> wyświetla każdą kategorię w oddzielnej kolumnie (kliknij, aby wyświetlić pełnowymiarowy obraz)

Krok 6. Poprawianie wyglądu repeatera

Ponieważ repeater emituje dokładnie znaczniki określone przez jego szablony, nie powinno być zaskoczeniem, że nie ma właściwości związanych ze stylem dla repeatera. Aby zmienić wygląd zawartości wygenerowanej przez repeater, musimy ręcznie dodać wymaganą zawartość HTML lub CSS bezpośrednio do szablonów repeatera.

W naszym przykładzie zastosujmy naprzemienne kolory tła dla kolumn kategorii, podobnie jak w naprzemiennych wierszach na liście DataList. Aby to osiągnąć, musimy przypisać klasę RowStyle CSS do każdego elementu Repeater oraz klasę AlternatingRowStyle CSS do każdego naprzemiennego elementu Repeater za pomocą szablonów ItemTemplate i AlternatingItemTemplate, w następujący sposób:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Dodajmy również wiersz nagłówka do danych wyjściowych z tekstem Kategorie produktów. Ponieważ nie wiemy, z ilu kolumn będzie się składać nasz wynikowy <table>, najprostszym sposobem wygenerowania wiersza nagłówka, który gwarantuje, że obejmuje wszystkie kolumny, jest użycie dwóch<table>,ów. Pierwszy <table> będzie zawierać dwa wiersze wiersza nagłówka i wiersz, który będzie zawierać drugi, pojedynczy wiersz <table> zawierający kolumnę dla każdej kategorii w systemie. Oznacza to, że chcemy wygenerować następujący znacznik:

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

HeaderTemplate Następujące elementy oraz FooterTemplate skutkują w pożądanym markup.

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Rysunek 18 przedstawia repeater po wprowadzeniu tych zmian.

Kolumny kategorii mają naprzemienne kolory tła i zawierają wiersz nagłówka.

Rysunek 18: Kolumny kategorii mają naprzemienne kolory tła i zawierają wiersz nagłówka (kliknij, aby wyświetlić pełnowymiarowy obraz)

Podsumowanie

Chociaż kontrolka GridView ułatwia wyświetlanie, edytowanie, usuwanie, sortowanie i stronicowanie danych, jej wygląd jest jednak bardzo prostokątny i w stylu siatki. Aby uzyskać większą kontrolę nad wyglądem, musimy włączyć kontrolki DataList lub Repeater. Oba te kontrolki wyświetlają zestaw rekordów przy użyciu szablonów zamiast elementów BoundFields, CheckBoxFields itd.

Element DataList jest renderowany jako kod HTML <table> , który domyślnie wyświetla każdy rekord źródła danych w jednym wierszu tabeli, podobnie jak kontrolka GridView z pojedynczym polem szablonu. Jak zobaczymy w przyszłym samouczku, lista DataList jednak zezwala na wyświetlanie wielu rekordów w wierszu tabeli. Z drugiej strony repeater ściśle emituje znaczniki określone w jego szablonach; nie dodaje żadnych dodatkowych znaczników i dlatego jest często używany do wyświetlania danych w elementach HTML innych niż <table> (takich jak na liście punktowanej).

Chociaż DataList i Repeater oferują większą elastyczność w wygenerowanym wyniku, brakuje im wielu wbudowanych funkcji znajdujących się w GridView. W miarę analizowania w kolejnych samouczkach niektóre z tych funkcji można podłączyć z powrotem bez zbyt dużego nakładu pracy, ale należy pamiętać, że użycie elementu DataList lub Repeater zamiast elementu GridView ogranicza funkcje, których można używać bez konieczności samodzielnego implementowania tych funkcji.

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 24 godzinach. 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. Recenzenci tego samouczka to Yaakov Ellis, Liz Shulok, Randy Schmidt i Stacy Park. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, napisz do mnie na adres mitchell@4GuysFromRolla.com.