DropDownList Denetimi ve GridView ile Ana/Ayrıntı Filtreleme (VB)
tarafından Scott Mitchell
Bu öğreticide, ana kayıtların DropDownList denetiminde nasıl görüntüleneceğini ve gridview'da seçili liste öğesinin ayrıntılarını göreceğiz.
Giriş
Genel bir rapor türü, raporun bazı "ana" kayıtlar kümesi göstererek başladığı ana /ayrıntı raporudur. Kullanıcı daha sonra ana kayıtlardan birinde detaya gidebilir ve bu ana kaydın "ayrıntılarını" görüntüleyebilir. Ana/ayrıntı raporları, tüm kategorileri gösteren bir rapor gibi bire çok ilişkileri görselleştirmek ve ardından kullanıcının belirli bir kategoriyi seçip ilişkili ürünlerini görüntülemesini sağlamak için ideal bir seçimdir. Ayrıca, ana/ayrıntı raporları özellikle "geniş" tablolardan (çok fazla sütunu olan) ayrıntılı bilgileri görüntülemek için kullanışlıdır. Örneğin, bir ana/ayrıntı raporunun "ana" düzeyi, veritabanındaki ürünlerin yalnızca ürün adını ve birim fiyatını gösterebilir ve belirli bir üründe detaya gitme işlemi ek ürün alanlarını (kategori, tedarikçi, birim başına miktar vb.) gösterebilir.
Ana/ayrıntı raporunun uygulanabileceği birçok yol vardır. Bu ve sonraki üç öğreticide çeşitli ana/ayrıntı raporlarına göz atacağız. Bu öğreticide, ana kayıtların DropDownList denetiminde nasıl görüntüleneceğini ve gridview'da seçili liste öğesinin ayrıntılarını göreceğiz. Özellikle, bu öğreticinin ana/ayrıntı raporu kategori ve ürün bilgilerini listeler.
1. Adım: Bir DropDownList'te Kategorileri Görüntüleme
Ana/ayrıntı raporumuz, bir DropDownList'teki kategorileri listeler ve seçilen liste öğesinin ürünleri bir GridView'daki sayfada daha aşağıda görüntülenir. Önümüzdeki ilk görev, kategorilerin DropDownList içinde görüntülenmesidir. Klasördeki Filtering
sayfayı FilterByDropDownList.aspx
açın, Araç Kutusu'ndan bir DropDownList'e sürükleyip sayfanın tasarımcısına sürükleyin ve özelliğini olarak Categories
ayarlayınID
. Ardından DropDownList'in akıllı etiketinden Veri Kaynağı Seç bağlantısına tıklayın. Bu, Veri Kaynağı Yapılandırma sihirbazını görüntüler.
Şekil 1: DropDownList'in Veri Kaynağını Belirtme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Sınıfın GetCategories()
yöntemini çağıran CategoriesBLL
adlı CategoriesDataSource
yeni bir ObjectDataSource eklemeyi seçin.
Şekil 2: Adlı CategoriesDataSource
Yeni Bir ObjectDataSource Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Şekil 3: Sınıfı Kullanmayı CategoriesBLL
Seçin (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Şekil 4: ObjectDataSource'ı Yöntemi Kullanacak GetCategories()
Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)
ObjectDataSource'ı yapılandırdıktan sonra DropDownList'te hangi veri kaynağı alanının görüntüleneceğini ve liste öğesinin değeri olarak hangisinin ilişkilendirileceğini belirtmemiz gerekir. CategoryName
Alanın görüntü olarak ve CategoryID
her liste öğesi için değer olarak olmasını 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 kayıtlarla Categories
doldurulmuş 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 görüntüyü görüntülemek için tıklayın)
2. Adım: Products GridView'ı ekleme
Ana/ayrıntı raporumuzdaki son adım, seçilen kategoriyle ilişkili ürünleri listelemektir. Bunu yapmak için sayfaya bir GridView ekleyin ve adlı productsDataSource
yeni bir ObjectDataSource oluşturun. Denetimin sınıfın productsDataSource
yönteminden verilerini kaldırmasını ProductsBLL
GetProductsByCategoryID(categoryID)
sağlayın.
Şekil 7: Yöntemi seçin GetProductsByCategoryID(categoryID)
(Tam boyutlu görüntüyü görüntülemek için tıklayın)
Bu yöntemi seçtikten sonra ObjectDataSource sihirbazı yöntemin categoryID
parametresinin değerini ister. 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)
Tarayıcıda ilerleme durumumuzu gözden geçirin. Sayfayı ilk kez ziyaret ettiğinizde, seçilen 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 GridView'un güncelleştirilebilmesi için bir geri göndermenin gerçekleşmesi gerekir. Bunu başarmak için iki seçeneğimiz vardır (bunların hiçbiri kod yazmayı gerektirmez):
- DropDownList'inAutoPostBack özelliğiniTrue olarak ayarlayın. (DropDownList'in akıllı etiketinde AutoPostBack'i Etkinleştir seçeneğini işaretleyerek bunu gerçekleştirebilirsiniz.) Bu, DropDownList'in seçili öğesi kullanıcı tarafından her değiştirildiğinde geri göndermeyi tetikler. Bu nedenle, kullanıcı DropDownList'ten yeni bir kategori seçtiğinde bir geri gönderme başlatılır ve GridView yeni seçilen kategoriye ait ürünlerle güncelleştirilir. (Bu öğreticide kullandığım yaklaşım budur.)
- DropDownList öğesinin yanına bir Button Web denetimi ekleyin. Özelliğini
Text
Refresh veya benzeri bir değer olarak ayarlayın. Bu yaklaşımla, kullanıcının yeni bir kategori seçmesi ve ardından Düğme'ye tıklaması gerekir. Düğmeye tıklanması geri göndermeye neden olur ve GridView'ı seçili kategorideki ürünleri listeleyecek şekilde güncelleştirir.
Şekil 9 ve 10'da ana/ayrıntı raporu iş başında gösterilir.
Şekil 9: Sayfayı İlk Ziyaret Ettiğinizde İçecek Ürünleri Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Şekil 10: Yeni Ürün Seçme (Üretim) Otomatik Olarak Geri Göndermeye Neden Oluyor, GridView Güncelleştiriliyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)
"-- Kategori Seçin --" Liste Öğesi Ekleme
Sayfayı FilterByDropDownList.aspx
ilk kez ziyaret ettiğinizde DropDownList'in ilk liste öğesi (İçecekler) kategorileri varsayılan olarak seçilidir ve GridView'da içecek ürünleri gösterilir. İlk kategorinin ürünlerini göstermek yerine, "-- Kategori Seç --" gibi bir DropDownList öğesinin seçilmesini isteyebiliriz.
DropDownList'e yeni bir liste öğesi eklemek için Özellikler penceresi gidin ve özelliğindeki Items
üç noktaya tıklayın. "-- Kategori Seçin --" ve Value
-1
ile Text
yeni bir liste öğesi ekleyin.
Şekil 11: Ekleme -- Kategori Seç -- Liste Öğesi (Tam boyutlu görüntüyü görüntülemek için tıklayın)
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="-1">
-- Choose a Category --
</asp:ListItem>
</asp:DropDownList>
Ayrıca, Kategoriler ObjectDataSource'tan DropDownList'e bağlı olduğunda Doğru değilse AppendDataBoundItems
el ile eklenen liste öğelerinin üzerine yazacağından DropDownList denetimini AppendDataBoundItems
True olarak ayarlamamız gerekir.
Şekil 12: Özelliği True olarak ayarlama AppendDataBoundItems
Bu değişikliklerden sonra sayfayı ilk ziyaret ettiğinizde "-- Kategori Seç --" seçeneği belirlenir ve hiçbir ürün görüntülenmez.
Şekil 13: İlk Sayfa Yüklemesinde Ürün Görüntülenmiyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)
"-- Kategori Seçin --" liste öğesi seçildiğinde hiçbir ürünün görüntülenme olmasının nedeni değerinin olması -1
ve veritabanında öğesi olan hiçbir CategoryID
-1
ürün olmamasıdır. İstediğiniz davranış buysa, bu noktada işiniz bitti demektir! Bununla birlikte, "-- Kategori Seçin --" liste öğesi seçildiğinde tüm kategorileri görüntülemek istiyorsanız, sınıfına ProductsBLL
dönün ve geçirilen categoryID
parametre sıfırdan küçükse yöntemini çağıracak GetProducts()
şekilde yöntemini özelleştirinGetProductsByCategoryID(categoryID)
:
Public Function GetProductsByCategoryID(categoryID As Integer) _
As Northwind.ProductsDataTable
If categoryID < 0 Then
Return GetProducts()
Else
Return Adapter.GetProductsByCategoryID(categoryID)
End If
End Function
Burada kullanılan teknik, Bildirim Temelli Parametreler öğreticisinde tüm sağlayıcıları geri görüntülemek için kullandığımız yaklaşıma benzer, ancak bu örnekte tüm kayıtların yerine Nothing
alınması gerektiğini belirtmek için değerini -1
kullanıyoruz. Bunun nedeni yönteminin categoryID
parametresinin GetProductsByCategoryID(categoryID)
geçirilen tamsayı değeri olarak beklemesi, Bildirim Temelli Parametreler öğreticisinde ise dize giriş parametresini geçirmemizdir.
Şekil 14'de "-- Kategori Seç --" seçeneğinin FilterByDropDownList.aspx
belirlendiğinde ekran görüntüsü gösterilir. Burada tüm ürünler varsayılan olarak görüntülenir ve kullanıcı belirli bir kategoriyi seçerek ekranı daraltabilir.
Şekil 14: Tüm Ürünler Artık Varsayılan Olarak Listeleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Özet
Hiyerarşik olarak ilgili verileri görüntülerken, genellikle verilerin ana/ayrıntı raporlarını kullanarak sunulmasına yardımcı olur. Bu raporlar, kullanıcının hiyerarşinin en üstünden verileri inceleyip ayrıntılara inmeye başlayabilmesini sağlar. Bu öğreticide, seçilen kategorinin ürünlerini gösteren basit bir ana/ayrıntı raporu oluşturmayı inceledik. Bu, kategori listesi için DropDownList ve seçilen kategoriye ait ürünler için GridView kullanılarak gerçekleştirilir.
Sonraki öğreticide iki DropDownList kullanarak DropDownList arabirimini bir adım daha ileri götüreceğiz.
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.
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