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

Artykuł
03/02/2024

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

Wprowadzenie

W poprzednich dwóch samouczkach przykłady elementu DataList 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 jest dostosować wyświetlanie elementu DataList w taki sposób, że elementy źródła danych są rozłożone na wielokolumna, wielowierszową tabelę. Ponadto można mieć wszystkie elementy źródła danych wyświetlane w jednowierszowej, wielokolumna lista danych DataList.

Układ elementu DataList można dostosować odpowiednio za pomocą jej RepeatColumns właściwości i RepeatDirection , które wskazują, ile kolumn jest renderowanych i czy te elementy są ułożone w pionie lub w poziomie. Na przykład rysunek 1 przedstawia 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)

Dzięki wyświetlaniu wielu elementów źródła danych na wiersz lista danych może efektywniej wykorzystywać poziome miejsce na ekranie. W tym krótkim samouczku poznamy te dwie właściwości elementu DataList.

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

Zanim zbadamy RepeatColumns właściwości i RepeatDirection , najpierw utwórzmy listę danych na naszej stronie zawierającej informacje o produkcie przy użyciu standardowego jednokolumna, wielowierszowego układu tabeli. 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 tagu inteligentnego DataList wybierz opcję utworzenia nowego obiektu ObjectDataSource i skonfigurowania go w celu ściągnięcia danych z ProductsBLL metody klasy GetProducts , wybierając opcję (Brak) z 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świetli nazwę i wartość dla każdego pola danych produktu. ItemTemplate Dostosuj znak bezpośrednio za pomocą znaczników deklaratywnych lub z opcji Edytuj szablony w tagu inteligentnym DataList, aby używać znaczników pokazanych powyżej, zastępując tekst Product Name (Nazwa produktu), Category Name (Nazwa kategorii) i Price (Cena) kontrolkami Label używającymi odpowiedniej składni powiązania danych w celu przypisania wartości do ich Text właściwości. Po zaktualizowaniu elementu ItemTemplateznacznik 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>

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

Poświęć chwilę, aby odwiedzić stronę w przeglądarce. Jak pokazano na rysunku 2, tabela 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

Podczas gdy domyślne zachowanie elementu DataList polega na ustawieniu elementów w pionie w jednokolumnach, wielowierszowej tabeli, to zachowanie można łatwo zmienić za pomocą właściwości DataList.RepeatDirection Właściwość RepeatDirection może akceptować jedną z dwóch możliwych wartości: Horizontal lub Vertical (wartość domyślna).

RepeatDirection Zmieniając właściwość z Vertical na Horizontal, element 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 elementu DataList, tworząc interfejs jednowierszowy z wieloma kolumnami (zobacz 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 w pełnym rozmiarze)

Podczas wyświetlania małych ilości danych jednowierszowa tabela z wieloma kolumnami może być idealnym sposobem zmaksymalizowania nieruchomości ekranu. Jednak w przypadku większych ilości danych pojedynczy wiersz będzie wymagał wielu kolumn, co wypycha te elementy, które nie mieszczą się na ekranie po prawej stronie. Rysunek 4 przedstawia produkty w przypadku renderowania w jednym wierszu elementu 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 w pełnym rozmiarze)

Krok 3. Wyświetlanie danych w tabeli wielokolumnachowej z wieloma wierszami

Aby utworzyć wielokolumny, wielowierszowy element DataList, musimy ustawić RepeatColumns właściwość na liczbę kolumn do wyświetlenia. Domyślnie RepeatColumns właściwość jest ustawiona na wartość 0, co spowoduje, że lista DataList wyświetli wszystkie jej 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 na wiersz 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 trzykolumna, wielowierszowej tabeli.

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

Właściwość RepeatDirection ma wpływ na sposób, w jaki są ułożone elementy w elemecie DataList. Rysunek 5 przedstawia wyniki z właściwością ustawioną RepeatDirection na Horizontalwartość . Należy pamiętać, że pierwsze trzy produkty Chai, Chang i Syrop aniseed 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 powrotem na Vertical, jednak określa te produkty od góry do dołu, od lewej do prawej, jak pokazano na rysunku 6.

Rysunek 6. W tym miejscu produkty są ułożone 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. Jest to właśnie limit całkowitej liczby elementów źródła danych podzielonych przez RepeatColumns wartość właściwości. 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. RepeatDirection Jeśli właściwość jest ustawiona na Verticalwartość , ostatnia kolumna będzie zawierać puste komórki. Jeśli RepeatDirection wartość to Horizontal, ostatni wiersz będzie zawierać puste komórki.

Podsumowanie

Lista Danych Domyślnie wyświetla listę jej elementów w jednokolumnach, wielowierszowej tabeli, która naśladuje układ kontrolki GridView z jednym 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. W tym celu wystarczy ustawić właściwość kontrolki RepeatColumns DataList na 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 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 przejrzyona przez wielu przydatnych recenzentów. Głównym recenzentem tego samouczka był John Suru. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi wiersz pod adresemmitchell@4GuysFromRolla.com .

Wstecz Dalej