DataList Denetimi ile Satır Başına Birden Çok Kayıt Gösterme (VB)Showing Multiple Records per Row with the DataList Control (VB)

Scott Mitchell tarafındanby Scott Mitchell

Örnek uygulamayı indirin veya PDF 'yi indirinDownload Sample App or Download PDF

Bu kısa öğreticide, DataList 'in düzeninin RepeatColumns ve RepeatDirection özellikleri aracılığıyla nasıl özelleştirileceğini keşfedeceğiz.In this short tutorial we'll explore how to customize the DataList's layout through its RepeatColumns and RepeatDirection properties.

GirişIntroduction

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.The DataList examples we ve seen in the past two tutorials have rendered each record from its data source as a row in a single-column HTML <table>. 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.While this is the default DataList behavior, it is very easy to customize the DataList display such that the data source items are spread across a multi-column, multi-row table. Üstelik, tüm veri kaynağı öğelerinin tek satırlık, çok sütunlu bir DataList 'te görüntülenmesini olanaklı hale gelir.Moreover, it s possible to have all of the data source items displayed in a single-row, multi-column DataList.

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.We can customize the DataList s layout through its RepeatColumns and RepeatDirection properties, which, respectively, indicate how many columns are rendered and whether those items are laid out vertically or horizontally. Şekil 1, örneğin, ürün bilgilerini üç sütunlu bir tabloda görüntüleyen bir DataList gösterir.Figure 1, for example, shows a DataList that displays product information in a table with three columns.

DataList her satır Için üç ürün gösterirThe DataList Shows Three Products per Row

Ş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)Figure 1: The DataList Shows Three Products per Row (Click to view full-size image)

Her satır için birden çok veri kaynağı öğesi göstererek DataList, yatay ekran alanını daha etkili bir şekilde kullanabilir.By showing multiple data source items per row, the DataList can more effectively utilize horizontal screen space. Bu kısa öğreticide, bu iki DataList özelliğini keşfedeceğiz.In this short tutorial we'll explore these two DataList properties.

1. Adım: ürün bilgilerini bir DataList 'te görüntülemeStep 1: Displaying Product Information in a DataList

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.Before we examine the RepeatColumns and RepeatDirection properties, let s first create a DataList on our page that lists product information using the standard single-column, multi-row table layout. Bu örnekte, aşağıdaki biçimlendirmeyi kullanarak s ürün adını, kategorisini ve fiyatını görüntüler.For this example, let s display the product s name, category, and price using the following markup:

<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.We ve seen how to bind data to a DataList in previous examples, so I'll move through these steps quickly. RepeatColumnAndDirection.aspx sayfasını DataListRepeaterBasics klasöründen açıp araç kutusundan bir DataList ' ten tasarımcı üzerine sürükleyin.Start by opening the RepeatColumnAndDirection.aspx page in the DataListRepeaterBasics folder and drag a DataList from the Toolbox onto the Designer. 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.From the DataList s smart tag, opt to create a new ObjectDataSource and configure it to pull its data from the ProductsBLL class s GetProducts method, choosing the (None) option from the wizard s INSERT, UPDATE, and DELETE tabs.

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.After creating and binding the new ObjectDataSource to the DataList, Visual Studio will automatically create an ItemTemplate that displays the name and value for each of the product data fields. 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.Adjust the ItemTemplate either directly through the declarative markup or from the Edit Templates option in the DataList s smart tag so that it uses the markup shown above, replacing the Product Name, Category Name, and Price text with Label controls that use the appropriate databinding syntax to assign values to their Text properties. ItemTemplategüncelleştirildikten sonra, sayfa için bildirim temelli biçimlendirmenin aşağıdakine benzer şekilde görünmesi gerekir:After updating the ItemTemplate, your page s declarative markup should look similar to the following:

<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}").Notice that I ve included a format specifier in the Eval databinding syntax for the UnitPrice, formatting the returned value as a currency - Eval("UnitPrice", "{0:C}").

Bir tarayıcıda sayfanızı ziyaret etmek için bir dakikanızı ayırın.Take a moment to visit your page in a browser. Şekil 2 ' de gösterildiği gibi, DataList tek sütunlu, çok satırlı bir ürün tablosu olarak işlenir.As Figure 2 shows, the DataList renders as a single-column, multi-row table of products.

Varsayılan olarak, DataList tek sütunlu, çok satırlı bir tablo olarak Işler By Default, the DataList Renders as a Single-Column, Multi-Row Table

Ş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)Figure 2: By Default, the DataList Renders as a Single-Column, Multi-Row Table (Click to view full-size image)

2. Adım: DataList s düzen yönünü değiştirmeStep 2: Changing the DataList s Layout Direction

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.While the default behavior for the DataList is to lay out its items vertically in a single-column, multi-row table, this behavior can easily be changed through the DataList s RepeatDirection property. RepeatDirection özelliği iki olası değerden birini kabul edebilir: Horizontal veya Vertical (varsayılan).The RepeatDirection property can accept one of two possible values: Horizontal or Vertical (the default).

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.By changing the RepeatDirection property from Vertical to Horizontal, the DataList renders its records in a single row, creating one column per data source item. 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.To illustrate this effect, click on the DataList in the Designer and then, from the Properties window, change the RepeatDirection property from Vertical to Horizontal. Böylece tasarımcı, DataList s yerleşimini ayarlar, tek satırlı, çok sütunlu bir arabirim oluşturur (bkz. Şekil 3).Immediately upon doing so, the Designer adjusts the DataList s layout, creating a single-row, multi-column interface (see Figure 3).

RepeatDirection özelliği , DataList öğelerinin nasıl düzenlendiğini belirlerThe RepeatDirection Property Dictates How the Direction the DataList s Items are Laid Out

Ş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)Figure 3: The RepeatDirection Property Dictates How the Direction the DataList s Items are Laid Out (Click to view full-size image)

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.When displaying small amounts of data, a single-row, multi-column table might be an ideal way to maximize screen real estate. 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.For larger volumes of data, however, a single row will require numerous columns, which pushes those items that can t fit on the screen off to the right. Şekil 4 ' te, tek satırlık bir DataList 'te işlendiğinde ürünler gösterilmektedir.Figure 4 shows the products when rendered in a single-row DataList. 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.Since there are many products (over 80), the user will have to scroll far to the right to view information about each of the products.

Çok büyük veri kaynakları Için DataList, tek bir sütun olarak yatay kaydırma gerektirirFor Sufficiently Large Data Sources, a Single Column DataList Will Require Horizontal Scrolling

Ş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)Figure 4: For Sufficiently Large Data Sources, a Single Column DataList Will Require Horizontal Scrolling (Click to view full-size image)

3. Adım: verileri çok sütunlu, çok satırlı bir tabloda görüntülemeStep 3: Displaying Data in a Multi-Column, Multi-Row Table

Ç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.To create a multi-column, multi-row DataList, we need to set the RepeatColumns property to the number of columns to display. 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.By default, the RepeatColumns property is set to 0, which will cause the DataList to display all of its items in a single row or a column (depending on the value of the RepeatDirection property).

Örneğimizde, her tablo satırı için üç ürün gösterelim.For our example, let s display three products per table row. Bu nedenle, RepeatColumns özelliğini 3 olarak ayarlayın.Therefore, set the RepeatColumns property to 3. 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.After making this change, take a moment to view the results in a browser. Şekil 5 ' i gösterdiği gibi, ürünler artık üç sütunlu, çok satırlı bir tabloda listelenir.As Figure 5 shows, the products are now listed in a three-column, multi-row table.

her satır için üç ürün görüntülenirThree Products are Displayed per Row

Ş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)Figure 5: Three Products are Displayed per Row (Click to view full-size image)

RepeatDirection özelliği, DataList 'teki öğelerin nasıl düzenlendiğini etkiler. Şekil 5 ' te RepeatDirection özelliği Horizontalolarak ayarlanan sonuçlar gösterilmektedir.The RepeatDirection property affects how the items in the DataList are laid out. Figure 5 shows the results with the RepeatDirection property set to Horizontal. İ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.Note that the first three products Chai, Chang, and Aniseed Syrup are laid out from left to right, top to bottom. Sonraki üç ürün (Chef Anton s Cajun mevsimlik ile başlayarak) ilk üçü altında bir satırda görüntülenir.The next three products (starting with Chef Anton s Cajun Seasoning) appear in a row beneath the first three. 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.Changing the RepeatDirection property back to Vertical, however, lays out these products from top to bottom, left to right, as Figure 6 illustrates.

Burada , ürünler dikey olarak düzenlenirHere, the Products are Laid Out Vertically

Şekil 6: burada, ürünler dikey olarak düzenlenir (tam boyutlu görüntüyü görüntülemek için tıklatın)Figure 6: Here, the Products are Laid Out Vertically (Click to view full-size image)

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.The number of rows displayed in the resulting table depends on the number of total records bound to the DataList. Tam olarak, veri kaynağı öğelerinin toplam sayısının RepeatColumns Özellik değeri tarafından bölünen üst öğesi.Precisely, it s the ceiling of the total number of data source items divided by the RepeatColumns property value. Products tabloda Şu anda 84 ürün olduğundan, bu, 3 ' ü bölünebilen 28 satır vardır.Since the Products table currently has 84 products, which is divisible by 3, there are 28 rows. 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.If the number of items in the data source and the RepeatColumns property value are not divisible, then the last row or column will have blank cells. RepeatDirection Verticalolarak ayarlanırsa, son sütunda boş hücreler olacaktır; RepeatDirection Horizontal, son satırda boş hücreler olur.If the RepeatDirection is set to Vertical, then the last column will have empty cells; if RepeatDirection is Horizontal, then the last row will have the empty cells.

ÖzetSummary

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.The DataList, by default, lists its items in a single-column, multi-row table, which mimics the layout of a GridView with a single TemplateField. 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.While this default layout is acceptable, we can maximize screen real estate by displaying multiple data source items per row. 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.Accomplishing this is simply a matter of setting the DataList s RepeatColumns property to the number of columns to display per row. 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.Additionally, the DataList s RepeatDirection property can be used to indicate whether the contents of the multi-column, multi-row table should be laid out horizontally from left to right, top to bottom or vertically from top to bottom, left to right.

Yazar hakkındaAbout the Author

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 Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor.Scott works as an independent consultant, trainer, and writer. En son kitabı, 24 saat içinde ASP.NET 2,0 kendi kendinize eğitimister.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.comadresinden erişilebilir .He can be reached at mitchell@4GuysFromRolla.com. ya da blog aracılığıyla http://ScottOnWriting.NETbulabilirsiniz.or via his blog, which can be found at http://ScottOnWriting.NET.

Özel olarak teşekkürlerSpecial Thanks To

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi.This tutorial series was reviewed by many helpful reviewers. Bu öğreticide lider olarak gözden geçiren John suru idi.Lead reviewer for this tutorial was John Suru. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz?Interested in reviewing my upcoming MSDN articles? Öyleyse, benimitchell@4GuysFromRolla.combir satır bırakın .If so, drop me a line at mitchell@4GuysFromRolla.com.