Gambaran Umum Menyisipkan, Memperbarui, dan Menghapus Data (C#)

2023-07-13

Dalam tutorial ini kita akan melihat cara memetakan metode Insert(), Update(), dan Delete() ObjectDataSource ke metode kelas BLL, serta cara mengonfigurasi kontrol GridView, DetailsView, dan FormView untuk menyediakan kemampuan modifikasi data.

Pendahuluan

Selama beberapa tutorial sebelumnya, kami telah memeriksa cara menampilkan data di halaman ASP.NET menggunakan kontrol GridView, DetailsView, dan FormView. Kontrol ini hanya bekerja dengan data yang disediakan untuk mereka. Umumnya, kontrol ini mengakses data melalui penggunaan kontrol sumber data, seperti ObjectDataSource. Kami telah melihat bagaimana ObjectDataSource bertindak sebagai proksi antara halaman ASP.NET dan data yang mendasar. Ketika GridView perlu menampilkan data, GridView memanggil metode ObjectDataSource-nya Select() , yang pada gilirannya memanggil metode dari Lapisan Logika Bisnis (BLL) kami, yang memanggil metode dalam TableAdapter Lapisan Akses Data (DAL) yang sesuai, yang pada gilirannya mengirim SELECT kueri ke database Northwind.

Ingat bahwa ketika kita membuat TableAdapters di DAL dalam tutorial pertama kita, Visual Studio secara otomatis menambahkan metode untuk menyisipkan, memperbarui, dan menghapus data dari tabel database yang mendasarinya. Selain itu, dalam Membuat Lapisan Logika Bisnis kami merancang metode di BLL yang dipanggil ke dalam metode DAL modifikasi data ini.

Selain metodenya Select() , ObjectDataSource juga memiliki Insert()metode , Update(), dan Delete() . Seperti metodenya Select() , ketiga metode ini dapat dipetakan ke metode dalam objek yang mendasar. Saat dikonfigurasi untuk menyisipkan, memperbarui, atau menghapus data, kontrol GridView, DetailsView, dan FormView menyediakan antarmuka pengguna untuk memodifikasi data yang mendasar. Antarmuka pengguna ini memanggil Insert()metode , Update(), dan Delete() ObjectDataSource, yang kemudian memanggil metode terkait objek yang mendasar (lihat Gambar 1).

Gambar 1: Metode ObjectDataSource Insert(), Update(), dan Delete() Berfungsi sebagai Proksi ke dalam BLL (Klik untuk melihat gambar ukuran penuh)

Dalam tutorial ini kita akan melihat cara memetakan metode ObjectDataSource Insert(), Update(), dan Delete() untuk metode kelas di BLL, serta cara mengonfigurasi kontrol GridView, DetailsView, dan FormView untuk menyediakan kemampuan modifikasi data.

Langkah 1: Membuat Halaman Web Sisipkan, Perbarui, dan Hapus Tutorial

Sebelum kita mulai menjelajahi cara menyisipkan, memperbarui, dan menghapus data, mari kita luangkan waktu sejenak untuk membuat halaman ASP.NET dalam proyek situs web kita yang akan kita butuhkan untuk tutorial ini dan beberapa yang berikutnya. Mulailah dengan menambahkan folder baru bernama EditInsertDelete. Selanjutnya, tambahkan halaman ASP.NET berikut ke folder tersebut Site.master , pastikan untuk mengaitkan setiap halaman dengan halaman master:

Default.aspx
Basics.aspx
DataModificationEvents.aspx
ErrorHandling.aspx
UIValidation.aspx
CustomizedUI.aspx
OptimisticConcurrency.aspx
ConfirmationOnDelete.aspx
UserLevelAccess.aspx

Menambahkan Halaman ASP.NET untuk Tutorial Terkait Modifikasi Data

Gambar 2: Tambahkan Halaman ASP.NET untuk Tutorial Terkait Modifikasi Data

Seperti di folder lain, Default.aspx di EditInsertDelete 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 Pemformatan <siteMapNode>yang Dikustomisasi :

<siteMapNode title="Editing, Inserting, and Deleting"
    url="~/EditInsertDelete/Default.aspx"
    description="Samples of Reports that Provide Editing, Inserting,
                  and Deleting Capabilities">
    <siteMapNode url="~/EditInsertDelete/Basics.aspx"
        title="Basics"
        description="Examines the basics of data modification with the
                      GridView, DetailsView, and FormView controls." />
    <siteMapNode url="~/EditInsertDelete/DataModificationEvents.aspx"
        title="Data Modification Events"
        description="Explores the events raised by the ObjectDataSource
                      pertinent to data modification." />
    <siteMapNode url="~/EditInsertDelete/ErrorHandling.aspx"
        title="Error Handling"
        description="Learn how to gracefully handle exceptions raised
                      during the data modification workflow." />
    <siteMapNode url="~/EditInsertDelete/UIValidation.aspx"
        title="Adding Data Entry Validation"
        description="Help prevent data entry errors by providing validation." />
    <siteMapNode url="~/EditInsertDelete/CustomizedUI.aspx"
        title="Customize the User Interface"
        description="Customize the editing and inserting user interfaces." />
    <siteMapNode url="~/EditInsertDelete/OptimisticConcurrency.aspx"
        title="Optimistic Concurrency"
        description="Learn how to help prevent simultaneous users from
                      overwritting one another s changes." />
    <siteMapNode url="~/EditInsertDelete/ConfirmationOnDelete.aspx"
        title="Confirm On Delete"
        description="Prompt a user for confirmation when deleting a record." />
    <siteMapNode url="~/EditInsertDelete/UserLevelAccess.aspx"
        title="Limit Capabilities Based on User"
        description="Learn how to limit the data modification functionality
                      based on the user role or permissions." />
</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 Pengeditan, Penyisipan, dan Penghapusan

Gambar 4: Peta Situs Sekarang Menyertakan Entri untuk Tutorial Pengeditan, Penyisipan, dan Penghapusan

Langkah 2: Menambahkan dan Mengonfigurasi Kontrol ObjectDataSource

Karena GridView, DetailsView, dan FormView masing-masing berbeda dalam kemampuan dan tata letak modifikasi data mereka, mari kita periksa masing-masing satu per satu. Namun, daripada memiliki setiap kontrol menggunakan ObjectDataSource sendiri, mari kita buat satu ObjectDataSource yang dapat dibagikan oleh ketiga contoh kontrol.

Basics.aspx Buka halaman, seret ObjectDataSource dari Kotak Alat ke Perancang, dan klik tautan Konfigurasi Sumber Data dari tag pintarnya. Karena adalah satu-satunya ProductsBLL kelas BLL yang menyediakan metode pengeditan, penyisipan, dan penghapusan, konfigurasikan ObjectDataSource untuk menggunakan kelas ini.

Gambar 5: Konfigurasikan ObjectDataSource untuk Menggunakan ProductsBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Di layar berikutnya kita dapat menentukan metode ProductsBLL kelas apa yang dipetakan ke ObjectDataSource, Select(), Insert(), Update()dan Delete() dengan memilih tab yang sesuai dan memilih metode dari daftar drop-down. Gambar 6, yang seharusnya terlihat akrab sekarang, memetakan metode ObjectDataSource Select() ke ProductsBLL metode kelas GetProducts() . Metode Insert(), Update(), dan Delete() dapat dikonfigurasi dengan memilih tab yang sesuai dari daftar di sepanjang bagian atas.

Gambar 6: Minta ObjectDataSource Mengembalikan Semua Produk (Klik untuk melihat gambar ukuran penuh)

Gambar 7, 8, dan 9 memperlihatkan tab UPDATE, INSERT, dan DELETE ObjectDataSource. Konfigurasikan tab ini sehingga Insert()metode Update() , Delete(), dan ProductsBLL memanggil metode , , UpdateProductdan AddProduct kelasDeleteProduct, masing-masing.

Gambar 7: Petakan Metode ObjectDataSource Update() ke ProductBLL Metode Kelas UpdateProduct (Klik untuk melihat gambar ukuran penuh)

Gambar 8: Petakan Metode ObjectDataSource Insert() ke ProductBLL Metode Tambahkan Product Kelas (Klik untuk melihat gambar ukuran penuh)

Gambar 9: Petakan Metode ObjectDataSource Delete() ke ProductBLL Metode Kelas DeleteProduct (Klik untuk melihat gambar ukuran penuh)

Anda mungkin telah memperhatikan bahwa daftar drop-down di tab UPDATE, INSERT, dan DELETE sudah memilih metode ini. Ini berkat penggunaan kami yang DataObjectMethodAttribute menghiasi metode ProductsBLL. Misalnya, metode DeleteProduct memiliki tanda tangan berikut:

[System.ComponentModel.DataObjectMethodAttribute
    (System.ComponentModel.DataObjectMethodType.Delete, true)]
public bool DeleteProduct(int productID)
{
    ...
}

Atribut DataObjectMethodAttribute menunjukkan tujuan setiap metode apakah itu untuk memilih, menyisipkan, memperbarui, atau menghapus dan apakah itu nilai default atau tidak. Jika Anda menghilangkan atribut ini saat membuat kelas BLL, Anda harus memilih metode secara manual dari tab PERBARUI, SISIPKAN, dan HAPUS.

Setelah memastikan bahwa metode yang sesuai ProductsBLL dipetakan ke metode ObjectDataSource Insert(), , Update()dan Delete() , klik Selesai untuk menyelesaikan wizard.

Memeriksa Markup ObjectDataSource

Setelah mengonfigurasi ObjectDataSource melalui wizardnya, buka tampilan Sumber untuk memeriksa markup deklaratif yang dihasilkan. Tag <asp:ObjectDataSource> menentukan objek yang mendasar dan metode yang akan dipanggil. Selain itu, ada DeleteParameters, , dan UpdateParameters yang memetakan ke parameter input untuk InsertParameters kelas ProductsBLL, , AddProductdan UpdateProduct metode: DeleteProduct

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    DeleteMethod="DeleteProduct" InsertMethod="AddProduct"
    OldValuesParameterFormatString="original_{0}" SelectMethod="GetProducts"
    TypeName="ProductsBLL" UpdateMethod="UpdateProduct">
    <DeleteParameters>
        <asp:Parameter Name="productID" Type="Int32" />
    </DeleteParameters>
    <UpdateParameters>
        <asp:Parameter Name="productName" Type="String" />
        <asp:Parameter Name="supplierID" Type="Int32" />
        <asp:Parameter Name="categoryID" Type="Int32" />
        <asp:Parameter Name="quantityPerUnit" Type="String" />
        <asp:Parameter Name="unitPrice" Type="Decimal" />
        <asp:Parameter Name="unitsInStock" Type="Int16" />
        <asp:Parameter Name="unitsOnOrder" Type="Int16" />
        <asp:Parameter Name="reorderLevel" Type="Int16" />
        <asp:Parameter Name="discontinued" Type="Boolean" />
        <asp:Parameter Name="productID" Type="Int32" />
    </UpdateParameters>
    <InsertParameters>
        <asp:Parameter Name="productName" Type="String" />
        <asp:Parameter Name="supplierID" Type="Int32" />
        <asp:Parameter Name="categoryID" Type="Int32" />
        <asp:Parameter Name="quantityPerUnit" Type="String" />
        <asp:Parameter Name="unitPrice" Type="Decimal" />
        <asp:Parameter Name="unitsInStock" Type="Int16" />
        <asp:Parameter Name="unitsOnOrder" Type="Int16" />
        <asp:Parameter Name="reorderLevel" Type="Int16" />
        <asp:Parameter Name="discontinued" Type="Boolean" />
    </InsertParameters>
</asp:ObjectDataSource>

ObjectDataSource menyertakan parameter untuk setiap parameter input untuk metode terkaitnya, sama seperti daftar SelectParameter yang ada ketika ObjectDataSource dikonfigurasi untuk memanggil metode pilih yang mengharapkan parameter input (seperti GetProductsByCategoryID(categoryID)). Seperti yang akan segera kita lihat, nilai untuk ini DeleteParameters, , UpdateParametersdan InsertParameters diatur secara otomatis oleh GridView, DetailsView, dan FormView sebelum memanggil metode ObjectDataSource Insert(), , Update()atau Delete() . Nilai-nilai ini juga dapat diatur secara terprogram sesuai kebutuhan, seperti yang akan kita bahas dalam tutorial di masa mendatang.

Salah satu efek samping menggunakan wizard untuk mengonfigurasi ke ObjectDataSource adalah Visual Studio mengatur properti OldValuesParameterFormatString ke original_{0}. Nilai properti ini digunakan untuk menyertakan nilai asli data yang sedang diedit dan berguna dalam dua skenario:

Jika, saat mengedit rekaman, pengguna dapat mengubah nilai kunci utama. Dalam hal ini, nilai kunci primer baru dan nilai kunci primer asli harus disediakan sehingga rekaman dengan nilai kunci primer asli dapat ditemukan dan nilainya diperbarui sesuai.
Saat menggunakan konkurensi optimis. Konkurensi optimis adalah teknik untuk memastikan bahwa dua pengguna simultan tidak menimpa perubahan satu sama lain, dan merupakan topik untuk tutorial di masa mendatang.

Properti OldValuesParameterFormatString menunjukkan nama parameter input dalam metode pembaruan dan penghapusan objek yang mendasar untuk nilai asli. Kita akan membahas properti ini dan tujuannya secara lebih rinci ketika kita mengeksplorasi konkurensi optimis. Namun, saya memunculkannya sekarang, karena metode BLL kami tidak mengharapkan nilai asli dan oleh karena itu penting bahwa kita menghapus properti ini. OldValuesParameterFormatString Membiarkan properti diatur ke apa pun selain default ({0}) akan menyebabkan kesalahan ketika kontrol Web data mencoba memanggil metode atau Update() ObjectDataSource Delete() karena ObjectDataSource akan mencoba meneruskan UpdateParameters parameter atau DeleteParameters yang ditentukan serta nilai asli.

Jika ini tidak sangat jelas pada pertahan ini, jangan khawatir, kita akan memeriksa properti ini dan utilitasnya dalam tutorial di masa mendatang. Untuk saat ini, pastikan untuk menghapus deklarasi properti ini sepenuhnya dari sintaks deklaratif atau mengatur nilai ke nilai default ({0}).

Catatan

Jika Anda hanya menghapus OldValuesParameterFormatString nilai properti dari jendela Properti dalam tampilan Desain, properti masih akan ada dalam sintaks deklaratif, tetapi diatur ke string kosong. Ini, sayangnya, masih akan mengakibatkan masalah yang sama yang dibahas di atas. Oleh karena itu, hapus properti sama sekali dari sintaks deklaratif atau, dari jendela Properti, atur nilai ke default, {0}.

Langkah 3: Menambahkan Kontrol Web Data dan Mengonfigurasinya untuk Modifikasi Data

Setelah ObjectDataSource ditambahkan ke halaman dan dikonfigurasi, kami siap untuk menambahkan kontrol Web data ke halaman untuk menampilkan data dan menyediakan sarana bagi pengguna akhir untuk memodifikasinya. Kita akan melihat GridView, DetailsView, dan FormView secara terpisah, karena kontrol Web data ini berbeda dalam kemampuan dan konfigurasi modifikasi data mereka.

Seperti yang akan kita lihat di sisa artikel ini, menambahkan pengeditan, penyisipan, dan penghapusan dukungan yang sangat mendasar melalui kontrol GridView, DetailsView, dan FormView benar-benar sesederhana memeriksa beberapa kotak centang. Ada banyak kehalusan dan kasus tepi di dunia nyata yang membuat penyediaan fungsionalitas tersebut lebih terlibat daripada sekadar titik dan klik. Tutorial ini, bagaimanapun, hanya berfokus pada membuktikan kemampuan modifikasi data yang sederhana. Tutorial di masa mendatang akan memeriksa kekhawatiran yang pasti akan muncul dalam pengaturan dunia nyata.

Menghapus Data dari GridView

Mulailah dengan menyeret GridView dari Kotak Alat ke Perancang. Selanjutnya, ikat ObjectDataSource ke GridView dengan memilihnya dari daftar drop-down di tag pintar GridView. Pada titik ini markup deklaratif GridView adalah:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="ProductID" HeaderText="ProductID"
            InsertVisible="False"
            ReadOnly="True" SortExpression="ProductID" />
        <asp:BoundField DataField="ProductName" HeaderText="ProductName"
            SortExpression="ProductName" />
        <asp:BoundField DataField="SupplierID" HeaderText="SupplierID"
           SortExpression="SupplierID" />
        <asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
           SortExpression="CategoryID" />
        <asp:BoundField DataField="QuantityPerUnit"
           HeaderText="QuantityPerUnit"
           SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
           SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
           HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder"
           HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
        <asp:BoundField DataField="ReorderLevel"
           HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
        <asp:BoundField DataField="CategoryName"
           HeaderText="CategoryName" ReadOnly="True"
            SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
            HeaderText="SupplierName" ReadOnly="True"
            SortExpression="SupplierName" />
    </Columns>
</asp:GridView>

Mengikat GridView ke ObjectDataSource melalui tag pintarnya memiliki dua manfaat:

BoundFields dan CheckBoxFields secara otomatis dibuat untuk setiap bidang yang dikembalikan oleh ObjectDataSource. Selain itu, properti BoundField dan CheckBoxField diatur berdasarkan metadata bidang yang mendasar. Misalnya, ProductIDbidang , CategoryName, dan SupplierName ditandai sebagai baca-saja di ProductsDataTable dan oleh karena itu tidak boleh dapat diperbarui saat mengedit. Untuk mengakomodasi hal ini, properti ReadOnly BoundFields
Properti DataKeyNames ditetapkan ke bidang kunci utama dari objek yang mendasar. Ini penting saat menggunakan GridView untuk mengedit atau menghapus data, karena properti ini menunjukkan bidang (atau kumpulan bidang) yang unik mengidentifikasi setiap rekaman. Untuk informasi selengkapnya tentang DataKeyNames properti , lihat kembali ke Master/Detail Menggunakan Master GridView yang Dapat Dipilih dengan tutorial Detail DetailView .

Meskipun GridView dapat terikat ke ObjectDataSource melalui jendela Properti atau sintaks deklaratif, melakukannya mengharuskan Anda untuk menambahkan BoundField dan DataKeyNames markup yang sesuai secara manual.

Kontrol GridView menyediakan dukungan bawaan untuk pengeditan dan penghapusan tingkat baris. Mengonfigurasi GridView untuk mendukung penghapusan menambahkan kolom tombol Hapus. Saat pengguna akhir mengklik tombol Hapus untuk baris tertentu, postback akan terjadi dan GridView melakukan langkah-langkah berikut:

Nilai ObjectDataSource DeleteParameters ditetapkan
Metode ObjectDataSource Delete() dipanggil, menghapus rekaman yang ditentukan
GridView mengikat ulang dirinya ke ObjectDataSource dengan memanggil metodenya Select()

Nilai yang ditetapkan ke DeleteParameters adalah nilai DataKeyNames bidang untuk baris yang tombol Hapusnya diklik. Oleh karena itu sangat penting bahwa properti GridView DataKeyNames diatur dengan benar. Jika hilang, DeleteParameters akan diberi null nilai di Langkah 1, yang pada gilirannya tidak akan menghasilkan rekaman yang dihapus di Langkah 2.

Catatan

Koleksi DataKeys disimpan dalam status kontrol GridView, yang berarti bahwa DataKeys nilai akan diingat di seluruh postback bahkan jika status tampilan GridView telah dinonaktifkan. Namun, sangat penting bahwa status tampilan tetap diaktifkan untuk GridViews yang mendukung pengeditan atau penghapusan (perilaku default). Jika Anda mengatur properti GridView EnableViewState ke false, perilaku pengeditan dan penghapusan akan berfungsi dengan baik untuk satu pengguna, tetapi jika ada pengguna bersamaan yang menghapus data, ada kemungkinan bahwa pengguna bersamaan ini mungkin secara tidak sengaja menghapus atau mengedit rekaman yang tidak diinginkan.

Peringatan yang sama ini juga berlaku untuk DetailsViews dan FormViews.

Untuk menambahkan kemampuan penghapusan ke GridView, cukup buka tag pintarnya dan centang kotak centang Aktifkan Penghapusan.

Centang kotak Aktifkan Penghapusan

Gambar 10: Centang kotak Aktifkan Penghapusan

Mencentang kotak centang Aktifkan Penghapusan dari tag pintar menambahkan CommandField ke GridView. CommandField merender kolom di GridView dengan tombol untuk melakukan satu atau beberapa tugas berikut: memilih rekaman, mengedit rekaman, dan menghapus rekaman. Kami sebelumnya melihat CommandField beraksi dengan memilih rekaman di Master/Detail Menggunakan Master GridView yang Dapat Dipilih dengan tutorial Detail DetailView .

CommandField berisi sejumlah ShowXButton properti yang menunjukkan seri tombol apa yang ditampilkan di CommandField. Dengan mencentang kotak centang Aktifkan Penghapusan, CommandField yang propertinya ShowDeleteButtontrue telah ditambahkan ke koleksi Kolom GridView.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:CommandField ShowDeleteButton="True" />
        ... BoundFields removed for brevity ...
    </Columns>
</asp:GridView>

Pada titik ini, percaya atau tidak, kita sudah selesai dengan menambahkan menghapus dukungan ke GridView! Seperti yang ditunjukkan Gambar 11, saat mengunjungi halaman ini melalui browser, kolom tombol Hapus ada.

Gambar 11: CommandField Menambahkan Kolom Tombol Hapus (Klik untuk melihat gambar ukuran penuh)

Jika Anda telah membangun tutorial ini dari bawah ke atas sendiri, ketika menguji halaman ini mengklik tombol Hapus akan menimbulkan pengecualian. Lanjutkan membaca untuk mempelajari mengapa pengecualian ini dimunculkan dan cara memperbaikinya.

Catatan

Jika Anda mengikuti menggunakan unduhan yang menyertai tutorial ini, masalah ini telah diperhitungkan. Namun, saya mendorong Anda untuk membaca detail yang tercantum di bawah ini untuk membantu mengidentifikasi masalah yang mungkin timbul dan solusi yang sesuai.

Jika, saat mencoba menghapus produk, Anda mendapatkan pengecualian yang pesannya mirip dengan "ObjectDataSource 'ObjectDataSource1' tidak dapat menemukan metode non-generik 'DeleteProduct' yang memiliki parameter: productID, original_ProductID," Anda mungkin lupa menghapus OldValuesParameterFormatString properti dari ObjectDataSource. OldValuesParameterFormatString Dengan properti yang ditentukan, ObjectDataSource mencoba meneruskan productID parameter input dan original_ProductID ke DeleteProduct metode . DeleteProduct, namun, hanya menerima satu parameter input, oleh karena itu pengecualian. Menghapus OldValuesParameterFormatString properti (atau mengaturnya ke {0}) menginstruksikan ObjectDataSource untuk tidak mencoba meneruskan parameter input asli.

Gambar 12: Pastikan Bahwa OldValuesParameterFormatString Properti Telah Dihapus (Klik untuk melihat gambar ukuran penuh)

Bahkan jika Anda telah menghapus OldValuesParameterFormatString properti, Anda masih akan mendapatkan pengecualian saat mencoba menghapus produk dengan pesan: "Pernyataan DELETE bertentangan dengan batasan REFERENSI 'FK_Order_Details_Products'." Database Northwind berisi batasan kunci asing antara Order Details tabel dan Products , yang berarti bahwa produk tidak dapat dihapus dari sistem jika ada satu atau beberapa rekaman untuknya dalam Order Details tabel. Karena setiap produk dalam database Northwind memiliki setidaknya satu rekaman di Order Details, kami tidak dapat menghapus produk apa pun sampai kami terlebih dahulu menghapus catatan detail pesanan terkait produk.

Gambar 13: Batasan Kunci Asing Melarang Penghapusan Produk (Klik untuk melihat gambar ukuran penuh)

Untuk tutorial kami, mari kita hapus semua rekaman dari Order Details tabel. Dalam aplikasi dunia nyata kita harus:

Memiliki layar lain untuk mengelola informasi detail pesanan
DeleteProduct Tambahkan metode untuk menyertakan logika untuk menghapus detail pesanan produk yang ditentukan
Ubah kueri SQL yang digunakan oleh TableAdapter untuk menyertakan penghapusan detail pesanan produk yang ditentukan

Mari kita hapus semua rekaman dari Order Details tabel untuk menghindari batasan kunci asing. Buka Penjelajah Server di Visual Studio, klik kanan pada simpul NORTHWND.MDF , dan pilih Kueri Baru. Kemudian, di jendela kueri, jalankan pernyataan SQL berikut: DELETE FROM [Order Details]

Gambar 14: Hapus Semua Rekaman dari Order Details Tabel (Klik untuk melihat gambar ukuran penuh)

Setelah menghapus tabel yang Order Details mengklik tombol Hapus akan menghapus produk tanpa kesalahan. Jika mengklik tombol Hapus tidak menghapus produk, periksa untuk memastikan bahwa properti GridView DataKeyNames diatur ke bidang kunci utama (ProductID).

Catatan

Saat mengklik tombol Hapus setelah postback dan rekaman dihapus. Ini bisa berbahaya karena mudah untuk secara tidak sengaja mengklik tombol Hapus baris yang salah. Dalam tutorial di masa mendatang, kita akan melihat cara menambahkan konfirmasi sisi klien saat menghapus rekaman.

Mengedit Data dengan GridView

Seiring dengan penghapusan, kontrol GridView juga menyediakan dukungan pengeditan tingkat baris bawaan. Mengonfigurasi GridView untuk mendukung pengeditan menambahkan kolom tombol Edit. Dari perspektif pengguna akhir, mengklik tombol Edit baris menyebabkan baris tersebut dapat diedit, mengubah sel menjadi kotak teks yang berisi nilai yang ada dan mengganti tombol Edit dengan tombol Perbarui dan Batalkan. Setelah membuat perubahan yang diinginkan, pengguna akhir dapat mengklik tombol Perbarui untuk menerapkan perubahan atau tombol Batal untuk membuangnya. Dalam kedua kasus, setelah mengklik Perbarui atau Batalkan GridView kembali ke status pra-pengeditannya.

Dari perspektif kami sebagai pengembang halaman, ketika pengguna akhir mengklik tombol Edit untuk baris tertentu, postback akan terjadi dan GridView melakukan langkah-langkah berikut:

Properti GridView ditetapkan ke indeks baris yang tombol Edit-nya EditItemIndex diklik
GridView mengikat ulang dirinya ke ObjectDataSource dengan memanggil metodenya Select()
Indeks baris yang cocok dengan EditItemIndex dirender dalam "mode edit." Dalam mode ini, tombol Edit digantikan oleh tombol Perbarui dan Batalkan dan BoundFields yang propertinya ReadOnly False (default) dirender sebagai kontrol Web TextBox yang propertinya Text ditetapkan ke nilai bidang data.

Pada titik ini markup dikembalikan ke browser, memungkinkan pengguna akhir untuk membuat perubahan apa pun pada data baris. Saat pengguna mengklik tombol Perbarui, postback terjadi dan GridView melakukan langkah-langkah berikut:

Nilai ObjectDataSource UpdateParameters diberi nilai yang dimasukkan oleh pengguna akhir ke antarmuka pengeditan GridView
Metode ObjectDataSource Update() dipanggil, memperbarui rekaman yang ditentukan
GridView mengikat ulang dirinya ke ObjectDataSource dengan memanggil metodenya Select()

Nilai kunci utama yang ditetapkan ke UpdateParameters di Langkah 1 berasal dari nilai yang ditentukan dalam DataKeyNames properti , sedangkan nilai kunci non-primer berasal dari teks dalam kontrol Web TextBox untuk baris yang diedit. Seperti halnya menghapus, sangat penting bahwa properti GridView DataKeyNames diatur dengan benar. Jika hilang, UpdateParameters nilai kunci utama akan diberi null nilai di Langkah 1, yang pada gilirannya tidak akan menghasilkan rekaman yang diperbarui di Langkah 2.

Fungsionalitas pengeditan dapat diaktifkan hanya dengan mencentang kotak centang Aktifkan Pengeditan di tag pintar GridView.

Centang kotak Aktifkan Pengeditan

Gambar 15: Centang kotak Aktifkan Pengeditan

Memeriksa kotak centang Aktifkan Pengeditan akan menambahkan CommandField (jika diperlukan) dan mengatur propertinya ShowEditButton ke true. Seperti yang kita lihat sebelumnya, CommandField berisi sejumlah ShowXButton properti yang menunjukkan seri tombol apa yang ditampilkan di CommandField. Memeriksa kotak centang Aktifkan Pengeditan menambahkan ShowEditButton properti ke CommandField yang ada:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:CommandField ShowDeleteButton="True"
            ShowEditButton="True" />
        ... BoundFields removed for brevity ...
    </Columns>
</asp:GridView>

Itu saja yang ada untuk menambahkan dukungan pengeditan rudimenter. Seperti yang ditunjukkan Gambar16, antarmuka pengeditan agak kasar setiap BoundField yang propertinya ReadOnly diatur ke false (default) dirender sebagai TextBox. Ini termasuk bidang seperti CategoryID dan SupplierID, yang merupakan kunci ke tabel lain.

Gambar 16: Mengklik Tombol Edit Chai menampilkan Baris dalam Mode Edit (Klik untuk melihat gambar ukuran penuh)

Selain meminta pengguna untuk mengedit nilai kunci asing secara langsung, antarmuka antarmuka pengeditan kurang dengan cara berikut:

Jika pengguna memasukkan CategoryID atau SupplierID yang tidak ada dalam database, UPDATE akan melanggar batasan kunci asing, menyebabkan pengecualian dinaikkan.
Antarmuka pengeditan tidak menyertakan validasi apa pun. Jika Anda tidak memberikan nilai yang diperlukan (seperti ProductName), atau memasukkan nilai string di mana nilai numerik diharapkan (seperti memasukkan "Terlalu banyak!" ke dalam UnitPrice kotak teks), pengecualian akan dilemparkan. Tutorial di masa mendatang akan memeriksa cara menambahkan kontrol validasi ke antarmuka pengguna pengeditan.
Saat ini, semua bidang produk yang tidak bersifat baca-saja harus disertakan dalam GridView. Jika kita menghapus bidang dari GridView, katakanlah UnitPrice, saat memperbarui data, GridView tidak akan mengatur UnitPriceUpdateParameters nilai, yang akan mengubah rekaman UnitPrice database menjadi NULL nilai. Demikian pula, jika bidang yang diperlukan, seperti ProductName, dihapus dari GridView, pembaruan akan gagal dengan pengecualian "ProductName' Kolom yang sama tidak mengizinkan null" yang disebutkan di atas.
Pemformatan antarmuka pengeditan meninggalkan banyak hal yang diinginkan. ditampilkan UnitPrice dengan empat titik desimal. Idealnya CategoryID nilai dan SupplierID akan berisi DropDownLists yang mencantumkan kategori dan pemasok dalam sistem.

Ini semua adalah kekurangan yang harus kita jalani untuk saat ini, tetapi akan ditangani dalam tutorial mendatang.

Menyisipkan, Mengedit, dan Menghapus Data dengan DetailsView

Seperti yang telah kita lihat dalam tutorial sebelumnya, kontrol DetailsView menampilkan satu rekaman pada satu waktu dan, seperti GridView, memungkinkan pengeditan dan penghapusan rekaman yang saat ini ditampilkan. Pengalaman pengguna akhir dengan mengedit dan menghapus item dari DetailsView dan alur kerja dari sisi ASP.NET identik dengan GridView. Di mana DetailsView berbeda dari GridView adalah bahwa ia juga menyediakan dukungan penyisipan bawaan.

Untuk menunjukkan kemampuan modifikasi data GridView, mulailah dengan menambahkan DetailsView ke Basics.aspx halaman di atas GridView yang ada dan mengikatnya ke ObjectDataSource yang ada melalui tag pintar DetailsView. Selanjutnya, hapus detailView Height dan Width properti, dan centang opsi Aktifkan Halaman dari tag pintar. Untuk mengaktifkan pengeditan, menyisipkan, dan menghapus dukungan, cukup centang kotak centang Aktifkan Pengeditan, Aktifkan Penyisipan, dan Aktifkan Penghapusan di tag pintar.

Cuplikan layar memperlihatkan jendela DetailTampilan Tugas dengan kotak centang Aktifkan Menyisipkan, Mengaktifkan Pengeditan, dan Aktifkan Penghapusan dipilih.

Gambar 17: Mengonfigurasi DetailsView untuk Mendukung Pengeditan, Penyisipan, dan Penghapusan

Seperti halnya GridView, menambahkan dukungan pengeditan, menyisipkan, atau menghapus menambahkan CommandField ke DetailsView, seperti yang ditunjukkan oleh sintaks deklaratif berikut:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True">
    <Fields>
        <asp:BoundField DataField="ProductID"
            HeaderText="ProductID" InsertVisible="False"
            ReadOnly="True" SortExpression="ProductID" />
        <asp:BoundField DataField="ProductName"
            HeaderText="ProductName" SortExpression="ProductName" />
        <asp:BoundField DataField="SupplierID" HeaderText="SupplierID"
            SortExpression="SupplierID" />
        <asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
            SortExpression="CategoryID" />
        <asp:BoundField DataField="QuantityPerUnit"
            HeaderText="QuantityPerUnit"
            SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice"
            HeaderText="UnitPrice" SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
            HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder"
            HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
        <asp:BoundField DataField="ReorderLevel"
            HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
        <asp:CheckBoxField DataField="Discontinued"
            HeaderText="Discontinued" SortExpression="Discontinued" />
        <asp:BoundField DataField="CategoryName"
            HeaderText="CategoryName" ReadOnly="True"
            SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
            HeaderText="SupplierName" ReadOnly="True"
            SortExpression="SupplierName" />
        <asp:CommandField ShowDeleteButton="True"
            ShowEditButton="True" ShowInsertButton="True" />
    </Fields>
</asp:DetailsView>

Perhatikan bahwa untuk DetailsView CommandField muncul di akhir koleksi Kolom secara default. Karena bidang DetailsView dirender sebagai baris, CommandField muncul sebagai baris dengan tombol Sisipkan, Edit, dan Hapus di bagian bawah DetailsView.

Gambar 18: Mengonfigurasi DetailsView untuk Mendukung Pengeditan, Penyisipan, dan Penghapusan (Klik untuk melihat gambar ukuran penuh)

Mengklik tombol Hapus memulai urutan peristiwa yang sama seperti dengan GridView: postback; diikuti oleh DetailsView yang mengisi ObjectDataSource DeleteParameters berdasarkan DataKeyNames nilai; dan diselesaikan dengan panggilan metode ObjectDataSource Delete() , yang benar-benar menghapus produk dari database. Pengeditan di DetailsView juga berfungsi dengan cara yang identik dengan GridView.

Untuk menyisipkan, pengguna akhir disajikan dengan tombol Baru yang, saat diklik, merender DetailsView dalam "mode sisipkan." Dengan "mode sisipkan" tombol Baru digantikan oleh tombol Sisipkan dan Batalkan dan hanya BoundFields yang propertinya InsertVisible diatur ke true (default) yang ditampilkan. Bidang data tersebut diidentifikasi sebagai bidang peningkatan otomatis, seperti ProductID, mengatur propertisaat mengikat DetailsView ke sumber data melalui tag pintar.

Saat mengikat sumber data ke DetailsView melalui tag pintar, Visual Studio mengatur InsertVisible properti hanya untuk false bidang peningkatan otomatis. Bidang baca-saja, seperti CategoryName dan SupplierName, akan ditampilkan di antarmuka pengguna "mode sisipkan" kecuali properti mereka InsertVisible secara eksplisit diatur ke false. Luangkan waktu sejenak untuk mengatur properti kedua bidang InsertVisible ini ke false, baik melalui sintaks deklaratif DetailsView atau melalui tautan Edit Bidang di tag pintar. Gambar 19 memperlihatkan pengaturan InsertVisible properti ke false dengan mengklik tautan Edit Bidang.

Gambar 19: Northwind Traders Sekarang Menawarkan Teh Acme (Klik untuk melihat gambar ukuran penuh)

Setelah mengatur InsertVisible properti, lihat Basics.aspx halaman di browser dan klik tombol Baru. Gambar 20 menunjukkan DetailsView saat menambahkan minuman baru, Acme Tea, ke lini produk kami.

Gambar 20: Northwind Traders Sekarang Menawarkan Teh Acme (Klik untuk melihat gambar ukuran penuh)

Setelah memasukkan detail untuk Acme Tea dan mengklik tombol Sisipkan, postback akan masuk dan rekaman baru ditambahkan ke Products tabel database. Karena DetailsView ini mencantumkan produk secara berurutan yang ada di tabel database, kita harus halaman ke produk terakhir untuk melihat produk baru.

Gambar 21: Detail untuk Acme Tea (Klik untuk melihat gambar ukuran penuh)

Catatan

Properti CurrentMode DetailsView menunjukkan antarmuka yang ditampilkan dan dapat menjadi salah satu nilai berikut: Edit, , Insertatau ReadOnly. Properti DefaultMode menunjukkan mode yang dikembalikan DetailsView setelah pengeditan atau penyisipan selesai dan berguna untuk menampilkan DetailsView yang secara permanen dalam mode edit atau sisipkan.

Titik dan klik menyisipkan dan mengedit kemampuan DetailsView menderita batasan yang sama dengan GridView: pengguna harus memasukkan nilai dan CategoryID yang ada SupplierID melalui kotak teks; antarmuka tidak memiliki logika validasi apa pun; semua bidang produk yang tidak mengizinkan NULL nilai atau tidak memiliki nilai default yang ditentukan di tingkat database harus disertakan dalam antarmuka penyisipan, dan sebagainya.

Teknik yang akan kami periksa untuk memperluas dan meningkatkan antarmuka pengeditan GridView di artikel mendatang dapat diterapkan ke antarmuka pengeditan dan penyisipan kontrol DetailsView juga.

Menggunakan FormView untuk Antarmuka Pengguna Modifikasi Data yang Lebih Fleksibel

FormView menawarkan dukungan bawaan untuk menyisipkan, mengedit, dan menghapus data, tetapi karena menggunakan templat alih-alih bidang tidak ada tempat untuk menambahkan BoundFields atau CommandField yang digunakan oleh kontrol GridView dan DetailsView untuk menyediakan antarmuka modifikasi data. Sebagai gantinya, antarmuka ini kontrol Web untuk mengumpulkan input pengguna saat menambahkan item baru atau mengedit item yang sudah ada bersama dengan tombol Baru, Edit, Hapus, Sisipkan, Perbarui, dan Batalkan harus ditambahkan secara manual ke templat yang sesuai. Untungnya, Visual Studio akan secara otomatis membuat antarmuka yang diperlukan saat mengikat FormView ke sumber data melalui daftar drop-down dalam tag pintarnya.

Untuk mengilustrasikan teknik ini, mulailah dengan menambahkan FormView ke Basics.aspx halaman dan, dari tag pintar FormView, ikat ke ObjectDataSource yang sudah dibuat. Ini akan menghasilkan EditItemTemplate, InsertItemTemplate, dan ItemTemplate untuk formView dengan kontrol TextBox Web untuk mengumpulkan input pengguna dan tombol kontrol Web untuk tombol Baru, Edit, Hapus, Sisipkan, Perbarui, dan Batalkan. Selain itu, properti FormView DataKeyNames diatur ke bidang kunci utama (ProductID) objek yang dikembalikan oleh ObjectDataSource. Terakhir, centang opsi Aktifkan Halaman di tag pintar FormView.

Berikut ini menunjukkan markup deklaratif untuk FormView ItemTemplate setelah FormView terikat ke ObjectDataSource. Secara default, setiap bidang produk nilai non-Boolean terikat ke Text properti kontrol Web Label sementara setiap bidang nilai Boolean (Discontinued) terikat ke Checked properti kontrol Web CheckBox yang dinonaktifkan. Agar tombol Baru, Edit, dan Hapus memicu perilaku FormView tertentu saat diklik, sangat penting bahwa nilainya CommandName masing-masing diatur ke New, Edit, dan Delete, .

<asp:FormView ID="FormView1" runat="server" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" AllowPaging="True">
    <EditItemTemplate>
        ...
    </EditItemTemplate>
    <InsertItemTemplate>
        ...
    </InsertItemTemplate>
    <ItemTemplate>
        ProductID:
        <asp:Label ID="ProductIDLabel" runat="server"
            Text='<%# Eval("ProductID") %>'></asp:Label><br />
        ProductName:
        <asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        SupplierID:
        <asp:Label ID="SupplierIDLabel" runat="server"
            Text='<%# Bind("SupplierID") %>'>
        </asp:Label><br />
        CategoryID:
        <asp:Label ID="CategoryIDLabel" runat="server"
            Text='<%# Bind("CategoryID") %>'>
        </asp:Label><br />
        QuantityPerUnit:
        <asp:Label ID="QuantityPerUnitLabel" runat="server"
            Text='<%# Bind("QuantityPerUnit") %>'>
        </asp:Label><br />
        UnitPrice:
        <asp:Label ID="UnitPriceLabel" runat="server"
            Text='<%# Bind("UnitPrice") %>'></asp:Label><br />
        UnitsInStock:
        <asp:Label ID="UnitsInStockLabel" runat="server"
            Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label><br />
        UnitsOnOrder:
        <asp:Label ID="UnitsOnOrderLabel" runat="server"
            Text='<%# Bind("UnitsOnOrder") %>'>
        </asp:Label><br />
        ReorderLevel:
        <asp:Label ID="ReorderLevelLabel" runat="server"
            Text='<%# Bind("ReorderLevel") %>'>
        </asp:Label><br />
        Discontinued:
        <asp:CheckBox ID="DiscontinuedCheckBox" runat="server"
            Checked='<%# Bind("Discontinued") %>'
            Enabled="false" /><br />
        CategoryName:
        <asp:Label ID="CategoryNameLabel" runat="server"
            Text='<%# Bind("CategoryName") %>'>
        </asp:Label><br />
        SupplierName:
        <asp:Label ID="SupplierNameLabel" runat="server"
            Text='<%# Bind("SupplierName") %>'>
        </asp:Label><br />
        <asp:LinkButton ID="EditButton" runat="server"
            CausesValidation="False" CommandName="Edit"
            Text="Edit">
        </asp:LinkButton>
        <asp:LinkButton ID="DeleteButton" runat="server"
            CausesValidation="False" CommandName="Delete"
            Text="Delete">
        </asp:LinkButton>
        <asp:LinkButton ID="NewButton" runat="server"
            CausesValidation="False" CommandName="New"
            Text="New">
        </asp:LinkButton>
    </ItemTemplate>
</asp:FormView>

Gambar 22 menunjukkan FormView ItemTemplate saat dilihat melalui browser. Setiap bidang produk tercantum dengan tombol Baru, Edit, dan Hapus di bagian bawah.

Gambar 22: Defaut FormView ItemTemplate Mencantumkan Setiap Bidang Produk Bersama dengan Tombol Baru, Edit, dan Hapus (Klik untuk melihat gambar ukuran penuh)

Seperti halnya GridView dan DetailsView, mengklik tombol Hapus atau Tombol apa pun, LinkButton, atau ImageButton yang propertinya CommandName diatur ke Hapus menyebabkan postback, mengisi ObjectDataSource DeleteParameters berdasarkan nilai FormView DataKeyNames , dan memanggil metode ObjectDataSource Delete() .

Ketika tombol Edit diklik postback terjadi dan data akan kembali ke EditItemTemplate, yang bertanggung jawab untuk merender antarmuka pengeditan. Antarmuka ini mencakup kontrol Web untuk mengedit data bersama dengan tombol Perbarui dan Batalkan. Default EditItemTemplate yang dihasilkan oleh Visual Studio berisi Label untuk bidang kenaikan otomatis apa pun (ProductID), Kotak Teks untuk setiap bidang nilai non-Boolean, dan Kotak Centang untuk setiap bidang nilai Boolean. Perilaku ini sangat mirip dengan BoundFields yang dihasilkan secara otomatis di kontrol GridView dan DetailsView.

Catatan

Satu masalah kecil dengan pembuatan EditItemTemplate otomatis FormView adalah merender kontrol Web TextBox untuk bidang yang bersifat baca-saja, seperti CategoryName dan SupplierName. Kita akan melihat cara memperhitungkan ini segera.

Kontrol TextBox di EditItemTemplate memiliki properti mereka Text yang terikat ke nilai bidang data terkait menggunakan pengikatan data dua arah. Pengikatan data dua arah, ditandai dengan <%# Bind("dataField") %>, melakukan pengikatan data baik saat mengikat data ke templat dan saat mengisi parameter ObjectDataSource untuk menyisipkan atau mengedit rekaman. Artinya, ketika pengguna mengklik tombol Edit dari ItemTemplate, Bind() metode mengembalikan nilai bidang data yang ditentukan. Setelah pengguna membuat perubahan dan klik Perbarui, nilai yang diposting kembali yang sesuai dengan bidang data yang ditentukan menggunakan Bind() diterapkan ke ObjectDataSource UpdateParameters. Atau, pengikatan data satu arah, yang ditandai dengan <%# Eval("dataField") %>, hanya mengambil nilai bidang data saat mengikat data ke templat dan tidak mengembalikan nilai yang dimasukkan pengguna ke parameter sumber data pada postback.

Markup deklaratif berikut menunjukkan FormView EditItemTemplate. Perhatikan bahwa Bind() metode ini digunakan dalam sintaks pengikatan data di sini dan bahwa kontrol Web Tombol Pembaruan dan Batal memiliki properti yang CommandName sesuai.

<asp:FormView ID="FormView1" runat="server" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" AllowPaging="True">
    <EditItemTemplate>
        ProductID:
        <asp:Label ID="ProductIDLabel1" runat="server"
          Text="<%# Eval("ProductID") %>"></asp:Label><br />
        ProductName:
        <asp:TextBox ID="ProductNameTextBox" runat="server"
          Text="<%# Bind("ProductName") %>">
        </asp:TextBox><br />
        SupplierID:
        <asp:TextBox ID="SupplierIDTextBox" runat="server"
          Text="<%# Bind("SupplierID") %>">
        </asp:TextBox><br />
        CategoryID:
        <asp:TextBox ID="CategoryIDTextBox" runat="server"
          Text="<%# Bind("CategoryID") %>">
        </asp:TextBox><br />
        QuantityPerUnit:
        <asp:TextBox ID="QuantityPerUnitTextBox" runat="server"
           Text="<%# Bind("QuantityPerUnit") %>">
        </asp:TextBox><br />
        UnitPrice:
        <asp:TextBox ID="UnitPriceTextBox" runat="server"
           Text="<%# Bind("UnitPrice") %>">
        </asp:TextBox><br />
        UnitsInStock:
        <asp:TextBox ID="UnitsInStockTextBox" runat="server"
           Text="<%# Bind("UnitsInStock") %>">
        </asp:TextBox><br />
        UnitsOnOrder:
        <asp:TextBox ID="UnitsOnOrderTextBox" runat="server"
           Text="<%# Bind("UnitsOnOrder") %>">
        </asp:TextBox><br />
        ReorderLevel:
        <asp:TextBox ID="ReorderLevelTextBox" runat="server"
           Text="<%# Bind("ReorderLevel") %>">
        </asp:TextBox><br />
        Discontinued:
        <asp:CheckBox ID="DiscontinuedCheckBox" runat="server"
            Checked="<%# Bind("Discontinued") %>" /><br />
        CategoryName:
        <asp:TextBox ID="CategoryNameTextBox" runat="server"
             Text="<%# Bind("CategoryName") %>">
        </asp:TextBox><br />
        SupplierName:
        <asp:TextBox ID="SupplierNameTextBox" runat="server"
             Text="<%# Bind("SupplierName") %>">
        </asp:TextBox><br />
        <asp:LinkButton ID="UpdateButton" runat="server"
            CausesValidation="True" CommandName="Update"
            Text="Update">
        </asp:LinkButton>
        <asp:LinkButton ID="UpdateCancelButton" runat="server"
            CausesValidation="False" CommandName="Cancel"
            Text="Cancel">
        </asp:LinkButton>
    </EditItemTemplate>
    <InsertItemTemplate>
        ...
    </InsertItemTemplate>
    <ItemTemplate>
        ...
    </ItemTemplate>
</asp:FormView>

Kami EditItemTemplate, pada titik ini, akan menyebabkan pengecualian dilemparkan jika kami mencoba menggunakannya. Masalahnya adalah bahwa CategoryName bidang dan SupplierName dirender sebagai kontrol Web TextBox di EditItemTemplate. Kita perlu mengubah Kotak Teks ini menjadi Label atau menghapusnya sama sekali. Mari kita hapus sepenuhnya dari EditItemTemplate.

Gambar 23 menunjukkan FormView di browser setelah tombol Edit diklik untuk Chai. Perhatikan bahwa SupplierName bidang dan CategoryName yang ditampilkan di ItemTemplate tidak lagi ada, karena kami baru saja menghapusnya dari EditItemTemplate. Ketika tombol Perbarui diklik FormView berlangsung melalui urutan langkah yang sama dengan kontrol GridView dan DetailsView.

Gambar 23: Secara Default EditItemTemplate Menampilkan Setiap Bidang Produk yang Dapat Diedit sebagai Kotak Teks atau Kotak Centang (Klik untuk melihat gambar ukuran penuh)

Saat tombol Sisipkan diklik postback FormView ItemTemplate . Namun, tidak ada data yang terikat ke FormView karena rekaman baru sedang ditambahkan. Antarmuka InsertItemTemplate menyertakan kontrol Web untuk menambahkan rekaman baru bersama dengan tombol Sisipkan dan Batalkan. Default InsertItemTemplate yang dihasilkan oleh Visual Studio berisi TextBox untuk setiap bidang nilai non-Boolean dan Kotak Centang untuk setiap bidang nilai Boolean, mirip dengan antarmuka yang dihasilkan EditItemTemplatesecara otomatis. Kontrol TextBox memiliki properti yang Text terikat ke nilai bidang data terkait menggunakan pengikatan data dua arah.

Markup deklaratif berikut menunjukkan FormView InsertItemTemplate. Perhatikan bahwa Bind() metode ini digunakan dalam sintaks pengikatan data di sini dan bahwa kontrol Web Tombol Sisipkan dan Batalkan memiliki properti yang CommandName sesuai.

<asp:FormView ID="FormView1" runat="server" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" AllowPaging="True">
    <EditItemTemplate>
        ...
    </EditItemTemplate>
    <InsertItemTemplate>
        ProductName:
        <asp:TextBox ID="ProductNameTextBox" runat="server"
           Text="<%# Bind("ProductName") %>">
        </asp:TextBox><br />
        SupplierID:
        <asp:TextBox ID="SupplierIDTextBox" runat="server"
           Text="<%# Bind("SupplierID") %>">
        </asp:TextBox><br />
        CategoryID:
        <asp:TextBox ID="CategoryIDTextBox" runat="server"
           Text="<%# Bind("CategoryID") %>">
        </asp:TextBox><br />
        QuantityPerUnit:
        <asp:TextBox ID="QuantityPerUnitTextBox" runat="server"
           Text="<%# Bind("QuantityPerUnit") %>">
        </asp:TextBox><br />
        UnitPrice:
        <asp:TextBox ID="UnitPriceTextBox" runat="server"
           Text="<%# Bind("UnitPrice") %>">
        </asp:TextBox><br />
        UnitsInStock:
        <asp:TextBox ID="UnitsInStockTextBox" runat="server"
           Text="<%# Bind("UnitsInStock") %>">
        </asp:TextBox><br />
        UnitsOnOrder:
        <asp:TextBox ID="UnitsOnOrderTextBox" runat="server"
           Text="<%# Bind("UnitsOnOrder") %>">
        </asp:TextBox><br />
        ReorderLevel:
        <asp:TextBox ID="ReorderLevelTextBox" runat="server"
           Text="<%# Bind("ReorderLevel") %>">
        </asp:TextBox><br />
        Discontinued:
        <asp:CheckBox ID="DiscontinuedCheckBox" runat="server"
           Checked="<%# Bind("Discontinued") %>" /><br />
        CategoryName:
        <asp:TextBox ID="CategoryNameTextBox" runat="server"
            Text="<%# Bind("CategoryName") %>">
        </asp:TextBox><br />
        SupplierName:
        <asp:TextBox ID="SupplierNameTextBox" runat="server"
           Text="<%# Bind("SupplierName") %>">
        </asp:TextBox><br />
        <asp:LinkButton ID="InsertButton" runat="server"
            CausesValidation="True" CommandName="Insert"
            Text="Insert">
        </asp:LinkButton>
        <asp:LinkButton ID="InsertCancelButton" runat="server"
            CausesValidation="False" CommandName="Cancel"
            Text="Cancel">
        </asp:LinkButton>
    </InsertItemTemplate>
    <ItemTemplate>
        ...
    </ItemTemplate>
</asp:FormView>

Ada kelemahan dengan pembuatan otomatis FormView dari InsertItemTemplate. Secara khusus, kontrol Web TextBox dibuat bahkan untuk bidang yang bersifat baca-saja, seperti CategoryName dan SupplierName. Seperti dengan EditItemTemplate, kita perlu menghapus Kotak Teks ini dari InsertItemTemplate.

Gambar 24 menunjukkan FormView di browser saat menambahkan produk baru, Acme Coffee. Perhatikan bahwa SupplierName bidang dan CategoryName yang ditampilkan di ItemTemplate tidak lagi ada, karena kami baru saja menghapusnya. Saat tombol Sisipkan diklik FormView melanjutkan urutan langkah yang sama dengan kontrol DetailsView, menambahkan rekaman baru ke Products tabel. Gambar 25 menunjukkan detail produk Acme Coffee di FormView setelah dimasukkan.

Gambar 24: Menentukan InsertItemTemplate Antarmuka Penyisipan FormView (Klik untuk melihat gambar ukuran penuh)

Gambar 25: Detail untuk Produk Baru, Acme Coffee, ditampilkan di FormView (Klik untuk melihat gambar ukuran penuh)

Dengan memisahkan antarmuka baca-saja, pengeditan, dan penyisipan ke dalam tiga templat terpisah, FormView memungkinkan tingkat kontrol yang lebih baik atas antarmuka ini daripada DetailsView dan GridView.

Catatan

Seperti DetailsView, properti FormView CurrentMode menunjukkan antarmuka yang ditampilkan dan propertinya DefaultMode menunjukkan mode yang dikembalikan FormView setelah pengeditan atau penyisipan selesai.

Ringkasan

Dalam tutorial ini kami memeriksa dasar-dasar menyisipkan, mengedit, dan menghapus data menggunakan GridView, DetailsView, dan FormView. Ketiga kontrol ini menyediakan beberapa tingkat kemampuan modifikasi data bawaan yang dapat digunakan tanpa menulis satu baris kode di halaman ASP.NET berkat kontrol Web data dan ObjectDataSource. Namun, teknik titik sederhana dan klik merender antarmuka pengguna modifikasi data yang cukup frail dan naif. Untuk memberikan validasi, menyuntikkan nilai terprogram, menangani pengecualian dengan anggun, menyesuaikan antarmuka pengguna, dan sebagainya, kita harus mengandalkan sejumlah teknik yang akan dibahas selama beberapa tutorial berikutnya.

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.

Berikutnya

Bagikan melalui

Gambaran Umum Menyisipkan, Memperbarui, dan Menghapus Data (C#)

Pendahuluan

Langkah 1: Membuat Halaman Web Sisipkan, Perbarui, dan Hapus Tutorial

Langkah 2: Menambahkan dan Mengonfigurasi Kontrol ObjectDataSource

Memeriksa Markup ObjectDataSource

Langkah 3: Menambahkan Kontrol Web Data dan Mengonfigurasinya untuk Modifikasi Data

Menghapus Data dari GridView

Mengedit Data dengan GridView

Menyisipkan, Mengedit, dan Menghapus Data dengan DetailsView

Menggunakan FormView untuk Antarmuka Pengguna Modifikasi Data yang Lebih Fleksibel

Ringkasan

Tentang Penulis

Saran dan Komentar

Sumber Daya Tambahan: