İki DropDownList ile Ana/Ayrıntı Filtreleme (C#)

Makale
07/13/2023

Bu öğreticide, istenen üst ve büyük/üst kayıtları seçmek için iki DropDownList denetimi kullanılarak ana/ayrıntı ilişkisi genişletilip üçüncü bir katman eklenir.

Giriş

Önceki öğreticide, kategorilerle doldurulmuş tek bir DropDownList ve seçili kategoriye ait olan ürünleri gösteren gridview kullanarak basit bir ana/ayrıntı raporunun nasıl görüntüleneceğini inceledik. Bu rapor düzeni, bire çok ilişkisi olan kayıtları görüntülerken iyi çalışır ve birden çok bire çok ilişki içeren senaryolarda çalışmak üzere kolayca genişletilebilir. Örneğin, bir sipariş giriş sisteminde müşteriler, siparişler ve sipariş satırı öğelerine karşılık gelen tablolar olabilir. Belirli bir müşterinin her siparişi birden çok maddeden oluşan birden çok siparişi olabilir. Bu tür veriler kullanıcıya iki DropDownList ve bir GridView ile sunulabilir. İlk DropDownList veritabanındaki her müşteri için bir liste öğesi içerir ve ikincinin içeriği seçilen müşteri tarafından verilen siparişler olur. GridView seçili siparişten satır öğelerini listeler.

Northwind veritabanı, , Ordersve Order Details tablolarında kurallı müşteri/sipariş/sipariş ayrıntıları bilgilerini içerse Customersde, bu tablolar mimarimizde yakalanmaz. Yine de iki bağımlı DropDownLists kullanarak bunu gösterebiliriz. İlk DropDownList, kategorileri ve ikincisinde seçili kategoriye ait ürünleri listeler. Ardından DetailsView seçili ürünün ayrıntılarını listeler.

1. Adım: DropDownList Kategorileri Oluşturma ve Doldurma

İlk hedefimiz, kategorileri listeleyen DropDownList'i eklemektir. Bu adımlar önceki öğreticide ayrıntılı olarak incelendi, ancak eksiksiz olması için burada özetlendi.

Klasördeki sayfayı MasterDetailsDetails.aspx açın, sayfaya bir DropDownList ekleyin, özelliğini olarak Categoriesayarlayın ID ve ardından akıllı etiketinde Veri Kaynağını Yapılandır bağlantısına Filtering tıklayın. Veri Kaynağı Yapılandırma Sihirbazı'ndan yeni bir veri kaynağı eklemeyi seçin.

Şekil 1: DropDownList için Yeni Veri Kaynağı Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Yeni veri kaynağı doğal olarak bir ObjectDataSource olmalıdır. Bu yeni ObjectDataSource CategoriesDataSource adını verin ve nesnenin yöntemini çağırmasını CategoriesBLLGetCategories() sağlayın.

Şekil 2: Sınıfı Kullanmayı CategoriesBLL Seçin (Tam boyutlu görüntüyü görüntülemek için tıklayın)

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

ObjectDataSource'ı yapılandırdıktan sonra DropDownList'te Categories hangi veri kaynağı alanının görüntüleneceğini ve hangilerinin liste öğesi için değer olarak yapılandırılması gerektiğini belirtmemiz gerekir. CategoryName Alanı görüntüleme olarak ve CategoryID her liste öğesinin değeri olarak ayarlayın.

Şekil 4: 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 doldurulmuş bir DropDownList denetimimiz (Categories) vardır. Kullanıcı DropDownList'ten yeni bir kategori seçtiğinde, 2. Adımda oluşturacağımız DropDownList ürününü yenilemek için bir geri göndermenin gerçekleşmesini isteriz. Bu nedenle, DropDownList'in akıllı etiketinden categories AutoPostBack'i Etkinleştir seçeneğini işaretleyin.

Şekil 5: DropDownList için AutoPostBack'i Categories etkinleştirme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: Seçili Kategorinin Ürünlerini İkinci Bir Açılan Listede Görüntüleme

Categories DropDownList tamamlandıysa, sonraki adımımız seçilen kategoriye ait ürünlerin DropDownList listesini görüntülemektir. Bunu başarmak için adlı ProductsByCategorysayfaya başka bir DropDownList ekleyin. DropDownList'de Categories olduğu gibi DropDownList için ProductsByCategory adlı ProductsByCategoryDataSourceyeni bir ObjectDataSource oluşturun.

Şekil 6: DropDownList için ProductsByCategory Yeni Veri Kaynağı Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

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

DropDownList'in ProductsByCategory yalnızca seçili kategoriye ait ürünleri görüntülemesi gerektiğinden ObjectDataSource'un nesnesinden yöntemini çağırmasını GetProductsByCategoryID(categoryID)ProductsBLL sağlayın.

Şekil 8: Sınıfı Kullanmayı ProductsBLL Seçin (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 9: ObjectDataSource'un Yöntemini Kullanacak Şekilde Yapılandırılması GetProductsByCategoryID(categoryID) (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Sihirbazın son adımında parametresinin categoryID değerini belirtmemiz gerekir. Bu parametreyi DropDownList öğesinden seçili öğeye atayın Categories .

Şekil 10: DropDownList'ten Parametre Değeri'ni Categories çekin categoryID (tam boyutlu görüntüyü görüntülemek için tıklayın)

ObjectDataSource yapılandırıldığında, kalan tek şey DropDownList öğelerinin görüntülenmesi ve değeri için hangi veri kaynağı alanlarının kullanılacağını belirtmektir. ProductName Alanı görüntüleyin ve alanı değer olarak kullanınProductID.

Şekil 11: DropDownList'ler ListItemText ve Value Özellikler için Kullanılan Veri Kaynağı Alanlarını Belirtme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ObjectDataSource ve ProductsByCategory DropDownList yapılandırıldığında sayfamızda iki DropDownList görüntülenir: birincisi kategorilerin tümünü listelerken, ikincisi seçili kategoriye ait olan ürünleri listeler. Kullanıcı ilk DropDownList'ten yeni bir kategori seçtiğinde geri gönderme yapılır ve ikinci DropDownList, yeni seçilen kategoriye ait olan ürünleri gösteren geri tepme olur. Şekil 12 ve 13, tarayıcı üzerinden görüntülendiğinde uygulamada gösterilir MasterDetailsDetails.aspx .

Şekil 12: Sayfayı İlk Kez Ziyaret Ettiğinizde İçecek kategorisi seçilir (tam boyutlu resmi görüntülemek için tıklayın)

Şekil 13: Farklı Bir Kategori Seçme Yeni Kategorinin Ürünlerini Görüntüler (Tam boyutlu resmi görüntülemek için tıklayın)

productsByCategory Şu anda DropDownList, değiştirildiğinde geri göndermeye neden olmaz. Ancak, seçilen ürünün ayrıntılarını görüntülemek için detailsView ekledikten sonra bir geri göndermenin gerçekleşmesini isteriz (3. Adım). Bu nedenle, DropDownList'in akıllı etiketinden productsByCategory AutoPostBack'i Etkinleştir onay kutusunu işaretleyin.

Şekil 14: DropDownList için productsByCategory AutoPostBack Özelliğini Etkinleştirme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: Seçili Ürünün Ayrıntılarını Görüntülemek için DetailsView Kullanma

Son adım, seçili ürünün ayrıntılarını detailsView içinde görüntülemektir. Bunu yapmak için sayfaya bir DetailsView ekleyin, özelliğini olarak ProductDetailsayarlayın ID ve bunun için yeni bir ObjectDataSource oluşturun. Bu ObjectDataSource'u, parametresinin ProductsBLL değeri için productID DropDownList öğesinin ProductsByCategory seçili değerini kullanarak sınıfının GetProductByProductID(productID) yönteminden verilerini çekecek şekilde yapılandırın.

Şekil 15: Sınıfı Kullanmayı ProductsBLL Seçin (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 16: ObjectDataSource'un Yöntemini Kullanacak Şekilde Yapılandırılması GetProductByProductID(productID) (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 17: DropDownList'ten ProductsByCategory Parametre Değerini Çekme productID (Tam boyutlu görüntüyü görüntülemek için tıklayın)

DetailsView'da kullanılabilir alanlardan herhangi birini görüntülemeyi seçebilirsiniz. , SupplierIDve alanlarını kaldırmayı ProductIDseçtim ve CategoryID kalan alanları yeniden sıralayıp biçimlendirdim. Buna ek olarak, DetailsView'un ve özelliklerini temizledim ve Width DetailsView'un Height verileri belirtilen boyuta kısıtlamak yerine en iyi şekilde görüntülemek için gereken genişliğe genişletilmesine izin verdi. Tam işaretleme aşağıda görünür:

<asp:DetailsView ID="ProductDetails" runat="server"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName"
          HeaderText="Category" ReadOnly="True"
          SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Price"
          HtmlEncode="False" SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
          HeaderText="UnitsInStock" SortExpression="Units In Stock" />
        <asp:BoundField DataField="UnitsOnOrder"
          HeaderText="UnitsOnOrder" SortExpression="Units On Order" />
        <asp:BoundField DataField="ReorderLevel"
          HeaderText="ReorderLevel" SortExpression="Reorder Level" />
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Sayfayı MasterDetailsDetails.aspx tarayıcıda denemek için biraz zaman ayırın. İlk bakışta, her şeyin istenen şekilde çalıştığı görünebilir, ancak hafif bir sorun vardır. Yeni bir kategori seçtiğinizde DropDownList seçili kategori ProductsByCategory için bu ürünleri içerecek şekilde güncelleştirilir, ancak ProductDetails DetailsView önceki ürün bilgilerini göstermeye devam eder. Seçilen kategori için farklı bir ürün seçerken DetailsView güncelleştirilir. Ayrıca, yeterince kapsamlı bir şekilde test ederseniz, sürekli olarak yeni kategoriler seçerseniz (DropDownList'ten Categories İçecek seçme, condiments ve confections gibi) diğer tüm kategori seçimlerinin DetailsView'un yenilenmesine neden olduğunu ProductDetails göreceksiniz.

Bu sorunu birleştirmeye yardımcı olmak için belirli bir örneğe göz atalım. Sayfayı ilk ziyaret ettiğinizde İçecekler kategorisi seçilir ve ilgili ürünler DropDownList'e ProductsByCategory yüklenir. Seçili ürün Chai'dir ve ayrıntıları Şekil 18'de ProductDetails gösterildiği gibi DetailsView'da görüntülenir.

Şekil 18: Seçili Ürünün Ayrıntıları DetailsView'da Görüntülenir (Tam boyutlu resmi görüntülemek için tıklayın)

İçecekler olan kategori seçimini Condiments olarak değiştirirseniz bir geri gönderme gerçekleşir ve ProductsByCategory DropDownList buna göre güncelleştirilir, ancak DetailsView yine de Chai'nin ayrıntılarını görüntüler.

Şekil 19: Önceden Seçilen Ürünün Ayrıntıları Hala Görüntüleniyor (Tam boyutlu resmi görüntülemek için tıklayın)

Listeden yeni bir ürün seçmek DetailsView'ı beklendiği gibi yeniler. Ürünü değiştirdikten sonra yeni bir kategori seçerseniz DetailsView yeniden yenilenmez. Ancak, yeni bir ürün seçmek yerine yeni bir kategori seçtiyseniz DetailsView yenilenir. Burada neler oluyor?

Sorun, sayfanın yaşam döngüsündeki bir zamanlama sorunudur. Bir sayfa istendiği zaman, işlemesi olarak bir dizi adımda ilerler. Bu adımlardan birinde ObjectDataSource denetimleri, değerlerinden SelectParameters herhangi birinin değişip değişmediğini denetler. Öyleyse, ObjectDataSource'a bağlı veri Web denetimi, görüntüsünü yenilemesi gerektiğini bilir. Örneğin, yeni bir kategori seçildiğinde, ProductsByCategoryDataSource ObjectDataSource parametre değerlerinin değiştiğini algılar ve ProductsByCategory DropDownList kendisini yeniden birleştirerek seçilen kategorinin ürünlerini alır.

Bu durumda ortaya çıkan sorun, Sayfa yaşam döngüsünde ObjectDataSources'un değiştirilen parametreleri denetlediği noktanın, ilişkili veri Web denetimlerinin yeniden bağlamadan önce ortaya çıkmasıdır. Bu nedenle, yeni bir kategori ProductsByCategoryDataSource seçerken ObjectDataSource parametresinin değerinde bir değişiklik algılar. Ancak, DetailsView tarafından ProductDetails kullanılan ObjectDataSource, DropDownList'in henüz rebound olması gerektiğinden ProductsByCategory bu tür değişiklikleri not etmez. Yaşam döngüsünün ProductsByCategory ilerleyen bölümlerinde DropDownList, ObjectDataSource'a yeniden bağlanarak yeni seçilen kategoriye ait ürünleri alır. ProductsByCategory DropDownList'in değeri değişse de, ProductDetails DetailsView'un ObjectDataSource'u parametre değeri denetimini zaten yapmıştır; bu nedenle DetailsView önceki sonuçlarını görüntüler. Bu etkileşim Şekil 20'de gösterilmektedir.

Şekil 20: DetailsView'ın ProductsByCategory ObjectDataSource Öğesi Değişiklikleri Denetledikten ProductDetails Sonra DropDownList Değeri Değişir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bunu düzeltmek için, DropDownList bağlandıktan sonra DetailsView'ı ProductsByCategory açıkça yeniden bağlamamız ProductDetails gerekir. DropDownList'in DataBind() olayı tetiklendiğinde ProductsByCategory DetailsView yöntemini çağırarak ProductDetails bunu DataBound gerçekleştirebiliriz. Aşağıdaki olay işleyici kodunu sayfanın arkadaki kod sınıfına MasterDetailsDetails.aspx ekleyin (olay işleyicisinin nasıl ekleneceğine ilişkin bir tartışma için "ObjectDataSource Parametre Değerlerini Program Aracılığıyla Ayarlama" bölümüne bakın):

protected void ProductsByCategory_DataBound(object sender, EventArgs e)
{
    ProductDetails.DataBind();
}

DetailsView'ın DataBind() yöntemine yapılan ProductDetails bu açık çağrı eklendikten sonra öğretici beklendiği gibi çalışır. Şekil 21'de, bu değişikliğin önceki sorunumuzun nasıl düzeltildiği vurgulanmaktadır.

Şekil 21: DropDownList'in ProductDetailsDataBound Olayı Tetiklendiğinde ProductsByCategory DetailsView Açıkça Yenilenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

DropDownList, ana kayıt ve ayrıntı kayıtları arasında bire çok ilişkisi olan ana/ayrıntı raporları için ideal bir kullanıcı arabirimi öğesi görevi görür. Önceki öğreticide, seçilen kategoriye göre görüntülenen ürünleri filtrelemek için tek bir DropDownList kullanmayı gördük. Bu öğreticide ürünlerin GridView değerini DropDownList ile değiştirdik ve seçili ürünün ayrıntılarını görüntülemek için DetailsView kullandık. Bu öğreticide ele alınan kavramlar müşteriler, siparişler ve sipariş öğeleri gibi birden çok bire çok ilişki içeren veri modellerine kolayca genişletilebilir. Genel olarak, bire çok ilişkilerdeki "bir" varlıkların her biri için her zaman bir DropDownList ekleyebilirsiniz.

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 Hilton Giesenow oldu. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana adresinden bir satır mitchell@4GuysFromRolla.combırakın.

Önceki Sonraki