GridView ile iki sayfada ana/ayrıntı filtreleme (C#)

tarafından Scott Mitchell

PDF'i indirin

Bu öğreticide, veritabanındaki tedarikçileri listelemek için GridView kullanarak bu düzeni uygulayacağız. GridView'daki her sağlayıcı satırı, tıklandığında kullanıcıyı seçilen sağlayıcı için bu ürünlerin listelendiği ayrı bir sayfaya götüren bir Ürünleri Görüntüle bağlantısı içerir.

Giriş

Önceki iki öğreticide, "ana" kayıtları görüntülemek için DropDownLists'i ve"ayrıntıları" görüntülemek için GridView veya DetailsView denetimini kullanarak tek bir web sayfasında ana/ayrıntı raporlarının nasıl görüntüleneceğini gördük. Ana/ayrıntı raporları için kullanılan bir diğer yaygın desen, ana kayıtların bir web sayfasında ve ayrıntıların başka bir web sayfasında gösterilmesidir. ASP.NET Forumları gibi bir forum web sitesi, uygulamada bu düzenin harika bir örneğidir. ASP.NET Forumları, Başlangıç, Web Forms, Veri Sunumu Denetimleri gibi çeşitli forumlardan oluşur. Her forum birçok yazışmadan oluşur ve her yazışma bir dizi gönderiden oluşur. ASP.NET Forumları giriş sayfasında forumlar listelenir. Bir foruma tıkladığınızda, sizi o foruma ait başlıkların listelendiği bir ShowForum.aspx sayfasına yönlendirir. Benzer şekilde, bir konuya tıkladığınızda, tıkladığınız konunun gönderilerini görüntüleyen ShowPost.aspx öğesine götürülürsünüz.

Bu öğreticide, veritabanındaki tedarikçileri listelemek için GridView kullanarak bu düzeni uygulayacağız. GridView'daki her sağlayıcı satırı, tıklandığında kullanıcıyı seçilen sağlayıcı için bu ürünlerin listelendiği ayrı bir sayfaya götüren bir Ürünleri Görüntüle bağlantısı içerir.

1. Adım: KlasöreSupplierListMaster.aspxveProductsForSupplierDetails.aspxSayfaları EklemeFiltering

Üçüncü öğreticide sayfa düzenini tanımlarken, BasicReporting, Filtering ve CustomFormatting klasörlerine bir dizi "starter" sayfa ekledik. Ancak, bu öğretici için o zaman bir başlangıç sayfası eklemedik, bu nedenle klasöre iki yeni sayfa Filtering eklemek için biraz bekleyin: SupplierListMaster.aspx ve ProductsForSupplierDetails.aspx. SupplierListMaster.aspx "ana" kayıtları (tedarikçiler) listelerken ProductsForSupplierDetails.aspx , seçilen sağlayıcının ürünlerini görüntüler.

Bu iki yeni sayfayı oluştururken bunları ana sayfayla ilişkilendirdiğinizden Site.master emin olun.

Şekil 1: SupplierListMaster.aspx ve ProductsForSupplierDetails.aspx Sayfalarını Filtering Klasörüne Ekle

Ayrıca projeye yeni sayfalar eklerken, site haritası dosyasını Web.sitemapuygun şekilde güncelleştirdiğinizden emin olun. Bu öğretici için, SupplierListMaster.aspx sayfasını, Filtreleme Raporları <siteMapNode> öğesinin alt öğesi olarak kullanarak aşağıdaki XML içeriğiyle site haritasına ekleyin.

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another."
/>

Uyarı

K. Scott Allen'ın ücretsiz Visual Studio Site Haritası Makro'sunu kullanarak yeni ASP.NET sayfaları eklerken site haritası dosyasını güncelleştirme işlemini otomatikleştirmeye yardımcı olabilirsiniz.

2. Adım: Sağlayıcı Listesini görüntülemeSupplierListMaster.aspx

SupplierListMaster.aspx ve ProductsForSupplierDetails.aspx sayfaları oluşturulduktan sonra, sonraki adımımız içinde SupplierListMaster.aspxtedarikçilerin GridView'unu oluşturmaktır. Sayfaya bir GridView ekleyin ve bunu yeni bir ObjectDataSource'a bağlayın. Bu ObjectDataSource, tüm tedarikçileri döndürmek için sınıfın SuppliersBLL yöntemini kullanmalıdırGetSuppliers().

Şekil 2: Sınıfı seçin SuppliersBLL (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ı GetSuppliers() (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Her GridView satırına Ürünleri Görüntüle başlıklı, tıklandığında kullanıcıyı ProductsForSupplierDetails.aspx sorgu dizesi aracılığıyla seçilen satırın SupplierID değerini geçirmeye götüren bir bağlantı eklemeliyiz. Örneğin, kullanıcı Tokyo Traders tedarikçisine ait Ürünleri Görüntüle bağlantısına (değeri 4 olan SupplierID) tıklarsa, ProductsForSupplierDetails.aspx?SupplierID=4 adresine gönderilmelidir.

Bunu başarmak için GridView'a bir HyperLinkField ekleyin ve bu da her GridView satırına bir köprü ekler. GridView'un akıllı etiketindeki Sütunları Düzenle bağlantısına tıklayarak başlayın. Ardından sol üstteki listeden HyperLinkField'i seçin ve Ekle'ye tıklayarak HyperLinkField'i GridView'un alan listesine ekleyin.

Şekil 4: GridView'a HyperLinkField ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

HyperLinkField, her GridView satırındaki bağlantıyla aynı metin veya URL değerlerini kullanacak şekilde yapılandırılabilir veya bu değerleri belirli satırlara bağlı veri değerlerine dayandırabilir. Tüm satırlarda statik bir değer belirtmek için HyperLinkField'ın Text veya NavigateUrl özelliklerini kullanın. Bağlantı metninin tüm satırlar için aynı olmasını istediğimizden HyperLinkField özelliğini Text Ürünleri Görüntüle olarak ayarlayın.

Şekil 5: HyperLinkField Özelliğini Text Ürünleri Görüntüle olarak ayarlama (Tam boyutlu görüntüyü görüntülemek için tıklayın)

GridView satırına bağlı temel veriler baz alınarak metin veya URL değerlerini ayarlamak için, DataTextField veya DataNavigateUrlFields özelliklerinde metin veya URL değerlerinin çekileceği veri alanlarını belirtin. DataTextField yalnızca tek bir veri alanına ayarlanabilir; DataNavigateUrlFieldsancak, veri alanlarının virgülle ayrılmış bir listesine ayarlanabilir. Metni veya URL'yi genellikle geçerli satırın veri alanı değeri ile bazı statik işaretlemeleri birleştirerek temellendirmek gerekir. Bu öğreticide, örneğin, HyperLinkField bağlantılarının URL'sinin ProductsForSupplierDetails.aspx?SupplierID=supplierID olmasını istiyoruz; burada her GridView satırının supplierID değeri SupplierID. Her satırın kendi ProductsForSupplierDetails.aspx?SupplierID= değerine göre değişen supplierID bölümü veri odaklı iken, bağlantının URL'sindeki SupplierID bölümü statiktir. Burada hem statik hem de veri odaklı değerlere ihtiyacımız olduğunu fark edin.

Statik ve veri temelli değerlerin birleşimini belirtmek için DataTextFormatString ve DataNavigateUrlFormatString özelliklerini kullanın. Bu özelliklerde statik işaretlemeyi gerektiği şekilde girin ve ardından {0} belirtecini kullanarak, DataTextField veya DataNavigateUrlFields özelliklerinde belirtilen alanın değerinin görünmesini istediğiniz yeri belirtin. Özelliğin DataNavigateUrlFields belirtilen birden çok alanı varsa, ilk alan değerinin eklenmesini istediğiniz yerde {0}, ikinci alan değeri için {1} ve bu şekilde devam edebilirsiniz.

Bunu öğreticimize uyguladığımızda, satır başına özelleştirmemiz gereken veri alanı olduğundan, DataNavigateUrlFields özelliğini SupplierID olarak ve DataNavigateUrlFormatString özelliğini ProductsForSupplierDetails.aspx?SupplierID={0} olarak ayarlamamız gerekir.

Şekil 6: HyperLinkField’i doğru bağlantı URL'sini SupplierID öğeye dayanarak içerecek şekilde yapılandırın (Tam boyutlu görüntüyü görüntülemek için tıklayın)

HyperLinkField'i ekledikten sonra GridView alanlarını özelleştirebilir ve yeniden sıralayabilirsiniz. Aşağıdaki işaretleme, bazı küçük alan düzeyinde özelleştirmeler yaptıktan sonra GridView'ı gösterir.

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="SupplierID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Columns>
        <asp:HyperLinkField DataNavigateUrlFields="SupplierID"
            DataNavigateUrlFormatString=
            "ProductsForSupplierDetails.aspx?SupplierID={0}"
            Text="View Products" />
        <asp:BoundField DataField="CompanyName"
          HeaderText="Company" SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City"
          SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country"
          SortExpression="Country" />
    </Columns>
</asp:GridView>

Sayfayı SupplierListMaster.aspx bir tarayıcı üzerinden görüntülemek için biraz zaman ayırın. Şekil 7'de gösterildiği gibi, sayfada şu anda Ürünleri Görüntüle bağlantısı da dahil olmak üzere tüm sağlayıcılar listelenmektedir. Ürünleri Görüntüle bağlantısına tıkladığınızda, sağlayıcının ProductsForSupplierDetails.aspx bilgisi sorgu dizesinde iletilerek sizi SupplierID adresine götürür.

Şekil 7: Her Sağlayıcı Satırı Bir Ürünleri Görüntüleme Bağlantısını içerir (Tam boyutlu görüntüyü görüntülemek için buraya tıklayın)

3. Adım: Tedarikçinin Ürünlerinin listelenmesiProductsForSupplierDetails.aspx

Bu noktada SupplierListMaster.aspx sayfa, sorgu dizesinde seçilen sağlayıcının ProductsForSupplierDetails.aspx adresini SupplierID kullanıcılarına gönderiyor. Öğreticinin son adımı, sorgu dizesi aracılığıyla geçirilen ProductsForSupplierDetails.aspx değerine eşit olan SupplierID özelliğine sahip bir SupplierID GridView'da ürünleri görüntülemektir. Bu işlemi gerçekleştirmek için, ProductsForSupplierDetails.aspx sınıfından ProductsBySupplierDataSource yöntemini çağıran GetProductsBySupplierID(supplierID) adlı yeni bir ObjectDataSource denetimi kullanarak ProductsBLL sayfasına bir GridView ekleyin.

Şekil 8: Adlı ProductsBySupplierDataSource Yeni Bir ObjectDataSource Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

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

Şekil 10: ObjectDataSource'un Yöntemi Çağırmasını GetProductsBySupplierID(supplierID) Sağlayın (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Veri Kaynağını Yapılandırma sihirbazının son adımı, yöntemin GetProductsBySupplierID(supplierID) parametresinin supplierID kaynağını sağlamamızı ister. querystring değerini kullanmak için Parametre kaynağını QueryString olarak ayarlayın ve QueryStringField metin kutusuna ()SupplierID kullanılacak sorgu dizesi değerinin adını girin.

Şekil 11: Sorgu Dizesi Değeri'nden supplierID Parametre Değerini Doldurma SupplierID (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Hepsi bu kadar! Şekil 12'de, ProductsForSupplierDetails.aspx bağlantısından Tokyo Traders bağlantısına tıklayarak ziyaret edilen sayfa gösterilir.

Şekil 12: Tokyo Traders tarafından Sağlanan Ürünler Gösteriliyor (Tam boyutlu görüntüyü görüntülemek için tıklayınız)

Tedarikçi bilgilerini görüntülemeProductsForSupplierDetails.aspx

Şekil 12'de gösterildiği gibi, ProductsForSupplierDetails.aspx tarafından sağlanan ürünler, sorgu dizesinde belirtilen SupplierID sayfasında basitçe listelenir. Ancak bu sayfaya doğrudan gönderilen biri Şekil 12'de Tokyo Traders ürünlerinin gösterildiğini bilmiyordu. Bunu düzeltmek için bu sayfada sağlayıcı bilgilerini de görüntüleyebiliriz.

GridView ürünlerinin üzerine bir FormView ekleyerek başlayın. Sınıfın SuppliersDataSource yöntemini çağıran SuppliersBLL adlı GetSupplierBySupplierID(supplierID) yeni bir ObjectDataSource denetimi oluşturun.

Şekil 13: Sınıfı seçin SuppliersBLL (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 14: ObjectDataSource'un Yöntemi Çağırmasını GetSupplierBySupplierID(supplierID) Sağlayın (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ProductsBySupplierDataSource olduğu gibi, supplierID sorgu dizesi değeri SupplierID parametresine atanır.

Şekil 15: Sorgu Dizesi Değeri'nden supplierID Parametre Değerini Doldurma SupplierID (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Tasarım görünümünde FormView'u ObjectDataSource'a bağlarken Visual Studio, ObjectDataSource tarafından döndürülen her veri alanı için FormView'un ItemTemplate, InsertItemTemplateve EditItemTemplate etiket ve TextBox Web denetimlerini otomatik olarak oluşturur. Sağlayıcı bilgilerini görüntülemek istediğimizden, InsertItemTemplate ve EditItemTemplate etiketlerini kaldırabilirsiniz. Ardından ItemTemplate öğesini düzenleyerek tedarikçinin şirket adını bir <h3> öğede ve adres, şehir, ülke/bölge ve telefon numarasını şirket adının altında görüntülemesini sağlayın. Alternatif olarak, "DataSourceID" öğreticisinde yaptığımız gibi, FormView'ları ItemTemplate el ile ayarlayabilir ve işaretlemeyi oluşturabilirsiniz.

Bu düzenlemelerden sonra FormView'un bildirim temelli işaretlemesi aşağıdakine benzer görünmelidir:

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
    DataSourceID="suppliersDataSource" EnableViewState="False">
    <ItemTemplate>
        <h3><%# Eval("CompanyName") %></h3>
        <p>
            <asp:Label ID="AddressLabel" runat="server"
                Text='<%# Bind("Address") %>'></asp:Label><br />
            <asp:Label ID="CityLabel" runat="server"
                Text='<%# Bind("City") %>'></asp:Label>,
            <asp:Label ID="CountryLabel" runat="server"
                Text='<%# Bind("Country") %>'></asp:Label><br />
            Phone:
            <asp:Label ID="PhoneLabel" runat="server"
                Text='<%# Bind("Phone") %>'></asp:Label>
        </p>
    </ItemTemplate>
</asp:FormView>

Şekil 16'da, yukarıda ayrıntıları verilen sağlayıcı bilgileri dahil edildikten sonra sayfanın ekran görüntüsü ProductsForSupplierDetails.aspx gösterilmektedir.

Şekil 16: Ürün Listesi Tedarikçi Hakkında Bir Özet Içerir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Kullanıcı arabirimi içinProductsForSupplierDetails.aspxSon Rötuşları Yapma

Bu raporun kullanıcı deneyimini geliştirmek için sayfaya ProductsForSupplierDetails.aspx birkaç ekleme yapmamız gerekir. Şu anda bir kullanıcının sayfadan ProductsForSupplierDetails.aspx tedarikçi listesine geri dönmenin tek yolu tarayıcılarının geri düğmesine tıklamaktır. Sayfasına, ProductsForSupplierDetails.aspx sayfasına geri dönen bağlantı içeren bir HyperLink denetimi SupplierListMaster.aspx ekleyelim ve kullanıcının ana listeye dönmesi için alternatif bir yol sunalım.

Şekil 17: Kullanıcıyı Geri SupplierListMaster.aspx Almak için Bir HyperLink Denetimi Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Kullanıcı, herhangi bir ürünü olmayan bir sağlayıcının Ürünleri Görüntüle bağlantısına tıklarsa, ProductsBySupplierDataSource içindeki ObjectDataSource ProductsForSupplierDetails.aspx hiçbir sonuç döndürmez. ObjectDataSource'a bağlı GridView, kullanıcının tarayıcısında sayfada boş bir bölgeyle sonuçlanmış hiçbir işaretlemeyi işlemez. Seçilen sağlayıcıyla ilişkilendirilmiş ürün olmadığını kullanıcıya daha net bir şekilde bildirmek için, böyle bir durum ortaya çıktığında GridView'un EmptyDataText özelliğini görüntülenmesini istediğimiz iletiye ayarlayabiliriz. Bu özelliği "Bu sağlayıcı tarafından sağlanan ürün yok" olarak ayarladım.

Varsayılan olarak, Northwinds veritabanındaki tüm tedarikçiler en az bir ürün sağlar. Ancak bu öğreticide tabloyu el ile değiştirerek Products Escargots Nouveaux sağlayıcısının artık herhangi bir ürünle ilişkilendiril olmamasını sağladım. Şekil 18'de, bu değişiklik yapıldıktan sonra Escargots Nouveaux için ayrıntılar sayfası gösterilmektedir.

Şekil 18: Kullanıcılara Sağlayıcının Herhangi Bir Ürün Sağlamadığı Bildirilir (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ında ayrılırlar. Bu öğreticide, tedarikçilerin "ana" web sayfasında bir GridView'da ve ilişkili ürünlerin "ayrıntılar" sayfasında listelenmiş olmasını sağlayarak bu tür bir ana/ayrıntı raporunun nasıl uygulanağını inceledik. Ana web sayfasındaki her sağlayıcı satırı, satırın SupplierID değerini ayrıntılar sayfasına ileten bir bağlantı içerir. Bu tür satıra özgü bağlantılar GridView'un HyperLinkField'i kullanılarak kolayca eklenebilir.

Ayrıntılar sayfasında belirtilen sağlayıcı için bu ürünlerin alınması, sınıfın ProductsBLLGetProductsBySupplierID(supplierID) yöntemi çağrılarak gerçekleştirilir. supplierID Parametre değeri, parametre kaynağı olarak querystring kullanılarak bildirim temelli olarak belirtildi. FormView kullanarak ayrıntılar sayfasında sağlayıcı ayrıntılarının nasıl görüntüleneceğini de inceledik.

Sonraki öğreticimiz ana ve ayrıntı raporlarındaki son öğretici olacaktır. Her satırın Seç düğmesinin bulunduğu GridView'da ürünlerin listesini görüntülemeyi inceleyeceğiz. Seç düğmesine tıklanması, ürünün ayrıntılarını aynı sayfadaki DetailsView denetiminde 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ışır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Ona adresinden mitchell@4GuysFromRolla.comulaşabilirsiniz.

Özel Teşekkürler

Bu eğitim serisi, birçok yararlı kişi tarafından incelendi. Bu öğreticinin baş gözden geçireni Hilton Giesenow oldu. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, mitchell@4GuysFromRolla.com'a bir mesaj bırakın.

ÖncekiSonraki