Menampilkan Informasi Ringkasan di Footer GridView (C#)

2023-07-13

Informasi ringkasan sering ditampilkan di bagian bawah laporan dalam baris ringkasan. Kontrol GridView dapat menyertakan baris footer ke dalam sel yang dapat kita masukkan data agregat secara terprogram. Dalam tutorial ini kita akan melihat cara menampilkan data agregat di baris footer ini.

Pendahuluan

Selain melihat masing-masing harga produk, unit dalam stok, unit sesuai pesanan, dan menyusun ulang tingkat, pengguna mungkin juga tertarik pada informasi agregat, seperti harga rata-rata, jumlah total unit dalam stok, dan sebagainya. Informasi ringkasan tersebut sering ditampilkan di bagian bawah laporan dalam baris ringkasan. Kontrol GridView dapat menyertakan baris footer ke dalam sel yang dapat kita masukkan data agregat secara terprogram.

Tugas ini memberi kita tiga tantangan:

Mengonfigurasi GridView untuk menampilkan baris footer-nya
Menentukan data ringkasan; artinya, bagaimana kita menghitung harga rata-rata atau total unit dalam stok?
Menyuntikkan data ringkasan ke dalam sel baris footer yang sesuai

Dalam tutorial ini kita akan melihat cara mengatasi tantangan ini. Secara khusus, kita akan membuat halaman yang mencantumkan kategori dalam daftar drop-down dengan produk kategori yang dipilih yang ditampilkan dalam GridView. GridView akan menyertakan baris footer yang menunjukkan harga rata-rata dan jumlah total unit dalam stok dan sesuai urutan produk dalam kategori tersebut.

Gambar 1: Informasi Ringkasan Ditampilkan di Baris Footer GridView (Klik untuk melihat gambar ukuran penuh)

Tutorial ini, dengan kategorinya untuk produk antarmuka master/detail, dibangun berdasarkan konsep yang tercakup dalam Pemfilteran Master/Detail sebelumnya Dengan tutorial DropDownList . Jika Anda belum bekerja melalui tutorial sebelumnya, silakan lakukan sebelum melanjutkan dengan yang satu ini.

Langkah 1: Menambahkan Kategori DropDownList dan Products GridView

Sebelum menyangkut diri kita dengan menambahkan informasi ringkasan ke footer GridView, mari kita pertama-tama buat laporan master/detail. Setelah menyelesaikan langkah pertama ini, kita akan melihat cara menyertakan data ringkasan.

Mulailah dengan membuka SummaryDataInFooter.aspx halaman di CustomFormatting folder. Tambahkan kontrol DropDownList dan atur ID ke Categories. Selanjutnya, klik tautan Pilih Sumber Data dari tag pintar DropDownList dan pilih untuk menambahkan ObjectDataSource baru bernama CategoriesDataSource yang memanggil CategoriesBLL metode kelas GetCategories() .

Gambar 2: Tambahkan ObjectDataSource Baru Bernama CategoriesDataSource (Klik untuk melihat gambar ukuran penuh)

Gambar 3: Minta ObjectDataSource Memanggil CategoriesBLL Metode Kelas GetCategories() (Klik untuk melihat gambar ukuran penuh)

Setelah mengonfigurasi ObjectDataSource, wizard mengembalikan kita ke wizard Konfigurasi Sumber Data DropDownList tempat kita perlu menentukan nilai bidang data apa yang harus ditampilkan dan mana yang harus sesuai dengan nilai DropDownList ListItem . CategoryName Tampilkan bidang dan gunakan CategoryID sebagai nilainya.

Gambar 4: Gunakan CategoryName bidang dan CategoryID sebagai Text dan Value untuk ListItem , masing-masing (Klik untuk melihat gambar ukuran penuh)

Pada titik ini kita memiliki DropDownList (Categories) yang mencantumkan kategori dalam sistem. Kita sekarang perlu menambahkan GridView yang mencantumkan produk yang termasuk dalam kategori yang dipilih. Namun, sebelum kita melakukannya, luangkan waktu sejenak untuk memeriksa kotak centang Aktifkan AutoPostBack di tag pintar DropDownList. Seperti yang dibahas dalam tutorial Pemfilteran Master/Detail Dengan DropDownList , dengan mengatur properti DropDownList AutoPostBack ke true halaman akan diposting kembali setiap kali nilai DropDownList diubah. Ini akan menyebabkan GridView di-refresh, memperlihatkan produk tersebut untuk kategori yang baru dipilih. AutoPostBack Jika properti diatur ke false (default), mengubah kategori tidak akan menyebabkan postback dan oleh karena itu tidak akan memperbarui produk yang tercantum.

Gambar 5: Periksa Kotak Centang Aktifkan AutoPostBack di Tag Pintar DropDownList (Klik untuk melihat gambar ukuran penuh)

Tambahkan kontrol GridView ke halaman untuk menampilkan produk untuk kategori yang dipilih. Atur GridView ID ke ProductsInCategory dan ikat ke ObjectDataSource baru bernama ProductsInCategoryDataSource.

Gambar 6: Tambahkan ObjectDataSource Baru Bernama ProductsInCategoryDataSource (Klik untuk melihat gambar ukuran penuh)

Konfigurasikan ObjectDataSource sehingga ProductsBLL memanggil metode kelas GetProductsByCategoryID(categoryID) .

Gambar 7: Minta ObjectDataSource Memanggil GetProductsByCategoryID(categoryID) Metode (Klik untuk melihat gambar ukuran penuh)

GetProductsByCategoryID(categoryID) Karena metode mengambil parameter input, pada langkah terakhir wizard, kita dapat menentukan sumber nilai parameter. Untuk menampilkan produk tersebut dari kategori yang dipilih, minta parameter ditarik dari Categories DropDownList.

Gambar 8: Dapatkan categoryID Nilai Parameter dari DropDownList Kategori yang Dipilih (Klik untuk melihat gambar ukuran penuh)

Setelah menyelesaikan wizard, GridView akan memiliki BoundField untuk setiap properti produk. Mari kita bersihkan BoundFields ini sehingga hanya ProductName, , UnitPriceUnitsInStock, dan UnitsOnOrder BoundFields yang ditampilkan. Jangan ragu untuk menambahkan pengaturan tingkat bidang apa pun ke BoundFields yang tersisa (seperti memformat UnitPrice sebagai mata uang). Setelah membuat perubahan ini, markup deklaratif GridView akan terlihat mirip dengan yang berikut ini:

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

Pada titik ini kami memiliki laporan master/detail yang berfungsi penuh yang menunjukkan nama, harga satuan, unit dalam stok, dan unit sesuai pesanan untuk produk-produk yang termasuk dalam kategori yang dipilih.

Gambar 9: Dapatkan categoryID Nilai Parameter dari DropDownList Kategori yang Dipilih (Klik untuk melihat gambar ukuran penuh)

Kontrol GridView dapat menampilkan baris header dan footer. Baris ini ditampilkan tergantung pada nilai ShowHeader properti dan ShowFooter , masing-masing, dengan ShowHeader default ke true dan ShowFooter ke false. Untuk menyertakan footer di GridView cukup atur propertinya ShowFooter ke true.

Gambar 10: Atur Properti GridView ShowFooter ke true (Klik untuk melihat gambar ukuran penuh)

Baris footer memiliki sel untuk setiap bidang yang ditentukan dalam GridView; namun, sel-sel ini kosong secara default. Luangkan waktu sejenak untuk melihat kemajuan kami di browser. ShowFooter Dengan properti sekarang diatur ke true, GridView menyertakan baris footer kosong.

Gambar 11: GridView Sekarang Menyertakan Baris Footer (Klik untuk melihat gambar ukuran penuh)

Baris footer di Gambar 11 tidak menonjol, karena memiliki latar belakang putih. Mari kita buat FooterStyle kelas CSS di Styles.css yang menentukan latar belakang merah tua dan kemudian mengonfigurasi GridView.skin file Skin dalam DataWebControls Tema untuk menetapkan kelas CSS ini ke properti GridViewFooterStyleCssClass. Jika Anda perlu menyikat Skins and Themes, lihat kembali tutorial Menampilkan Data Dengan ObjectDataSource .

Mulailah dengan menambahkan kelas CSS berikut ke Styles.css:

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

Kelas FooterStyle CSS mirip dengan HeaderStyle kelas , meskipun HeaderStylewarna latar belakangnya lebih gelap dan teksnya ditampilkan dalam font tebal. Selain itu, teks di footer rata kanan sedangkan teks header di tengah.

Selanjutnya, untuk mengaitkan kelas CSS ini dengan setiap footer GridView, buka GridView.skin file dalam DataWebControls Tema dan atur FooterStyleproperti .CssClass Setelah penambahan ini, markup file akan terlihat seperti:

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

Seperti yang ditunjukkan oleh cuplikan layar di bawah ini, perubahan ini membuat footer lebih menonjol.

Gambar 12: Baris Footer GridView Sekarang Memiliki Warna Latar Belakang Kemerahan (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menghitung Data Ringkasan

Dengan footer GridView ditampilkan, tantangan berikutnya yang dihadapi kita adalah cara menghitung data ringkasan. Ada dua cara untuk menghitung informasi agregat ini:

Melalui kueri SQL, kita dapat mengeluarkan kueri tambahan ke database untuk menghitung data ringkasan untuk kategori tertentu. SQL menyertakan sejumlah fungsi agregat bersama dengan GROUP BY klausul untuk menentukan data tempat data harus diringkas. Kueri SQL berikut akan mengembalikan informasi yang diperlukan:
```
SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock),
SUM(UnitsOnOrder)
FROM Products
WHERE CategoryID = categoryID
GROUP BY CategoryID
```
Tentu saja Anda tidak ingin mengeluarkan kueri ini langsung dari SummaryDataInFooter.aspx halaman, melainkan dengan membuat metode di ProductsTableAdapter dan ProductsBLL.
Komputasi informasi ini saat ditambahkan ke GridView seperti yang dibahas dalam tutorial Pemformatan Kustom Berdasarkan Data , penanganan aktivitas GridView RowDataBound menembak sekali untuk setiap baris yang ditambahkan ke GridView setelah terikat data. Dengan membuat penanganan aktivitas untuk peristiwa ini, kita dapat menjaga total nilai yang berjalan yang ingin kita agregat. Setelah baris data terakhir terikat ke GridView, kami memiliki total dan informasi yang diperlukan untuk menghitung rata-rata.

Saya biasanya menggunakan pendekatan kedua karena menghemat perjalanan ke database dan upaya yang diperlukan untuk menerapkan fungsionalitas ringkasan di Lapisan Akses Data dan Lapisan Logika Bisnis, tetapi pendekatan akan cukup. Untuk tutorial ini mari kita gunakan opsi kedua dan lacak total yang berjalan menggunakan penanganan RowDataBound aktivitas.

Buat RowDataBound penanganan aktivitas untuk GridView dengan memilih GridView di Perancang, mengklik ikon petir dari jendela Properti, dan mengklik RowDataBound dua kali peristiwa. Ini akan membuat penanganan aktivitas baru bernama ProductsInCategory_RowDataBound di SummaryDataInFooter.aspx kelas code-behind halaman.

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

Untuk mempertahankan total yang sedang berjalan, kita perlu menentukan variabel di luar cakupan penanganan aktivitas. Buat empat variabel tingkat halaman berikut:

_totalUnitPrice, dari jenis decimal
_totalNonNullUnitPriceCount, dari jenis int
_totalUnitsInStock, dari jenis int
_totalUnitsOnOrder, dari jenis int

Selanjutnya, tulis kode untuk menaikkan ketiga variabel ini untuk setiap baris data yang ditemui di penanganan RowDataBound aktivitas.

// 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;
    }
}

Penanganan RowDataBound aktivitas dimulai dengan memastikan bahwa kita berhadapan dengan DataRow. Setelah dibuat, Northwind.ProductsRow instans yang baru saja terikat ke GridViewRow objek di e.Row disimpan dalam variabel product. Selanjutnya, menjalankan total variabel bertambah berdasarkan nilai terkait produk saat ini (dengan asumsi bahwa variabel tersebut tidak berisi nilai database NULL ). Kami melacak total yang berjalan UnitPrice dan jumlah non-rekaman karena harga rata-rataNULLUnitPrice adalah kuota dari kedua angka ini.

Langkah 4: Menampilkan Data Ringkasan di Footer

Dengan total data ringkasan, langkah terakhir adalah menampilkannya di baris footer GridView. Tugas ini juga dapat dicapai secara terprogram melalui penanganan RowDataBound aktivitas. Ingat bahwa RowDataBound penanganan aktivitas diaktifkan untuk setiap baris yang terikat ke GridView, termasuk baris footer. Oleh karena itu, kita dapat menambah penanganan aktivitas untuk menampilkan data di baris footer menggunakan kode berikut:

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 ...
    }
}

Karena baris footer ditambahkan ke GridView setelah semua baris data ditambahkan, kami dapat yakin bahwa pada saat kami siap untuk menampilkan data ringkasan di footer, perhitungan total yang sedang berjalan akan selesai. Langkah terakhir, kemudian, adalah mengatur nilai-nilai ini di sel footer.

Untuk menampilkan teks dalam sel footer tertentu, gunakan e.Row.Cells[index].Text = value, di mana Cells pengindeksan dimulai pada 0. Kode berikut menghitung harga rata-rata (harga total dibagi dengan jumlah produk) dan menampilkannya bersama dengan jumlah total unit dalam stok dan unit sesuai urutan dalam sel footer yang sesuai dari GridView.

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();
    }
}

Gambar 13 menunjukkan laporan setelah kode ini ditambahkan. Perhatikan bagaimana ToString("c") penyebab informasi ringkasan harga rata-rata diformat seperti mata uang.

Gambar 13: Baris Footer GridView Sekarang Memiliki Warna Latar Belakang Kemerahan (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Menampilkan data ringkasan adalah persyaratan laporan umum, dan kontrol GridView memudahkan untuk menyertakan informasi tersebut di baris footernya. Baris footer ditampilkan saat properti GridView ShowFooter diatur ke true dan dapat mengatur teks dalam selnya secara terprogram melalui RowDataBound penanganan aktivitas. Menghitung data ringkasan dapat dilakukan dengan mengkueri ulang database atau dengan menggunakan kode di kelas kode belakang halaman ASP.NET untuk menghitung data ringkasan secara terprogram.

Tutorial ini menyimpulkan pemeriksaan pemformatan kustom kami dengan kontrol GridView, DetailsView, dan FormView. Tutorial kami berikutnya memulai eksplorasi kami untuk menyisipkan, memperbarui, dan menghapus data menggunakan kontrol yang sama ini.

Selamat Pemrograman!

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Sebelumnya Berikutnya

Bagikan melalui