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

Scott Mitchell tarafından

Örnek uygulamayı indirin veya PDF 'yi indirin

Bu kısa öğreticide, DataList 'in düzeninin RepeatColumns ve RepeatDirection özellikleri aracılığıyla nasıl özelleştirileceğini keşfedeceğiz.

Giriş

Son iki öğreticilerde görtiğimiz DataList örnekleri, tek sütunlu HTML <table>bir satır olarak veri kaynağından her bir kaydı işlemiştir. Bu varsayılan DataList davranışından, veri kaynağı öğelerinin çok sütunlu, çok satırlı bir tabloya yayılması gibi DataList görüntüsünü özelleştirmek çok kolaydır. Üstelik, tüm veri kaynağı öğelerinin tek satırlık, çok sütunlu bir DataList 'te görüntülenmesini olanaklı hale gelir.

DataList s mizanpajını RepeatColumns ve RepeatDirection özellikleriyle özelleştirebiliriz, bu, sırasıyla kaç sütun oluşturulduğunu ve bu öğelerin dikey veya yatay olarak düzenlendiğini gösterir. Şekil 1, örneğin, ürün bilgilerini üç sütunlu bir tabloda görüntüleyen bir DataList gösterir.

DataList her satır Için üç ürün gösterir

Şekil 1: DataList, her satır Için üç ürün gösterir (tam boyutlu görüntüyü görüntülemek için tıklatın)

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

1. Adım: ürün bilgilerini bir DataList 'te görüntüleme

RepeatColumns ve RepeatDirection özelliklerini incelemeden önce, ilk olarak sayfamızda Standart tek sütunlu, çok satırlı Tablo düzeni kullanılarak ürün bilgilerini listeleyen bir DataList oluşturalım. Bu örnekte, aşağıdaki biçimlendirmeyi kullanarak s ürün adını, kategorisini ve fiyatını görüntüler.

<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ımları hızla taşıyacağım. RepeatColumnAndDirection.aspx sayfasını DataListRepeaterBasics klasöründen açıp araç kutusundan bir DataList ' ten tasarımcı üzerine sürükleyin. DataList s akıllı etiketinden yeni bir ObjectDataSource oluşturmayı ve bu uygulamayı ProductsBLL sınıf s GetProducts yönteminden verileri çekmesini ve sihirbazın s ekleme, GÜNCELLEŞTIRME ve SILME sekmelerinden (None) seçeneğini seçmeyi tercih edin.

Yeni ObjectDataSource 'u oluşturup DataList 'e bağladıktan sonra Visual Studio otomatik olarak her bir ürün verileri alanının adını ve değerini görüntüleyen bir ItemTemplate oluşturur. Text özelliklerine değer atamak için uygun veri bağlama söz dizimini kullanan etiket denetimleriyle, ürün adı, Kategori adıve Fiyat metni ' ni kullanarak doğrudan bildirim temelli biçimlendirme veya şablon düzenleme seçeneğinden ItemTemplate ayarlayın. ItemTemplategüncelleştirildikten sonra, sayfa için bildirim temelli biçimlendirmenin aşağıdakine benzer şekilde görünmesi gerekir:

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

UnitPriceiçin Eval veri bağlama söz dizimine bir Biçim belirleyicisi dahil etdin ve döndürülen değeri para birimi olarak biçimlendirdim Eval("UnitPrice", "{0:C}").

Bir tarayıcıda sayfanızı 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.

Varsayılan olarak, DataList tek sütunlu, çok satırlı bir tablo olarak Işler

Şekil 2: varsayılan olarak, DataList tek sütunlu, çok satırlı bir tablo olarak işlenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: DataList s 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 düzenlerken, bu davranış DataList s RepeatDirection özelliğiaracılığıyla kolayca değiştirilebilir. RepeatDirection özelliği iki olası değerden birini kabul edebilir: Horizontal veya Vertical (varsayılan).

RepeatDirection özelliğini Vertical Horizontalolarak değiştirerek, DataList, kayıtlarını tek bir satırda işler ve veri kaynağı öğesi başına bir sütun oluşturur. Bu etkiyi göstermek için, tasarımcıda DataList ' e tıklayın ve ardından Özellikler penceresi RepeatDirection özelliğini Vertical ' den Horizontalolarak değiştirin. Böylece tasarımcı, DataList s yerleşimini ayarlar, tek satırlı, çok sütunlu bir arabirim oluşturur (bkz. Şekil 3).

RepeatDirection özelliği , DataList öğelerinin nasıl düzenlendiğini belirler

Şekil 3: RepeatDirection özelliği, DataList öğelerinin nasıl düzenlendiğini belirler (tam boyutlu görüntüyü görüntülemek için tıklayın)

Küçük miktarlarda veri görüntülerken, tek satırlık, çok sütunlu bir tablo, ekranın gerçek durumunu en üst düzeye çıkarmak için ideal bir yol olabilir. Ancak, daha büyük hacimler için, tek bir satır çok sayıda sütun gerektirir, bu da bu öğeleri ekranda ekranın sağına sığdırabilecek şekilde gönderir. Şekil 4 ' te, tek satırlık bir DataList 'te işlendiğinde ürünler gösterilmektedir. Birçok ürün (80 ' den fazla) olduğundan, her bir ürün hakkındaki bilgileri görüntülemek için kullanıcının en sağa kaydırmasına sahip olması gerekir.

Çok büyük veri kaynakları Için DataList, tek bir sütun olarak yatay kaydırma gerektirir

Şekil 4: yeterince büyük veri kaynakları için tek bir DataList sütunu yatay kaydırma gerektirir (tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: verileri çok sütunlu, çok satırlı bir tabloda görüntüleme

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

Örneğimizde, her tablo satırı için üç ürün gösterelim. Bu nedenle, RepeatColumns özelliğini 3 olarak ayarlayın. Bu değişikliği yaptıktan sonra sonuçları bir tarayıcıda görüntülemek için bir dakikanızı ayırın. Şekil 5 ' i gösterdiği gibi, ürünler artık üç sütunlu, çok satırlı bir tabloda listelenir.

her satır için üç ürün görüntülenir

Şekil 5: her satır Için üç ürün görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

RepeatDirection özelliği, DataList 'teki öğelerin nasıl düzenlendiğini etkiler. Şekil 5 ' te RepeatDirection özelliği Horizontalolarak ayarlanan sonuçlar gösterilmektedir. İlk üç ürünün Chai, Chang ve Aniseed Syrup 'un soldan sağa ve yukarıdan aşağıya doğru düzenlendiğini unutmayın. Sonraki üç ürün (Chef Anton s Cajun mevsimlik ile başlayarak) ilk üçü altında bir satırda görüntülenir. RepeatDirection özelliğini Verticalolarak değiştirme, ancak Şekil 6 ' da gösterildiği gibi, bu ürünleri yukarıdan aşağıya doğru olarak düzenler.

Burada , ürünler dikey olarak düzenlenir

Şekil 6: burada, ürünler dikey olarak düzenlenir (tam boyutlu görüntüyü görüntülemek için tıklatın)

Elde edilen tabloda görüntülenecek satır sayısı, DataList 'e bağlı toplam kayıt sayısına bağlıdır. Tam olarak, veri kaynağı öğelerinin toplam sayısının RepeatColumns Özellik değeri tarafından bölünen üst öğesi. Products tabloda Şu anda 84 ürün olduğundan, bu, 3 ' ü bölünebilen 28 satır vardır. Veri kaynağındaki öğe sayısı ve RepeatColumns Özellik değeri bölünemez ise, son satır veya sütunda boş hücreler olur. RepeatDirection Verticalolarak ayarlanırsa, son sütunda boş hücreler olacaktır; RepeatDirection Horizontal, son satırda boş hücreler olur.

Özet

DataList, varsayılan olarak öğelerini tek sütunlu, çok satırlı bir tabloda listeler ve tek bir TemplateField içeren bir GridView 'un düzenine sahiptir. Bu varsayılan düzen kabul edilebilir olsa da, satır başına birden çok veri kaynağı öğesi görüntüleyerek ekran ile gerçek zamanlı olarak en üst düzeye çıkarabilirsiniz. Bunu yapmak, DataList s RepeatColumns özelliğini her satır için görüntülenecek sütun sayısıyla ayarlamanın bir önemi olur. Ayrıca, DataList s RepeatDirection özelliği, çok sütunlu, çok satırlı tablo içeriğinin yatay olarak soldan sağa, yukarıdan aşağıya veya dikey olarak yukarıdan aşağıya doğru bir şekilde düzenlenip düzenlenmeyeceğini belirtmek için kullanılabilir.

Yazar hakkında

4GuysFromRolla.com 'in, Scott Mitchell, yedi ASP/ASP. net books ve 'in yazarı, 1998 sürümünden bu yana Microsoft Web teknolojileriyle çalışmaktadır. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor. En son kitabı, 24 saat içinde ASP.NET 2,0 kendi kendinize eğitimister. mitchell@4GuysFromRolla.comadresinden erişilebilir . ya da blog aracılığıyla http://ScottOnWriting.NETbulabilirsiniz.

Özel olarak teşekkürler

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi. Bu öğreticide lider olarak gözden geçiren John suru idi. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz? Öyleyse, benimitchell@4GuysFromRolla.combir satır bırakın .