Repeater Denetimi ve DataList Kullanarak İki Sayfada Ana/Ayrıntı Filtreleme (VB)
tarafından Scott Mitchell
Bu öğreticide, bir ana/ayrıntı raporunu iki sayfaya ayırmayı inceleyeceğiz. "Ana" sayfasında, tıklandığında kullanıcıyı iki sütunlu bir DataList'in seçili kategoriye ait ürünleri gösterdiği "ayrıntılar" sayfasına götüren kategorilerin listesini işlemek için Repeater denetimi kullanıyoruz.
Giriş
İki Sayfada Ana/Ayrıntı Filtreleme öğreticisinde, sistemdeki tüm sağlayıcıları görüntülemek için GridView kullanarak bu düzeni inceledik. Bu GridView, ikinci bir sayfaya bağlantı olarak işlenen ve sorgu dizesinde ileten SupplierID
bir HyperLinkField içeriyordu. İkinci sayfada seçilen tedarikçi tarafından sağlanan ürünleri listelemek için GridView kullanılmıştır.
Bu tür iki sayfalı ana/ayrıntı raporları DataList ve Repeater denetimleri kullanılarak da gerçekleştirilebilir. Tek fark, Ne DataList'in ne de Repeater'ın HyperLinkField denetimi için destek sağlamasıdır. Bunun yerine, denetimin içine ItemTemplate
bir HyperLink Web denetimi veya tutturucu HTML öğesi (<a>
) eklemeliyiz. HyperLink'in NavigateUrl
özelliği veya tutturucunun href
özniteliği daha sonra bildirim temelli veya programlı yaklaşımlar kullanılarak özelleştirilebilir.
Bu öğreticide, Repeater denetimi kullanarak bir sayfadaki madde işaretli listede yer alan kategorileri listeleyen bir örneği inceleyeceğiz. Her liste öğesi, kategorinin adını ve açıklamasını içerir ve kategori adı ikinci bir sayfanın bağlantısı olarak görüntülenir. Bu bağlantıya tıklanırken kullanıcı ikinci sayfaya doğru ilerler ve burada Bir DataList seçili kategoriye ait olan ürünleri gösterir.
1. Adım: Madde İşaretli Listede Kategorileri Görüntüleme
Herhangi bir ana/ayrıntı raporu oluşturmanın ilk adımı, "ana" kayıtları görüntüleyerek başlamaktır. Bu nedenle, ilk görevimiz kategorileri "ana" sayfada görüntülemektir. Klasördeki DataListRepeaterFiltering
sayfayı CategoryListMaster.aspx
açın, Repeater denetimi ekleyin ve akıllı etiketten yeni bir ObjectDataSource eklemeyi tercih edin. Yeni ObjectDataSource'u sınıfın GetCategories
yönteminden CategoriesBLL
verilerine erişebilecek şekilde yapılandırın (bkz. Şekil 1).
Şekil 1: ObjectDataSource'ı GetCategories
Sınıfın CategoriesBLL
Yöntemini Kullanacak Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Ardından, Repeater'ın şablonlarını, her kategori adını ve açıklamasını madde işaretli listede bir öğe olarak görüntüleyebilecek şekilde tanımlayın. Ayrıntılar sayfasına her kategori bağlantısının olması konusunda henüz endişelenmeyelim. Aşağıda Repeater ve ObjectDataSource için bildirim temelli işaretleme gösterilmektedir:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1"
EnableViewState="False">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><%# Eval("CategoryName") %> - <%# Eval("Description") %></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>
Bu işaretleme tamamlandıktan sonra ilerleme durumumuzu bir tarayıcı üzerinden görüntülemek için biraz zaman ayırın. Şekil 2'de gösterildiği gibi Repeater, her kategorinin adını ve açıklamasını gösteren madde işaretli bir liste olarak işlenir.
Şekil 2: Her Kategori Madde İşaretli Liste Öğesi Olarak Görüntülenir (Tam boyutlu resmi görüntülemek için tıklayın)
2. Adım: Kategori Adını Ayrıntılar Sayfasının Bağlantısına Dönüştürme
Kullanıcının belirli bir kategoriye ilişkin "ayrıntılar" bilgilerini görüntülemesine izin vermek için, tıklandığında kullanıcıyı ikinci sayfaya (ProductsForCategoryDetails.aspx
) götürecek madde işaretli liste öğelerine bir bağlantı eklememiz gerekir. Bu ikinci sayfa daha sonra DataList kullanarak seçilen kategoriye ilişkin ürünleri görüntüler. Bağlantısına tıklanan kategoriyi belirlemek için tıklanan kategorinin CategoryID
kategorilerini bir mekanizma aracılığıyla ikinci sayfaya geçirmemiz gerekir. Skaler verileri bir sayfadan diğerine aktarmanın en basit ve en kolay yolu, bu öğreticide kullanacağımız seçenek olan querystring'i kullanmaktır. Özellikle, ProductsForCategoryDetails.aspx
sayfa seçilen categoryID
değerin adlı CategoryID
bir sorgu dizesi alanından geçirilmesini bekler. Örneğin, 1 içeren İçecekler kategorisinin CategoryID
ürünlerini görüntülemek için kullanıcı adresini ziyaret ProductsForCategoryDetails.aspx?CategoryID=1
eder.
Repeater'da madde işaretli her liste öğesi için köprü oluşturmak için öğesine bir HyperLink Web denetimi veya HTML bağlantısı öğesi (<a>
) ItemTemplate
eklememiz gerekir. Köprülerin her satır için aynı şekilde görüntülendiği senaryolarda her iki yaklaşım da yeterli olacaktır. Repeater'lar için yer işareti öğesini kullanmayı tercih ediyorum. Anchor öğesini kullanmak için Repeater'ın ItemTemplate öğesini şu şekilde güncelleştirin:
<li>
<a href='ProductsForCategoryDetails.aspx?CategoryID=<%# Eval("CategoryID") %>'>
<%# Eval("CategoryName") %>
</a> - <%# Eval("Description") %>
</li>
öğesinin CategoryID
bağlayıcı öğesinin href
özniteliğine doğrudan eklenebileceğini unutmayın; ancak bunu yapmak için özniteliğin href
değerini kesme işaretleri (ve not tırnak işaretleri) ile sınırlandırma konusunda emin olun çünkü Eval
özniteliğin href
içindeki yöntem dizesini ("CategoryID"
) tırnak işaretleri ile sınırlandırmaktadır. Alternatif olarak, bunun yerine bir HyperLink Web denetimi kullanılabilir:
<li>
<asp:HyperLink runat="server" Text='<%# Eval("CategoryName") %>'
NavigateUrl='<%# "ProductsForCategoryDetails.aspx?CategoryID=" &
Eval("CategoryID") %>'>
</asp:HyperLink>
- <%# Eval("Description") %>
</li>
URL'nin statik kısmının — — ProductsForCategoryDetails.aspx?CategoryID
dize birleştirme kullanılarak doğrudan veri bağlama söz diziminin sonuna Eval("CategoryID")
nasıl eklendiğine dikkat edin.
HyperLink denetimini kullanmanın bir avantajı, gerekirse Repeater'ın ItemDataBound
olay işleyicisinden program aracılığıyla erişilebilir olmasıdır. Örneğin, kategori adını ilişkili ürün içermeyen kategoriler için bir bağlantı olarak değil metin olarak görüntülemek isteyebilirsiniz. Böyle bir denetim olay işleyicisinde ItemDataBound
program aracılığıyla gerçekleştirilebilir; ilişkili ürün içermeyen kategoriler için HyperLink'in NavigateUrl
özelliği boş bir dizeye ayarlanabilir ve bu da söz konusu kategori adının düz metin (bağlantı olarak değil) olarak işlenmesiyle sonuçlanabilir. DataList ve Repeater içeriklerini olay işleyicisi aracılığıyla programlı mantığa göre biçimlendirme hakkında daha fazla bilgi için DataList ve Repeater'ı Verilere Dayalı Olarak Biçimlendirme öğreticisine ItemDataBound
geri dönün.
Takip ediyorsanız, sayfanızda yer işareti öğesini veya HyperLink denetimi yaklaşımını kullanmaktan çekinmeyin. Yaklaşımdan bağımsız olarak, sayfayı bir tarayıcı üzerinden görüntülerken her kategori adı, ilgili CategoryID
değeri geçirerek bağlantısı olarak ProductsForCategoryDetails.aspx
işlenmelidir (bkz. Şekil 3).
Şekil 3: Kategori Adları Şimdi Bağlanacak ProductsForCategoryDetails.aspx
(Tam boyutlu resmi görüntülemek için tıklayın)
3. Adım: Seçili Kategoriye Ait Ürünleri Listeleme
CategoryListMaster.aspx
Sayfa tamamlandıktan sonra dikkatimizi "ayrıntılar" sayfasını ProductsForCategoryDetails.aspx
uygulamaya geçirmeye hazırız. Bu sayfayı açın, Araç Kutusu'ndan bir DataList öğesini Tasarım Aracı sürükleyin ve özelliğini olarak ProductsInCategory
ayarlayınID
. Ardından, DataList'in akıllı etiketinden sayfaya yeni bir ObjectDataSource ekleyerek adını vermeyi ProductsInCategoryDataSource
seçin. Sınıfın ProductsBLL
GetProductsByCategoryID(categoryID)
yöntemini çağıracak şekilde yapılandırın; INSERT, UPDATE ve DELETE sekmelerindeki açılan listeleri (Yok) olarak ayarlayın.
Şekil 4: ObjectDataSource'ı GetProductsByCategoryID(categoryID)
Sınıfın ProductsBLL
Yöntemini Kullanacak Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)
GetProductsByCategoryID(categoryID)
yöntemi bir giriş parametresi ()categoryID
kabul ettiğinden, Veri Kaynağı Seç sihirbazı parametrenin kaynağını belirtme fırsatı sunar. QueryStringField CategoryID
kullanarak parametre kaynağını QueryString olarak ayarlayın.
Şekil 5: Parametrenin Kaynağı olarak Querystring Alanını CategoryID
kullanma (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Önceki öğreticilerde gördüğümüz gibi, Veri Kaynağı Seçme sihirbazını tamamladıktan sonra, Visual Studio her veri alanı adını ve değerini listeleyen DataList için otomatik olarak bir ItemTemplate
oluşturur. Bu şablonu yalnızca ürünün adını, tedarikçisini ve fiyatını listeleyen bir şablonla değiştirin. Ayrıca DataList'in RepeatColumns
özelliğini 2 olarak ayarlayın. Bu değişikliklerden sonra DataList ve ObjectDataSource'unuzun bildirim temelli işaretlemesi aşağıdakine benzer olmalıdır:
<asp:DataList ID="ProductsInCategory" DataKeyField="ProductID" RepeatColumns="2"
DataSourceID="ProductsInCategoryDataSource" EnableViewState="False"
runat="server">
<ItemTemplate>
<h5><%# Eval("ProductName") %></h5>
<p>
Supplied by <%# Eval("SupplierName") %><br />
<%# Eval("UnitPrice", "{0:C}") %>
</p>
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ProductsInCategoryDataSource"
OldValuesParameterFormatString="original_{0}" runat="server"
SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
<SelectParameters>
<asp:QueryStringParameter Name="categoryID" QueryStringField="CategoryID"
Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
Bu sayfayı uygulamada görüntülemek için sayfadan CategoryListMaster.aspx
başlayın; ardından, madde işaretli kategoriler listesindeki bir bağlantıya tıklayın. Bunu yaptığınızda sorgu dizesi boyunca CategoryID
iletirsinizProductsForCategoryDetails.aspx
. içindeki ProductsInCategoryDataSource
ObjectDataSource ProductsForCategoryDetails.aspx
, belirtilen kategori için yalnızca bu ürünleri alır ve bunları DataList'te görüntüler ve bu da satır başına iki ürünü işler. Şekil 6'da ProductsForCategoryDetails.aspx
İçecekler görüntülenirken ekran görüntüsü gösterilir.
Şekil 6: İçecekler Görüntülenir, Satır Başına İki (Tam boyutlu görüntüyü görüntülemek için tıklayın)
4. Adım: ProductsForCategoryDetails.aspx Kategori Bilgilerini Görüntüleme
Kullanıcı içindeki CategoryListMaster.aspx
bir kategoriye tıkladığında, bu kategoriye ProductsForCategoryDetails.aspx
alınır ve seçilen kategoriye ait ürünler gösterilir. Ancak, içinde ProductsForCategoryDetails.aspx
hangi kategorinin seçildiğine dair hiçbir görsel ipucu yoktur. İçecekler'e tıklamak isteyen ancak yanlışlıkla Condiments'a tıklayan bir kullanıcının, öğesine ulaştıktan ProductsForCategoryDetails.aspx
sonra hatasını fark etmenin bir yolu yoktur. Bu olası sorunu gidermek için, seçilen kategoriyle ilgili bilgileri (adı ve açıklaması) sayfanın en üstünde ProductsForCategoryDetails.aspx
görüntüleyebiliriz.
Bunu gerçekleştirmek için içindeki Repeater denetiminin ProductsForCategoryDetails.aspx
üzerine bir FormView ekleyin. Ardından, FormView'un adlı CategoryDataSource
akıllı etiketinden sayfaya yeni bir ObjectDataSource ekleyin ve sınıfın CategoriesBLL
GetCategoryByCategoryID(categoryID)
yöntemini kullanacak şekilde yapılandırın.
Şekil 7: Sınıfın GetCategoryByCategoryID(categoryID)
Yöntemi aracılığıyla CategoriesBLL
Kategori hakkındaki Bilgilere Erişme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
ProductsInCategoryDataSource
Adım 3'te eklenen ObjectDataSource'ta olduğu gibi, CategoryDataSource
's Veri Kaynağını Yapılandırma sihirbazı yöntemin GetCategoryByCategoryID(categoryID)
giriş parametresi için bir kaynak ister. Parametre kaynağını QueryString ve QueryStringField değerini CategoryID
olarak ayarlayarak önceki ayarların aynısını kullanın (Şekil 5'e geri bakın).
Sihirbazı tamamladıktan sonra Visual Studio, FormView için otomatik olarak bir ItemTemplate
, EditItemTemplate
ve InsertItemTemplate
oluşturur. Salt okunur bir arabirim sağladığımız için ve InsertItemTemplate
'yi kaldırmaktan EditItemTemplate
çekinmeyin. Ayrıca, FormView'un ItemTemplate
öğesini özelleştirebilirsiniz. Gereksiz şablonları kaldırıp ItemTemplate'ı özelleştirdikten sonra, FormView ve ObjectDataSource'unuzun bildirim temelli işaretlemesi aşağıdakine benzer görünmelidir:
<asp:FormView ID="FormView1" runat="server" DataKeyNames="CategoryID"
DataSourceID="CategoryDataSource" EnableViewState="False" Width="100%">
<ItemTemplate>
<h3>
<asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Bind("CategoryName") %>' />
</h3>
<p>
<asp:Label ID="DescriptionLabel" runat="server"
Text='<%# Bind("Description") %>' />
</p>
</ItemTemplate>
</asp:FormView>
<asp:ObjectDataSource ID="CategoryDataSource" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetCategoryByCategoryID" TypeName="CategoriesBLL">
<SelectParameters>
<asp:QueryStringParameter Name="categoryID" Type="Int32"
QueryStringField="CategoryID" />
</SelectParameters>
</asp:ObjectDataSource>
Şekil 8'de bu sayfayı tarayıcı üzerinden görüntülerken ekran görüntüsü gösterilmektedir.
Not
FormView'a ek olarak, FormView'un üzerine kullanıcıyı kategoriler listesine (CategoryListMaster.aspx
) geri götürecek bir HyperLink denetimi de ekledim. Bu bağlantıyı başka bir yere yerleştirmekten veya tamamen atlamadan çekinmeyin.
Şekil 8: Kategori Bilgileri Artık Sayfanın En Üstünde Görüntüleniyor (Tam boyutlu resmi görüntülemek için tıklayın)
5. Adım: Seçili Kategoriye Ait Ürün Yoksa İleti Görüntüleme
Sayfa CategoryListMaster.aspx
, ilişkili ürün olup olmadığına bakılmaksızın sistemdeki tüm kategorileri listeler. Bir kullanıcı ilişkili ürün içermeyen bir kategoriye tıklarsa, içindeki DataList ProductsForCategoryDetails.aspx
işlenmez, veri kaynağında herhangi bir öğe olmaz. Önceki öğreticilerde gördüğümüz gibi GridView, veri kaynağında kayıt yoksa görüntülenecek bir metin iletisi belirtmek için kullanılabilecek bir EmptyDataText
özellik sağlar. Ne yazık ki DataList veya Repeater'ın böyle bir özelliği yok.
Kullanıcıyı seçili kategori için eşleşen ürün olmadığını bildiren bir ileti görüntülemek için, eşleşen ürün olmaması durumunda görüntülenecek iletiyi özelliği atanmış olan Text
sayfaya bir Etiket denetimi eklememiz gerekir. Daha sonra DataList öğesinin herhangi bir öğe içerip içermediğine bağlı olarak özelliğini program aracılığıyla ayarlamamız Visible
gerekir.
Bunu başarmak için DataList'in altına bir Etiket ekleyerek başlayın. ID
Özelliğini olarakNoProductsMessage
, özelliğini ise Text
"Seçili kategori için ürün yok..." olarak ayarlayın Ardından, bu Etiketin özelliğini DataList'e Visible
herhangi bir verinin bağlı ProductsInCategory
olup olmadığına bağlı olarak program aracılığıyla ayarlamamız gerekir. Veriler DataList'e bağlandıktan sonra bu atamanın yapılması gerekir. GridView, DetailsView ve FormView için, denetimin DataBound
olayı için veri bağlama tamamlandıktan sonra tetiklenen bir olay işleyicisi oluşturabiliriz. Ancak, DataList'in veya Repeater'ın kullanılabilir bir DataBound
olayı yok.
Veriler sayfanın Load
olayından önce DataList'e Visible
atanacağı için bu özel örnekte olay işleyicisinde Page_Load
Label özelliğini atayabiliriz. Ancak, ObjectDataSource'taki veriler sayfanın yaşam döngüsünün ilerleyen bölümlerinde DataList'e bağlı olabileceğinden, bu yaklaşım genel durumda çalışmaz. Örneğin, görüntülenen veriler başka bir denetimdeki değeri temel alıyorsa (örneğin, "ana" kayıtları tutmak için DropDownList kullanarak bir ana/ayrıntı raporu görüntülerken), veriler sayfanın yaşam döngüsündeki aşamaya kadar PreRender
veri Web denetimine geri dönmeyebilir.
Tüm durumlarda işe yarayan çözümlerden biri, veya öğesinin Visible
öğe türünü Item
AlternatingItem
bağlarken DataList ItemDataBound
(veya ItemCreated
) olay işleyicisinde özelliğini False
atamaktır. Böyle bir durumda, veri kaynağında en az bir veri öğesi olduğunu biliyoruz ve bu nedenle Etiketi gizleyebiliriz NoProductsMessage
. Bu olay işleyicisine ek olarak, DataList'in DataBinding
olayı için label Visible
özelliğini olarak başlatacağımız bir olay işleyicisine True
de ihtiyacımız vardır. DataBinding
Olay olaylardan önce ItemDataBound
tetiklendiğinden, Label'ın Visible
özelliği başlangıçta olarak ayarlanırTrue
; herhangi bir veri öğesi varsa, olarak ayarlanırFalse
. Aşağıdaki kod bu mantığı uygular:
Protected Sub ProductsInCategory_DataBinding(sender As Object, e As EventArgs) _
Handles ProductsInCategory.DataBinding
'Show the Label
NoProductsMessage.Visible = True
End Sub
Protected Sub ProductsInCategory_ItemDataBound(s As Object, e As DataListItemEventArgs) _
Handles ProductsInCategory.ItemDataBound
'If we have a data item, hide the Label
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = _
ListItemType.AlternatingItem Then
NoProductsMessage.Visible = False
End If
End Sub
Northwind veritabanındaki tüm kategoriler bir veya daha fazla ürünle ilişkilendirilir. Bu özelliği test etmek için, bu öğreticinin Northwind veritabanını el ile ayarladım ve Üretim kategorisiyle ( = 7) ilişkili tüm ürünleri Deniz Ürünleri kategorisine (CategoryID
CategoryID
= 8) yeniden atadım. Bu, Sunucu Gezgini'nden Yeni Sorgu'yu seçerek ve aşağıdaki UPDATE
deyimi kullanarak gerçekleştirilebilir:
UPDATE Products SET
CategoryID = 8
WHERE CategoryID = 7
Veritabanını uygun şekilde güncelleştirdikten sonra sayfaya CategoryListMaster.aspx
dönün ve Oluştur bağlantısına tıklayın. Artık Üret kategorisine ait ürün olmadığından "Seçili kategori için ürün yok..." iletisine tıklayın.
Şekil 9: Seçili Kategoriye Ait Ürün Yoksa bir İleti Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Özet
Ana/ayrıntı raporları tek bir sayfada hem ana hem de ayrıntı kayıtlarını görüntüleyebilir, ancak birçok web sitesinde iki web sayfası arasında ayrılır. Bu öğreticide, kategorilerin "ana" web sayfasındaki Bir Yineleyici kullanılarak madde işaretli bir listede listelenerek ve ilişkili ürünlerin "ayrıntılar" sayfasında listelenerek böyle bir ana/ayrıntı raporunun nasıl uygulanıp uygulanamaya bakıldı. Ana web sayfasındaki her liste öğesi, satırın CategoryID
değeri boyunca geçen ayrıntılar sayfasının bağlantısını içeriyor.
Ayrıntılar sayfasında belirtilen tedarikçi için bu ürünlerin alınması sınıfının GetProductsByCategoryID(categoryID)
yöntemiyle ProductsBLL
gerçekleştirilir. categoryID
Parametre değeri, parametre kaynağı olarak querystring değeri kullanılarak CategoryID
bildirim temelli olarak belirtildi. Ayrıca FormView kullanarak ayrıntılar sayfasında kategori ayrıntılarının nasıl görüntüleneceğini ve seçilen kategoriye ait ürün yoksa iletinin nasıl görüntüleneceğini inceledik.
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 Saat içinde 2.0. 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 Zack Jones ve Liz Shulok'tur. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana bir satır mitchell@4GuysFromRolla.combırakın.
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin