DataList Denetimi ile Satır Başına Birden Çok Kayıt Gösterme (C#)

2025-05-04

Bu kısa öğreticide, RepeatColumns ve RepeatDirection özellikleri aracılığıyla DataList düzenini özelleştirmeyi keşfedeceğiz.

Giriş

Son iki öğreticide gördüğümüz DataList örnekleri, veri kaynağındaki her kaydı tek sütunlu <table>HTML'de satır olarak işlemiştir. Bu varsayılan DataList davranışı olsa da, DataList görünümünü veri kaynağı öğelerinin çok sütunlu, çok satırlı bir tabloya yayılacak şekilde özelleştirilmesi çok kolaydır. Ayrıca, tüm veri kaynağı öğelerinin tek satırlı, çok sütunlu bir DataList içinde görüntülenmesi mümkündür.

DataList düzenini, RepeatColumns ve RepeatDirection özellikleri aracılığıyla özelleştirebiliriz. Bu özelliklerle, sırasıyla kaç sütunun işlendiğini ve öğelerin dikey mi yoksa yatay mı düzenlendiğini belirtebiliriz. Şekil 1'de, örneğin, üç sütunlu bir tabloda ürün bilgilerini görüntüleyen bir DataList gösterilmektedir.

Şekil 1: DataList Satır Başına Üç Ürün Gösteriyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

DataList, satır başına birden çok veri kaynağı öğesi göstererek yatay ekran alanını daha etkili bir şekilde kullanabilir. Bu kısa öğreticide bu iki DataList özelliğini keşfedeceğiz.

1. Adım: DataList'te Ürün Bilgilerini Görüntüleme

Öncelikle RepeatColumns ve RepeatDirection özelliklerini incelemeden önce, ürün bilgilerini listeleyen standart tek sütunlu, çok satırlı tablo düzenini sayfamızda kullanarak bir DataList oluşturalım. Bu örnekte, aşağıdaki işaretlemeyi kullanarak ürünün adını, kategorisini ve fiyatını görüntüleyelim:

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

Önceki örneklerde bir DataList'e veri bağlamayı gördük, bu nedenle bu adımlarda hızlı bir şekilde ilerleyeceğim. İlk olarak RepeatColumnAndDirection.aspx klasöründeki DataListRepeaterBasics sayfasını açın ve Araç Kutusu'ndan bir DataList'i Tasarımcı'ya sürükleyin. DataList'in akıllı etiketinden yeni bir ObjectDataSource oluşturmayı ve sihirbazın INSERT, UPDATE ve DELETE sekmelerinden ProductsBLL (Yok) seçeneğini belirleyerek sınıfın GetProducts yönteminden verilerini çekecek şekilde yapılandırmayı tercih edin.

Yeni ObjectDataSource'u oluşturup DataList'e bağladıktan sonra, Visual Studio otomatik olarak ürün veri alanlarının her birinin adını ve değerini görüntüleyen bir ItemTemplate oluşturur. ItemTemplate DataList'in akıllı etiketindeki bildirim temelli işaretleme aracılığıyla veya Şablonları Düzenle seçeneğinden, yukarıda gösterilen işaretlemeyi kullanacak şekilde ayarlayın; Ürün Adı, Kategori Adı ve Fiyat metnini özelliklerine Text değer atamak için uygun veri bağlama söz dizimini kullanan Etiket denetimleriyle değiştirin. güncelleştirdikten ItemTemplatesonra sayfanızın bildirim temelli işaretlemesi aşağıdakine benzer görünmelidir:

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

Dikkat edin, döndürülen değeri para birimi olarak biçimlendirmek için Eval veri bağlama söz dizimi içinde bir biçim tanımlayıcısı ekledim UnitPrice - Eval("UnitPrice", "{0:C}").

Sayfanızı tarayıcıda ziyaret etmek için bir dakikanızı ayırın. Şekil 2'de gösterildiği gibi, DataList tek sütunlu, çok satırlı bir ürün tablosu olarak işlenir.

Şekil 2: Varsayılan olarak, DataList Tek Sütunlu, Çok Satırlı Bir Tablo Olarak İşler (Tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: DataList'in Düzen Yönünü Değiştirme

DataList için varsayılan davranış, öğelerini tek sütunlu, çok satırlı bir tabloda dikey olarak sıralamak olsa da, bu davranış DataList özelliğiRepeatDirection aracılığıyla kolayca değiştirilebilir. RepeatDirection özelliği iki olası değerden birini kabul edebilir: Horizontal veya Vertical (varsayılan).

Özelliği RepeatDirection'den Vertical'ye değiştirildiğinde, DataList kayıtlarını tek bir satırda görüntüleyerek her veri kaynağı öğesi için bir sütun oluşturur. Bu etkiyi göstermek için Tasarımcı'da DataList'e tıklayın ve Özellikler penceresinden RepeatDirection özelliğini Vertical'den Horizontal'ye değiştirin. Tasarımcı bunu yaptıktan hemen sonra DataList düzenini ayarlayarak tek satırlı, çok sütunlu bir arabirim oluşturur (bkz. Şekil 3).

Şekil 3: RepeatDirection Özellik, DataList Öğelerinin Yerleştirdiği Yönü Belirler (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Az miktarda veri görüntülerken, tek satırlı, çok sütunlu bir tablo, ekran emlaklarını en üst düzeye çıkarmak için ideal bir yol olabilir. Ancak, daha büyük hacimli veriler için tek bir satır, ekrana sığamayan öğeleri sağa doğru iten çok sayıda sütun gerektirir. Şekil 4, ürünlerin tek satırlık bir DataList'e dönüştürüldüğünde nasıl göründüğünü göstermektedir. Birçok ürün (80'den fazla) olduğundan, kullanıcının ürünlerin her biri hakkındaki bilgileri görüntülemek için sağa doğru kaydırması gerekir.

Şekil 4: Yeterince Büyük Veri Kaynakları için Tek Sütunlu DataList Yatay Kaydırma Gerektirir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: Çok Sütunlu, Çok Satırlı Bir Tabloda Verileri Görüntüleme

Çok sütunlu, çok satırlı bir DataList oluşturmak için özelliğini görüntülenecek sütun sayısına ayarlamamız RepeatColumns gerekir. Varsayılan olarak, RepeatColumns özellik 0 olarak ayarlanır ve bu da DataList'in tüm öğelerini tek bir satırda veya sütunda görüntülemesine neden olur (özelliğin RepeatDirection değerine bağlı olarak).

Örneğimiz için tablo satırı başına üç ürün görüntüleyelim. Bu nedenle özelliğini 3 olarak ayarlayın RepeatColumns . Bu değişikliği yaptıktan sonra sonuçları tarayıcıda görüntülemek için biraz bekleyin. Şekil 5'te gösterildiği gibi, ürünler artık üç sütunlu, çok satırlı bir tabloda listelenmiştir.

Şekil 5: Satır Başına Üç Ürün Görüntüleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

özelliği, RepeatDirection DataList içindeki öğelerin nasıl yerleştirildiğinden etkilenir. Şekil 5'de özelliğinin RepeatDirection olarak ayarlandığı Horizontalsonuçlar gösterilir. İlk üç ürünün Chai, Chang ve Anason Şurupunun soldan sağa, yukarıdan aşağıya yerleştirildiğini unutmayın. Sonraki üç ürün (Chef Anton'un Cajun Baharatı ile başlayarak) ilk üç ürünün altında bir satırda görünür. Ancak, RepeatDirection özelliğini tekrar Vertical olarak değiştirerek, bu ürünleri Şekil 6'da gösterildiği gibi yukarıdan aşağıya, soldan sağa doğru sıralar.

Şekil 6: Burada, Ürünler Dikey Olarak Düzenlenmiştir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Sonuçta elde edilen tabloda görüntülenen satır sayısı, DataList'e bağlı toplam kayıt sayısına bağlıdır. Tam olarak, toplam veri kaynağı öğesi sayısının, RepeatColumns özellik değerine bölünmesi sonucu oluşan sayının tavanıdır. Products Tabloda şu anda 3'e bölünebilen 84 ürün olduğundan 28 satır vardır. Veri kaynağındaki öğe sayısı ve RepeatColumns özellik değeri bölünemiyorsa, son satır veya sütun boş hücrelere sahip olur. RepeatDirection olarak ayarlanırsaVertical, son sütun boş hücrelere sahip olur; ise RepeatDirectionHorizontal, son satır boş hücrelere sahip olur.

Özet

DataList varsayılan olarak, öğelerini tek sütunlu, çok satırlı bir tabloda listeler ve bu tablo tek bir TemplateField ile GridView düzenini taklit eder. Bu varsayılan düzen kabul edilebilir olsa da, satır başına birden çok veri kaynağı öğesi görüntüleyerek ekran emlaklarını en üst düzeye çıkarabiliriz. Bunun gerçekleştirilmesi, DataList s RepeatColumns özelliğini satır başına görüntülenecek sütun sayısına ayarlamakla ilgili bir işlemdir. Ayrıca, DataList s RepeatDirection özelliği çok sütunlu, çok satırlı tablonun içeriğinin soldan sağa, yukarıdan aşağıya veya dikey olarak yukarıdan aşağıya, soldan sağa yatay olarak yerleştirilip yerleştirilmeyeceğini belirtmek için kullanılabilir.

Yazar Hakkında

Yedi ASP/ASP.NET kitabının yazarı ve 4GuysFromRolla.com kurucusu Scott Mitchell, 1998'den beri Microsoft Web teknolojileriyle çalışmaktadır. Scott bağımsız bir danışman, eğitmen ve yazar olarak çalışır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Ona adresinden mitchell@4GuysFromRolla.comulaşabilirsiniz.

Özel Teşekkürler

Bu eğitim serisi, birçok yararlı kişi tarafından incelendi. Bu öğreticinin baş gözden geçireni John Suru'ydu. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, mitchell@4GuysFromRolla.com'a bir mesaj bırakın.

Önceki Sonraki

Aracılığıyla paylaş