Lista danych Dewalt Dcn690

• Artykuł
09/23/2022
• Czas czytania: 17 min

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

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.

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:

<siteMapNodetitle="Displaying Data with the DataList and Repeater"description="Samples of Reports that Use the DataList and Repeater Controls"url="~/DataListRepeaterBasics/Default. aspx" ><siteMapNodetitle="Basic Examples"description="Examines the basics for displaying data using theDataList and Repeater controls. "url="~/DataListRepeaterBasics/Basics. aspx" />title="Formatting"description="Learn how to format the DataList and the Web controls withinthe DataList and Repeater's templates. "url="~/DataListRepeaterBasics/Formatting. aspx" />title="Adjusting the DataList s Layout"description="Illustrates how to alter the DataList's layout, showingmultiple data source records per table row. "url="~/DataListRepeaterBasics/RepeatColumnAndDirection. aspx" />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 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 do projektanta. Jak pokazano na rysunku 4, przed określeniem szablonów datalist projektant wyświetla go jako szare pole. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image6. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image7. png" alt="Przeciągnij element DataList z przybornika do projektanta" data-linktype="relative-path"/>

Rysunek 4. Przeciągnij listę DataList z przybornika do projektanta (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. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image9. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image10. png" alt="Wybieranie opcji tworzenia nowego obiektu ObjectDataSource" data-linktype="relative-path"/>

Rysunek 5. Wybieranie opcji tworzenia nowego obiektuDataSource (kliknij, aby wyświetlić obraz w 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 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 narzędzia 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 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, wynikowa adiustacja może nie być dokładnie zgodna z poniższym znacznikiem, ale po wyświetleniu w przeglądarce powinna wyglądać bardzo podobnie do zrzutu ekranu pokazanego na rysunku 8. 
<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><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></table>
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 projektancie 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 Projektanta, wolę używać kontrolek Etykieta sieci Web, 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. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image18. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image19. png" alt="Dane wyjściowe każdego produktu są renderowane przy użyciu elementu ItemTemplate elementu datalist" data-linktype="relative-path"/>
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. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image21. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image22. png" alt="Zrzut ekranu przedstawiający okno Dodawanie nowego elementu z wartością Default. skin wprowadzonym jako nowa nazwa pliku skóry. " data-linktype="relative-path"/>
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" />
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 projektancie (może być konieczne odświeżenie widoku Projektant, aby zobaczyć efekty nowego pliku skóry; z menu Widok wybierz polecenie Odśwież). Jak pokazano na rysunku 10, każdy produkt zmieniający się ma jasnoróżowy kolor tła. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image24. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image25. png" alt="Zrzut ekranu przedstawiający sposób aktualizowania nowego pliku skóry wyglądu elementu DataList w projektancie. " data-linktype="relative-path"/>
Rysunek 10. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image26. png" data-linktype="relative-path">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. 
Jak widzieliśmy w samouczku Wyświetlanie informacji podsumowania w stopce 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 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). com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image27. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image28. png" alt="Dodawanie nagłówkaTemplate z informacjami o produkcie tekstowym" data-linktype="relative-path"/>
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>
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. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image30. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image31. png" alt="Lista danych zawiera wiersz nagłówka i regułę poziomą między poszczególnymi listami produktów" data-linktype="relative-path"/>
Rysunek 12. Lista danych zawiera wiersz nagłówka i regułę poziomą między poszczególnymi listami produktów (kliknij, aby wyświetlić obraz pełnowymiarowy)
Krok 5. Renderowanie znaczników specyficznych dla kontrolki repeatera
Jeśli podczas odwiedzania przykładu DataList z rysunku 12 zrobisz widok/źródło, 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ą DataList. 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. 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
ASP. 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. W przypadku 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 repeatera, 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 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. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image33. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image34. png" alt="Dodawanie powtarzacza do projektanta" data-linktype="relative-path"/>
Rysunek 13. Dodawanie repeatera do projektanta (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. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image36. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image37. png" alt="Tworzenie nowego obiektuDataSource" data-linktype="relative-path"/>
Rysunek 14. Tworzenie nowego obiektu ObjectDataSource (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 15. Konfigurowanie obiektu ObjectDataSource do używania CategoriesBLL klasy (
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 pomocą projektanta 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><td>Category 1</td><td>Category 2</td>...<td>Category N</td>
<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><td><%# Eval("CategoryName")%></td><FooterTemplate></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. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image45. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image46. png" alt="Tabela> Single-Row HTML <zawiera listę każdej kategorii w oddzielnej kolumnie" data-linktype="relative-path"/>
Rysunek 17. Lista Single-Row HTML <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><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:
<th>Product Categories</th><td></td>
Poniżej przedstawiono następujące HeaderTemplate elementy i FooterTemplate w wyniku żądanego adiustacji:
<table cellpadding="0" cellspacing="0"><th class="HeaderStyle">Product Categories</th><table cellpadding="4" cellspacing="0"><td class="AlternatingRowStyle"><%# Eval("CategoryName")%></td>
Rysunek 18 przedstawia repeater po wprowadzeniu tych zmian. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image48. com/pl-pl/aspnet/web-forms/overview/data-access/displaying-data-with-the-datalist-and-repeater/displaying-data-with-the-datalist-and-repeater-controls-cs/_static/image49. png" alt="Kolumny kategorii alternatywne w kolorze tła i zawierają wiersz nagłówka" data-linktype="relative-path"/>
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. 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