GridView'ın Alt Bilgisinde Özet Bilgiler Görüntüleme (C#)

2024-07-16

Özet bilgileri genellikle raporun alt kısmında özet satırında görüntülenir. GridView denetimi, hücrelerine program aracılığıyla toplama verileri ekleyebileceğimiz bir alt bilgi satırı içerebilir. Bu öğreticide, bu alt bilgi satırında toplama verilerinin nasıl görüntüleneceğini göreceğiz.

Giriş

Bir kullanıcı, ürünlerin fiyatlarını, stoktaki birimleri, siparişteki birimleri ve yeniden sipariş düzeylerini görmenin yanı sıra ortalama fiyat, stoktaki toplam birim sayısı gibi toplu bilgilerle de ilgilenebilir. Bu tür özet bilgiler genellikle raporun en altında özet satırında görüntülenir. GridView denetimi, hücrelerine program aracılığıyla toplama verileri ekleyebileceğimiz bir alt bilgi satırı içerebilir.

Bu görev bize üç zorluk sunar:

GridView'ı alt bilgi satırını görüntüleyecek şekilde yapılandırma
Özet verileri belirleme; yani, ortalama fiyatı veya stoktaki birimlerin toplamını nasıl hesaplayacağız?
Özet verileri alt bilgi satırının uygun hücrelerine ekleme

Bu öğreticide bu zorlukların nasıl aşılacağını göreceğiz. Özellikle, seçili kategorinin ürünlerinin GridView'da görüntülendiği bir açılan listede kategorileri listeleyen bir sayfa oluşturacağız. GridView, bu kategorideki ürünler için stoktaki ve siparişteki birimlerin ortalama fiyatını ve toplam sayısını gösteren bir alt bilgi satırı içerir.

Şekil 1: Özet Bilgileri GridView'un Alt Bilgi Satırında Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu öğretici, ürün ana/ayrıntı arabirimi kategorisiyle birlikte, önceki Bir DropDownList ile Ana/Ayrıntı Filtreleme öğreticisinde ele alınan kavramları temel alır. Önceki öğreticide henüz çalışmadıysanız, lütfen bu öğreticiye devam etmeden önce bunu yapın.

1. Adım: DropDownList ve Products GridView Kategorilerini Ekleme

GridView'un alt bilgisine özet bilgileri eklemeyle ilgilenmeden önce, önce ana/ayrıntı raporunu oluşturalım. Bu ilk adımı tamamladıktan sonra özet verileri nasıl ekleyebileceğimizi inceleyeceğiz.

Klasördeki SummaryDataInFooter.aspx sayfayı CustomFormatting açarak başlayın. DropDownList denetimi ekleyin ve olarak IDCategoriesayarlayın. Ardından DropDownList'in akıllı etiketinden Veri Kaynağı Seç bağlantısına tıklayın ve sınıfın CategoriesDataSource yöntemini çağıran CategoriesBLL adlı GetCategories() yeni bir ObjectDataSource eklemeyi tercih edin.

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

Şekil 3: ObjectDataSource'un CategoriesBLL Sınıfın Yöntemini Çağırmasını GetCategories() Sağlayın (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ObjectDataSource'ı yapılandırdıktan sonra sihirbaz bizi DropDownList'in Veri Kaynağı Yapılandırma sihirbazına döndürür. Hangi veri alanı değerinin görüntülenmesi gerektiğini ve hangisinin DropDownList'in ListItem değerlerine karşılık gelip verileceğini belirtmemiz gerekir. Alanın görüntülenmesini CategoryName sağlayın ve değerini kullanın CategoryID .

Şekil 4: ve CategoryName Alanları'nı CategoryIDText sırasıyla ve Value olarak ListItem kullanın (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu noktada, sistemdeki kategorileri listeleyen bir DropDownList (Categories) vardır. Şimdi seçili kategoriye ait olan ürünleri listeleyen bir GridView eklememiz gerekiyor. Ancak bunu gerçekleştirmeden önce DropDownList'in akıllı etiketindeki AutoPostBack'i Etkinleştir onay kutusunu işaretlemek için biraz bekleyin. DropDownList ile Ana/Ayrıntı Filtreleme öğreticisinde açıklandığı gibi DropDownList'inAutoPostBack özelliği sayfaya true ayarlanarak DropDownList değeri her değiştirildiğinde geri gönderilecektir. Bu, GridView'un yenilenmesine neden olur ve bu ürünler yeni seçilen kategori için gösterilir. AutoPostBack Özellik (varsayılan) olarak ayarlanırsa false , kategorinin değiştirilmesi geri göndermeye neden olmaz ve bu nedenle listelenen ürünleri güncelleştirmez.

Şekil 5: DropDownList'in Akıllı Etiketinde AutoPostBack'i Etkinleştir Onay Kutusunu işaretleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)

Seçili kategoriye ilişkin ürünleri görüntülemek için sayfaya bir GridView denetimi ekleyin. GridView'ları ID olarak ProductsInCategory ayarlayın ve adlı ProductsInCategoryDataSourceyeni bir ObjectDataSource'a bağlayın.

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

ObjectDataSource'un sınıfın ProductsBLLGetProductsByCategoryID(categoryID) yöntemini çağırabilmesi için yapılandırın.

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

GetProductsByCategoryID(categoryID) yöntemi bir giriş parametresi aldığından, sihirbazın son adımında parametre değerinin kaynağını belirtebiliriz. Seçili kategorideki ürünleri görüntülemek için dropdownlist parametresini Categories çekin.

Şekil 8: Seçili Kategoriler Açılan Listesinden Parametre Değerini Alma categoryID (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Sihirbazı tamamladıktan sonra GridView,ürün özelliklerinin her biri için bir BoundField'a sahip olur. Yalnızca , , ProductNameUnitPriceve UnitsInStock BoundField değerlerinin UnitsOnOrdergörüntülenmesi için bu BoundField'leri temizleyelim. Kalan BoundField'lere alan düzeyinde ayarlar (örneğin, para birimi olarak biçimlendirme UnitPrice ) ekleyebilirsiniz. Bu değişiklikleri yaptıktan sonra GridView'un bildirim temelli işaretlemesi aşağıdakine benzer görünmelidir:

<asp:GridView ID="ProductsInCategory" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="ProductsInCategoryDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
            HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:BoundField DataField="UnitsInStock"
         HeaderText="Units In Stock" SortExpression="UnitsInStock">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:BoundField DataField="UnitsOnOrder"
           HeaderText="Units On Order" SortExpression="UnitsOnOrder">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
    </Columns>
</asp:GridView>

Bu noktada, seçilen kategoriye ait ürünler için ad, birim fiyat, stoktaki birimler ve siparişteki birimleri gösteren tam işlevli bir ana/ayrıntı raporumuz var.

Şekil 9: Seçili Kategoriler Açılan Listesinden Parametre Değerini Alma categoryID (Tam boyutlu görüntüyü görüntülemek için tıklayın)

GridView denetimi hem üst bilgi hem de alt bilgi satırını görüntüleyebilir. Bu satırlar, ve ShowHeader özelliklerinin değerlerine ShowFooter bağlı olarak ve varsayılanı ShowHeader olarak true ve ShowFooterfalseolarak görüntülenir. GridView'a alt bilgi eklemek için özelliğini olarak ShowFooterayarlamanız yeterlidirtrue.

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

Alt bilgi satırında GridView'da tanımlanan alanların her biri için bir hücre vardır; ancak, bu hücreler varsayılan olarak boş olur. İlerleme durumumuzu tarayıcıda görüntülemek için biraz zaman ayırın. ShowFooter Özelliği artık olarak trueayarlandığında, GridView boş bir alt bilgi satırı içerir.

Şekil 11: GridView Artık Alt Bilgi Satırı Içeriyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 11'deki alt bilgi satırı, arka planı beyaz olduğundan göze çarpmaz. 'de FooterStyle koyu kırmızı bir arka plan belirten bir Styles.css CSS sınıfı oluşturalım ve ardından Tema'daki GridView.skin Dış Görünüm dosyasını yapılandırarak DataWebControls bu CSS sınıfını GridView'un FooterStyleCssClass özelliğine atayalım. Dış Görünümler ve Temalar'ı fırçalamanız gerekiyorsa, ObjectDataSource ile Verileri Görüntüleme öğreticisine geri bakın.

aşağıdaki CSS sınıfını dosyasına Styles.cssekleyerek başlayın:

.FooterStyle
{
    background-color: #a33;
    color: White;
    text-align: right;
}

FooterStyle CSS sınıfı stil olarak sınıfına HeaderStyle benzer, ancak HeaderStylearka plan rengi daha koyudur ve metni kalın yazı tipinde görüntülenir. Ayrıca, alt bilgideki metin sağa hizalanırken üst bilgi metni ortalanır.

Ardından, bu CSS sınıfını her GridView alt bilgisi ile ilişkilendirmek için dosyayı Tema'da açın GridView.skin ve 'nin DataWebControls özelliğini ayarlayınFooterStyle.CssClass Bu eklemeden sonra dosyanın işaretlemesi şöyle görünmelidir:

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

Aşağıdaki ekran görüntüsünde gösterildiği gibi, bu değişiklik alt bilginin daha net bir şekilde göze çarpmasını sağlar.

Şekil 12: GridView Alt Bilgi Satırının Artık Kırmızımsı Arka Plan Rengi Var (Tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: Özet Verileri Hesaplama

GridView'un alt bilgisi görüntülendiğinde karşımıza çıkacak bir sonraki zorluk özet verilerin nasıl hesaplandığıdır. Bu toplama bilgilerini hesaplamanın iki yolu vardır:

Sql sorgusu aracılığıyla, belirli bir kategorinin özet verilerini hesaplamak için veritabanına ek bir sorgu verebiliriz. SQL, verilerin özetlenmesi gereken verileri belirtmek için bir yan tümcesiyle birlikte bir GROUP BY dizi toplama işlevi içerir. Aşağıdaki SQL sorgusu gerekli bilgileri geri getirir:
```
SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock),
SUM(UnitsOnOrder)
FROM Products
WHERE CategoryID = categoryID
GROUP BY CategoryID
```
Elbette bu sorguyu doğrudan sayfadan SummaryDataInFooter.aspx değil, ve ProductsTableAdapteriçinde ProductsBLL bir yöntem oluşturarak vermek istemezsiniz.
Verilere Dayalı Özel Biçimlendirme öğreticisinde açıklandığı gibi GridView'a eklendiği için bu bilgileri hesaplayın. GridView'un olay işleyicisi, gridView'a RowDataBound veri bağlantısı yapıldıktan sonra eklenen her satır için bir kez tetiklenir. Bu olay için bir olay işleyicisi oluşturarak, toplamak istediğimiz değerlerin çalışan toplamını tutabiliriz. Son veri satırı GridView'a bağlandıktan sonra toplamları ve ortalamayı hesaplamak için gereken bilgileri elde ederiz.

Genellikle veritabanına bir yolculuk kaydederken ikinci yaklaşımı ve Veri Erişim Katmanı ve İş Mantığı Katmanı'nda özet işlevselliği uygulamak için gereken çabayı kullanırım, ancak her iki yaklaşım da yeterli olacaktır. Bu öğretici için ikinci seçeneği kullanalım ve olay işleyicisini kullanarak RowDataBound çalışan toplamı takip edelim.

Tasarımcı'da GridView'u seçerek, Özellikler penceresi şimşek simgesine tıklayarak ve olaya çift tıklayarak RowDataBound GridView için bir RowDataBound olay işleyicisi oluşturun. Bu, sayfanın arka planda kod sınıfında adlı ProductsInCategory_RowDataBoundSummaryDataInFooter.aspx yeni bir olay işleyicisi oluşturur.

protected void ProductsInCategory_RowDataBound
    (object sender, GridViewRowEventArgs e)
{
}

Çalışan bir toplamı korumak için olay işleyicisi kapsamı dışında değişkenler tanımlamamız gerekir. Aşağıdaki dört sayfa düzeyi değişkeni oluşturun:

_totalUnitPrice, türü decimal
_totalNonNullUnitPriceCount, türü int
_totalUnitsInStock, türü int
_totalUnitsOnOrder, türü int

Ardından, olay işleyicisinde RowDataBound karşılaşılan her veri satırı için bu üç değişkeni artırmak için kodu yazın.

// Class-scope, running total variables...
decimal _totalUnitPrice = 0m;
int _totalNonNullUnitPriceCount = 0;
int _totalUnitsInStock = 0;
int _totalUnitsOnOrder = 0;
protected void ProductsInCategory_RowDataBound(object sender,
  GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Reference the ProductsRow via the e.Row.DataItem property
        Northwind.ProductsRow product =
          (Northwind.ProductsRow)
          ((System.Data.DataRowView)e.Row.DataItem).Row;
        // Increment the running totals (if they are not NULL!)
        if (!product.IsUnitPriceNull())
        {
            _totalUnitPrice += product.UnitPrice;
            _totalNonNullUnitPriceCount++;
        }
        if (!product.IsUnitsInStockNull())
            _totalUnitsInStock += product.UnitsInStock;
        if (!product.IsUnitsOnOrderNull())
            _totalUnitsOnOrder += product.UnitsOnOrder;
    }
}

Olay işleyicisi RowDataBound , DataRow ile ilgilendiğimizi güvence altına alarak başlar. Bu oluşturulduktan sonra, Northwind.ProductsRow içindeki nesnesine GridViewRowe.Row bağlı olan örnek değişkeninde productdepolanır. Ardından, çalışan toplam değişkenleri geçerli ürünün karşılık gelen değerlerine göre artırılır (veritabanı NULL değeri içermedikleri varsayılarak). Ortalama fiyat bu iki sayının bölüm değeri olduğundan hem çalışan UnitPrice toplamı hem de kayıt olmayanlarınNULLUnitPrice sayısını takip ediyoruz.

4. Adım: Alt Bilgide Özet Verileri Görüntüleme

Özet verileri toplandığında, son adım GridView'un alt bilgi satırında görüntülemektir. Bu görev de olay işleyicisi aracılığıyla RowDataBound program aracılığıyla gerçekleştirilebilir. Olay işleyicisininRowDataBound, alt bilgi satırı da dahil olmak üzere GridView'a bağlı her satır için tetiklendiğini hatırlayın. Bu nedenle, aşağıdaki kodu kullanarak alt bilgi satırındaki verileri görüntülemek için olay işleyicimizi genişletebiliriz:

protected void ProductsInCategory_RowDataBound
    (object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      ... Increment the running totals ...
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
      ... Display the summary data in the footer ...
    }
}

Tüm veri satırları eklendikten sonra alt bilgi satırı GridView'a eklendiğinden, alt bilgide özet verileri görüntülemeye hazır olduğumuzda çalışan toplam hesaplamaların tamamlanacağından emin olabilirsiniz. Ardından son adım, alt bilginin hücrelerinde bu değerleri ayarlamaktır.

Metni belirli bir alt bilgi hücresinde görüntülemek için, e.Row.Cells[index].Text = valuedizin oluşturmanın Cells 0'da başladığı kullanın. Aşağıdaki kod, ortalama fiyatı hesaplar (toplam fiyat ürün sayısına bölünür) ve GridView'un uygun alt bilgi hücrelerinde stoktaki ve birimdeki toplam birim sayısıyla birlikte görüntüler.

protected void ProductsInCategory_RowDataBound
    (object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      ... <i>Increment the running totals</i> ...
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
      // Determine the average UnitPrice
      decimal avgUnitPrice = _totalUnitPrice / (decimal) _totalNonNullUnitPriceCount;
      // Display the summary data in the appropriate cells
      e.Row.Cells[1].Text = "Avg.: " + avgUnitPrice.ToString("c");
      e.Row.Cells[2].Text = "Total: " + _totalUnitsInStock.ToString();
      e.Row.Cells[3].Text = "Total: " + _totalUnitsOnOrder.ToString();
    }
}

Şekil 13'de bu kod eklendikten sonra rapor gösterilmektedir. Ortalama fiyat özeti bilgilerinin para birimi gibi biçimlendirilmesine nasıl ToString("c") neden olduğunu unutmayın.

Şekil 13: GridView'un Alt Bilgi Satırı Artık Kırmızımsı Arka Plan Rengine Sahip (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

Özet verileri görüntülemek yaygın bir rapor gereksinimidir ve GridView denetimi bu tür bilgileri alt bilgi satırına eklemeyi kolaylaştırır. GridView'un ShowFooter özelliği olarak ayarlandığında true alt bilgi satırı görüntülenir ve hücrelerindeki metnin olay işleyicisi aracılığıyla program aracılığıyla ayarlanmasını RowDataBound sağlayabilir. Özet verileri hesaplama işlemi, veritabanını yeniden sorgulayarak veya özet verileri program aracılığıyla hesaplamak için ASP.NET sayfasının arka planda kod sınıfında yer alan kod kullanılarak gerçekleştirilebilir.

Bu öğreticide GridView, DetailsView ve FormView denetimleriyle özel biçimlendirme incelememiz tamamlanmıştır. Sonraki öğreticimizde, aynı denetimleri kullanarak veri ekleme, güncelleştirme ve silme araştırmalarımız başlatılır.

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.

Geri İleri

Aracılığıyla paylaş