Udostępnij za pośrednictwem

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

  • 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 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 jest to przystawka do wyświetlania, przeglądania stron, sortowania, edytowania i usuwania danych, jego wygląd jest nieco boxy. Co więcej, znaczniki odpowiedzialne za strukturę GridView są stałe 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 w wyglądzie i renderowany znacznik podczas wyświetlania wielu rekordów, ASP.NET 2.0 oferuje kontrolki DataList i Repeater (z których 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 elementów 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 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 przy użyciu tych szablonów kontrolek. Zobaczymy, jak sformatować te kontrolki, jak zmienić układ rekordów źródeł 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śmińmy chwilę na dodanie stron ASP.NET potrzebnych w tym samouczku, a w kolejnych kilku samouczkach dotyczących wyświetlania danych przy użyciu elementu 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

Tworzenie folderu DataListRepeaterBasics i dodawanie strony 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 Strony wzorcowe i nawigacja w witrynie 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.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>

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 kontrolki FormView, lista DataList jest przeznaczona do wyświetlania zestawu rekordów, a nie samotnego. Zacznijmy od tego samouczka, aby zapoznać się z powiązaniem informacji o produkcie z listą DataList. Rozpocznij od otwarcia Basics.aspx strony w folderze DataListRepeaterBasics . Następnie przeciągnij element DataList z przybornika do projektanta. Jak pokazano na rysunku 4, przed określeniem szablonów DataList projektant wyświetla go jako szare pole.

Przeciągnij element DataList z przybornika do projektanta

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 tworzysz ponownie listę danych tylko do odczytu, ustaw listę rozwijaną na (Brak) na kartach INSERT, UPDATE i DELETE kreatora.

Wybierz opcję utworzenia nowego obiektuDataSource

Rysunek 5. Wybranie opcji utworzenia nowego obiektuDataSource (kliknij, aby wyświetlić obraz o 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 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 tym, że szablony są tworzone automatycznie podczas tworzenia powiązania źródła danych z kontrolką FormView za pośrednictwem 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>

Uwaga

Pamiętaj, że w przypadku powiązania źródła danych z kontrolką FormView za pomocą tagu inteligentnego Kontrolka FormView program Visual Studio utworzył ItemTemplateelement , InsertItemTemplatei EditItemTemplate. Jednak w przypadku elementu DataList tylko element ItemTemplate jest tworzony. Dzieje się tak, ponieważ lista DataList nie ma tej samej wbudowanej obsługi edytowania i wstawiania oferowanej przez kontrolkę FormView. Lista 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 widoku FormView. Zobaczymy, jak dołączyć obsługę edytowania i usuwania z listy DataList w przyszłym samouczku.

Pośmiń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 rozłóżmy pozostałe pola, używając <table> nagłówka pod nagłówkiem.

Aby wprowadzić te zmiany, możesz użyć funkcji edycji szablonu w projektancie 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 Projektancie, wynikowe znaczniki mogą nie być dokładnie zgodne z poniższym znacznikiem, ale w przypadku wyświetlania za pośrednictwem przeglądarki 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>

Uwaga

W powyższym przykładzie użyto kontrolek etykiet sieci Web, 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żywać metody , można zamiast tego <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> użyć składni <%# Eval("CategoryName") %>deklaratywnej .

Pozostawienie kontrolek Etykieta 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ę z statycznymi znacznikami i kontrolkami sieci Web i zakłada, że wszystkie powiązania danych zostaną wykonane za pomocą okna dialogowego Edytowanie elementów DataBindings, które jest dostępne z tagów inteligentnych kontrolek sieci Web.

W związku z tym podczas pracy z listą DataList, która zapewnia opcję edytowania szablonów za pośrednictwem Projektanta, wolę używać kontrolek Etykieta w sieci Web, aby zawartość była dostępna za pośrednictwem interfejsu Edytowanie 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 Sieci Web Etykieta, chyba że wiem, że muszę sformatować wygląd powiązanego tekstu danych na podstawie logiki programowej.

Dane wyjściowe poszczególnych produktów są renderowane przy użyciu elementu ItemTemplate elementu DataList

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, AlternatingItemStyleItemStyleBackColorCssClassi 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 (RowStyleitd HeaderStyle.). Zróbmy to samo dla elementu DataList.

Zgodnie z opisem w samouczku Wyświetlanie danych za pomocą obiektuDataSource plik skin określa domyślne właściwości związane z wyglądem dla kontrolki sieci Web. Motyw jest kolekcją 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ą obiektu ObjectDataSource utworzyliśmy DataWebControls motyw (zaimplementowany jako folder w App_Themes folderze), który zawiera obecnie dwa pliki skóry — GridView.skin i DetailsView.skin. Dodajmy trzeci plik skin, 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 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 skóry wygląd dataList jest aktualizowany w Projektancie (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 naprzemiennego produktu ma jasnoróżowy kolor tła.

Zrzut ekranu przedstawiający sposób aktualizowania nowego pliku skin wyglądu elementu DataList w projektancie.

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

Oprócz biblioteki ItemTemplate, lista 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 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 kontrolki GridView, nagłówek i stopka w tabeli 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.

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 wstrzykiwać bezpośrednio do tych wierszy z programu 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 zostanie wyświetlony tytuł Informacje o produkcie w górnej części wyników tabeli 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 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 elementu HeaderTemplate z informacjami o produkcie tekstowym

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>

Uwaga

Podobnie jak i HeaderTemplate FooterTemplates, SeparatorTemplate obiekt 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 ona wyglądać podobnie do rysunku 12. Zanotuj wiersz nagłówka i wiersz między poszczególnymi listami produktów.

Lista DataList 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 określonych znaczników za pomocą kontrolki repeater

Jeśli podczas przeglądania przykładu DataList z rysunku 12 zrobisz widok/źródło z przeglądarki, zobaczysz, że element DataList emituje kod HTML <table> zawierający wiersz tabeli () z pojedynczą komórką tabeli (<tr><td>) dla każdego elementu powiązanego z elementem DataList. Te dane wyjściowe są w rzeczywistości identyczne z tym, co byłoby emitowane z kontrolki GridView z pojedynczym polem szablonu. Jak zobaczymy w przyszłym samouczku, lista DataList umożliwia dalsze dostosowywanie danych wyjściowych, dzięki czemu możemy wyświetlić wiele 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 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 podana, służy do renderowania elementów naprzemiennych
  • SeparatorTemplate w przypadku podania 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 elementy 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 Strony wzorcowe i Nawigacja po witrynie:

  • Na stronie wzorcowej Site.master element repeater był używany do wyświetlania listy punktowanej zawartości mapy witryny najwyższego poziomu (raportowanie podstawowe, filtrowanie raportów, dostosowywanie formatowania itd.); inny zagnieżdżony repeater był używany do wyświetlania sekcji podrzędnych sekcji najwyższego poziomu
  • W SectionLevelTutorialListing.ascxprogramie element Repeater był używany do wyświetlania listy punktowanej sekcji podrzędnych bieżącej sekcji 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 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 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 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.

Dodawanie repeatera do projektanta

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

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

Tworzenie nowego obiektu ObjectDataSource

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

Konfigurowanie obiektu ObjectDataSource do używania klasy CategoriesBLL

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

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 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ą projektanta 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 ona wyświetlona w elemencie ItemTemplate elementu repeatera. Znacznik wyświetlany przed nim — <table><tr> — zostanie umieszczony w znaczniku HeaderTemplate podczas znaczników kończących — </tr></table> zostanie umieszczony 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ł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.

Tabela> HTML <z pojedynczym wierszem zawiera listę każdej kategorii w oddzielnej kolumnie

Rysunek 17. Pojedyncza wiersz HTML <table> wyświetla każdą kategorię 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 naprzemiennymi wierszami na liście DataList. Aby to osiągnąć, musimy przypisać klasę RowStyle CSS do każdego elementu repeatera i AlternatingRowStyle klasy CSS do każdego elementu powtarzania naprzemiennego ItemTemplate za pomocą 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 będzie składać się z naszych wynikowych <table> , najprostszym sposobem wygenerowania wiersza nagłówka, który gwarantuje, że obejmuje wszystkie kolumny, 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>

HeaderTemplate Następujące elementy i FooterTemplate powodują narzutu żądanego:

<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 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, jednak lista DataList 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ż funkcja DataList i Repeater oferuje większą elastyczność w renderowanych danych wyjściowych, brakuje im wielu wbudowanych funkcji znajdujących się w siatce. 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. 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 omówiona przez wielu przydatnych 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.

PoprzedniNastępny