Menambahkan dan Merespons Tombol ke GridView (VB)

2024-07-16

Dalam tutorial ini kita akan melihat cara menambahkan tombol kustom, baik ke templat maupun ke bidang kontrol GridView atau DetailsView. Secara khusus, kita akan membangun antarmuka yang memiliki FormView yang memungkinkan pengguna untuk halaman melalui pemasok.

Pendahuluan

Meskipun banyak skenario pelaporan melibatkan akses baca-saja ke data laporan, tidak jarang laporan menyertakan kemampuan untuk melakukan tindakan berdasarkan data yang ditampilkan. Biasanya ini melibatkan penambahan kontrol Tombol, LinkButton, atau ImageButton Web dengan setiap rekaman yang ditampilkan dalam laporan yang, ketika diklik, menyebabkan postback dan memanggil beberapa kode sisi server. Mengedit dan menghapus data berdasarkan rekaman demi rekaman adalah contoh yang paling umum. Bahkan, seperti yang kita lihat dimulai dengan tutorial Menyisipkan, Memperbarui, dan Menghapus Data , mengedit dan menghapus sangat umum sehingga kontrol GridView, DetailsView, dan FormView dapat mendukung fungsionalitas tersebut tanpa perlu menulis satu baris kode.

Selain tombol Edit dan Hapus, kontrol GridView, DetailsView, dan FormView juga dapat menyertakan Tombol, LinkButtons, atau ImageButtons yang, saat diklik, melakukan beberapa logika sisi server kustom. Dalam tutorial ini kita akan melihat cara menambahkan tombol kustom, baik ke templat maupun ke bidang kontrol GridView atau DetailsView. Secara khusus, kita akan membangun antarmuka yang memiliki FormView yang memungkinkan pengguna untuk halaman melalui pemasok. Untuk pemasok tertentu, FormView akan menampilkan informasi tentang pemasok bersama dengan kontrol Web Tombol yang, jika diklik, akan menandai semua produk terkait sebagai dihentikan. Selain itu, GridView mencantumkan produk yang disediakan oleh pemasok yang dipilih, dengan setiap baris berisi Kenaikan Harga dan Tombol Harga Diskon yang, jika diklik, naikkan, atau kurangi produk sebesar UnitPrice 10% (lihat Gambar 1).

Gambar 1: FormView dan GridView Berisi Tombol yang Melakukan Tindakan Kustom (Klik untuk melihat gambar ukuran penuh)

Langkah 1: Menambahkan Halaman Web Tutorial Tombol

Sebelum kita melihat cara menambahkan tombol kustom, mari kita luangkan waktu sejenak untuk membuat halaman ASP.NET dalam proyek situs web kita yang akan kita butuhkan untuk tutorial ini. Mulailah dengan menambahkan folder baru bernama CustomButtons. Selanjutnya, tambahkan dua halaman ASP.NET berikut ke folder tersebut Site.master , pastikan untuk mengaitkan setiap halaman dengan halaman master:

Default.aspx
CustomButtons.aspx

Menambahkan Halaman ASP.NET untuk Tutorial Buttons-Related Kustom

Gambar 2: Tambahkan Halaman ASP.NET untuk Tutorial Buttons-Related Kustom

Seperti di folder lain, Default.aspx di CustomButtons folder akan mencantumkan tutorial di bagiannya. Ingat bahwa SectionLevelTutorialListing.ascx Kontrol Pengguna menyediakan fungsionalitas ini. Oleh karena itu, tambahkan Kontrol Pengguna ini ke Default.aspx dengan menyeretnya dari Penjelajah Solusi ke tampilan Desain halaman.

Gambar 3: Tambahkan SectionLevelTutorialListing.ascx Kontrol Pengguna ke Default.aspx (Klik untuk melihat gambar ukuran penuh)

Terakhir, tambahkan halaman sebagai entri ke Web.sitemap file. Secara khusus, tambahkan markup berikut setelah Penomoran dan Pengurutan <siteMapNode>:

<siteMapNode
    title="Adding Custom Buttons"
    description="Samples of Reports that Include Buttons for Performing
                  Server-Side Actions"
    url="~/CustomButtons/Default.aspx">
    <siteMapNode
        title="Using ButtonFields and Buttons in Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons as ButtonFields or within templates."
        url="~/CustomButtons/CustomButtons.aspx" />
</siteMapNode>

Setelah memperbarui Web.sitemap, luangkan waktu sejenak untuk melihat situs web tutorial melalui browser. Menu di sebelah kiri sekarang menyertakan item untuk tutorial pengeditan, penyisipan, dan penghapusan.

Peta Situs Sekarang Menyertakan Entri untuk Tutorial Tombol Kustom

Gambar 4: Peta Situs Sekarang Menyertakan Entri untuk Tutorial Tombol Kustom

Langkah 2: Menambahkan FormView yang Mencantumkan Pemasok

Mari kita mulai dengan tutorial ini dengan menambahkan FormView yang mencantumkan pemasok. Seperti yang dibahas dalam Pengenalan, FormView ini akan memungkinkan pengguna untuk halaman melalui pemasok, menunjukkan produk yang disediakan oleh pemasok di GridView. Selain itu, FormView ini akan menyertakan Tombol yang, ketika diklik, akan menandai semua produk pemasok sebagai dihentikan. Sebelum kita mengkhawatirkan diri kita dengan menambahkan tombol kustom ke FormView, mari kita pertama-tama buat FormView sehingga menampilkan informasi pemasok.

Mulailah dengan membuka CustomButtons.aspx halaman di CustomButtons folder. Tambahkan FormView ke halaman dengan menyeretnya dari Kotak Alat ke Perancang dan atur propertinya ID ke Suppliers. Dari tag pintar FormView, pilih untuk membuat ObjectDataSource baru bernama SuppliersDataSource.

Gambar 5: Buat ObjectDataSource Baru Bernama SuppliersDataSource (Klik untuk melihat gambar ukuran penuh)

Konfigurasikan ObjectDataSource baru ini sehingga kueri dari SuppliersBLL metode kelas ( GetSuppliers() lihat Gambar 6). Karena FormView ini tidak menyediakan antarmuka untuk memperbarui informasi pemasok, pilih opsi (Tidak Ada) dari daftar drop-down di tab PERBARUI.

Gambar 6: Konfigurasikan Sumber Data untuk menggunakan Metode Kelas s (SuppliersBLL)

Setelah mengonfigurasi ObjectDataSource, Visual Studio akan menghasilkan InsertItemTemplate, EditItemTemplate, dan ItemTemplate untuk FormView. InsertItemTemplate Hapus dan EditItemTemplate dan ubah ItemTemplate sehingga hanya menampilkan nama perusahaan dan nomor telepon pemasok. Terakhir, aktifkan dukungan halaman untuk FormView dengan mencentang kotak aktifkan Halaman dari tag pintarnya (atau dengan mengatur propertinya AllowPaging ke True). Setelah perubahan ini, markup deklaratif halaman Anda akan terlihat mirip dengan yang berikut ini:

<asp:FormView ID="Suppliers" runat="server" DataKeyNames="SupplierID"
    DataSourceID="SuppliersDataSource" EnableViewState="False" AllowPaging="True">
    <ItemTemplate>
        <h3>
            <asp:Label ID="CompanyName" runat="server"
                Text='<%# Bind("CompanyName") %>' />
        </h3>
        <b>Phone:</b>
        <asp:Label ID="PhoneLabel" runat="server" Text='<%# Bind("Phone") %>' />
    </ItemTemplate>
</asp:FormView>
<asp:ObjectDataSource ID="SuppliersDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetSuppliers" TypeName="SuppliersBLL">
</asp:ObjectDataSource>

Gambar 7 memperlihatkan halaman CustomButtons.aspx saat dilihat melalui browser.

Gambar 7: FormView Mencantumkan CompanyName bidang dan Phone dari Pemasok yang Saat Ini Dipilih (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menambahkan GridView yang Mencantumkan Produk Pemasok yang Dipilih

Sebelum kita menambahkan Tombol Putuskan Semua Produk ke templat FormView, mari kita tambahkan GridView terlebih dahulu di bawah FormView yang mencantumkan produk yang disediakan oleh pemasok yang dipilih. Untuk mencapai hal ini, tambahkan GridView ke halaman, atur propertinya ID ke SuppliersProducts, dan tambahkan ObjectDataSource baru bernama SuppliersProductsDataSource.

Gambar 8: Buat ObjectDataSource Baru Bernama SuppliersProductsDataSource (Klik untuk melihat gambar ukuran penuh)

Konfigurasikan ObjectDataSource ini untuk menggunakan metode kelas ProductsBLL ( GetProductsBySupplierID(supplierID) lihat Gambar 9). Meskipun GridView ini akan memungkinkan harga produk disesuaikan, GridView tidak akan menggunakan fitur pengeditan atau penghapusan bawaan dari GridView. Oleh karena itu, kita dapat mengatur daftar drop-down ke (Tidak Ada) untuk tab UPDATE, INSERT, dan DELETE ObjectDataSource.

Gambar 9: Konfigurasikan Sumber Data untuk menggunakan metode dari kelas ProductsBLL (GetProductsBySupplierID(supplierID)Klik untuk melihat gambar ukuran penuh)

GetProductsBySupplierID(supplierID) Karena metode menerima parameter input, wizard ObjectDataSource meminta sumber nilai parameter ini. Untuk meneruskan SupplierID nilai dari FormView, atur daftar drop-down Sumber parameter ke Kontrol dan daftar drop-down ControlID ke Suppliers (ID FormView yang dibuat di Langkah 2).

Gambar 10: Menunjukkan bahwa supplierID Parameter Harus Berasal dari Suppliers Kontrol FormView (Klik untuk melihat gambar ukuran penuh)

Setelah menyelesaikan wizard ObjectDataSource, GridView akan berisi BoundField atau CheckBoxField untuk setiap bidang data produk. Mari kita pangkas ini untuk menunjukkan hanya ProductName dan UnitPrice BoundFields bersama dengan Discontinued CheckBoxField; selain itu, mari kita format UnitPrice BoundField sehingga teksnya diformat sebagai mata uang. Markup deklaratif GridView dan SuppliersProductsDataSource ObjectDataSource Anda akan terlihat mirip dengan markup berikut:

<asp:GridView ID="SuppliersProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="SuppliersProductsDataSource"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="SuppliersProductsDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProductsBySupplierID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:ControlParameter ControlID="Suppliers" Name="supplierID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

Pada titik ini tutorial kami menampilkan laporan master/detail, memungkinkan pengguna untuk memilih pemasok dari FormView di bagian atas dan untuk melihat produk yang disediakan oleh pemasok tersebut melalui GridView di bagian bawah. Gambar 11 menunjukkan cuplikan layar halaman ini saat memilih pemasok Tokyo Traders dari FormView.

Gambar 11: Produk Pemasok yang Dipilih Ditampilkan di GridView (Klik untuk melihat gambar ukuran penuh)

Langkah 4: Membuat Metode DAL dan BLL untuk Menghentikan Semua Produk untuk Pemasok

Sebelum kita dapat menambahkan Tombol ke FormView yang, ketika diklik, menghentikan semua produk pemasok, pertama-tama kita perlu menambahkan metode ke DAL dan BLL yang melakukan tindakan ini. Secara khusus, metode ini akan diberi nama DiscontinueAllProductsForSupplier(supplierID). Ketika Tombol FormView diklik, kita akan memanggil metode ini di Lapisan Logika Bisnis, meneruskan pemasok SupplierIDyang dipilih ; BLL kemudian akan memanggil ke metode Lapisan Akses Data yang sesuai, yang akan mengeluarkan UPDATE pernyataan ke database yang menghentikan produk pemasok yang ditentukan.

Seperti yang telah kita lakukan dalam tutorial sebelumnya, kita akan menggunakan pendekatan bottom-up, dimulai dengan membuat metode DAL, kemudian metode BLL, dan akhirnya mengimplementasikan fungsionalitas di halaman ASP.NET. Northwind.xsd Buka Kumpulan Data Yang Dititik di App_Code/DAL folder dan tambahkan metode baru ke ProductsTableAdapter (klik kanan pada ProductsTableAdapter dan pilih Tambahkan Kueri). Melakukannya akan memunculkan wizard Konfigurasi Kueri TableAdapter, yang memandu kami melalui proses penambahan metode baru. Mulailah dengan menunjukkan bahwa metode DAL kami akan menggunakan pernyataan SQL ad-hoc.

Gambar 12: Buat Metode DAL Menggunakan Pernyataan SQL Ad-Hoc (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, wizard meminta kami tentang jenis kueri apa yang akan dibuat. DiscontinueAllProductsForSupplier(supplierID) Karena metode perlu memperbarui Products tabel database, mengatur Discontinued bidang ke 1 untuk semua produk yang disediakan oleh yang ditentukan supplierID, kita perlu membuat kueri yang memperbarui data.

Gambar 13: Pilih Jenis Kueri UPDATE (Klik untuk melihat gambar ukuran penuh)

Layar wizard berikutnya menyediakan pernyataan TableAdapter yang sudah ada UPDATE , yang memperbarui setiap bidang yang ditentukan dalam Products DataTable. Ganti teks kueri ini dengan pernyataan berikut:

UPDATE [Products] SET
   Discontinued = 1
WHERE SupplierID = @SupplierID

Setelah memasukkan kueri ini dan mengklik Berikutnya, layar wizard terakhir meminta penggunaan nama DiscontinueAllProductsForSuppliermetode baru . Selesaikan wizard dengan mengklik tombol Selesai. Setelah kembali ke Perancang Himpunan Data, Anda akan melihat metode baru di ProductsTableAdapter bernama DiscontinueAllProductsForSupplier(@SupplierID).

Gambar 14: Beri nama Metode DiscontinueAllProductsForSupplier DAL Baru (Klik untuk melihat gambar ukuran penuh)

Dengan metode yang DiscontinueAllProductsForSupplier(supplierID) dibuat di Lapisan Akses Data, tugas kami berikutnya adalah membuat DiscontinueAllProductsForSupplier(supplierID) metode di Lapisan Logika Bisnis. Untuk mencapai hal ini, buka ProductsBLL file kelas dan tambahkan yang berikut ini:

Public Function DiscontinueAllProductsForSupplier(supplierID As Integer) As Integer
    Return Adapter.DiscontinueAllProductsForSupplier(supplierID)
End Function

Metode ini hanya memanggil ke DiscontinueAllProductsForSupplier(supplierID) metode dalam DAL, melewati nilai parameter yang disediakan supplierID . Jika ada aturan bisnis yang hanya memungkinkan produk pemasok dihentikan dalam keadaan tertentu, aturan tersebut harus diterapkan di sini, di BLL.

Catatan

UpdateProduct Tidak seperti kelebihan beban di ProductsBLL kelas, DiscontinueAllProductsForSupplier(supplierID) tanda tangan metode tidak menyertakan DataObjectMethodAttribute atribut (<System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, Boolean)>). Ini menghalangi DiscontinueAllProductsForSupplier(supplierID) metode dari daftar drop-down Wizard Konfigurasi Sumber Data ObjectDataSource di tab PERBARUI. Saya telah menghilangkan atribut ini karena kami akan memanggil DiscontinueAllProductsForSupplier(supplierID) metode langsung dari penanganan aktivitas di halaman ASP.NET kami.

Langkah 5: Menambahkan Tombol Putuskan Semua Produk ke FormView

DiscontinueAllProductsForSupplier(supplierID) Dengan metode dalam BLL dan DAL selesai, langkah terakhir untuk menambahkan kemampuan untuk menghentikan semua produk untuk pemasok yang dipilih adalah menambahkan kontrol Web Tombol ke FormView s ItemTemplate. Mari kita tambahkan Tombol seperti itu di bawah nomor telepon pemasok dengan teks tombol, Batalkan Semua Produk dan ID nilai properti .DiscontinueAllProductsForSupplier Anda dapat menambahkan kontrol Web Tombol ini melalui Perancang dengan mengklik tautan Edit Templat di tag pintar FormView (lihat Gambar 15), atau langsung melalui sintaks deklaratif.

Gambar 15: Tambahkan Kontrol Web Tombol Putuskan Semua Produk ke FormView s ItemTemplate (Klik untuk melihat gambar ukuran penuh)

Ketika Tombol diklik oleh pengguna yang mengunjungi halaman, postback akan muncul dan peristiwa FormView ItemCommand diaktifkan. Untuk menjalankan kode kustom sebagai respons terhadap Tombol ini yang sedang diklik, kita dapat membuat penanganan aktivitas untuk peristiwa ini. Namun, pahami bahwa peristiwa diaktifkan ItemCommand setiap kali kontrol Web Tombol, LinkButton, atau ImageButton diklik dalam FormView. Itu berarti bahwa ketika pengguna berpindah dari satu halaman ke halaman lain di FormView, ItemCommand peristiwa diaktifkan; hal yang sama ketika pengguna mengklik Baru, Edit, atau Hapus dalam FormView yang mendukung penyisipan, pembaruan, atau penghapusan.

Karena tombol ItemCommand aktif terlepas dari tombol apa yang diklik, di penanganan aktivitas kami memerlukan cara untuk menentukan apakah Tombol Hentikan Semua Produk diklik atau apakah itu beberapa tombol lain. Untuk mencapai hal ini, kita dapat mengatur properti kontrol CommandName Web Tombol ke beberapa nilai identifikasi. Ketika Tombol diklik, nilai ini CommandName diteruskan ke ItemCommand penanganan aktivitas, memungkinkan kami untuk menentukan apakah Tombol Putuskan Semua Produk adalah tombol yang diklik. Atur properti Tombol CommandName Putuskan Semua Produk ke DiscontinueProducts .

Terakhir, mari kita gunakan kotak dialog konfirmasi sisi klien untuk memastikan bahwa pengguna benar-benar ingin menghentikan produk pemasok yang dipilih. Seperti yang kita lihat dalam tutorial Menambahkan Client-Side Konfirmasi Saat Menghapus , ini dapat dicapai dengan sedikit JavaScript. Secara khusus, atur properti Kontrol web Tombol OnClientClick ke return confirm('This will mark _all_ of this supplier\'s products as discontinued. Are you certain you want to do this?');

Setelah membuat perubahan ini, sintaksis deklaratif FormView akan terlihat seperti berikut ini:

<asp:FormView ID="Suppliers" runat="server" DataKeyNames="SupplierID"
    DataSourceID="SuppliersDataSource" EnableViewState="False"
    AllowPaging="True">
    <ItemTemplate>
        <h3><asp:Label ID="CompanyName" runat="server"
            Text='<%# Bind("CompanyName") %>'></asp:Label></h3>
        <b>Phone:</b>
        <asp:Label ID="PhoneLabel" runat="server" Text='<%# Bind("Phone") %>' />
        <br />
        <asp:Button ID="DiscontinueAllProductsForSupplier" runat="server"
            CommandName="DiscontinueProducts" Text="Discontinue All Products"
            OnClientClick="return confirm('This will mark _all_ of this supplier\'s
                products as discontinued. Are you certain you want to do this?');" />
    </ItemTemplate>
</asp:FormView>

Selanjutnya, buat penanganan aktivitas untuk peristiwa FormView ItemCommand . Dalam penanganan aktivitas ini, kita perlu terlebih dahulu menentukan apakah Tombol Putuskan Semua Produk diklik. Jika demikian, kita ingin membuat instans ProductsBLL kelas dan memanggil metodenya DiscontinueAllProductsForSupplier(supplierID) , meneruskan SupplierID formView yang dipilih:

Protected Sub Suppliers_ItemCommand(sender As Object, e As FormViewCommandEventArgs) _
    Handles Suppliers.ItemCommand
    If e.CommandName.CompareTo("DiscontinueProducts") = 0 Then
        ' The "Discontinue All Products" Button was clicked.
        ' Invoke the ProductsBLL.DiscontinueAllProductsForSupplier(supplierID) method
        ' First, get the SupplierID selected in the FormView
        Dim supplierID As Integer = CType(Suppliers.SelectedValue, Integer)
        ' Next, create an instance of the ProductsBLL class
        Dim productInfo As New ProductsBLL()
        ' Finally, invoke the DiscontinueAllProductsForSupplier(supplierID) method
        productInfo.DiscontinueAllProductsForSupplier(supplierID)
    End If
End Sub

Perhatikan bahwa SupplierID pemasok yang dipilih saat ini di FormView dapat diakses menggunakan properti FormView.SelectedValue Properti SelectedValue mengembalikan nilai kunci data pertama untuk rekaman yang ditampilkan di FormView. Properti FormView sDataKeyNames, yang menunjukkan bidang data tempat nilai kunci data ditarik, secara otomatis diatur ke SupplierID oleh Visual Studio saat mengikat ObjectDataSource ke FormView kembali di Langkah 2.

Dengan penanganan ItemCommand aktivitas dibuat, luangkan waktu sejenak untuk menguji halaman. Telusuri ke pemasok Cooperativa de Quesos 'Las Cabras' (ini pemasok kelima di FormView untuk saya). Pemasok ini menyediakan dua produk, Queso Cabrales dan Queso Manchego La Pastora, yang keduanya tidak dihentikan.

Bayangkan bahwa Cooperativa de Quesos 'Las Cabras' telah keluar dari bisnis dan oleh karena itu produknya akan dihentikan. Klik tombol Putuskan Semua Produk. Ini akan menampilkan kotak dialog konfirmasi sisi klien (lihat Gambar 16).

Gambar 16: Cooperativa de Quesos Las Cabras Memasok Dua Produk Aktif (Klik untuk melihat gambar ukuran penuh)

Jika Anda mengklik OK dalam kotak dialog konfirmasi sisi klien, pengiriman formulir akan dilanjutkan, menyebabkan postback di mana peristiwa FormView ItemCommand akan diaktifkan. Penanganan aktivitas yang kami buat kemudian akan mengeksekusi, memanggil DiscontinueAllProductsForSupplier(supplierID) metode dan menghentikan produk Queso Cabrales dan Queso Manchego La Pastora.

Jika Anda telah menonaktifkan status tampilan GridView, GridView sedang rebound ke penyimpanan data yang mendasar pada setiap postback, dan oleh karena itu akan segera diperbarui untuk mencerminkan bahwa kedua produk ini sekarang dihentikan (lihat Gambar 17). Namun, jika Anda belum menonaktifkan status tampilan di GridView, Anda harus mengikat ulang data secara manual ke GridView setelah melakukan perubahan ini. Untuk mencapai hal ini, cukup lakukan panggilan ke metode GridView segera DataBind() setelah memanggil DiscontinueAllProductsForSupplier(supplierID) metode .

Gambar 17: Setelah Mengklik Tombol Putuskan Semua Produk, Produk Pemasok Diperbarui Sesuai (Klik untuk melihat gambar ukuran penuh)

Langkah 6: Membuat Overload UpdateProduct di Lapisan Logika Bisnis untuk Menyesuaikan Harga Produk

Seperti tombol Putuskan Semua Produk di FormView, untuk menambahkan tombol untuk meningkatkan dan mengurangi harga untuk produk di GridView, kita perlu terlebih dahulu menambahkan metode Lapisan Akses Data dan Lapisan Logika Bisnis yang sesuai. Karena kita sudah memiliki metode yang memperbarui satu baris produk di DAL, kita dapat menyediakan fungsionalitas tersebut UpdateProduct dengan membuat kelebihan beban baru untuk metode di BLL.

Kelebihan beban masa lalu UpdateProduct kami telah mengambil beberapa kombinasi bidang produk sebagai nilai input skalar dan kemudian hanya memperbarui bidang tersebut untuk produk yang ditentukan. Untuk kelebihan beban ini, kita akan sedikit bervariasi dari standar ini dan sebaliknya meneruskan produk dan ProductID persentase untuk menyesuaikan UnitPrice (dibandingkan dengan meneruskan yang baru, disesuaikan UnitPrice sendiri). Pendekatan ini akan menyederhanakan kode yang perlu kita tulis di kelas ASP.NET kode belakang halaman, karena kita tidak perlu repot-repot menentukan produk UnitPricesaat ini.

Kelebihan UpdateProduct beban untuk tutorial ini ditunjukkan di bawah ini:

Public Function UpdateProduct _
    (unitPriceAdjustmentPercentage As Decimal, productID As Integer) As Boolean
    Dim products As Northwind.ProductsDataTable = Adapter.GetProductByProductID(productID)
    If products.Count = 0 Then
        ' no matching record found, return false
        Return False
    End If
    Dim product As Northwind.ProductsRow = products(0)
    ' Adjust the UnitPrice by the specified percentage (if it's not NULL)
    If Not product.IsUnitPriceNull() Then
        product.UnitPrice *= unitPriceAdjustmentPercentage
    End If
    ' Update the product record
    Dim rowsAffected As Integer = Adapter.Update(product)
    ' Return true if precisely one row was updated, otherwise false
    Return rowsAffected = 1
End Function

Kelebihan beban ini mengambil informasi tentang produk yang ditentukan melalui metode DAL s GetProductByProductID(productID) . Kemudian memeriksa untuk melihat apakah produk ditetapkan UnitPrice nilai database NULL . Jika ya, harga dibiarkan tidak berubah. Namun, jika ada non-nilaiNULLUnitPrice, metode memperbarui produk dengan UnitPrice persentase yang ditentukan (unitPriceAdjustmentPercent).

Langkah 7: Menambahkan Tombol Tingkatkan dan Kurangi ke GridView

GridView (dan DetailsView) keduanya terdiri dari kumpulan bidang. Selain BoundFields, CheckBoxFields, dan TemplateFields, ASP.NET menyertakan ButtonField, yang, sesuai namanya, dirender sebagai kolom dengan Tombol, LinkButton, atau ImageButton untuk setiap baris. Mirip dengan FormView, mengklik tombol apa pun dalam tombol paging GridView, tombol Edit atau Hapus, tombol pengurutan, dan sebagainya menyebabkan postback dan menaikkan peristiwa GridViewRowCommand.

ButtonField memiliki CommandName properti yang menetapkan nilai yang ditentukan untuk setiap properti Tombolnya CommandName . Seperti formView, CommandName nilai digunakan oleh penanganan RowCommand aktivitas untuk menentukan tombol mana yang diklik.

Mari kita tambahkan dua ButtonFields baru ke GridView, satu dengan teks tombol Harga +10% dan yang lain dengan teks Harga -10%. Untuk menambahkan ButtonFields ini, klik tautan Edit Kolom dari tag pintar GridView, pilih jenis bidang ButtonField dari daftar di kiri atas dan klik tombol Tambahkan.

Tambahkan Dua ButtonFields ke GridView

Gambar 18: Tambahkan Dua ButtonFields ke GridView

Pindahkan dua ButtonFields sehingga muncul sebagai dua bidang GridView pertama. Selanjutnya, atur Text properti kedua ButtonFields ini ke Harga +10% dan Harga -10% dan CommandName properti masing-masing ke IncreasePrice dan DecreasePrice. Secara default, ButtonField merender kolom tombolnya sebagai LinkButtons. Namun, ini dapat diubah melalui properti ButtonField.ButtonType Mari kita render dua ButtonFields ini sebagai tombol pendorongan biasa; oleh karena itu, atur properti ke ButtonTypeButton. Gambar 19 memperlihatkan kotak dialog Bidang setelah perubahan ini dibuat; berikut ini adalah markup deklaratif GridView.

Mengonfigurasi Properti ButtonFields Text, CommandName, dan ButtonType

Gambar 19: Mengonfigurasi Properti Text, CommandName, dan ButtonType ButtonFields

<asp:GridView ID="SuppliersProducts" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="SuppliersProductsDataSource"
    EnableViewState="False">
    <Columns>
        <asp:ButtonField ButtonType="Button" CommandName="IncreasePrice"
            Text="Price +10%" />
        <asp:ButtonField ButtonType="Button" CommandName="DecreasePrice"
            Text="Price -10%" />
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

Dengan ButtonFields ini dibuat, langkah terakhir adalah membuat penanganan aktivitas untuk peristiwa GridView RowCommand . Penanganan aktivitas ini, jika diaktifkan karena tombol Harga +10% atau Harga -10% diklik, perlu menentukan ProductID untuk baris yang tombolnya diklik lalu memanggil ProductsBLL metode kelas s UpdateProduct , meneruskan penyesuaian persentase yang sesuai UnitPrice bersama dengan ProductID. Kode berikut melakukan tugas-tugas ini:

Protected Sub SuppliersProducts_RowCommand _
    (sender As Object, e As GridViewCommandEventArgs) _
        Handles SuppliersProducts.RowCommand
    If e.CommandName.CompareTo("IncreasePrice") = 0 OrElse _
       e.CommandName.CompareTo("DecreasePrice") = 0 Then
        ' The Increase Price or Decrease Price Button has been clicked
        ' Determine the ID of the product whose price was adjusted
        Dim productID As Integer = Convert.ToInt32( _
            SuppliersProducts.DataKeys(Convert.ToInt32(e.CommandArgument)).Value)
        ' Determine how much to adjust the price
        Dim percentageAdjust As Decimal
        If e.CommandName.CompareTo("IncreasePrice") = 0 Then
            percentageAdjust = 1.1
        Else
            percentageAdjust = 0.9
        End If
        ' Adjust the price
        Dim productInfo As New ProductsBLL()
        productInfo.UpdateProduct(percentageAdjust, productID)
    End If
End Sub

Untuk menentukan ProductID baris yang harganya +10% atau tombol Harga -10% diklik, kita perlu berkonsultasi dengan koleksi GridView DataKeys . Koleksi ini menyimpan nilai bidang yang ditentukan dalam DataKeyNames properti untuk setiap baris GridView. Karena properti GridView ditetapkan sebagai ProductID oleh Visual Studio saat mengikat ObjectDataSource ke GridView, DataKeyNames menyediakan DataKeys(rowIndex).Value untuk ProductID yang telah ditentukan.

ButtonField secara otomatis meneruskan rowIndex dari baris yang tombolnya ditekan melalui e.CommandArgument parameter. Oleh karena itu, untuk menentukan ProductID baris yang tombol Harga +10% atau Harga -10% diklik, kami menggunakan: Convert.ToInt32(SuppliersProducts.DataKeys(Convert.ToInt32(e.CommandArgument)).Value).

Seperti halnya tombol Putuskan Semua Produk, jika Anda telah menonaktifkan status tampilan GridView, GridView sedang rebound ke penyimpanan data yang mendasar pada setiap postback, dan oleh karena itu akan segera diperbarui untuk mencerminkan perubahan harga yang terjadi dari mengklik salah satu tombol. Namun, jika Anda belum menonaktifkan status tampilan di GridView, Anda harus mengikat ulang data secara manual ke GridView setelah melakukan perubahan ini. Untuk mencapai hal ini, cukup lakukan panggilan ke metode GridView segera DataBind() setelah memanggil UpdateProduct metode .

Gambar 20 memperlihatkan halaman saat melihat produk yang disediakan oleh Homestead Nenek Kelly. Gambar 21 menunjukkan hasilnya setelah tombol Harga +10% diklik dua kali untuk Grandma's Boysenberry Spread dan tombol Harga -10% sekali untuk Northwoods Cranberry Sauce.

Gambar 20: GridView Memuat tombol Harga +10% dan Harga -10% (Klik untuk melihat gambar ukuran penuh)

Gambar 21: Harga Untuk Produk Pertama dan Ketiga Telah Diperbarui melalui Harga +10% dan Harga -10 tombol% (Klik untuk melihat gambar ukuran penuh)

Catatan

GridView (dan DetailsView) juga dapat memiliki Tombol, LinkButtons, atau ImageButtons yang ditambahkan ke TemplateFields mereka. Seperti halnya BoundField, Tombol ini, ketika diklik, akan menginduksi postback, meningkatkan peristiwa GridView RowCommand . Namun, saat menambahkan tombol di TemplateField, Tombol tidak CommandArgument secara otomatis diatur ke indeks baris seperti saat menggunakan ButtonFields. Jika Anda perlu menentukan indeks baris tombol yang diklik dalam RowCommand penanganan aktivitas, Anda harus mengatur properti Tombol CommandArgument secara manual dalam sintaks deklaratifnya dalam TemplateField, menggunakan kode seperti:
<asp:Button runat="server" ... CommandArgument='<%# CType(Container, GridViewRow).RowIndex %>' />.

Ringkasan

Kontrol GridView, DetailsView, dan FormView semuanya dapat mencakup Tombol, LinkButtons, atau ImageButtons. Tombol tersebut, saat diklik, menyebabkan postback dan menaikkan ItemCommand peristiwa di kontrol FormView dan DetailsView dan RowCommand peristiwa di GridView. Kontrol Web data ini memiliki fungsionalitas bawaan untuk menangani tindakan terkait perintah umum, seperti menghapus atau mengedit rekaman. Namun, kita juga dapat menggunakan tombol yang, ketika diklik, merespons dengan menjalankan kode kustom kita sendiri.

Untuk mencapai hal ini, kita perlu membuat penanganan aktivitas untuk ItemCommand atau RowCommand acara. Dalam penanganan aktivitas ini, pertama-tama kita memeriksa nilai masuk CommandName untuk menentukan tombol mana yang diklik lalu mengambil tindakan kustom yang sesuai. Dalam tutorial ini kita melihat cara menggunakan tombol dan ButtonFields untuk menghentikan semua produk untuk pemasok tertentu atau untuk meningkatkan atau mengurangi harga produk tertentu sebesar 10%.

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

Bagikan melalui