DropDownList ve DataList ile Ana/Ayrıntı Filtreleme (C#)

Makale
03/05/2024

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ı DataListRepeaterFilteringyeni 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.masterkullanacak şekilde yapılandırılmasını sağlayın:

Default.aspx
FilterByDropDownList.aspx
CategoryListMaster.aspx
ProductsForCategoryDetails.aspx
CategoriesAndProducts.aspx

DataListRepeaterFiltering Klasörü Oluşturma ve Öğretici ASP.NET Sayfaları Ekleme

Ş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.ascxDefault.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>

Site Haritası'nı Yeni ASP.NET Sayfalarını Içerecek Şekilde Güncelleştirin

Ş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 Categoriesayarlayın. DropDownList'in akıllı etiketinden Veri Kaynağı Seç bağlantısına tıklayın ve adlı CategoriesDataSourceyeni 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ı ProductsByCategoryDataSourceyeni bir ObjectDataSource oluşturun. Denetimin sınıfın ProductsByCategoryDataSourceProductsBLLGetProductsByCategoryID(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 Categoriesayarlayı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ı truetercih 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 Value0ile Text yeni bir liste öğesi ekleyin.

Bir ilke

Ş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 AppendDataBoundItemstrue 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.

AppendDataBoundItems Özelliğini True olarak ayarlayın

Şekil 12: Özelliği True olarak ayarlama AppendDataBoundItems

"-- Kategori Seç --" liste öğesinin değerini 0 seçme nedenimiz, sistemde değeri 0olan 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.