Udostępnij za pośrednictwem

Wyświetlanie wielu rekordów w wierszu za pomocą kontrolki DataList (VB)

  • Artykuł

Autor: Scott Mitchell

Pobierz plik PDF

W tym krótkim samouczku dowiesz się, jak dostosować układ elementu DataList za pomocą właściwości RepeatColumns i RepeatDirection.

Wprowadzenie

Przykłady dataList, które widzieliśmy w poprzednich dwóch samouczkach, renderowały każdy rekord ze źródła danych jako wiersz w kodzie HTML <table>z jedną kolumną. Chociaż jest to domyślne zachowanie DataList, bardzo łatwo dostosować wyświetlanie elementu DataList, tak aby elementy źródła danych zostały rozłożone na wielokolumna, wielowierszową tabelę. Ponadto można mieć wszystkie elementy źródła danych wyświetlane w jednym wierszu, wielokolumna lista danych DataList.

Układ dataList można dostosować odpowiednio za pomocą jej RepeatColumns właściwości i RepeatDirection , które wskazują odpowiednio liczbę kolumn renderowanych i określać, czy te elementy są rozmieszczone w pionie lub w poziomie. Rysunek 1 przedstawia na przykład listę danych, która wyświetla informacje o produkcie w tabeli z trzema kolumnami.

Lista danych zawiera trzy produkty na wiersz

Rysunek 1. Lista danych pokazuje trzy produkty na wiersz (kliknij, aby wyświetlić obraz pełnowymiarowy)

Dzięki wyświetlaniu wielu elementów źródła danych na wiersz lista danych może efektywniej wykorzystać miejsce na ekranie poziomym. W tym krótkim samouczku zapoznamy się z tymi dwoma właściwościami DataList.

Krok 1. Wyświetlanie informacji o produkcie na liście danych

Zanim przeanalizujemy RepeatColumns właściwości i RepeatDirection , najpierw utwórzmy listę danych na naszej stronie zawierającej informacje o produkcie przy użyciu standardowego układu tabeli jednokolumna, wielowierszowego. W tym przykładzie wyświetlmy nazwę, kategorię i cenę produktu przy użyciu następujących znaczników:

<h4>Product Name</h4>
Available in the Category Name store for Price

Widzieliśmy, jak powiązać dane z listą DataList w poprzednich przykładach, więc szybko przejdę przez te kroki. Zacznij od otwarcia RepeatColumnAndDirection.aspx strony w folderze DataListRepeaterBasics i przeciągnięcia listy danych z przybornika do Projektant. Z poziomu tagu inteligentnego DataList wybierz opcję tworzenia nowego obiektu ObjectDataSource i skonfiguruj ją w celu ściągnięcia danych z metody klasy GetProducts , wybierając opcję (Brak) z ProductsBLL kart INSERT, UPDATE i DELETE kreatora.

Po utworzeniu i powiązaniu nowego obiektu ObjectDataSource z listą danych program Visual Studio automatycznie utworzy obiekt ItemTemplate , który wyświetla nazwę i wartość dla każdego pola danych produktu. ItemTemplate Dostosuj znacznik deklaratywne bezpośrednio lub z opcji Edytuj szablony w tagu inteligentnym DataList, aby używać znaczników pokazanych powyżej, zastępując tekst Nazwa produktu, Nazwa kategorii i Cena kontrolkami, które używają odpowiedniej składni powiązania danych w celu przypisania wartości do ich Text właściwości. Po zaktualizowaniu znacznika deklaratywnego ItemTemplatestrony powinien wyglądać podobnie do następującego:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h4>
        Available in the
            <asp:Label runat="server" ID="CategoryNameLabel"
                Text='<%# Eval("CategoryName") %>' />
        store for
            <asp:Label runat="server" ID="UnitPriceLabel"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Zwróć uwagę, że w składni UnitPricepowiązania danych zawierałem specyfikator Eval formatu , formatując zwracaną wartość jako walutę —Eval("UnitPrice", "{0:C}").

Poświęć chwilę, aby odwiedzić stronę w przeglądarce. Jak pokazano na rysunku 2, lista DataList jest renderowana jako jednokolumna, wielowierszowa tabela produktów.

Domyślnie lista danych renderuje się jako jednokolumna, wielowierszowa tabela

Rysunek 2. Domyślnie lista danych renderuje się jako tabela jednokolumna, wielowierszowa (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 2. Zmiana kierunku układu elementu DataList

Podczas gdy domyślne zachowanie dla listy DanychList polega na rozkładzie elementów w pionie w jednej kolumnie, tabela wielowierszowa, to zachowanie można łatwo zmienić za pomocą właściwości DataList.RepeatDirection Właściwość RepeatDirection może zaakceptować jedną z dwóch możliwych wartości: Horizontal lub Vertical (wartość domyślna).

RepeatDirection Zmieniając właściwość z Vertical na Horizontal, lista DataList renderuje swoje rekordy w jednym wierszu, tworząc jedną kolumnę na element źródła danych. Aby zilustrować ten efekt, kliknij pozycję DataList w Projektant, a następnie z okno Właściwości zmień RepeatDirection właściwość z Vertical na Horizontal. Natychmiast po wykonaniu tej czynności Projektant dostosowuje układ DataList, tworząc jednowierszowy, wielokolumny interfejs (patrz Rysunek 3).

Właściwość RepeatDirection określa, w jaki sposób elementy listy danych są określone

Rysunek 3. Właściwość RepeatDirection określa kierunek, w jaki są elementy listy danych (kliknij, aby wyświetlić obraz pełnowymiarowy)

W przypadku wyświetlania małych ilości danych jednowierszowa tabela wielokolumna może być idealnym sposobem zmaksymalizowania nieruchomości ekranu. Jednak w przypadku większych ilości danych pojedynczy wiersz będzie wymagał wielu kolumn, które wypychają te elementy, które nie mogą zmieścić się na ekranie po prawej stronie. Rysunek 4 przedstawia produkty w przypadku renderowania w pojedynczej rzędu tabeli DataList. Ponieważ istnieje wiele produktów (ponad 80), użytkownik będzie musiał przewinąć z prawej strony, aby wyświetlić informacje o każdym z produktów.

W przypadku wystarczająco dużych źródeł danych lista danych z jedną kolumną wymaga przewijania w poziomie

Rysunek 4. W przypadku wystarczająco dużych źródeł danych pojedyncza kolumna DataList będzie wymagać przewijania w poziomie (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 3. Wyświetlanie danych w tabeli wielokolumnachowej, wielowierszowej

Aby utworzyć wielokolumnę, wielowierszową listę danych, musimy ustawić RepeatColumns właściwość na liczbę kolumn do wyświetlenia. Domyślnie RepeatColumns właściwość jest ustawiona na 0, co spowoduje, że lista danych będzie wyświetlać wszystkie jego elementy w jednym wierszu lub kolumnie (w zależności od wartości RepeatDirection właściwości).

W naszym przykładzie wyświetlmy trzy produkty dla wiersza tabeli. W związku z tym RepeatColumns ustaw właściwość na 3. Po wprowadzeniu tej zmiany poświęć chwilę, aby wyświetlić wyniki w przeglądarce. Jak pokazano na rysunku 5, produkty są teraz wyświetlane w trzykolumnach, wielowierszowej tabeli.

Trzy produkty są wyświetlane na wiersz

Rysunek 5. Trzy produkty są wyświetlane na wiersz (kliknij, aby wyświetlić obraz pełnowymiarowy)

Właściwość RepeatDirection ma wpływ na sposób, w jaki elementy na liście danych są określone. Rysunek 5 przedstawia wyniki z właściwością ustawioną RepeatDirection na Horizontal. Należy pamiętać, że pierwsze trzy produkty Chai, Chang i Syrop aniseed są rozmieszczone od lewej do prawej, od góry do dołu. Następne trzy produkty (począwszy od Chef Anton s Cajun Seasoning) pojawiają się z rzędu pod pierwszymi trzema. RepeatDirection Zmiana właściwości z powrotem na Vertical, jednak określa te produkty od góry do dołu, od lewej do prawej, jak pokazano na rysunku 6.

W tym miejscu produkty są rozmieszczone w pionie

Rysunek 6. W tym miejscu produkty są rozmieszczone w pionie (kliknij, aby wyświetlić obraz pełnowymiarowy)

Liczba wierszy wyświetlanych w wynikowej tabeli zależy od liczby wszystkich rekordów powiązanych z listą Danych. Dokładnie jest to pułap całkowitej liczby elementów źródła danych podzielonych przez RepeatColumns wartość właściwości. Products Ponieważ tabela ma obecnie 84 produkty, które są podzielne przez 3, istnieją 28 wierszy. Jeśli liczba elementów w źródle danych i RepeatColumns wartość właściwości nie są podzielne, ostatni wiersz lub kolumna będą miały puste komórki. Jeśli parametr RepeatDirection ma wartość Vertical, ostatnia kolumna będzie zawierać puste komórki. Jeśli RepeatDirection jest Horizontalto , ostatni wiersz będzie miał puste komórki.

Podsumowanie

Lista danych domyślnie wyświetla listę elementów w tabeli jednokolumnach, wielowierszowej, która naśladuje układ elementu GridView z pojedynczym polem szablonu. Chociaż ten domyślny układ jest akceptowalny, możemy zmaksymalizować obszar ekranu, wyświetlając wiele elementów źródła danych na wiersz. Osiągnięcie tego celu jest po prostu kwestią ustawienia właściwości DataList na RepeatColumns liczbę kolumn do wyświetlenia dla każdego wiersza. Ponadto właściwość DataList RepeatDirection może służyć do wskazania, czy zawartość wielokolumna, wielowierszowa tabela powinna być ułożona poziomo od lewej do prawej, od góry do dołu lub w pionie od góry do dołu, od lewej do prawej.

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. Recenzentem tego samouczka był John Suru. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi wiersz pod adresem mitchell@4GuysFromRolla.com.

WsteczDalej