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

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 usługi 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 elementu DataList, bardzo łatwo można dostosować jego wyświetlanie, aby elementy źródła danych zostały rozmieszczone w wielokolumnowej, wielowierszowej tabeli. Ponadto można wyświetlić wszystkie elementy źródła danych w jednowierszowej, wielokolumnowej liście DataList.

Układ elementu DataList można dostosować odpowiednio za pomocą właściwości RepeatColumns i RepeatDirection , które wskazują, ile kolumn jest renderowanych i 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.

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

Poprzez wyświetlanie wielu elementów z różnych źródeł danych w jednym wierszu, DataList może efektywniej wykorzystać poziome miejsce na ekranie. 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

Przed sprawdzeniem właściwości RepeatColumns i RepeatDirection, najpierw utwórzmy listę danych na naszej stronie, która wyświetla informacje o produkcie przy użyciu standardowego układu tabeli jednokolumnowego, wielowierszowego. W tym przykładzie wyświetlmy nazwę, kategorię i cenę produktu przy użyciu następującego znacznika:

<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 strony RepeatColumnAndDirection.aspx w folderze DataListRepeaterBasics i przeciągnij element DataList z panelu narzędziowego na projektanta. Z poziomu tagu inteligentnego DataList utwórz nowy ObjectDataSource i skonfiguruj go, aby pobierał dane z metody ProductsBLL klasy GetProducts, wybierając opcję (Brak) w kartach 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świetli nazwę i wartość dla każdego pola danych produktu. Dostosuj ItemTemplate bezpośrednio za pomocą znaczników deklaratywnych lub poprzez opcję Edytuj szablony w tagu inteligentnym DataList, aby używać znaczników przedstawionych powyżej, zastępując tekst Nazwa produktu, Nazwa kategorii i Cena z kontrolkami Label, które używają odpowiedniej składni powiązania danych, aby przypisać wartości do ich właściwości Text. Po zaktualizowaniu ItemTemplateelementu znacznik deklaratywny strony 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>

Zauważ, że uwzględniłem specyfikator formatu w składni powiązywania danych dla Eval elementu, formatując zwracaną wartość jako walutę — UnitPrice

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

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

Krok 2. Zmiana kierunku układu elementu DataList

Chociaż domyślne zachowanie elementu DataList polega na ustawieniu elementów w pionie w jednej kolumnie, w tabeli wielowierszowej, 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 element DataList w Projektancie, a następnie w oknie Właściwości zmień RepeatDirection właściwość z Vertical na Horizontal. Natychmiast po wykonaniu tej czynności projektant dostosowuje układ elementu DataList, tworząc interfejs jednowierszowy z wieloma kolumnami (patrz Rysunek 3).

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

Podczas wyświetlania małych ilości danych, jednowierszowa tabela wielokolumnowa może być idealnym sposobem na maksymalne wykorzystanie przestrzeni ekranu. Jednak w przypadku większych ilości danych pojedynczy wiersz będzie wymagał wielu kolumn, które wypychają te elementy, które nie mieszczą się na ekranie po prawej stronie. Rysunek 4 przedstawia produkty renderowane w pojedynczym wierszu w DataList. Ponieważ istnieje wiele produktów (ponad 80), użytkownik będzie musiał przewinąć w prawo, aby wyświetlić informacje o każdym z produktów.

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 wielokolumnowej, wielorzędowej.

Aby utworzyć wielokolumnowy, wielowierszowy element DataList, musimy ustawić RepeatColumns właściwość na liczbę kolumn, które mają być wyświetlone. Domyślnie RepeatColumns właściwość jest ustawiona na 0, co spowoduje, że lista DataList 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 w każdym wierszu tabeli. W związku z tym ustaw właściwość RepeatColumns 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 tabeli z trzema kolumnami i wieloma wierszami.

Rysunek 5. Trzy produkty są wyświetlane dla każdego wiersza (kliknij, aby wyświetlić obraz pełnowymiarowy)

Właściwość RepeatDirection wpływa na sposób, w jaki elementy w liście DataList są ułożone. Rysunek 5 przedstawia wyniki z właściwością RepeatDirection ustawioną na Horizontal wartość. Należy pamiętać, że pierwsze trzy produkty Chai, Chang i Aniseed Syrop są ułożone 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. Zmiana właściwości z RepeatDirection z powrotem na Vertical powoduje, że te produkty są uporządkowane od góry do dołu, od lewej do prawej, jak pokazano na rysunku 6.

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

Liczba wierszy wyświetlanych w tabeli wynikowej zależy od liczby wszystkich rekordów powiązanych z listą Danych. Dokładnie rzecz biorąc, jest to sufit całkowitej liczby elementów źródła danych, podzielony przez wartość właściwości RepeatColumns. Products Ponieważ tabela zawiera obecnie 84 produkty, które są podzielne przez 3, istnieje 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ędzie zawierać puste komórki. Jeśli RepeatDirection jest ustawione na Vertical, to ostatnia kolumna będzie miała puste komórki; jeśli RepeatDirection jest Horizontal, to ostatni wiersz będzie miał puste komórki.

Podsumowanie

Kontrolka DataList domyślnie wyświetla elementy w jednokolumnowej, wielowierszowej tabeli, która naśladuje układ kontrolki GridView z jednym szablonowym polem. Mimo że ten domyślny układ jest akceptowalny, możemy zmaksymalizować przestrzeń ekranu, wyświetlając wiele tych elementów źródła danych w jednym wierszu. Osiągnięcie tego celu jest po prostu kwestią ustawienia właściwości DataList na RepeatColumns liczbę kolumn do wyświetlenia w każdym wierszu. Ponadto można użyć właściwości DataList RepeatDirection , aby wskazać, czy zawartość wielokolumna, wielowierszowa tabela powinna być rozmieszczona w poziomie 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 go uzyskać pod adresem mitchell@4GuysFromRolla.com.

Specjalne podziękowania

Ta seria samouczków została omówiona przez wielu przydatnych recenzentów. Główny recenzent tego samouczka to John Suru. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, napisz do mnie na adres mitchell@4GuysFromRolla.com.

PoprzedniNastępny