GridView ile İki Sayfada Ana/Ayrıntı Filtreleme (VB)

  • Makale

tarafından Scott Mitchell

PDF’yi İndir

Bu öğreticide, veritabanındaki sağlayıcıları 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ünleri listeleyen ayrı bir sayfaya götüren bir Ürünleri Görüntüle bağlantısı içerir.

Giriş

Önceki iki öğreticide, DropDownLists kullanarak "ana" kayıtları görüntülemek için ana/ayrıntı raporlarını tek bir web sayfasında görüntülemeyi ve "ayrıntıları" görüntülemek için GridView veya DetailsView denetimini 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şlarken, Web Forms, Veri Sunumu Denetimleri gibi çeşitli forumlardan oluşur. Her forum birçok yazışmadan oluşur ve her iş parçacığı bir dizi gönderiden oluşur. ASP.NET Forumları giriş sayfasında forumlar listelenir. Bir foruma tıkladığınızda, o foruma ait konuların listelendiği bir ShowForum.aspx sayfa açılır. Benzer şekilde, bir iş parçacığına ShowPost.aspxtıklamak sizi öğesine götürür ve tıklanan yazışmanın gönderilerini görüntüler.

Bu öğreticide, veritabanındaki sağlayıcıları 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ünleri listeleyen ayrı bir sayfaya götüren bir Ürünleri Görüntüle bağlantısı içerir.

1. Adım: KlasöreFilteringveProductsForSupplierDetails.aspxSayfaları EklemeSupplierListMaster.aspx

Üçüncü öğreticide sayfa düzenini tanımlarken , Filteringve CustomFormatting klasörlerine bir dizi "başlangıç" sayfası BasicReportingekledik. Ancak, bu öğretici için o anda bir başlangıç sayfası eklemedik, bu nedenle klasöre iki yeni sayfa Filtering eklemek için biraz zaman ayırın: SupplierListMaster.aspx ve ProductsForSupplierDetails.aspx. SupplierListMaster.aspx , "ana" kayıtları (sağlayıcılar) 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.

SupplierListMaster.aspx ve ProductsForSupplierDetails.aspx Sayfalarını Filtreleme Klasörüne Ekleme

Şekil 1: ve ProductsForSupplierDetails.aspx Sayfalarını Klasöre Filtering Ekleme SupplierListMaster.aspx

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

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

Not

K. Scott Allen'ın ücretsiz Visual Studio Site Haritası Makrosunu 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 sonraki adımımız, içindeki SupplierListMaster.aspxsağlayıcıların GridView'unu oluşturmaktır. Sayfaya bir GridView ekleyin ve bunu yeni bir ObjectDataSource'a bağlayın. Bu ObjectDataSource, tüm sağlayıcıları döndürmek için sınıfının GetSuppliers() yöntemini kullanmalıdırSuppliersBLL.

SuppliersBLL Sınıfını seçme resmi

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

ObjectDataSource'ı GetSuppliers() Yöntemini Kullanacak Şekilde Yapılandırma

Ş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, tıklandığında kullanıcının sorgu dizesi aracılığıyla seçilen satırın SupplierID değerini geçirmesini ProductsForSupplierDetails.aspx sağlayan Ürünleri Görüntüle başlıklı bir bağlantı eklemeliyiz. Örneğin, kullanıcı Tokyo Traders sağlayıcısının (değeri 4 olan SupplierID ) Ürünleri Görüntüle bağlantısına tıklarsa adresine gönderilmelidir ProductsForSupplierDetails.aspx?SupplierID=4.

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

GridView'a HyperLinkField ekleme

Ş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ının aynı metin veya URL değerlerini kullanacak şekilde yapılandırılabilir veya bu değerleri belirli her satıra 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.

HyperLinkField'ın Metin Özelliğini Ürünleri Görüntüle olarak ayarlama

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

Metin veya URL değerlerini GridView satırına bağlı temel alınan verilere göre ayarlamak için, veya DataNavigateUrlFields özelliklerinde DataTextField metnin veya URL değerlerinin çekilmesi gereken 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. Metin veya URL'yi genellikle geçerli satırın veri alanı değeriyle bazı statik işaretlemelerin birleşimine dayandırmalıyız. Örneğin bu öğreticide, HyperLinkField bağlantılarının URL'sinin her GridView satırının SupplierID değeri olduğu supplierID şeklinde olmasını ProductsForSupplierDetails.aspx?SupplierID=supplierIDistiyoruz. Burada hem statik hem de veri temelli değerlere ihtiyacımız olduğuna dikkat edin: ProductsForSupplierDetails.aspx?SupplierID= Bağlantının URL'sinin bir kısmı statikken, değeri her satırın supplierID kendi SupplierID değeri olduğundan bölüm veri temellidir.

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

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

HyperLinkField'ı SupplierID'ye Göre Uygun Bağlantı URL'sini Içerecek Şekilde Yapılandırma

Şekil 6: HyperLinkField'ı, (Tam boyutlu görüntüyü görüntülemek için tıklayın) Temel Alan Uygun Bağlantı URL'sini SupplierID Içerecek Şekilde Yapılandırma

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 listelenir. Ürünleri Görüntüle bağlantısına tıkladığınızda ProductsForSupplierDetails.aspx, sorgu dizesinde sağlayıcının SupplierID yanından geçerek adresine gidin.

Her Sağlayıcı Satırı Bir Ürünleri Görüntüle Bağlantısı İçerir

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

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

Bu noktada SupplierListMaster.aspx sayfa kullanıcıları adresine ProductsForSupplierDetails.aspxgönderir ve sorgu dizesinde seçili sağlayıcınınkileri SupplierID geçirir. Öğreticinin son adımı, querystring aracılığıyla geçirilene eşit SupplierID olan SupplierID bir GridView'da ProductsForSupplierDetails.aspx ürünleri görüntülemektir. Bu başlangıcı, sınıfından ProductsForSupplierDetails.aspx yöntemini ProductsBLL çağıran adlı ProductsBySupplierDataSource yeni bir ObjectDataSource denetimi kullanarak sayfaya GetProductsBySupplierID(supplierID) bir GridView ekleyerek gerçekleştirmek için.

ProductsBySupplierDataSource Adlı Yeni Bir ObjectDataSource Ekleme

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

ProductsBLL Sınıfını seçin

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

ObjectDataSource'un GetProductsBySupplierID(supplierID) Yöntemini Çağırmasını Sağlama

Ş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 supplierID parametresinin GetProductsBySupplierID(supplierID) kaynağını sağlamamızı ister. querystring değerini kullanmak için Parametre kaynağını QueryString olarak ayarlayın ve QueryStringField metin kutusunda ()SupplierID kullanılacak querystring değerinin adını girin.

SupplierID Sorgu Dizesi Değerinden supplierID Parametre Değerinin görüntüsü

Ş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)

İşte bu kadar! Şekil 12'de ProductsForSupplierDetails.aspx , sayfasındaki Tokyo Traders bağlantısına SupplierListMaster.aspxtıklayarak ziyaret edilen sayfa gösterilir.

Tokyo Traders Tarafından Sağlanan Ürünler Gösteriliyor

Ş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)

Sağlayıcı Bilgilerini GörüntülemeProductsForSupplierDetails.aspx

Şekil 12'de gösterildiği gibi, ProductsForSupplierDetails.aspx sayfada yalnızca sorgu dizesinde belirtilen tarafından SupplierID sağlanan ürünler listelenir. Ancak bu sayfaya doğrudan gönderilen kişiler Şekil 12'de Tokyo Traders'ın ürünlerinin gösterildiğini bilmiyordur. 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ın GetSupplierBySupplierID(supplierID) yöntemini çağıran SuppliersBLL adlı SuppliersDataSource yeni bir ObjectDataSource denetimi oluşturun.

SuppliersBLL Sınıfını seçme Veri Kaynağı görüntüsü

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

ObjectDataSource'un GetSupplierBySupplierID(supplierID) Yöntemini Çağırması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)

'de ProductsBySupplierDataSourceolduğu gibi parametresine supplierID querystring değerinin atanmış olması SupplierID gerekir.

SupplierID Querystring değerinden supplierID Parametre değerinin görüntüsü

Ş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)

FormView'u Tasarım görünümünde 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 ve EditItemTemplate'yi kaldırmaktan InsertItemTemplate çekinmeyin. Ardından ItemTemplate öğesini düzenleyerek sağlayıcının ş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üleyebilecek şekilde düzenleyin. Alternatif olarak, "ObjectDataSource ile Verileri Görüntüleme" öğreticisinde yaptığımız gibi FormView'ları DataSourceID el ile ayarlayabilir ve işaretlemeyi oluşturabilirsinizItemTemplate.

Bu düzenlemeler tamamlandıktan 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österilir.

Ürün Listesi, Tedarikçi Hakkında Bir Özet Içerir

Ş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 Dokunuşları Uygulama

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ının geri düğmesine tıklamaktır. Kullanıcının ana listeye geri dönmesi için ProductsForSupplierDetails.aspx başka bir yol sağlayarak sayfasına geri SupplierListMaster.aspxbağlanan bir HyperLink denetimi ekleyelim.

Kullanıcıyı SupplierListMaster.aspx'e Geri Götürmek için HyperLink Denetimi Ekleme

Ş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 tedarikçiyle ilişkili ürün olmadığını kullanıcıya daha net bir şekilde iletmek için GridView özelliğini EmptyDataText böyle bir durum ortaya çıktığında görüntülenmesini istediğimiz iletiye ayarlayabiliriz. Bu özelliği "Bu tedarikçi 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 öğretici için tabloyu el ile değiştirdim Products , böylece tedarikçi Escargots Nouveaux artık hiçbir ürünle ilişkili değil. Şekil 18'de, bu değişiklik yapıldıktan sonra Escargots Nouveaux'nun ayrıntılar sayfası gösterilmektedir.

Kullanıcılara Sağlayıcının Herhangi Bir Ürün Sağlamadığı Bildirilir

Ş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ı hem ana hem de ayrıntı kayıtlarını tek bir sayfada görüntüleyebilirken, 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 uygulanıp uygulanağını inceledik. Ana web sayfasındaki her sağlayıcı satırı, satırın SupplierID değeri boyunca geçen ayrıntılar sayfasının bağlantısını içeriyordu. 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/ayrıntı raporlarında son öğreticidir. GridView'da her satırda Seç düğmesinin bulunduğu ürünlerin listesinin nasıl görüntüleneceğini inceleyeceğiz. Seç düğmesine tıkladığınızda, bu ürünün ayrıntıları aynı sayfada bir DetailsView denetiminde görüntülenir.

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.

ÖncekiSonraki