Ayrıntılar DetailView’u ile Seçilebilir Bir Ana GridView Kullanan Ana/Ayrıntı (C#)

Makale
07/13/2023

Bu öğreticide, satırları her ürünün adını ve fiyatının yanı sıra Seç düğmesini içeren bir GridView olacaktır. Belirli bir ürün için Seç düğmesine tıklanması, tüm ayrıntılarının aynı sayfadaki DetailsView denetiminde görüntülenmesine neden olur.

Giriş

Önceki öğreticide, iki web sayfası kullanarak bir ana/ayrıntı raporu oluşturmayı gördük: sağlayıcı listesini görüntülediğimiz "ana" web sayfası; ve seçilen sağlayıcı tarafından sağlanan ürünleri listeleyen bir "ayrıntılar" web sayfası. Bu iki sayfa rapor biçimi tek sayfaya daraltılabilir. Bu öğreticide, satırları her ürünün adını ve fiyatının yanı sıra Seç düğmesini içeren bir GridView olacaktır. Belirli bir ürün için Seç düğmesine tıklanması, tüm ayrıntılarının aynı sayfadaki DetailsView denetiminde görüntülenmesine neden olur.

Şekil 1: Seç Düğmesine Tıklanması Ürünün Ayrıntılarını Görüntüler (Tam boyutlu görüntüyü görüntülemek için tıklayın)

1. Adım: Seçilebilir GridView Oluşturma

İki sayfalı ana/ayrıntı raporunda, her ana kaydın tıklandığında sorgu dizesindeki tıklanan satırın SupplierID değerini geçirerek kullanıcıyı ayrıntılar sayfasına gönderen bir köprü içerdiğini hatırlayın. HyperLinkField kullanılarak her GridView satırına böyle bir köprü eklendi. Tek sayfalı ana/ayrıntılar raporu için, tıklandığında ayrıntıları gösteren her GridView satırı için bir Düğme gerekir. GridView denetimi, her satır için geri göndermeye neden olan ve bu satırı GridView'un SelectedRow değeri olarak işaretleyen bir Seç düğmesi içerecek şekilde yapılandırılabilir.

Klasördeki Filtering sayfaya DetailsBySelecting.aspx bir GridView denetimi ekleyerek başlayın ve özelliğini olarak ProductsGridayarlayınID. Ardından, sınıfın ProductsBLLGetProducts() yöntemini çağıran adlı AllProductsDataSource yeni bir ObjectDataSource ekleyin.

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

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

Şekil 4: ObjectDataSource'ı Yöntemi Çağıracak GetProducts() Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ve UnitPrice BoundFields dışında ProductName tümünü kaldırarak GridView alanlarını düzenleyin. Ayrıca, BoundField'i para birimi olarak biçimlendirme UnitPrice ve BoundField'lerin özelliklerini değiştirme HeaderText gibi gerektiğinde bu BoundField'leri özelleştirebilirsiniz. Bu adımlar, GridView'un akıllı etiketinden Sütunları Düzenle bağlantısına tıklayarak veya bildirim temelli söz dizimini el ile yapılandırarak grafiksel olarak gerçekleştirilebilir.

Şekil 5: ve UnitPrice BoundFields Dışında ProductName Tümünü Kaldır (Tam boyutlu görüntüyü görüntülemek için tıklayın)

GridView için son işaretleme:

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Ardından GridView'ı seçilebilir olarak işaretlememiz gerekir. Bu işlem her satıra bir Seç düğmesi ekler. Bunu yapmak için GridView'un akıllı etiketindeki Seçimi Etkinleştir onay kutusunu işaretlemeniz yeterlidir.

Şekil 6: GridView'un Satırlarını Seçilebilir Hale Getirme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Seçimi Etkinleştirme seçeneğinin işaretlenmesi GridView'a ProductsGridShowSelectButton özelliği True olarak ayarlanmış bir CommandField ekler. Şekil 6'da gösterildiği gibi, GridView'un her satırı için bir Seç düğmesi elde eder. Varsayılan olarak, Seç düğmeleri LinkButtons olarak işlenir, ancak Bunun yerine CommandField'in ButtonType özelliği aracılığıyla Düğmeler veya ImageButtons kullanabilirsiniz.

<asp:GridView ID="ProductsGrid" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
          HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

GridView satırının Seç düğmesine tıklandığında bir geri gönderme işlemi yapıldığında ve GridView'un SelectedRow özelliği güncelleştirildiğinde. Özelliğine SelectedRow ek olarak, GridView SelectedIndex, SelectedValue ve SelectedDataKey özelliklerini sağlar. SelectedIndex özelliği seçili satırın dizinini döndürürken SelectedValue ve SelectedDataKey özellikleri GridView'un DataKeyNames özelliğine göre değerler döndürür.

DataKeyNames özelliği, bir veya daha fazla veri alanı değerini her satırla ilişkilendirmek için kullanılır ve genellikle temel alınan verilerden benzersiz olarak tanımlayıcı bilgileri her GridView satırıyla ilişkilendirmek için kullanılır. özelliği, SelectedValue seçili satır için ilk DataKeyNames veri alanının değerini döndürür. Burada özellik, seçilen satırın SelectedDataKeyDataKey nesnesini döndürür ve bu değer, o satır için belirtilen veri anahtarı alanlarının tüm değerlerini içerir.

DataKeyNames Bir veri kaynağını Tasarım Aracı aracılığıyla GridView, DetailsView veya FormView'a bağladığınızda özelliği otomatik olarak benzersiz olarak tanımlayan veri alanları olarak ayarlanır. Bu özellik önceki öğreticilerde bizim için otomatik olarak ayarlanmış olsa da, örnekler özelliği belirtilmeden DataKeyNames çalışırdı. Ancak, bu öğreticideki seçilebilir GridView için ve ekleme, güncelleştirme ve silmeyi inceleyeceğimiz gelecek öğreticiler için özelliğin DataKeyNames düzgün ayarlanması gerekir. GridView'unuzun DataKeyNames özelliğinin olarak ayarlandığından emin olmak için ProductIDbiraz zaman ayırın.

Şu ana kadarki ilerleme durumumuzu bir tarayıcı üzerinden görüntüleyelim. GridView'da tüm ürünlerin adını ve fiyatının yanı sıra Bağlantı SeçDüğmesinin listelendiğini unutmayın. Seç düğmesine tıklanması geri göndermeye neden olur. 2. Adım'da, seçilen ürünün ayrıntılarını görüntüleyerek detailsView'ın bu geri göndermeye nasıl yanıt vereceğini göreceğiz.

Şekil 7: Her Ürün Satırı Bir Seç Bağlantı Düğmesi içerir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Seçili Satırı Vurgulama

ProductsGrid GridView,seçili satır için görsel stili dikte etmek için kullanılabilecek bir SelectedRowStyle özelliğe sahiptir. Düzgün kullanıldığında, GridView'un hangi satırının seçili olduğunu daha net bir şekilde göstererek kullanıcının deneyimini geliştirebilirsiniz. Bu öğreticide, seçilen satırın sarı arka planla vurgulanması gerekir.

Önceki öğreticilerimizde olduğu gibi estetikle ilgili ayarları CSS sınıfları olarak tanımlanmaya devam etmek için çaba gösterelim. Bu nedenle, adlı SelectedRowStyleiçinde Styles.css yeni bir CSS sınıfı oluşturun.

.SelectedRowStyle
{
    background-color: Yellow;
}

Bu CSS sınıfını öğretici serimizdeki tüm GridView'ların özelliğine SelectedRowStyle uygulamak için Temadaki DataWebControls Dış Görünümü aşağıda gösterildiği gibi ayarları içerecek SelectedRowStyle şekilde düzenleyin:GridView.skin

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

Bu eklemeyle, seçili GridView satırı artık sarı arka plan rengiyle vurgulanır.

Şekil 8: GridView SelectedRowStyle Özelliğini Kullanarak Seçili Satırın Görünümünü Özelleştirme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: Seçili Ürünün Ayrıntılarını DetailsView'da Görüntüleme

ProductsGrid GridView tamamlandıktan sonra kalan tek şey, seçilen ürünle ilgili bilgileri görüntüleyen bir DetailsView eklemektir. GridView'un üzerine bir DetailsView denetimi ekleyin ve adlı ProductDetailsDataSourceyeni bir ObjectDataSource oluşturun. Bu DetailsView öğesinin seçili ürünle ilgili belirli bilgileri görüntülemesini istediğimiz için öğesini sınıfın ProductsBLLGetProductByProductID(productID) yöntemini kullanacak şekilde yapılandırınProductDetailsDataSource.

Şekil 9: Sınıfın ProductsBLLGetProductByProductID(productID) Yöntemini Çağırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

GridView denetiminin productIDSelectedValue özelliğinden parametrenin değerini alın. Daha önce de bahsettiğimiz gibi GridView özelliği SelectedValue , seçilen satır için ilk veri anahtarı değerini döndürür. Bu nedenle, Seçili satırın ProductID değerinin tarafından SelectedValuedöndürülmesi için ProductIDGridView DataKeyNames özelliğinin olarak ayarlanması zorunludur.

Şekil 10: Parametreyi productID GridView'un SelectedValue Özelliği olarak ayarlayın (Tam boyutlu görüntüyü görüntülemek için tıklayın)

productDetailsDataSource ObjectDataSource doğru yapılandırıldıktan ve DetailsView'a bağlandıktan sonra bu öğretici tamamlanır! Sayfa ilk ziyaret edildiğinde hiçbir satır seçilmez, bu nedenle GridView'un SelectedValue özelliği döndürür null. Değeri olan bir NULLProductID ürün olmadığından, yöntemi tarafından GetProductByProductID(productID) hiçbir kayıt döndürülmüyor, yani DetailsView görüntülenmiyor (bkz. Şekil 11). GridView satırının Seç düğmesine tıklandığında bir geri gönderme yapılır ve DetailsView yenilenir. Bu kez GridView'un SelectedValue özelliği seçili satırın ProductID değerini döndürür, GetProductByProductID(productID) yöntemi söz konusu ürünle ilgili bilgileri içeren bir ProductsDataTable döndürür ve DetailsView bu ayrıntıları gösterir (bkz. Şekil 12).

Şekil 11: İlk Ziyaret Edildiğinde Yalnızca GridView Görüntüleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 12: Satır Seçildikten Sonra Ürünün Ayrıntıları Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

Bu ve önceki üç öğreticide ana/ayrıntı raporlarını görüntülemeye yönelik bir dizi teknik gördük. Bu öğreticide, ana kayıtları barındırmak için seçilebilir bir GridView ve seçilen ana kayıt hakkındaki ayrıntıları aynı sayfada görüntülemek için detailsView kullanarak inceledik. Önceki öğreticilerde DropDownLists kullanarak ana/ayrıntı raporlarını görüntülemeyi, bir web sayfasında ana kayıtları görüntülemeyi ve diğer web sayfasında kayıtları ayrıntılandırmayı inceledik.

Bu öğretici, ana/ayrıntı raporları incelememizi tamamlar. Sonraki öğreticiden başlayarak GridView, DetailsView ve FormView ile özelleştirilmiş biçimlendirmeyi keşfetmeye başlayacağız. Bu denetimlerin görünümünü kendilerine bağlı verilere göre nasıl özelleştirebileceğinizi, GridView'un alt bilgisindeki verileri nasıl özetleyebileceğinizi ve düzen üzerinde daha fazla denetim elde etmek için şablonları nasıl kullanacağınızı göreceğiz.

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 Saat içinde 2.0. 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 bir satır mitchell@4GuysFromRolla.combırakın.

Önceki Sonraki