DataList ve Repeater Denetimleri ile Verileri Görüntüleme (VB)

Makale
07/13/2023

Önceki öğreticilerde verileri görüntülemek için GridView denetimini kullandık. Bu öğreticiden başlayarak, bu denetimlerle verileri görüntülemenin temellerinden başlayarak DataList ve Repeater denetimleriyle ortak raporlama desenleri oluşturmaya göz atacağız.

Giriş

Son 28 öğreticideki tüm örneklerde, bir veri kaynağından birden çok kayıt görüntülememiz gerekirse GridView denetimine dönüştürmüş olduk. GridView, veri kaynağındaki her kayıt için bir satır oluşturur ve kaydın veri alanlarını sütunlarda görüntüler. GridView verileri görüntülemeyi, sayfalandırmayı, sıralamayı, düzenlemeyi ve silmeyi tuttursa da, görünümü biraz kutucuklu olur. Ayrıca, GridView yapısından sorumlu işaretleme, her kayıt için tablo satırı (<tr>) içeren bir HTML <table> ve her alan için bir tablo hücresi (<td>) içerdiği sabittir.

ASP.NET 2.0, birden çok kayıt görüntülerken görünümde ve işlenmiş işaretlemede daha fazla özelleştirme sağlamak için DataList ve Repeater denetimlerini sunar (her ikisi de ASP.NET sürüm 1.x'te de kullanılabilir). DataList ve Repeater denetimleri, içeriğini BoundFields, CheckBoxFields, ButtonFields vb. yerine şablonları kullanarak işler. GridView gibi DataList de HTML <table>olarak işlenir, ancak tablo satırı başına birden çok veri kaynağı kaydının görüntülenmesini sağlar. Yineleyici ise açıkça belirttiğinizden daha fazla işaretleme işlemez ve gösterilen işaretleme üzerinde tam denetime ihtiyacınız olduğunda ideal bir adaydır.

Sonraki onlarca öğreticide, bu denetim şablonlarıyla verileri görüntülemenin temellerinden başlayarak DataList ve Repeater denetimleriyle ortak raporlama desenleri oluşturmaya göz atacağız. Bu denetimleri biçimlendirmeyi, DataList'te veri kaynağı kayıtlarının düzenini değiştirmeyi, yaygın ana/ayrıntı senaryolarını, verileri düzenleme ve silme yollarını, kayıtlarda sayfalandırmayı vb. göreceğiz.

1. Adım: DataList ve Repeater Öğreticisi Web Sayfalarını Ekleme

Bu öğreticiye başlamadan önce, bu öğretici için ihtiyacımız olan ASP.NET sayfalarını ve DataList ve Repeater kullanarak verileri görüntülemeyle ilgili sonraki birkaç öğreticiyi eklemek için biraz zaman ayıralım. Projede adlı DataListRepeaterBasicsyeni bir klasör oluşturarak başlayın. Ardından, aşağıdaki beş ASP.NET sayfasını bu klasöre ekleyin ve tümünün ana sayfayı Site.masterkullanacak şekilde yapılandırılmasını sağlayın:

Default.aspx
Basics.aspx
Formatting.aspx
RepeatColumnAndDirection.aspx
NestedControls.aspx

DataListRepeaterBasics Klasörü Oluşturma ve Öğretici ASP.NET Sayfaları Ekleme

Şekil 1: Klasör Oluşturma DataListRepeaterBasics ve Öğretici ASP.NET Sayfaları Ekleme

Sayfayı Default.aspx açın ve Kullanıcı Denetimi'ni SectionLevelTutorialListing.ascx klasörden UserControls Tasarım yüzeyine sürükleyin. Ana Sayfalar ve Site Gezintisi öğreticisinde oluşturduğumuz bu Kullanıcı Denetimi, site haritasını numaralandırır ve geçerli bölümdeki öğreticileri madde işaretli bir listede görüntüler.

Şekil 2: Kullanıcı Denetimini ekleme SectionLevelTutorialListing.ascxDefault.aspx (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Madde işaretli listenin oluşturacağımız DataList ve Repeater öğreticilerini görüntülemesini sağlamak için bunları site haritasına eklememiz gerekir. Web.sitemap Dosyayı açın ve Özel Düğmeler Ekleme site haritası düğümü işaretlemesinin ardından aşağıdaki işaretlemeyi ekleyin:

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

Site Haritasını Yeni ASP.NET Sayfalarını Içerecek Şekilde Güncelleştirin

Şekil 3: Site Haritası'nı Yeni ASP.NET Sayfalarını Içerecek Şekilde Güncelleştirme

2. Adım: DataList ile Ürün Bilgilerini Görüntüleme

FormView'a benzer şekilde, DataList denetiminin işlenen çıkışı, BoundFields, CheckBoxFields vb. yerine şablonlara bağlıdır. FormView'dan farklı olarak, DataList tek bir kayıt yerine bir kayıt kümesini görüntülemek için tasarlanmıştır. Bu öğreticiye ürün bilgilerini DataList'e bağlama konusuna göz atarak başlayalım. Klasördeki DataListRepeaterBasics sayfayı Basics.aspx açarak başlayın. Ardından, Araç Kutusu'ndan bir DataList öğesini Tasarım Aracı sürükleyin. Şekil 4'ün gösterdiği gibi, DataList şablonlarını belirtmeden önce Tasarım Aracı bunu gri kutu olarak görüntüler.

Şekil 4: DataList'i Araç Kutusundan Tasarım Aracı Sürükleyin (Tam boyutlu görüntüyü görüntülemek için tıklayın)

DataList'in akıllı etiketinden yeni bir ObjectDataSource ekleyin ve sınıfın ProductsBLLGetProducts yöntemini kullanacak şekilde yapılandırın. Bu öğreticide salt okunur bir DataList oluşturduğumuz için, sihirbazın INSERT, UPDATE ve DELETE sekmelerinde açılan listeyi (Yok) olarak ayarlayın.

Şekil 5: Yeni ObjectDataSource Oluşturmayı Kabul Etme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 6: ObjectDataSource'ı Sınıfı Kullanacak ProductsBLL Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 7: Yöntemi Kullanarak GetProducts Tüm Ürünler Hakkında Bilgi Alma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ObjectDataSource'u yapılandırdıktan ve akıllı etiketi aracılığıyla DataList ile ilişkilendirdikten sonra, Visual Studio DataList'te otomatik olarak veri kaynağı tarafından döndürülen her veri alanının adını ve değerini görüntüleyen bir ItemTemplate oluşturur (aşağıdaki işaretlemeye bakın). Bu varsayılan ItemTemplate görünüm, Tasarım Aracı aracılığıyla bir veri kaynağını FormView'a bağlarken otomatik olarak oluşturulan şablonların görünümüyle aynıdır.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Not

Bir veri kaynağını FormView'un akıllı etiketi aracılığıyla bir FormView denetimine bağlarken Visual Studio'nun bir ItemTemplate, InsertItemTemplateve EditItemTemplateoluşturduğunu hatırlayın. Ancak DataList ile yalnızca bir ItemTemplate oluşturulur. Bunun nedeni DataList'in FormView tarafından sunulan aynı yerleşik düzenleme ve ekleme desteğine sahip olmamasıdır. DataList düzenleme ve silme ile ilgili olaylar içerir ve düzenleme ve silme desteği biraz kodla eklenebilir, ancak FormView'da olduğu gibi basit bir kullanıma açık destek yoktur. Gelecek bir öğreticide DataList ile düzenleme ve silme desteğinin nasıl dahil olduğunu göreceğiz.

Bu şablonun görünümünü geliştirmek için biraz zaman ayıralım. Tüm veri alanlarını görüntülemek yerine yalnızca ürünün adını, tedarikçisini, kategorisini, birim başına miktarını ve birim fiyatını görüntüleyelim. Ayrıca, adı başlıkta <h4> görüntüleyelim ve kalan alanları başlığın altında bir <table> kullanarak düzenleyelim.

Bu değişiklikleri yapmak için, DataList'in akıllı etiketinden Şablonları Düzenle bağlantısına tıklayarak Tasarım Aracı şablon düzenleme özelliklerini kullanabilir veya sayfanın bildirim temelli söz dizimi aracılığıyla şablonu el ile değiştirebilirsiniz. Tasarım Aracı Şablonları Düzenle seçeneğini kullanırsanız, sonuçta elde ettiğiniz işaretleme aşağıdaki işaretlemeyle tam olarak eşleşmeyebilir, ancak tarayıcı üzerinden görüntülendiğinde Şekil 8'de gösterilen ekran görüntüsüne çok benzer olmalıdır.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Not

Yukarıdaki örnekte, özelliğine veri bağlama söz diziminin değeri atanmış olan Text Etiket Web denetimleri kullanılır. Alternatif olarak, Yalnızca veri bağlama söz dizimini yazarak Etiketleri tamamen atlayabilirdik. Başka bir ifadeyle, kullanmak <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> yerine bildirim temelli söz dizimini <%# Eval("CategoryName") %>kullanabilirdik.

Ancak Etiket Web denetimlerinden çıkmak iki avantaj sunar. İlk olarak, sonraki öğreticide göreceğimiz gibi verileri verilere göre biçimlendirmek için daha kolay bir araç sağlar. İkincisi, Tasarım Aracı Şablonları Düzenle seçeneği, bazı Web denetiminin dışında görünen bildirim temelli veri bağlama söz dizimini görüntülemez. Bunun yerine, Şablonları Düzenle arabirimi statik işaretleme ve Web denetimleriyle çalışmayı kolaylaştırmak için tasarlanmıştır ve web denetimleri akıllı etiketlerinden erişilebilen Veri Bağlamalarını Düzenle iletişim kutusu aracılığıyla tüm veri bağlama işlemlerinin yapılacağını varsayar.

Bu nedenle, şablonları Tasarım Aracı aracılığıyla düzenleme seçeneği sağlayan DataList ile çalışırken, içeriğe Şablonları Düzenle arabirimi üzerinden erişilebilir olması için Etiket Web denetimlerini kullanmayı tercih ediyorum. Kısa süre sonra göreceğimiz gibi Yineleyici, şablonun içeriğinin Kaynak görünümünde düzenlenmesini gerektirir. Sonuç olarak, Repeater şablonlarını oluştururken, veriye bağlı metnin görünümünü programlama mantığına göre biçimlendirmem gerekmediği sürece Etiket Web denetimlerini sık sık atlıyorum.

Şekil 8: Her Ürünün Çıktısı DataList ItemTemplate Kullanılarak İşleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: DataList'in Görünümünü Geliştirme

GridView'da olduğu gibi DataList de , ForeColor, , BackColor, CssClass, ItemStyle, , AlternatingItemStyle, SelectedItemStyleve gibi Fontstille ilgili bir dizi özellik sunar. GridView ve DetailsView denetimleriyle çalışırken, Temada, bu iki denetimin DataWebControls özelliklerini ve CssClass bunların birkaç alt özelliğinin (RowStyle, HeaderStylevb.) özelliklerini önceden tanımlayan CssClass Dış Görünüm dosyaları oluşturduk. DataList için de aynısını yapalım.

ObjectDataSource ile Veri Görüntüleme öğreticisinde açıklandığı gibi, Cilt dosyası bir Web denetimi için varsayılan görünümle ilgili özellikleri belirtir; Tema, bir web sitesi için belirli bir genel görünümü tanımlayan Skin, CSS, image ve JavaScript dosyalarından oluşan bir koleksiyondur. ObjectDataSource ile Verileri Görüntüleme öğreticisinde, şu anda ve olmak üzere iki Dış Görünüm dosyasına GridView.skinDetailsView.skinsahip bir DataWebControls Tema (klasör içinde App_Themes bir klasör olarak uygulanır) oluşturduk. DataList için önceden tanımlanmış stil ayarlarını belirtmek üzere üçüncü bir Dış Görünüm dosyası ekleyelim.

Dış Görünüm dosyası eklemek için klasöre sağ tıklayın App_Themes/DataWebControls , Yeni Öğe Ekle'yi seçin ve listeden Dış Görünüm Dosyası seçeneğini belirleyin. Dosyayı DataList.skin olarak adlandırın.

Şekil 9: Adlı DataList.skin Yeni Bir Dış Görünüm Dosyası Oluşturma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Dosya için aşağıdaki işaretlemeyi DataList.skin kullanın:

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

Bu ayarlar, GridView ve DetailsView denetimleriyle kullanılan uygun DataList özelliklerine aynı CSS sınıflarını atar. Burada , AlternatingRowStyle, vbRowStyle. DataWebControlStylekullanılan CSS sınıfları dosyada Styles.css tanımlanır ve önceki öğreticilerde eklenmiştir.

Bu Dış Görünüm dosyasının eklenmesiyle, DataList'in görünümü Tasarım Aracı güncelleştirilir (yeni Dış Görünüm dosyasının etkilerini görmek için Tasarım Aracı görünümünü yenilemeniz gerekebilir; Görünüm menüsünde Yenile'yi seçin). Şekil 10'da gösterildiği gibi, değişen her ürünün açık pembe arka plan rengi vardır.

Şekil 10: Adlı DataList.skin Yeni Bir Dış Görünüm Dosyası Oluşturma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

4. Adım: DataList'in Diğer Şablonlarını Keşfetme

DataList, öğesine ek olarak ItemTemplatealtı isteğe bağlı şablonu daha destekler:

HeaderTemplate sağlanırsa, çıkışa bir üst bilgi satırı ekler ve bu satırı işlemek için kullanılır
AlternatingItemTemplate alternatif öğeleri işlemek için kullanılır
SelectedItemTemplateseçili öğeyi işlemek için kullanılır; seçilen öğe, dizini DataList özelliğineSelectedIndex karşılık gelen öğedir
EditItemTemplate düzenlenen öğeyi işlemek için kullanılır
SeparatorTemplate sağlanırsa, her öğe arasına bir ayırıcı ekler ve bu ayırıcıyı işlemek için kullanılır
FooterTemplate - sağlanırsa, çıkışa bir alt bilgi satırı ekler ve bu satırı işlemek için kullanılır

veya FooterTemplatedeğerini belirtirkenHeaderTemplate, DataList işlenen çıktıya ek bir üst bilgi veya alt bilgi satırı ekler. GridView'un üst bilgi ve alt bilgi satırlarında olduğu gibi, DataList'teki üst bilgi ve alt bilgi verilere bağlı değildir. Bu nedenle, veya FooterTemplate içindeki HeaderTemplate bağlı verilere erişmeye çalışan tüm veri bağlama söz dizimleri boş bir dize döndürür.

Not

GridView Alt Bilgi öğreticisindeki Özet Bilgileri Görüntüleme öğreticisinde gördüğümüz gibi, üst bilgi ve alt bilgi satırları veri bağlama söz dizimini desteklemese de, verilere özgü bilgiler GridView'un RowDataBound olay işleyicisinden doğrudan bu satırlara eklenebilir. Bu teknik hem çalışan toplamları hem de denetime bağlı verilerden gelen diğer bilgileri hesaplamak ve bu bilgileri alt bilgiye atamak için kullanılabilir. Bu kavram DataList ve Repeater denetimlerine de uygulanabilir; Tek fark, DataList ve Repeater için olay için ItemDataBound bir olay işleyicisi oluşturmasıdır (olay için RowDataBound değil).

Örneğimizde, DataList sonuçlarının en üstünde Ürün Bilgileri başlığının bir <h3> başlıkta görüntülenmesini sağlayalım. Bunu başarmak için uygun işaretlemeye sahip bir HeaderTemplate ekleyin. Tasarım Aracı bu işlem DataList'in akıllı etiketindeki Şablonları Düzenle bağlantısına tıklayarak, açılan listeden Üst Bilgi Şablonu'nu seçerek ve stil açılan listesinden Başlık 3 seçeneğini seçtikten sonra metni yazarak gerçekleştirilebilir (bkz. Şekil 11).

Şekil 11: Metin Ürün Bilgileri ile bir HeaderTemplate ekleme (Tam boyutlu resmi görüntülemek için tıklayın)

Alternatif olarak, etiketlere aşağıdaki işaretleme <asp:DataList> girilerek bildirim temelli olarak eklenebilir:

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

Her ürün listesi arasına biraz alan eklemek için, her bölüm arasına bir satır içeren bir SeparatorTemplate ekleyelim. Yatay kural etiketi ()<hr> böyle bir ayırıcı ekler. SeparatorTemplate aşağıdaki işaretlemeye sahip olması için öğesini oluşturun:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Not

HeaderTemplate ve FooterTemplatesgibi , SeparatorTemplate veri kaynağındaki hiçbir kayda bağlı değildir ve bu nedenle DataList'e bağlı veri kaynağı kayıtlarına doğrudan erişemez.

Bu eklemeden sonra, sayfayı bir tarayıcı üzerinden görüntülerken Şekil 12'ye benzer görünmelidir. Üst bilgi satırını ve her ürün listesi arasındaki satırı not edin.

Şekil 12: DataList Bir Üst Bilgi Satırı ve Her Ürün Listesi Arasında Yatay Kural Içerir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

5. Adım: Repeater Denetimi ile Belirli İşaretlemeyi İşleme

Şekil 12'de DataList örneğini ziyaret ederken tarayıcınızdan bir Görünüm/Kaynak yaparsanız, DataList'in DataList'e bağlı her öğe için tek bir tablo hücresi (<tr>) içeren bir tablo satırı (<td>) içeren bir HTML <table> yaydığını görürsünüz. Aslında bu çıkış, tek bir TemplateField ile GridView'dan yayılacak olan çıktıyla aynıdır. Sonraki bir öğreticide de göreceğimiz gibi DataList çıkışın daha fazla özelleştirmesine olanak tanıyarak tablo satırı başına birden çok veri kaynağı kaydı görüntülememizi sağlar.

Html yaymak <table>istemiyorsanız ne olur? Veri Web denetimi tarafından oluşturulan işaretleme üzerinde toplam ve tam denetim için Repeater denetimini kullanmalıyız. DataList gibi Repeater da şablonlara göre oluşturulur. Ancak Yineleyici yalnızca aşağıdaki beş şablonu sunar:

HeaderTemplate sağlanırsa, belirtilen işaretlemeyi öğelerden önce ekler
ItemTemplate öğeleri işlemek için kullanılır
AlternatingItemTemplate sağlanırsa, değişen öğeleri işlemek için kullanılır
SeparatorTemplate sağlanırsa, her öğe arasına belirtilen işaretlemeyi ekler
FooterTemplate - sağlanırsa, belirtilen işaretlemeyi öğelerden sonra ekler

ASP.NET 1.x'te Repeater denetimi genellikle verileri bir veri kaynağından gelen madde işaretli listeyi görüntülemek için kullanılırdı. Böyle bir durumda, HeaderTemplate ve FooterTemplates sırasıyla açma ve kapatma <ul> etiketlerini içerirken ItemTemplate , veri bağlama söz dizimine sahip öğeleri içerir <li> . Ana Sayfalar ve Site Gezintisi öğreticisindeki iki örnekte gördüğümüz gibi bu yaklaşım ASP.NET 2.0'da da kullanılabilir:

Site.master Ana sayfada, en üst düzey site haritası içeriğinin madde işaretli listesini görüntülemek için bir Repeater kullanıldı (Temel Raporlama, Raporları Filtreleme, Özelleştirilmiş Biçimlendirme vb.); üst düzey bölümlerin alt bölümlerini görüntülemek için başka bir iç içe Geçmiş Yineleyici kullanıldı
içinde SectionLevelTutorialListing.ascx, geçerli site haritası bölümünün alt bölümlerinin madde işaretli listesini görüntülemek için repeater kullanıldı

Not

ASP.NET 2.0, basit bir madde işaretli liste görüntülemek için bir veri kaynağı denetimine bağlanabilen yeni BulletedList denetimini tanıtır. BulletedList denetimiyle listeyle ilgili HTML'lerden herhangi birini belirtmemiz gerekmez; Bunun yerine, her liste öğesi için metin olarak görüntülenecek veri alanını gösteririz.

Repeater, tüm veri yakalama Web denetimi görevi görür. Gerekli işaretlemeyi oluşturan bir denetim yoksa Repeater denetimi kullanılabilir. Repeater'ı kullanmayı göstermek için, 2. Adımda oluşturulan Ürün Bilgileri Veri Listesi'nin üzerinde kategori listesinin görüntülenmesini sağlayın. Özellikle, kategorilerin her kategorinin tabloda sütun olarak görüntülendiği tek satırlı bir HTML'de <table> görüntülenmesini sağlayalım.

Bunu yapmak için, Araç Kutusundan Ürün Bilgileri Veri Listesi'nin üstündeki Tasarım Aracı bir Repeater denetimini sürükleyerek başlayın. DataList'de olduğu gibi Repeater da başlangıçta şablonları tanımlanana kadar gri bir kutu olarak görüntülenir.

Şekil 13: Tasarım Aracı Repeater ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Repeater'ın akıllı etiketinde yalnızca bir seçenek vardır: Veri Kaynağı'nı seçin. Yeni bir ObjectDataSource oluşturmayı ve sınıfın GetCategories yöntemini kullanacak şekilde yapılandırmayı CategoriesBLL tercih edin.

Şekil 14: Yeni ObjectDataSource Oluşturma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 15: ObjectDataSource'ı Sınıfı Kullanacak CategoriesBLL Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 16: Yöntemi Kullanarak GetCategories Tüm Kategoriler Hakkında Bilgi Alma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

DataList'in aksine Visual Studio, Repeater'ı bir veri kaynağına bağladıktan sonra otomatik olarak ItemTemplate oluşturmaz. Ayrıca Repeater şablonları Tasarım Aracı aracılığıyla yapılandırılamaz ve bildirim temelli olarak belirtilmelidir.

Kategorileri her kategori için sütun içeren tek satırlı <table> olarak görüntülemek için Repeater'ın aşağıdakine benzer bir işaretleme yaymasına ihtiyacımız vardır:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

<td>Category X</td> Metin yineleyen bölüm olduğundan bu, Repeater'ın ItemTemplate öğesinde görünür. Önünde görünen işaretleme - <table><tr> - içine yerleştirilirken HeaderTemplate bitiş işaretlemesi - </tr></table> içine yerleştirilir FooterTemplate. Bu şablon ayarlarını girmek için sol alt köşedeki Kaynak düğmesine tıklayarak ASP.NET sayfasının bildirim temelli bölümüne gidin ve aşağıdaki söz dizimini yazın:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Repeater, şablonları tarafından belirtilen kesin işaretlemeyi yayar, daha fazlası değil, daha azı yoktur. Şekil 17'de bir tarayıcı üzerinden görüntülendiğinde Repeater çıkışı gösterilmektedir.

Şekil 17: Ayrı Sütundaki Her Kategori Listeler Single-Row HTML <table> (Tam boyutlu görüntüyü görüntülemek için tıklayın)

6. Adım: Repeater'ın Görünümünü Geliştirme

Repeater şablonları tarafından belirtilen işaretlemeyi tam olarak yaydığından, Repeater için stille ilgili özellikler olmaması şaşırtıcı olmamalıdır. Repeater tarafından oluşturulan içeriğin görünümünü değiştirmek için gerekli HTML veya CSS içeriğini doğrudan Repeater şablonlarına el ile eklemeliyiz.

Örneğimiz için kategori sütunlarının, DataList'teki değişen satırlar gibi arka plan renklerini değiştirmesini sağlayalım. Bunu başarmak için css sınıfını her Repeater öğesine ve AlternatingRowStyle CSS sınıfını ve AlternatingItemTemplate şablonları aracılığıyla ItemTemplate değişen her Repeater öğesine atamamız RowStyle gerekir, örneğin:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Çıktıya Ürün Kategorileri metnini içeren bir üst bilgi satırı da ekleyelim. Elde <table> ettiğimiz sütunların sayısını bilmediğimiz için, tüm sütunlara yayılacağı garanti edilen bir üst bilgi satırı oluşturmanın en basit yolu iki<table> s kullanmaktır. İlk <table> satır, üst bilgi satırı ve sistemdeki her kategori için bir sütuna sahip olan ikinci, tek satırı içeren bir satır <table> içerir. Yani, aşağıdaki işaretlemeyi yaymak istiyoruz:

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Aşağıdakiler HeaderTemplate ve FooterTemplate istenen işaretlemeyle sonuçlanır:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Şekil 18'de bu değişiklikler yapıldıktan sonra Yineleyici gösterilmektedir.

Şekil 18: Arka Plan Renginde Alternatif Kategori Sütunları ve Üst Bilgi Satırı İçerir (Tam boyutlu resmi görüntülemek için tıklayın)

Özet

GridView denetimi verileri görüntülemeyi, düzenlemeyi, silmeyi, sıralamayı ve sayfalandırmayı kolaylaştırırken, görünüm çok kutucuklu ve kılavuz benzeridir. Görünüm üzerinde daha fazla denetim için DataList veya Repeater denetimlerine dönmemiz gerekir. Bu denetimlerin her ikisi de BoundFields, CheckBoxFields vb. yerine şablonları kullanan bir kayıt kümesi görüntüler.

DataList, varsayılan olarak her veri kaynağı kaydını tek bir tablo satırında görüntüleyen bir HTML <table> olarak işlenir; aynı tek bir TemplateField içeren GridView gibi. Ancak, gelecek bir öğreticide de göreceğimiz gibi DataList, tablo satırı başına birden çok kaydın görüntülenmesine izin verir. Yineleyici ise şablonlarında belirtilen işaretlemeyi kesinlikle yayar; ek işaretleme eklemez ve bu nedenle verileri bir dışındaki <table> HTML öğelerinde (madde işaretli liste gibi) görüntülemek için yaygın olarak kullanılır.

DataList ve Repeater işlenen çıktılarında daha fazla esneklik sunsa da GridView'da bulunan yerleşik özelliklerin birçoğundan yoksundur. Gelecek öğreticilerde inceleyeceğiniz gibi, bu özelliklerden bazıları çok fazla çaba harcamadan geri takılabilir, ancak GridView yerine DataList veya Repeater kullanmanın bu özellikleri kendiniz uygulamak zorunda kalmadan kullanabileceğiniz özellikleri sınırladığını unutmayın.

Mutlu Programlama!

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ışmaktadır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Adresine adresinden veya adresinden ulaşabileceğiniz http://ScottOnWriting.NETblogu aracılığıyla ulaşabilirsinizmitchell@4GuysFromRolla.com.

Özel Teşekkürler

Bu öğretici serisi birçok yararlı gözden geçiren tarafından gözden geçirildi. Bu öğreticinin baş gözden geçirenleri Yaakov Ellis, Liz Shulok, Randy Schmidt ve Stacy Park'tı. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana adresinden bir satır mitchell@4GuysFromRolla.combırakın.

Önceki Sonraki