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

  • Artykuł

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 będziemy musieli wyświetlić wiele rekordów ze źródła danych, zwróciliśmy się do kontrolki GridView. Kontrolka GridView renderuje wiersz dla każdego rekordu w źródle danych, wyświetlając pola danych rekordu w kolumnach. Element GridView sprawia, że jest to przystawka do wyświetlania, przeglądania stron, sortowania, edytowania i usuwania danych, jego wygląd jest nieco boxy. Ponadto adiustacja odpowiedzialna za strukturę gridView jest stała, zawiera 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 renderowania znaczników podczas wyświetlania wielu rekordów, ASP.NET 2.0 oferuje kontrolki DataList i Repeater (oba te elementy 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 elementów BoundFields, CheckBoxFields, ButtonFields itd. Podobnie jak kontrolka GridView, element DataList jest renderowany jako 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 niż to, co jawnie określisz, i jest idealnym kandydatem, gdy potrzebujesz dokładnej kontroli nad emitowanych znaczników.

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 za pomocą tych szablonów kontrolek. Zobaczymy, jak sformatować te kontrolki, jak zmienić układ rekordów źródła danych w scenariuszach DataList, typowych scenariuszach wzorca/szczegółów, sposobach edytowania i usuwania danych, sposobie stronicowania rekordów itd.

Krok 1. Dodawanie stron sieci Web samouczka DataList i Repeater

Przed rozpoczęciem tego samouczka najpierw poświęćmy chwilę na dodanie stron ASP.NET potrzebnych w tym samouczku i kilku następnych samouczkach dotyczących wyświetlania danych przy użyciu elementów DataList i Repeater. Rozpocznij od utworzenia nowego folderu w projekcie o nazwie DataListRepeaterBasics. Następnie dodaj do tego folderu pięć ASP.NET stron, po skonfigurowaniu ich do używania strony Site.masterwzorcowej:

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

Tworzenie folderu DataListRepeaterBasics i dodawanie stron ASP.NET samouczka

Rysunek 1. Tworzenie DataListRepeaterBasics folderu i dodawanie strony ASP.NET samouczka

Default.aspx Otwórz stronę i przeciągnij kontrolkę SectionLevelTutorialListing.ascx użytkownika z UserControls folderu na powierzchnię Projekt. Ta kontrolka użytkownika utworzona w samouczku Dotyczącym stron wzorcowych i nawigacji witryny wylicza mapę witryny i wyświetla samouczki z bieżącej sekcji na liście punktowanej.

Dodaj kontrolkę Użytkownika SectionLevelTutorialListing.ascx, aby Default.aspx

Rysunek 2. Dodawanie kontrolki SectionLevelTutorialListing.ascx użytkownika do (Default.aspxkliknij, aby wyświetlić obraz pełnowymiarowy)

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

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

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 widoku FormView, renderowane dane wyjściowe kontrolki DataList zależą od szablonów, a nie elementów BoundFields, CheckBoxFields itd. W przeciwieństwie do obiektu FormView, dataList jest przeznaczona do wyświetlania zestawu rekordów, a nie samotnego. Zacznijmy od tego samouczka, aby przyjrzeć się powiązaniu informacji o produkcie z listą DataList. Zacznij od otwarcia Basics.aspx strony w folderze DataListRepeaterBasics . Następnie przeciągnij element DataList z przybornika na Projektant. Jak pokazano na rysunku 4, przed określeniem szablonów dataList Projektant wyświetla je jako szare pole.

Przeciągnij element DataList z przybornika na Projektant

Rysunek 4. Przeciągnij element DataList z przybornika na Projektant (kliknij, aby wyświetlić obraz pełnowymiarowy)

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

Wybieranie opcji tworzenia nowego obiektu ObjectDataSource

Rysunek 5. Wybieranie opcji tworzenia nowego obiektuDataSource (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Konfigurowanie obiektu ObjectDataSource do używania klasy ProductsBLL

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

Pobieranie informacji o wszystkich produktach przy użyciu metody GetProducts

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 elementem 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 znaczniki poniżej). Ten domyślny ItemTemplate wygląd jest identyczny z szablonami utworzonymi automatycznie podczas tworzenia powiązania źródła danych z elementem FormView za pośrednictwem Projektant.

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

Uwaga

Pamiętaj, że podczas wiązania źródła danych z kontrolką FormView za pomocą tagu inteligentnego kontrolki FormView program Visual Studio utworzył ItemTemplateelementy , InsertItemTemplatei EditItemTemplate. Jednak w przypadku elementu DataList jest tworzony tylko element ItemTemplate . Jest to spowodowane tym, że kontrolka DataList nie ma tej samej wbudowanej obsługi edytowania i wstawiania oferowanej przez element FormView. Element DataList zawiera zdarzenia związane z edycją i usuwaniem, a obsługę edytowania i usuwania można dodać za pomocą trochę kodu, ale nie ma prostej obsługi gotowej do użycia, tak jak w przypadku elementu FormView. W przyszłym samouczku zobaczymy, jak uwzględnić edytowanie i usuwanie obsługi z listą DataList.

Poświęćmy chwilę, 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 określmy pozostałe pola przy użyciu <table> nagłówka .

Aby wprowadzić te zmiany, możesz użyć funkcji edycji szablonu w Projektant z tagu inteligentnego DataList kliknij link Edytuj szablony lub możesz zmodyfikować szablon ręcznie za pomocą składni deklaratywnej strony. Jeśli używasz opcji Edytuj szablony w Projektant, wynikowa adiustacja może nie być dokładnie zgodna z poniższym znacznikiem, ale podczas przeglądania za pośrednictwem przeglądarki powinna 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>

Uwaga

W powyższym przykładzie użyto kontrolek sieci Web Label, których Text właściwość ma przypisaną wartość składni powiązania danych. Alternatywnie można całkowicie pominąć etykiety, wpisując tylko składnię powiązania danych. Oznacza to, że zamiast używania <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> można było użyć składni <%# Eval("CategoryName") %>deklaratywnej .

Pozostawienie kontrolek Etykieta w sieci Web oferuje jednak dwie zalety. Po pierwsze, zapewnia to łatwiejszy sposób formatowania danych na podstawie danych, jak zobaczymy w następnym samouczku. Po drugie opcja Edytuj szablony w Projektant nie wyświetla deklaratywnej składni powiązania danych, która pojawia się poza niektórymi kontrolkami sieci Web. Zamiast tego interfejs Edytowanie szablonów został zaprojektowany w celu ułatwienia pracy ze statycznymi znacznikami i kontrolkami sieci Web i zakłada, że wszystkie powiązania danych będą wykonywane za pomocą okna dialogowego Edytowanie powiązania danych, które jest dostępne z poziomu tagów inteligentnych kontrolek sieci Web.

W związku z tym podczas pracy z listą DataList, która zapewnia możliwość edytowania szablonów za pośrednictwem Projektant, wolę używać kontrolek Sieci Web etykiet, aby zawartość była dostępna za pośrednictwem interfejsu Edytowanie szablonów. Jak zobaczymy wkrótce, repeater wymaga, aby zawartość szablonu została edytowana z widoku Źródło. W związku z tym podczas tworzenia szablonów repeatera często pomijam kontrolki Sieci Web etykiet, chyba że wiem, że będę musiał sformatować wygląd tekstu powiązanego z danymi na podstawie logiki programowej.

Dane wyjściowe każdego produktu są renderowane przy użyciu elementu ItemTemplate elementu datalist

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

Krok 3. Poprawianie wyglądu elementu DataList

Podobnie jak kontrolka GridView, element DataList oferuje wiele właściwości związanych ze stylem, takich jak Font, ForeColor, CssClassAlternatingItemStyleBackColorItemStyle, SelectedItemStylei tak 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 właściwości podrzędnych (RowStyle, HeaderStyleitd.). Zróbmy to samo dla elementu DataList.

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

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

Zrzut ekranu przedstawiający okno Dodawanie nowego elementu z wartością Default.skin wprowadzonym jako nowa nazwa pliku skóry.

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

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, , AlternatingRowStyleRowStylei tak dalej są zdefiniowane w Styles.css pliku i zostały dodane w poprzednich samouczkach.

Po dodaniu tego pliku skóry wygląd elementu DataList jest aktualizowany w Projektant (może być konieczne odświeżenie widoku Projektant, aby zobaczyć efekty nowego pliku skóry; z menu Widok wybierz pozycję Odśwież). Jak pokazano na rysunku 10, każdy produkt zmieniający się ma jasnoróżowy kolor tła.

Zrzut ekranu przedstawiający sposób aktualizowania nowego pliku skóry wyglądu elementu DataList w Projektant.

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

Krok 4. Eksplorowanie innych szablonów elementu DataList

Oprócz elementu ItemTemplatefunkcja 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 używane do renderowania elementów naprzemiennych
  • SelectedItemTemplatesłuży do renderowania zaznaczonego elementu; wybrany element jest elementem, którego indeks odpowiada właściwości DataList s SelectedIndex
  • EditItemTemplate służy do renderowania edytowanego elementu
  • SeparatorTemplate jeśli podano, dodaje separator między poszczególnymi elementami i jest używany 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 elementu lub FooterTemplateelement DataList dodaje dodatkowy wiersz nagłówka lub stopki do renderowanych danych wyjściowych. Podobnie jak w przypadku wierszy nagłówka i stopki GridView, nagłówek i stopka w liście danych 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.

Uwaga

Jak pokazano w samouczku Wyświetlanie informacji podsumowania w stopce kontrolki GridView , podczas gdy wiersze nagłówka i stopki nie obsługują składni powiązania danych, informacje specyficzne dla danych można wstrzyknąć bezpośrednio do tych wierszy z procedury obsługi zdarzeń GridView RowDataBound . Ta technika może służyć zarówno do obliczania sum uruchomionych, jak i innych informacji z danych powiązanych z kontrolką, a także przypisywania tych informacji do stopki. Tę samą koncepcję można zastosować do kontrolek DataList i Repeater; Jedyną różnicą jest to, że w przypadku elementu DataList i Repeater utwórz procedurę obsługi zdarzeń dla ItemDataBound zdarzenia (zamiast zdarzenia RowDataBound ).

W naszym przykładzie w nagłówku znajduje się tytuł Informacje o produkcie wyświetlany w górnej <h3> części listy danych. Aby to osiągnąć, dodaj element HeaderTemplate z odpowiednim znacznikiem. W Projektant można to zrobić, klikając link Edytuj szablony w tagu inteligentnym 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).

Dodawanie nagłówkaTemplate z informacjami o produkcie tekstowym

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

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

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

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

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Uwaga

Podobnie jak w przypadku elementu HeaderTemplate i FooterTemplates, SeparatorTemplate element nie jest powiązany z żadnym rekordem ze źródła danych i dlatego nie może bezpośrednio uzyskać dostępu do rekordów źródła danych powiązanych z listą DataList.

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

Lista danych zawiera wiersz nagłówka i regułę poziomą 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 znaczników specyficznych dla kontrolki repeatera

Jeśli wykonasz widok/źródło z przeglądarki podczas odwiedzania przykładu DataList na rysunku 12, zobaczysz, że lista DataList emituje kod HTML <table> zawierający wiersz tabeli () z pojedynczą komórką tabeli (<tr><td>) dla każdego elementu powiązanego z listą Danych. Te dane wyjściowe są w rzeczywistości identyczne z tym, co byłoby emitowane z elementu GridView z pojedynczym polem szablonu. Jak zobaczymy w przyszłym samouczku, lista DataList umożliwia dalsze dostosowywanie danych wyjściowych, umożliwiając nam wyświetlanie wielu rekordów źródła danych na wiersz tabeli.

Co zrobić, jeśli nie chcesz emitować kodu HTML <table>, choć? Aby uzyskać całkowitą i pełną kontrolę nad adiustacjami wygenerowanymi przez kontrolkę sieci Web danych, musimy użyć kontrolki Repeater. Podobnie jak w przypadku elementu DataList, repeater jest tworzony 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 podano, używane do renderowania elementów przemiennych
  • SeparatorTemplate jeśli podano, 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 punktowanej, której dane pochodzą ze źródła danych. W takim przypadku HeaderTemplate wartości i FooterTemplates zawierają odpowiednio tagi otwierające i zamykające <ul> , a element ItemTemplate zawierałby <li> elementy 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 dotyczącym stron wzorcowych i nawigacji witryny :

  • Na stronie wzorcowej Site.master moduł powtarzający był używany do wyświetlania listy punktowanej zawartości mapy witryny najwyższego poziomu (podstawowe raportowanie, filtrowanie raportów, dostosowywanie formatowania itd.); inne zagnieżdżone powtarzanie zostało użyte do wyświetlania sekcji podrzędnych sekcji najwyższego poziomu
  • W SectionLevelTutorialListing.ascxprogramie repeater został użyty do wyświetlania listy punktowanej sekcji podrzędnych bieżącej mapy witryny

Uwaga

ASP.NET 2.0 wprowadza nową kontrolkę BulletedList, która może być powiązana z kontrolką źródła danych w celu wyświetlenia prostej listy punktowanej. Za pomocą kontrolki BulletedList nie musimy określać żadnego kodu HTML powiązanego z listą; Zamiast tego po prostu wskazujemy pole danych, które ma być wyświetlane jako tekst dla każdego elementu listy.

Repeater służy jako przechwytywanie wszystkich danych kontrolki sieci Web. Jeśli nie ma istniejącej kontrolki, która generuje wymagane znaczniki, można użyć kontrolki Repeater. Aby zilustrować użycie funkcji Repeater, wyświetlmy listę kategorii wyświetlanych powyżej listy danych informacji o produkcie utworzonej w kroku 2. W szczególności przyjrzyjmy się kategoriom wyświetlanym w kodzie HTML <table> z jedną wierszem z każdą kategorią wyświetlaną jako kolumna w tabeli.

Aby to osiągnąć, zacznij od przeciągnięcia kontrolki Repeater z przybornika na Projektant powyżej listy 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.

Dodawanie repeatera do Projektant

Rysunek 13. Dodawanie powtarzacza do Projektant (kliknij, aby wyświetlić obraz pełnowymiarowy)

Istnieje tylko jedna opcja w tagu inteligentnym repeater s: wybierz pozycję Źródło danych. Zdecyduj się utworzyć nowy obiekt ObjectDataSource i skonfigurować go do używania CategoriesBLL metody klasy s GetCategories .

Tworzenie nowego obiektuDataSource

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

Konfigurowanie obiektu ObjectDataSource do używania klasy CategoriesBLL

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

Pobieranie informacji o wszystkich kategoriach przy użyciu metody GetCategories

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

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 nie można skonfigurować szablonów repeater za pośrednictwem Projektant i należy je określić deklaratywnie.

Aby wyświetlić kategorie jako pojedynczy wiersz <table> z kolumną dla każdej kategorii, potrzebujemy repeater 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 ona wyświetlona w elemencie ItemTemplate elementu powtarzającego. Znaczniki wyświetlane przed nim — <table><tr> — zostaną umieszczone w HeaderTemplate adiustacji końcowej — </tr></table> zostaną umieszczone w elemecie 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ładne znaczniki określone przez jego szablony, nic więcej, nic mniej. Rysunek 17 przedstawia dane wyjściowe repeatera po wyświetleniu za pośrednictwem przeglądarki.

Tabela> HTML <Single-Row Listy każdej kategorii w oddzielnej kolumnie

Rysunek 17. Single-Row HTML Listy <table> każdej kategorii w oddzielnej kolumnie (kliknij, aby wyświetlić obraz pełnowymiarowy)

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 mamy kolumny kategorii alternatywne kolory tła, na przykład z przemiennymi wierszami w tabeli DataList. Aby to osiągnąć, musimy przypisać klasę RowStyle CSS do każdego elementu repeatera i AlternatingRowStyle klasy CSS do każdego naprzemiennego elementu Repeater za pomocą ItemTemplate szablonów 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, ile kolumn w wyniku <table> zostanie złożonych, najprostszym sposobem wygenerowania wiersza nagłówka gwarantowanego do stosowania wszystkich kolumn jest użycie dwóch<table> s. 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 emitować następujące znaczniki:

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

Poniżej przedstawiono następujące HeaderTemplate elementy i FooterTemplate w wyniku żądanego adiustacji:

<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 alternatywne w kolorze tła i zawierają wiersz nagłówka

Rysunek 18. Kolumny kategorii alternatywne w kolorze tła i zawiera wiersz nagłówka (kliknij, aby wyświetlić obraz pełnowymiarowy)

Podsumowanie

Chociaż kontrolka GridView ułatwia wyświetlanie, edytowanie, usuwanie, sortowanie i stronicowanie danych, wygląd jest bardzo boxy i przypominający siatkę. Aby uzyskać większą kontrolę nad wyglądem, musimy zwrócić się do kontrolek 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 element GridView z pojedynczym polem TemplateField. Jak zobaczymy w przyszłym samouczku, jednak lista danych zezwala na wyświetlanie wielu rekordów w wierszu tabeli. Z drugiej strony repeater ściśle emituje znaczniki określone w 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ż funkcja DataList i Repeater oferuje większą elastyczność w renderowanych danych wyjściowych, brakuje im wielu wbudowanych funkcji znajdujących się w elemencie GridView. Podczas badania w nadchodzących samouczkach niektóre z tych funkcji można podłączyć z powrotem bez zbyt dużej ilości wysiłku, ale należy pamiętać, że użycie elementu DataList lub Repeater zamiast kontrolki 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 ciągu 24 godzin. Można do niego dotrzeć pod adresem mitchell@4GuysFromRolla.com. Lub za pośrednictwem swojego bloga, który można znaleźć na stronie http://ScottOnWriting.NET.

Specjalne podziękowania

Ta seria samouczków została sprawdzona przez wielu pomocnych recenzentów. Recenzenci w tym samouczku to Yaakov Ellis, Liz Shulok, Randy Schmidt i Stacy Park. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi wiersz pod adresem mitchell@4GuysFromRolla.com.

Dalej