DropDownList ve DataList ile Ana/Ayrıntı Filtreleme (C#)
tarafından Scott Mitchell
Bu öğreticide, DropDownLists kullanarak "ana" kayıtları görüntülemek için ana/ayrıntı raporlarını tek bir web sayfasında ve "ayrıntıları" görüntülemek için bir DataList'i nasıl görüntüleyebileceğimizi göreceğiz.
Giriş
İlk olarak önceki Bir DropDownList ile Ana/Ayrıntı Filtreleme öğreticisinde GridView kullanarak oluşturduğumuz ana/ayrıntı raporu, bazı "ana" kayıtları göstererek başlar. Kullanıcı daha sonra ana kayıtlardan birinde detaya gidebilir ve bu sayede ana kaydın "ayrıntılarını" görüntüleyebilir. Ana/ayrıntı raporları, bire çok ilişkileri görselleştirmek ve özellikle "geniş" tablolardan (çok fazla sütunu olan) ayrıntılı bilgileri görüntülemek için ideal bir seçimdir. Önceki öğreticilerde GridView ve DetailsView denetimlerini kullanarak ana/ayrıntı raporlarını nasıl uygulayacağımızı inceledik. Bu öğreticide ve sonraki iki öğreticide bu kavramları yeniden inceleyeceğiz, ancak bunun yerine DataList ve Repeater denetimlerini kullanmaya odaklanacağız.
Bu öğreticide, "ana" kayıtları ve datalist'te görüntülenen "ayrıntılar" kayıtlarını içeren bir DropDownList kullanmayı inceleyeceğiz.
1. Adım: Ana/Ayrıntı Öğreticisi Web Sayfalarını Ekleme
Bu öğreticiye başlamadan önce, bu öğretici için gerek duyacağımız klasörü ve ASP.NET sayfalarını ve DataList ve Repeater denetimlerini kullanarak ana/ayrıntı raporlarıyla ilgilenen sonraki ikisini eklemek için biraz zaman ayıralım. Projede adlı DataListRepeaterFiltering
yeni 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.master
kullanacak şekilde yapılandırılmasını sağlayın:
Default.aspx
FilterByDropDownList.aspx
CategoryListMaster.aspx
ProductsForCategoryDetails.aspx
CategoriesAndProducts.aspx
Şekil 1: Klasör Oluşturma DataListRepeaterFiltering
ve Öğretici ASP.NET Sayfaları Ekleme
Ardından, sayfayı Default.aspx
açın ve Kullanıcı Denetimi'ni klasörden UserControls
Tasarım yüzeyine sürükleyinSectionLevelTutorialListing.ascx
. 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.ascx
Default.aspx
(Tam boyutlu görüntüyü görüntülemek için tıklayın)
Madde işaretli listenin oluşturacağımız ana/ayrıntı öğreticilerini görüntülemesini sağlamak için bunları site haritasına eklememiz gerekir. Web.sitemap
Dosyayı açın ve "DataList ve Repeater ile Veri Görüntüleme" site haritası düğümü işaretlemesinin ardından aşağıdaki işaretlemeyi ekleyin:
<siteMapNode
title="Master/Detail Reports with the DataList and Repeater"
description="Samples of Reports that Use the DataList and Repeater Controls"
url="~/DataListRepeaterFiltering/Default.aspx">
<siteMapNode
title="Filter by Drop-Down List"
description="Filter results using a drop-down list."
url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
<siteMapNode
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another."
url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
<siteMapNode
title="Maser/Detail on One Page"
description="Master records in the left column, details on the right,
both on the same page."
url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
</siteMapNode>
Şekil 3: Site Haritasını Yeni ASP.NET Sayfalarını Içerecek Şekilde Güncelleştirme
2. Adım: Kategorileri DropDownList'te Görüntüleme
Ana/ayrıntı raporumuz, bir DropDownList'teki kategorileri listeler ve seçilen liste öğesinin ürünleri bir DataList'teki sayfada daha aşağıda görüntülenir. Bu durumda, önümüzdeki ilk görev, kategorilerin DropDownList'te görüntülenmesidir. Başlangıç olarak FilterByDropDownList.aspx
klasörü açın ve Araç Kutusu'ndan DataListRepeaterFiltering
bir DropDownList öğesini sayfanın tasarımcısına sürükleyin. Ardından DropDownList özelliğini ID
olarak Categories
ayarlayın. DropDownList'in akıllı etiketinden Veri Kaynağı Seç bağlantısına tıklayın ve adlı CategoriesDataSource
yeni bir ObjectDataSource oluşturun.
Şekil 4: Adlı CategoriesDataSource
Yeni Bir ObjectDataSource Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Sınıfın yöntemini çağıran CategoriesBLL
yeni ObjectDataSource'ı GetCategories()
yapılandırın. ObjectDataSource'ı yapılandırdıktan sonra DropDownList'te hangi veri kaynağı alanının görüntüleneceğini ve her liste öğesinin değeri olarak hangilerinin ilişkilendirileceğini belirtmemiz gerekir. CategoryName
Alanın görüntülenmesini ve CategoryID
her liste öğesinin değerinin gösterilmesini sağlayın.
Şekil 5: DropDownList'in Alanı Görüntülemesini CategoryName
ve Değer Olarak Kullanmasını CategoryID
Sağlayın (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Bu noktada, tablodaki Categories
kayıtlarla doldurulan bir DropDownList denetimimiz vardır (bunların tümü yaklaşık altı saniye içinde gerçekleştirilir). Şekil 6'da tarayıcı üzerinden görüntülendiğinde ilerleme durumumuz gösterilmektedir.
Şekil 6: Geçerli Kategorileri Drop-Down Listeler (Tam boyutlu resmi görüntülemek için tıklayın)
2. Adım: Ürünler DataList'ini Ekleme
Ana/ayrıntı raporumuzun son adımı, seçilen kategoriyle ilişkili ürünleri listelemektir. Bunu yapmak için sayfaya bir DataList ekleyin ve adlı ProductsByCategoryDataSource
yeni bir ObjectDataSource oluşturun. Denetimin sınıfın ProductsByCategoryDataSource
ProductsBLL
GetProductsByCategoryID(categoryID)
yönteminden verilerini almasını sağlayın. Bu ana/ayrıntı raporu salt okunur olduğundan INSERT, UPDATE ve DELETE sekmelerinde (Yok) seçeneğini belirleyin.
Şekil 7: Yöntemi seçin GetProductsByCategoryID(categoryID)
(Tam boyutlu görüntüyü görüntülemek için tıklayın)
İleri'ye tıkladıktan sonra, ObjectDataSource sihirbazı yöntemin categoryID
parametresi için değerin GetProductsByCategoryID(categoryID)
kaynağını sorar. Seçili categories
DropDownList öğesinin değerini kullanmak için Parametre kaynağını Control ve ControlID değerini olarak Categories
ayarlayın.
Şekil 8: Parametreyi categoryID
DropDownList Değeri Categories
olarak ayarlayın (tam boyutlu görüntüyü görüntülemek için tıklayın)
Veri Kaynağını Yapılandırma sihirbazı tamamlandıktan sonra, Visual Studio her veri alanının adını ve değerini görüntüleyen DataList için otomatik olarak bir ItemTemplate
oluşturur. DataList'i bunun yerine yalnızca ürünün adını, kategorisini, tedarikçisini, birim başına miktarını ve fiyatıyla birlikte her bir öğe arasına öğe ekleyen bir SeparatorTemplate
<hr>
öğesini kullanacak ItemTemplate
şekilde geliştirelim. DataList ve Repeater Denetimleri ile Veri Görüntüleme öğreticisindeki örneğini kullanacağımItemTemplate
, ancak görsel açıdan en çekici bulduğunuz şablon işaretlemesini kullanmaktan çekinmeyin.
Bu değişiklikleri yaptıktan sonra DataList'iniz ve ObjectDataSource'un işaretlemesi aşağıdakine benzer olmalıdır:
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ProductsByCategoryDataSource" 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>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
<SelectParameters>
<asp:ControlParameter ControlID="Categories" Name="categoryID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
Bir dakika ayırıp tarayıcıda ilerleme durumumuzu gözden geçirin. Sayfayı ilk kez ziyaret ettiğinizde, seçili kategoriye (İçecekler) ait olan ürünler görüntülenir (Şekil 9'da gösterildiği gibi), ancak DropDownList'in değiştirilmesi verileri güncelleştirmez. Bunun nedeni DataList'in güncelleştirilebilmesi için bir geri göndermenin gerçekleşmesi gerekir. Bunu yapmak için DropDownList özelliğini AutoPostBack
olarak ayarlayabilir veya sayfaya true
bir Düğme Web denetimi ekleyebiliriz. Bu öğretici için DropDownList AutoPostBack
özelliğini olarak ayarlamayı true
tercih ettim.
Şekil 9 ve 10,ana/ayrıntı raporunun nasıl çalıştığını gösterir.
Şekil 9: Sayfayı İlk Ziyaret Ettiğinizde İçecek Ürünleri Görüntülenir (Tam boyutlu resmi görüntülemek için tıklayın)
Şekil 10: Yeni Ürün Seçme (Üretim) Otomatik Olarak Geri Göndermeye Neden Oluyor, DataList Güncelleştiriliyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)
"-- Kategori Seç --" Liste Öğesi Ekleme
Sayfayı FilterByDropDownList.aspx
ilk kez ziyaret ettiğinizde DropDownList'in ilk liste öğesi (İçecekler) kategorileri varsayılan olarak seçilidir ve içecek ürünleri DataList'te gösterilir. DropDownList ile Ana/Ayrıntı Filtreleme öğreticisinde, varsayılan olarak seçilen DropDownList'e bir "-- Kategori Seç --" seçeneği ekledik ve seçildiğinde veritabanındaki tüm ürünleri görüntüledik. Her ürün satırı az miktarda ekran varlığı aldığı için, gridview'da ürünleri listelerken böyle bir yaklaşım yönetilebilirdi. Ancak DataList ile her ürünün bilgileri ekranın çok daha büyük bir bölümünü tüketir. Yine de bir "-- Kategori Seç --" seçeneği ekleyelim ve varsayılan olarak seçili olmasını sağlayalım, ancak seçildiğinde tüm ürünleri göstermesini yerine, bunu ürün gösterecek şekilde yapılandıralım.
DropDownList'e yeni liste öğesi eklemek için Özellikler penceresi gidin ve özelliğindeki Items
üç noktaya tıklayın. "-- Kategori Seç --" ve Value
0
ile Text
yeni bir liste öğesi ekleyin.
Şekil 11: "-- Kategori Seç --" Liste Öğesi Ekleme
Alternatif olarak, DropDownList'e aşağıdaki işaretlemeyi ekleyerek liste öğesini ekleyebilirsiniz:
<asp:DropDownList ID="categories" runat="server" AutoPostBack="True"
DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
DataValueField="CategoryID" EnableViewState="False">
<asp:ListItem Value="0">-- Choose a Category --</asp:ListItem>
</asp:DropDownList>
Buna ek olarak, DropDownList denetimini AppendDataBoundItems
true
olarak ayarlamamız gerekir, çünkü olarak ayarlanırsa false
(varsayılan), kategoriler ObjectDataSource'tan DropDownList'e bağlı olduğunda el ile eklenen liste öğelerinin üzerine yazılır.
Şekil 12: Özelliği True olarak ayarlama AppendDataBoundItems
"-- Kategori Seç --" liste öğesinin değerini 0
seçme nedenimiz, sistemde değeri 0
olan hiçbir kategori olmamasıdır, bu nedenle "-- Kategori Seç --" liste öğesi seçildiğinde hiçbir ürün kaydı döndürülmeyecektir. Bunu onaylamak için bir tarayıcı üzerinden sayfayı ziyaret edin. Şekil 13'te gösterildiği gibi, sayfayı ilk kez görüntülerken "-- Kategori Seç --" liste öğesi seçilir ve hiçbir ürün görüntülenmez.
Şekil 13: "-- Kategori Seç --" Liste Öğesi Seçildiğinde, Hiçbir Ürün Görüntülenmez (Tam boyutlu görüntüyü görüntülemek için tıklayın)
"-- Kategori Seç --" seçeneği belirlendiğinde tüm ürünleri görüntülemeyi tercih ederseniz, bunun yerine değerini -1
kullanın. Astute okuyucusu, DropDownList ile Ana/Ayrıntı Filtreleme öğreticisinde sınıfının GetProductsByCategoryID(categoryID)
yöntemini güncelleştirdiğimizde ProductsBLL
değerinin categoryID
geçirilmesi durumunda tüm ürün kayıtlarının -1
döndürüldüğünü hatırlayacaktır.
Özet
Hiyerarşik olarak ilgili verileri görüntülerken, genellikle kullanıcının hiyerarşinin en üstünden verileri inceleyip ayrıntılara inebileceği ana/ayrıntı raporlarını kullanarak verilerin sunulmasına yardımcı olur. Bu öğreticide, seçilen kategorinin ürünlerini gösteren basit bir ana/ayrıntı raporu oluşturmayı inceledik. Bu, kategori listesi için bir DropDownList ve seçili kategoriye ait ürünler için bir DataList kullanılarak gerçekleştirilir.
Sonraki öğreticide, ana ve ayrıntı kayıtlarını iki sayfada ayırmayı inceleyeceğiz. İlk sayfada, ayrıntıları görüntülemek için bir bağlantı içeren bir "ana" kayıt listesi görüntülenir. Bağlantıya tıklanması, kullanıcıyı ikinci sayfaya kadar ilerleterek seçili ana kaydın ayrıntılarını görüntüler.
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çireni Randy Schmidt'tir. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana adresinden 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