DataList ve Repeater’daki Özel Düğmeler (VB)

2025-04-30

Bu öğreticide, sistemdeki kategorileri listelemek için bir Repeater kullanan bir arabirim oluşturacağız ve her kategori, BulletedList kontrolü kullanarak ilişkili ürünlerini göstermek üzere bir düğme sunacaktır.

Giriş

Son on yedi DataList ve Repeater öğreticisi boyunca hem salt okunur örnekler oluşturduk hem de örnekleri düzenledik ve sildik. Veri listesi içindeki düzenleme ve silme yeteneklerini kolaylaştırmak için, tıklandığında bir gönderim gerçekleştiren ve düğme özelliğine karşılık gelen bir DataList olayını tetikleyen düğmelerle DataList'e ItemTemplate eklemeler yaptık CommandName. Örneğin, ItemTemplate öğesine Edit özellik değerine sahip bir düğme eklemek, DataList'in CommandName geri gönderim işleminde tetiklenmesine neden olur; Delete özellik değerine sahip bir EditCommand düğme ise CommandName tetikler.

DataList ve Repeater denetimleri, Düzenle ve Sil düğmelerine ek olarak, tıklandığında bazı özel sunucu tarafı mantığı gerçekleştiren Düğmeler, LinkButton'lar veya ImageButton'lar da içerebilir. Bu öğreticide, sistemdeki kategorileri listelemek için Repeater kullanan bir arabirim oluşturacağız. Her kategori için Repeater, BulletedList denetimi kullanarak kategoriyle ilişkili ürünleri gösteren bir düğme içerir (bkz. Şekil 1).

Şekil 1: Ürünleri Göster bağlantısına tıklandığında, kategorinin ürünleri madde işaretli bir listede görüntülenir (Tam boyutu görmek için tıklayın)

1. Adım: Özel Düğme Eğitim Web Sayfalarını Ekleme

Özel düğme ekleme konusuna bakmadan önce, web sitesi projemizde bu öğretici için ihtiyacımız olan ASP.NET sayfalarını oluşturmak için biraz zaman ayıralım. adlı CustomButtonsDataListRepeateryeni bir klasör ekleyerek başlayın. Ardından, aşağıdaki iki ASP.NET sayfayı bu klasöre ekleyin ve her sayfayı ana sayfayla ilişkilendirdiğinizden Site.master emin olun:

Default.aspx
CustomButtons.aspx

Özel Buttons-Related Öğreticileri için ASP.NET Sayfalarını Ekle

Şekil 2: Özel Buttons-Related Öğreticileri için ASP.NET Sayfaları Ekleme

Diğer klasörlerde olduğu gibi Default.aspx klasöründeki CustomButtonsDataListRepeater, bölümündeki öğretici listelenir. Kullanıcı Denetimi'nin SectionLevelTutorialListing.ascx bu işlevi sağladığını hatırlayın. Bu Kullanıcı Denetimini, Çözüm Gezgini'nden sayfanın Tasarım görünümüne sürükleyerek Default.aspx'e ekleyin.

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

Son olarak, sayfaları dosyaya Web.sitemap girdi olarak ekleyin. Özellikle, DataList ve Repeater ile Sayfalama ve Sıralama'nın ardından aşağıdaki işaretlemeyi ekleyin: <siteMapNode>

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</siteMapNode>

güncelleştirdikten Web.sitemapsonra, öğreticiler web sitesini bir tarayıcı üzerinden görüntülemek için biraz bekleyin. Soldaki menüde artık düzenleme, ekleme ve silme öğreticileri için öğeler bulunur.

Site Haritası Artık Özel Düğmeler Öğreticisi girdisini içerir

Şekil 4: Site Haritası Artık Özel Düğmeler Öğreticisi girdisini içerir

2. Adım: Kategori Listesini Ekleme

Bu öğreticide, tüm kategorileri listeleyen ve tıklandığında ilişkili kategorinin ürünlerini madde işaretli bir listede görüntüleyen "Ürünleri Göster bağlantı düğmesi" içeren bir Repeater oluşturmamız gerekiyor. İlk olarak sistemdeki kategorileri listeleyen basit bir Repeater oluşturalım. Öncelikle CustomButtons.aspx klasöründeki CustomButtonsDataListRepeater sayfasını açarak başlayın. Bir Repeater'ı Araç Kutusu'ndan Tasarımcı'ya sürükleyin ve ID özelliğini Categories olarak ayarlayın. Ardından Repeater'ın akıllı etiketinden yeni bir veri kaynağı denetimi oluşturun. Özellikle, sınıfın CategoriesDataSource yönteminden CategoriesBLL verilerini seçen adlı GetCategories() yeni bir ObjectDataSource denetimi oluşturun.

Şekil 5: ObjectDataSource'un CategoriesBLL Sınıf Yöntemini Kullanacak Şekilde Yapılandırılması GetCategories() (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Visual Studio'nun veri kaynağını temel alan bir varsayılan ItemTemplate oluşturduğu DataList denetiminin aksine Repeater şablonları el ile tanımlanmalıdır. Ayrıca Repeater şablonları bildirim temelli olarak oluşturulup düzenlenmelidir (yani Repeater akıllı etiketinde Şablonları Düzenle seçeneği yoktur).

Sol alt köşedeki Kaynak sekmesine tıklayın ve bir ItemTemplate ekleyin; bu, kategori adını bir <h3> öğesinde ve açıklamasını paragraf etiketi içinde görüntülesin. Her kategori arasında yatay bir çizgi (SeparatorTemplate) görüntüleyen bir <hr /> ekleyin. Ayrıca, özelliği "Ürünleri Göster" olarak ayarlanmış bir LinkButton Text ekleyin. Bu adımları tamamladıktan sonra sayfanızın bildirim temelli işaretlemesi aşağıdaki gibi görünmelidir:

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

Şekil 6'da tarayıcı üzerinden görüntülendiğinde sayfa gösterilir. Her kategori adı ve açıklaması listelenir. Ürünleri Göster düğmesi tıklandığında geri göndermeye neden olur ancak henüz herhangi bir eylem gerçekleştirmez.

Şekil 6: Her Kategorinin Adı ve Açıklaması, Ürünleri Göster LinkButton ile Birlikte Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: Ürünleri Göster Bağlantı Düğmesi Tıklatıldığında Server-Side Mantığını Yürütme

DataList veya Repeater'daki bir şablondaki Button, LinkButton veya ImageButton öğesine her tıklandığında bir geri gönderme gerçekleşir ve DataList veya Repeater olayı ItemCommand tetiklenir. ItemCommand olayına ek olarak, düğmenin CommandName özelliği (Sil, Düzenle, İptal Et, Güncelleştir veya Seç) gibi ayrılmış dizelerden birine ayarlanmışsa, DataList denetimi ayrıca başka, daha özel bir olay da tetikleyebilir, ancak ItemCommand olayı her zaman tetiklenir.

DataList veya Repeater içinde bir düğmeye tıklandığında, genellikle hangi düğmeye tıklandığını (denetimde hem Düzenle hem de Sil düğmesi gibi birden çok düğme olması durumunda) ve belki de bazı ek bilgileri (düğmesine tıklanan öğenin birincil anahtar değeri gibi) geçirmemiz gerekir. Button, LinkButton ve ImageButton, değerleri ItemCommand olay işleyicisine geçirilen iki özelliği sağlar:

CommandName genellikle şablondaki her düğmeyi tanımlamak için kullanılan bir dize
CommandArgument genellikle birincil anahtar değeri gibi bazı veri alanlarının değerini tutmak için kullanılır

Bu örnekte LinkButton s CommandName özelliğini ShowProducts olarak ayarlayın ve veri bağlama söz dizimini CategoryIDkullanarak geçerli kaydın CommandArgument birincil anahtar değerini CategoryArgument='<%# Eval("CategoryID") %>' özelliğine bağlayın. Bu iki özellik belirtildikten sonra, LinkButton bildirim temelli söz dizimi aşağıdaki gibi görünmelidir:

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

Düğmeye tıklandığında bir geri gönderme gerçekleşir ve DataList veya Repeater olayı ItemCommand tetiklenir. Olay işleyicisine düğme s CommandName ve CommandArgument değerleri geçirilir.

Repeater ItemCommand olayı için bir olay işleyicisi oluşturun ve olay işleyicisine geçirilen ikinci parametreyi (adlı e) not edin. Bu ikinci parametre türündedir RepeaterCommandEventArgs ve aşağıdaki dört özelliğe sahiptir:

CommandArgument tıklanan düğme s CommandArgument özelliğinin değeri
CommandName düğme s CommandName özelliğinin değeri
CommandSource tıklanan düğme denetimine başvuru
Item tıklanan düğmeyi içeren RepeaterItem öğesine bir referans; Repeater'a bağlanmış her kayıt bir RepeaterItem olarak gösterilir.

Seçilen kategori CategoryID aracılığıyla CommandArgument özelliği ile geçirildiğinden, ItemCommand olay işleyicisinde bu kategoriyle ilişkili ürün kümesini alabiliriz. Bu ürünler daha sonra ItemTemplate'de yer alacak bir BulletedList denetimine bağlanabilir (bunu henüz eklemedik). Geriye kalan tek şey BulletedList'i eklemek, olay işleyicisine ItemCommand başvurmak ve 4. Adımda ele alacağımız seçili kategoriye ait ürün kümesini bağlamaktır.

Uyarı

DataList ItemCommand olay işleyicisine, DataListCommandEventArgs türünde bir nesne geçirilir ve bu, RepeaterCommandEventArgs sınıfıyla aynı dört özelliği sunar.

4. Adım: Seçili Kategorinin Ürünlerini Madde İşaretli Listede Görüntüleme

Seçilen kategorinin ürünleri, herhangi bir sayıda denetim kullanılarak Yineleyici içinde ItemTemplate görüntülenebilir. Başka bir iç içe Repeater, DataList, DropDownList, GridView ve benzeri ekleyebiliriz. Ancak ürünleri madde işaretli liste olarak görüntülemek istediğimiz için BulletedList denetimini kullanacağız. Sayfanın bildirim temelli işaretlemesine CustomButtons.aspx döndüğünüzde, Ürünleri Göster BağlantıDüğmesinin ItemTemplate arkasına madde işaretli liste denetimi ekleyin. BulletedLists'i ID olarak ProductsInCategoryayarlayın. BulletedList, DataTextField özelliği ile belirtilen veri alanının değerini görüntüler; bu kontrol ürün bilgileriyle eşlendirileceğinden, DataTextField özelliğini ProductName olarak ayarlayın.

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

Olay işleyicisinde ItemCommand kullanarak bu denetime e.Item.FindControl("ProductsInCategory") başvurun ve seçili kategoriyle ilişkili ürün kümesine bağlayın.

Protected Sub Categories_ItemCommand _
    (source As Object, e As RepeaterCommandEventArgs) _
    Handles Categories.ItemCommand
    If e.CommandName = "ShowProducts" Then
        ' Determine the CategoryID
        Dim categoryID As Integer = Convert.ToInt32(e.CommandArgument)
        ' Get the associated products from the ProudctsBLL and
        ' bind them to the BulletedList
        Dim products As BulletedList = _
            CType(e.Item.FindControl("ProductsInCategory"), BulletedList)
        Dim productsAPI As New ProductsBLL()
        products.DataSource = productsAPI.GetProductsByCategoryID(categoryID)
        products.DataBind()
    End If
End Sub

Olay işleyicisinde ItemCommand herhangi bir eylem gerçekleştirmeden önce gelen CommandNamedeğerini denetlemek akıllıca olur. ItemCommand Herhangi bir düğmeye tıklandığında olay işleyicisi tetiklendiğinden, şablonda birden çok düğme varsa, hangi eylemin gerçekleştirdiğini ayırt etmek için değerini kullanınCommandName. CommandName Burada kontrol etmek gereksiz, çünkü tek bir düğmemiz var, ancak bunu alışkanlık haline getirmek iyi olur. Ardından, seçilen kategorinin CategoryID'si CommandArgument özelliğinden alınır. Şablondaki BulletedList denetimine daha sonra başvurulur ve sınıfın ProductsBLL yönteminin sonuçlarına GetProductsByCategoryID(categoryID) bağlanır.

DataList içindeki düğmeleri kullanan, örneğin DataList'teki Verileri Düzenleme ve Silmeye Genel Bakış gibi, önceki öğreticilerde, DataKeys koleksiyonu aracılığıyla belirli bir öğenin birincil anahtar değerini belirledik. Bu yaklaşım DataList ile iyi çalışsa da Repeater'ın özelliği DataKeys yoktur. Bunun yerine, birincil anahtar değerini sağlamak için alternatif bir yaklaşım kullanmalıyız. Örneğin, düğme CommandArgument özelliği aracılığıyla veya şablon içindeki gizli bir Label Web denetimine birincil anahtar değerini atayabiliriz. Ardından, ItemCommand kullanarak olay işleyicisindeki e.Item.FindControl("LabelID") değerini yeniden okuyabiliriz.

Olay işleyicisini ItemCommand tamamladıktan sonra, bu sayfayı tarayıcıda test etmek için biraz bekleyin. Şekil 7'de gösterildiği gibi Ürünleri Göster bağlantısına tıklanması geri göndermeye neden olur ve seçili kategoriye ilişkin ürünleri BulletedList içinde görüntüler. Ayrıca, diğer Ürünleri Göster bağlantılarına tıklanmış olsa bile bu ürün bilgilerinin kaldığını unutmayın.

Uyarı

Bu raporun davranışını, aynı anda tek bir kategori ürünü listelenecek şekilde değiştirmek istiyorsanız, BulletedList denetimi s EnableViewState özelliğini olarak Falseayarlamanız yeterlidir.

Şekil 7: Seçili Kategorinin Ürünlerini Görüntülemek için Madde İşaretli Liste kullanılır (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

DataList ve Repeater denetimleri, şablonlarında herhangi bir sayıda Düğme, Bağlantı Düğmesi veya ImageButton içerebilir. Bu tür düğmelere tıklandığında geri gönderme işlemi gerçekleşir ve ItemCommand olayını oluşturur. Tıklanan bir düğmeyle özel sunucu tarafı eylemini ilişkilendirmek için ItemCommand olayı için bir olay işleyicisi oluşturun. Bu olay işleyicisinde, hangi düğmeye tıklandığını belirlemek için önce gelen CommandName değeri denetleyin. İsteğe bağlı olarak düğmenin CommandArgument özelliği aracılığıyla ek bilgiler sağlanabilir.

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ışı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 Dennis Patterson'dı. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, mitchell@4GuysFromRolla.com'a bir mesaj bırakın.

Aracılığıyla paylaş