GridView ile İki Sayfada Ana/Ayrıntı Filtreleme (VB)
tarafından Scott Mitchell
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.aspx
tı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öreFiltering
veProductsForSupplierDetails.aspx
Sayfaları EklemeSupplierListMaster.aspx
Üçüncü öğreticide sayfa düzenini tanımlarken , Filtering
ve CustomFormatting
klasörlerine bir dizi "başlangıç" sayfası BasicReporting
ekledik. 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.
Şekil 1: ve ProductsForSupplierDetails.aspx
Sayfalarını Klasöre Filtering
Ekleme SupplierListMaster.aspx
Ayrıca projeye yeni sayfalar eklerken, site haritası dosyasını Web.sitemap
uygun ş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.aspx
sağ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
.
Ş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, 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.
Ş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.
Ş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; DataNavigateUrlFields
ancak, 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=supplierID
istiyoruz. 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 SupplierID
satı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.
Ş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.
Ş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.aspx
gö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.
Ş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 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.
Ş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.aspx
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)
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.
Ş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)
'de ProductsBySupplierDataSource
olduğu gibi parametresine supplierID
querystring değerinin atanmış olması SupplierID
gerekir.
Ş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
, InsertItemTemplate
ve 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.
Ş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.aspx
Son 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.aspx
bağlanan bir HyperLink denetimi ekleyelim.
Ş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.
Ş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 ProductsBLL
GetProductsBySupplierID(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.
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