Gambaran Umum Pengeditan dan Penghapusan Data di DataList (C#)

oleh Scott Mitchell

Unduh PDF

Meskipun DataList tidak memiliki kemampuan pengeditan dan penghapusan bawaan, dalam tutorial ini kita akan melihat cara membuat DataList yang mendukung pengeditan dan penghapusan data yang mendasarnya.

Pendahuluan

Dalam tutorial Gambaran Umum Menyisipkan, Memperbarui, dan Menghapus Data, kami melihat cara menyisipkan, memperbarui, dan menghapus data menggunakan arsitektur aplikasi, ObjectDataSource, dan kontrol GridView, DetailsView, dan FormView. Dengan ObjectDataSource dan ketiga kontrol Web data ini, menerapkan antarmuka modifikasi data sederhana adalah snap dan terlibat hanya mencentang kotak centang dari tag pintar. Tidak ada kode yang perlu ditulis.

Sayangnya, DataList tidak memiliki kemampuan pengeditan dan penghapusan bawaan yang melekat dalam kontrol GridView. Fungsionalitas yang hilang ini disebabkan oleh fakta bahwa DataList adalah relik dari versi ASP.NET sebelumnya, ketika kontrol sumber data deklaratif dan halaman modifikasi data bebas kode tidak tersedia. Meskipun DataList di ASP.NET 2.0 tidak menawarkan kemampuan modifikasi data out of the box yang sama dengan GridView, kita dapat menggunakan teknik ASP.NET 1.x untuk menyertakan fungsionalitas tersebut. Pendekatan ini membutuhkan sedikit kode tetapi, seperti yang akan kita lihat dalam tutorial ini, DataList memiliki beberapa peristiwa dan properti untuk membantu dalam proses ini.

Dalam tutorial ini kita akan melihat cara membuat DataList yang mendukung pengeditan dan penghapusan data yang mendasar. Tutorial di masa mendatang akan memeriksa skenario pengeditan dan penghapusan yang lebih canggih, termasuk validasi bidang input, menangani pengecualian yang dimunculkan dengan anggun dari Akses Data atau Lapisan Logika Bisnis, dan sebagainya.

Catatan

Seperti DataList, kontrol Repeater tidak memiliki fungsionalitas out of the box untuk menyisipkan, memperbarui, atau menghapus. Meskipun fungsionalitas tersebut dapat ditambahkan, DataList menyertakan properti dan peristiwa yang tidak ditemukan di Repeater yang menyederhanakan penambahan kemampuan tersebut. Oleh karena itu, tutorial ini dan yang akan datang yang melihat pengeditan dan penghapusan akan fokus ketat pada DataList.

Langkah 1: Membuat Halaman Web Tutorial Pengeditan dan Penghapusan

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

• Default.aspx
• Basics.aspx
• BatchUpdate.aspx
• ErrorHandling.aspx
• UIValidation.aspx
• CustomizedUI.aspx
• OptimisticConcurrency.aspx
• ConfirmationOnDelete.aspx
• UserLevelAccess.aspx

Gambar 1: Tambahkan Halaman ASP.NET untuk Tutorial

Seperti di folder lain, Default.aspx di folder mencantumkan EditDeleteDataList 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 2: 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 Laporan Master/Detail dengan DataList dan Repeater <siteMapNode>:

<siteMapNode
    title="Editing and Deleting with the DataList"
    description="Samples of Reports that Provide Editing and Deleting Capabilities"
    url="~/EditDeleteDataList/Default.aspx" >
    <siteMapNode
        title="Basics"
        description="Examines the basics of editing and deleting with the
                     DataList control."
        url="~/EditDeleteDataList/Basics.aspx" />
    <siteMapNode
        title="Batch Update"
        description="Examines how to update multiple records at once in a
                     fully-editable DataList."
        url="~/EditDeleteDataList/BatchUpdate.aspx" />
    <siteMapNode
        title="Error Handling"
        description="Learn how to gracefully handle exceptions raised during the
                     data modification workflow."
        url="~/EditDeleteDataList/ErrorHandling.aspx" />
    <siteMapNode
        title="Adding Data Entry Validation"
        description="Help prevent data entry errors by providing validation."
        url="~/EditDeleteDataList/UIValidation.aspx" />
    <siteMapNode
        title="Customize the User Interface"
        description="Customize the editing user interfaces."
        url="~/EditDeleteDataList/CustomizedUI.aspx" />
    <siteMapNode
        title="Optimistic Concurrency"
        description="Learn how to help prevent simultaneous users from
                     overwritting one another s changes."
        url="~/EditDeleteDataList/OptimisticConcurrency.aspx" />
    <siteMapNode
        title="Confirm On Delete"
        description="Prompt a user for confirmation when deleting a record."
        url="~/EditDeleteDataList/ConfirmationOnDelete.aspx" />
    <siteMapNode
        title="Limit Capabilities Based on User"
        description="Learn how to limit the data modification functionality
                     based on the user s role or permissions."
        url="~/EditDeleteDataList/UserLevelAccess.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 dan penghapusan DataList.

Gambar 3: Peta Situs Sekarang Menyertakan Entri untuk Tutorial Pengeditan dan Penghapusan DataList

Langkah 2: Memeriksa Teknik untuk Memperbarui dan Menghapus Data

Mengedit dan menghapus data dengan GridView sangat mudah karena, di bawah sampul, GridView dan ObjectDataSource berfungsi dalam konser. Seperti yang dibahas dalam tutorial Memeriksa Peristiwa yang Terkait dengan Menyisipkan, Memperbarui, dan Menghapus , ketika tombol Pembaruan baris diklik, GridView secara otomatis menetapkan bidangnya yang menggunakan pengikatan data dua arah ke UpdateParameters kumpulan ObjectDataSource-nya dan kemudian memanggil metode ObjectDataSource tersebut Update() .

Sayangnya, DataList tidak menyediakan fungsionalitas bawaan ini. Kami bertanggung jawab untuk memastikan bahwa nilai pengguna ditetapkan ke parameter ObjectDataSource dan bahwa metodenya Update() dipanggil. Untuk membantu kami dalam upaya ini, DataList menyediakan properti dan peristiwa berikut:

• Properti DataKeyField saat memperbarui atau menghapus, kita harus dapat mengidentifikasi setiap item secara unik dalam DataList. Atur properti ini ke bidang kunci utama dari data yang ditampilkan. Melakukannya akan mengisi koleksiDataKeys dengan nilai yang ditentukan DataKeyField untuk setiap item DataList.
• Peristiwa EditCommanddiaktifkan saat Tombol, LinkButton, atau ImageButton yang propertinya CommandName diatur ke Edit diklik.
• Peristiwa CancelCommanddiaktifkan saat Tombol, LinkButton, atau ImageButton yang propertinya CommandName diatur ke Batal diklik.
• UpdateCommand diaktifkan saat Tombol, LinkButton, atau ImageButton yang propertinya CommandName diatur ke Pembaruan diklik.
• Peristiwa DeleteCommanddiaktifkan saat Tombol, LinkButton, atau ImageButton yang propertinya CommandName diatur ke Hapus diklik.

Dengan menggunakan properti dan peristiwa ini, ada empat pendekatan yang dapat kita gunakan untuk memperbarui dan menghapus data dari DataList:

1. Menggunakan teknik ASP.NET 1.x, DataList ada sebelum ASP.NET 2.0 dan ObjectDataSources dan dapat memperbarui dan menghapus data sepenuhnya melalui cara terprogram. Teknik ini membuang ObjectDataSource sama sekali dan mengharuskan kami mengikat data ke DataList langsung dari Lapisan Logika Bisnis, baik dalam mengambil data untuk ditampilkan dan saat memperbarui atau menghapus rekaman.
2. Menggunakan Kontrol ObjectDataSource Tunggal di Halaman untuk Memilih, Memperbarui, dan Menghapus sementara DataList tidak memiliki kemampuan pengeditan dan penghapusan yang melekat pada GridView, tidak ada alasan kita tidak dapat menambahkannya dalam diri kita sendiri. Dengan pendekatan ini, kami menggunakan ObjectDataSource seperti dalam contoh GridView, tetapi harus membuat penanganan aktivitas untuk peristiwa DataList UpdateCommand tempat kami mengatur parameter ObjectDataSource dan memanggil metodenya Update() .
3. Menggunakan Kontrol ObjectDataSource untuk Memilih, tetapi Memperbarui dan Menghapus Langsung Terhadap BLL saat menggunakan opsi 2, kita perlu menulis sedikit kode dalam peristiwa, UpdateCommand menetapkan nilai parameter dan sebagainya. Sebagai gantinya, kita dapat tetap menggunakan ObjectDataSource untuk memilih, tetapi melakukan pembaruan dan penghapusan panggilan langsung terhadap BLL (seperti dengan opsi 1). Menurut pendapat saya, memperbarui data dengan berinteraksi langsung dengan BLL mengarah ke kode yang lebih mudah dibaca daripada menetapkan ObjectDataSource dan UpdateParameters memanggil metodenya Update() .
4. Menggunakan Cara Deklaratif melalui Beberapa ObjectDataSources , ketiga pendekatan sebelumnya semuanya memerlukan sedikit kode. Jika Anda lebih suka terus menggunakan sintaksis deklaratif sebanyak mungkin, opsi terakhir adalah menyertakan beberapa ObjectDataSources di halaman. ObjectDataSource pertama mengambil data dari BLL dan mengikatnya ke DataList. Untuk memperbarui, ObjectDataSource lain ditambahkan, tetapi ditambahkan langsung dalam DataList s EditItemTemplate. Untuk menyertakan penghapusan dukungan, objectDataSource lain akan diperlukan dalam ItemTemplate. Dengan pendekatan ini, ObjectDataSource yang disematkan ini digunakan ControlParameters untuk secara deklaratif mengikat parameter ObjectDataSource ke kontrol input pengguna (daripada harus menentukannya secara terprogram di penanganan aktivitas DataList UpdateCommand ). Pendekatan ini masih membutuhkan sedikit kode yang kita butuhkan untuk memanggil perintah atau Update() ObjectDataSource yang Delete() disematkan tetapi membutuhkan jauh lebih sedikit daripada dengan tiga pendekatan lainnya. Kelemahannya di sini adalah bahwa beberapa ObjectDataSources melakukan kekacauan halaman, mengurangi dari keterbacaan keseluruhan.

Jika dipaksa untuk hanya menggunakan salah satu pendekatan ini, saya akan memilih opsi 1 karena memberikan fleksibilitas terbanyak dan karena DataList awalnya dirancang untuk mengakomodasi pola ini. Meskipun DataList diperluas untuk bekerja dengan kontrol sumber data ASP.NET 2.0, DataList tidak memiliki semua titik ekstensibilitas atau fitur kontrol Web data resmi ASP.NET 2.0 (GridView, DetailsView, dan FormView). Opsi 2 sampai 4 bukan tanpa manfaat.

Ini dan tutorial pengeditan dan penghapusan di masa mendatang akan menggunakan ObjectDataSource untuk mengambil data untuk menampilkan dan mengarahkan panggilan ke BLL untuk memperbarui dan menghapus data (opsi 3).

Langkah 3: Menambahkan DataList dan Mengonfigurasi ObjectDataSource-nya

Dalam tutorial ini kita akan membuat DataList yang mencantumkan informasi produk dan, untuk setiap produk, memberi pengguna kemampuan untuk mengedit nama dan harga dan untuk menghapus produk sama sekali. Secara khusus, kita akan mengambil rekaman untuk ditampilkan menggunakan ObjectDataSource, tetapi melakukan tindakan pembaruan dan penghapusan dengan berinteraksi langsung dengan BLL. Sebelum kita khawatir tentang menerapkan kemampuan pengeditan dan penghapusan ke DataList, mari kita dapatkan halaman terlebih dahulu untuk menampilkan produk dalam antarmuka baca-saja. Karena kami telah memeriksa langkah-langkah ini dalam tutorial sebelumnya, saya akan melanjutkan melaluinya dengan cepat.

Mulailah dengan membuka Basics.aspx halaman di EditDeleteDataList folder dan, dari tampilan Desain, tambahkan DataList ke halaman. Selanjutnya, dari tag pintar DataList, buat ObjectDataSource baru. Karena kami bekerja dengan data produk, konfigurasikan untuk menggunakan ProductsBLL kelas . Untuk mengambil semua produk, pilih GetProducts() metode di tab SELECT.

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

Gambar 5: Mengembalikan Informasi Produk Menggunakan GetProducts() Metode (Klik untuk melihat gambar ukuran penuh)

DataList, seperti GridView, tidak dirancang untuk menyisipkan data baru; oleh karena itu, pilih opsi (Tidak Ada) dari daftar drop-down di tab INSERT. Pilih juga (Tidak Ada) untuk tab PERBARUI dan HAPUS karena pembaruan dan penghapusan akan dilakukan secara terprogram melalui BLL.

Gambar 6: Konfirmasikan bahwa Daftar Drop-Down di Tab INSERT, UPDATE, dan DELETE ObjectDataSource diatur ke (Tidak Ada) (Klik untuk melihat gambar ukuran penuh)

Setelah mengonfigurasi ObjectDataSource, klik Selesai, kembali ke Perancang. Seperti yang telah kita lihat dalam contoh sebelumnya, saat menyelesaikan konfigurasi ObjectDataSource, Visual Studio secara otomatis membuat ItemTemplate untuk DropDownList, menampilkan setiap bidang data. Ganti ini ItemTemplate dengan yang hanya menampilkan nama dan harga produk. Selain itu, atur properti ke RepeatColumns 2.

Catatan

Seperti yang dibahas dalam tutorial Gambaran Umum Menyisipkan, Memperbarui, dan Menghapus Data , saat memodifikasi data menggunakan ObjectDataSource arsitektur kami mengharuskan kami menghapus OldValuesParameterFormatString properti dari markup deklaratif ObjectDataSource (atau mengatur ulang ke nilai defaultnya, {0}). Namun, dalam tutorial ini, kami menggunakan ObjectDataSource hanya untuk mengambil data. Oleh karena itu, kita tidak perlu memodifikasi nilai properti ObjectDataSource ( OldValuesParameterFormatString meskipun tidak ada salahnya untuk melakukannya).

Setelah mengganti DataList ItemTemplate default dengan yang dikustomisasi, markup deklaratif di halaman Anda akan terlihat mirip dengan yang berikut ini:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" RepeatColumns="2">
    <ItemTemplate>
        <h5>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h5>
        Price: <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
        <br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL"
    OldValuesParameterFormatString="original_{0}">
</asp:ObjectDataSource>

Luangkan waktu sejenak untuk melihat kemajuan kami melalui browser. Seperti yang ditunjukkan Gambar 7, DataList menampilkan nama produk dan harga satuan untuk setiap produk dalam dua kolom.

Gambar 7: Nama dan Harga Produk Ditampilkan dalam Daftar Data Dua Kolom (Klik untuk melihat gambar ukuran penuh)

Catatan

DataList memiliki sejumlah properti yang diperlukan untuk proses pembaruan dan penghapusan, dan nilai-nilai ini disimpan dalam status tampilan. Oleh karena itu, saat membangun DataList yang mendukung pengeditan atau penghapusan data, penting agar status tampilan DataList diaktifkan.

Pembaca astute mungkin ingat bahwa kami dapat menonaktifkan status tampilan saat membuat GridViews, DetailsViews, dan FormViews yang dapat diedit. Ini karena kontrol Web ASP.NET 2.0 dapat mencakup status kontrol, yang statusnya bertahan di seluruh postback seperti status tampilan, tetapi dianggap penting.

Menonaktifkan status tampilan di GridView hanya menghilangkan informasi status sepele, tetapi mempertahankan status kontrol (yang mencakup status yang diperlukan untuk pengeditan dan penghapusan). DataList, yang telah dibuat dalam jangka waktu ASP.NET 1.x, tidak menggunakan status kontrol dan karenanya harus mengaktifkan status tampilan. Lihat Status Kontrol vs. Lihat Status untuk informasi selengkapnya tentang tujuan status kontrol dan perbedaannya dengan status tampilan.

Langkah 4: Menambahkan Antarmuka Pengguna Pengeditan

Kontrol GridView terdiri dari kumpulan bidang (BoundFields, CheckBoxFields, TemplateFields, dan sebagainya). Bidang-bidang ini dapat menyesuaikan markup yang dirender tergantung pada modenya. Misalnya, saat dalam mode baca-saja, BoundField menampilkan nilai bidang datanya sebagai teks; ketika dalam mode edit, ini merender kontrol Web TextBox yang propertinya Text diberi nilai bidang data.

DataList, di sisi lain, merender itemnya menggunakan templat. Item baca-saja dirender menggunakan ItemTemplate sedangkan item dalam mode edit dirender melalui EditItemTemplate. Pada titik ini, DataList kami hanya memiliki ItemTemplate. Untuk mendukung fungsionalitas pengeditan tingkat item, kita perlu menambahkan EditItemTemplate yang berisi markup yang akan ditampilkan untuk item yang dapat diedit. Untuk tutorial ini, kita akan menggunakan kontrol Web TextBox untuk mengedit nama produk dan harga satuan.

EditItemTemplate dapat dibuat baik secara deklaratif atau melalui Perancang (dengan memilih opsi Edit Templat dari tag pintar DataList). Untuk menggunakan opsi Edit Templat, pertama-tama klik tautan Edit Templat di tag pintar lalu pilih EditItemTemplate item dari daftar drop-down.

Gambar 8: Memilih Untuk Bekerja dengan Daftar Data EditItemTemplate (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, ketik Nama produk: dan Harga: lalu seret dua kontrol TextBox dari Kotak Alat ke EditItemTemplate antarmuka pada Perancang. Atur properti TextBoxes ID ke ProductName dan UnitPrice.

Gambar 9: Tambahkan Kotak Teks untuk Nama dan Harga Produk (Klik untuk melihat gambar ukuran penuh)

Kita perlu mengikat nilai bidang data produk yang sesuai dengan Text properti dari dua Kotak Teks. Dari tag pintar TextBoxes, klik tautan Edit DataBindings lalu kaitkan bidang data yang sesuai dengan Text properti , seperti yang ditunjukkan pada Gambar 10.

Catatan

Saat mengikat UnitPrice bidang data ke bidang TextBox Text harga, Anda dapat memformatnya sebagai nilai mata uang ({0:C}), angka umum ({0:N}), atau membiarkannya tidak diformat.

Gambar 10: Mengikat ProductName dan UnitPrice Bidang Data ke Text Properti Kotak Teks

Perhatikan bagaimana kotak dialog Edit DataBindings di Gambar 10 tidak menyertakan kotak centang Pengikatan data dua arah yang ada saat mengedit TemplateField di GridView atau DetailsView, atau templat di FormView. Fitur pengikatan data dua arah memungkinkan nilai yang dimasukkan ke dalam kontrol Web input untuk secara otomatis ditetapkan ke ObjectDataSource yang InsertParameters sesuai atau UpdateParameters saat menyisipkan atau memperbarui data. DataList tidak mendukung pengikatan data dua arah seperti yang akan kita lihat nanti dalam tutorial ini, setelah pengguna membuat perubahannya dan siap untuk memperbarui data, kita perlu mengakses properti TextBoxes Text ini secara terprogram dan meneruskan nilainya ke metode yang sesuai UpdateProduct di ProductsBLL kelas.

Terakhir, kita perlu menambahkan tombol Perbarui dan Batalkan ke EditItemTemplate. Seperti yang kita lihat di Master/Detail Menggunakan Daftar Catatan Master Berpoin dengan tutorial Detail DataList , ketika tombol, LinkButton, atau ImageButton yang propertinya CommandName diatur diklik dari dalam Repeater atau DataList, peristiwa Repeater atau DataList ItemCommand dinaikkan. Untuk DataList, jika CommandName properti diatur ke nilai tertentu, peristiwa tambahan juga dapat dinaikkan. Nilai properti khusus CommandName meliputi, antara lain:

• Batal menaikkan CancelCommand acara
• Edit akan memunculkan EditCommand peristiwa
• Pembaruan memunculkan UpdateCommand peristiwa

Perlu diingat bahwa peristiwa ini dimunculkan acara.

Tambahkan ke EditItemTemplate dua kontrol Web Tombol, yang CommandName diatur ke Perbarui dan yang lainnya diatur ke Batal. Setelah menambahkan dua kontrol Web Tombol ini, Perancang akan terlihat mirip dengan yang berikut ini:

Gambar 11: Tambahkan Tombol Perbarui dan Batalkan EditItemTemplate ke (Klik untuk melihat gambar ukuran penuh)

Dengan lengkapnya EditItemTemplate markup deklaratif DataList Anda akan terlihat mirip dengan yang berikut ini:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" RepeatColumns="2">
    <ItemTemplate>
        <h5>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>' />
        </h5>
        Price: <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
        <br />
        <br />
    </ItemTemplate>
    <EditItemTemplate>
        Product name:
            <asp:TextBox ID="ProductName" runat="server"
                Text='<%# Eval("ProductName") %>' /><br />
        Price:
            <asp:TextBox ID="UnitPrice" runat="server"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' /><br />
        <br />
        <asp:Button ID="UpdateProduct" runat="server"
            CommandName="Update" Text="Update" /> 
        <asp:Button ID="CancelUpdate" runat="server"
            CommandName="Cancel" Text="Cancel" />
    </EditItemTemplate>
</asp:DataList>

Langkah 5: Menambahkan Pipa pipa untuk Memasuki Mode Edit

Pada titik ini, DataList kami memiliki antarmuka pengeditan yang ditentukan melalui ; EditItemTemplatenamun, saat ini tidak ada cara bagi pengguna yang mengunjungi halaman kami untuk menunjukkan bahwa ia ingin mengedit informasi produk. Kita perlu menambahkan tombol Edit ke setiap produk yang, ketika diklik, merender item DataList tersebut dalam mode edit. Mulailah dengan menambahkan tombol Edit ke ItemTemplate, baik melalui Perancang atau secara deklaratif. Pastikan untuk mengatur properti Edit tombol s CommandName ke Edit .

Setelah Anda menambahkan tombol Edit ini, luangkan waktu sejenak untuk melihat halaman melalui browser. Dengan penambahan ini, setiap daftar produk harus menyertakan tombol Edit.

Gambar 12: Tambahkan Tombol Perbarui dan Batalkan EditItemTemplate ke (Klik untuk melihat gambar ukuran penuh)

Mengklik tombol menyebabkan postback, tetapi tidak membawa daftar produk ke mode edit. Untuk membuat produk dapat diedit, kita perlu:

1. Atur propertiEditItemIndex ke indeks tombol DataListItem Edit yang baru saja diklik.
2. Ikat ulang data ke DataList. Saat DataList dirender ulang, DataListItem yang ItemIndex sesuai dengan DataList akan EditItemIndex dirender menggunakan EditItemTemplate.

Karena peristiwa DataList EditCommand diaktifkan saat tombol Edit diklik, buat penanganan EditCommand aktivitas dengan kode berikut:

protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property to the
    // index of the DataListItem that was clicked
    DataList1.EditItemIndex = e.Item.ItemIndex;
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Penanganan EditCommand aktivitas diteruskan dalam objek jenis DataListCommandEventArgs sebagai parameter input kedua, yang mencakup referensi ke DataListItem tombol Edit yang diklik (e.Item). Penanganan aktivitas pertama-tama mengatur DataList EditItemIndex ke ItemIndex data yang dapat DataListItem diedit lalu mengikat ulang data ke DataList dengan memanggil metode DataList.DataBind()

Setelah menambahkan penanganan aktivitas ini, kunjungi kembali halaman di browser. Mengklik tombol Edit sekarang membuat produk yang diklik dapat diedit (lihat Gambar 13).

Gambar 13: Mengklik Tombol Edit Membuat Produk Dapat Diedit (Klik untuk melihat gambar ukuran penuh)

Langkah 6: Menyimpan Perubahan Pengguna

Mengklik tombol Perbarui atau Batalkan produk yang diedit tidak melakukan apa pun pada saat ini; untuk menambahkan fungsionalitas ini, kita perlu membuat penanganan aktivitas untuk DataList s UpdateCommand dan CancelCommand peristiwa. Mulailah dengan membuat CancelCommand penanganan aktivitas, yang akan dijalankan ketika tombol Batalkan produk yang diedit diklik dan ditugaskan untuk mengembalikan DataList ke status pra-pengeditannya.

Agar DataList merender semua itemnya dalam mode baca-saja, kita perlu:

1. Atur propertiEditItemIndex ke indeks indeks yang tidak adaDataListItem. -1 adalah pilihan yang aman, karena DataListItem indeks dimulai dari 0.
2. Ikat ulang data ke DataList. Karena tidak ada DataListItemItemIndex es yang sesuai dengan DataList, EditItemIndexseluruh DataList akan dirender dalam mode baca-saja.

Langkah-langkah ini dapat dicapai dengan kode penanganan aktivitas berikut:

protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property to -1
    DataList1.EditItemIndex = -1;
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Dengan penambahan ini, mengklik tombol Batalkan mengembalikan DataList ke status pra-pengeditannya.

Penanganan aktivitas terakhir yang perlu kita selesaikan adalah penanganan UpdateCommand aktivitas. Penanganan aktivitas ini perlu:

1. Akses nama dan harga produk yang dimasukkan pengguna secara terprogram serta produk yang diedit.ProductID
2. Mulai proses pembaruan dengan memanggil kelebihan beban yang sesuai UpdateProduct di ProductsBLL kelas.
3. Atur propertiEditItemIndex ke indeks indeks yang tidak adaDataListItem. -1 adalah pilihan yang aman, karena DataListItem indeks dimulai dari 0.
4. Ikat ulang data ke DataList. Karena tidak ada DataListItemItemIndex es yang sesuai dengan DataList, EditItemIndexseluruh DataList akan dirender dalam mode baca-saja.

Langkah 1 dan 2 bertanggung jawab untuk menyimpan perubahan pengguna; langkah 3 dan 4 mengembalikan DataList ke status pra-pengeditannya setelah perubahan disimpan dan identik dengan langkah-langkah yang dilakukan di CancelCommand penanganan aktivitas.

Untuk mendapatkan nama dan harga produk yang diperbarui, kita perlu menggunakan FindControl metode untuk mereferensikan kontrol Web TextBox secara terprogram dalam EditItemTemplate. Kita juga perlu mendapatkan nilai produk yang ProductID diedit. Ketika kami awalnya mengikat ObjectDataSource ke DataList, Visual Studio menetapkan properti DataList ke DataKeyField nilai kunci utama dari sumber data (ProductID). Nilai ini kemudian dapat diambil dari koleksi DataList DataKeys . Luangkan waktu sejenak DataKeyField untuk memastikan bahwa properti memang diatur ke ProductID.

Kode berikut mengimplementasikan empat langkah:

protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
    // Read in the product name and price values
    TextBox productName = (TextBox)e.Item.FindControl("ProductName");
    TextBox unitPrice = (TextBox)e.Item.FindControl("UnitPrice");
    string productNameValue = null;
    if (productName.Text.Trim().Length > 0)
        productNameValue = productName.Text.Trim();
    decimal? unitPriceValue = null;
    if (unitPrice.Text.Trim().Length > 0)
        unitPriceValue = Decimal.Parse(unitPrice.Text.Trim(),
            System.Globalization.NumberStyles.Currency);
    // Call the ProductsBLL's UpdateProduct method...
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.UpdateProduct(productNameValue, unitPriceValue, productID);
    // Revert the DataList back to its pre-editing state
    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}

Penanganan aktivitas dimulai dengan membaca produk yang ProductID diedit dari DataKeys koleksi. Selanjutnya, dua Kotak Teks dalam dirujuk EditItemTemplate dan propertinya Text disimpan dalam variabel lokal, productNameValue dan unitPriceValue. Kami menggunakan Decimal.Parse() metode untuk membaca nilai dari UnitPrice TextBox sehingga jika nilai yang dimasukkan memiliki simbol mata uang, itu masih dapat dikonversi dengan benar menjadi Decimal nilai.

Catatan

Nilai dari ProductName kotak teks dan UnitPrice hanya ditetapkan ke variabel productNameValue dan unitPriceValue jika properti TextBoxes Text memiliki nilai yang ditentukan. Jika tidak, nilai Nothing digunakan untuk variabel, yang memiliki efek memperbarui data dengan nilai database NULL . Artinya, kode kami memperlakukan konversi string kosong ke nilai database NULL , yang merupakan perilaku default antarmuka pengeditan di kontrol GridView, DetailsView, dan FormView.

Setelah membaca nilai, ProductsBLL metode kelas s UpdateProduct dipanggil, meneruskan nama produk, harga, dan ProductID. Penanganan aktivitas selesai dengan mengembalikan DataList ke status pra-pengeditannya menggunakan logika yang sama persis seperti di CancelCommand penanganan aktivitas.

EditCommandDengan penanganan aktivitas , CancelCommand, dan UpdateCommand selesai, pengunjung dapat mengedit nama dan harga produk. Gambar 14-16 memperlihatkan alur kerja pengeditan ini dalam tindakan.

Gambar 14: Saat Pertama Kali Mengunjungi Halaman, Semua Produk berada dalam Mode Baca-Saja (Klik untuk melihat gambar ukuran penuh)

Gambar 15: Untuk Memperbarui Nama atau Harga Produk, Klik Tombol Edit (Klik untuk melihat gambar ukuran penuh)

Gambar 16: Setelah Mengubah Nilai, Klik Perbarui untuk Kembali ke Mode Baca-Saja (Klik untuk melihat gambar ukuran penuh)

Langkah 7: Menambahkan Kemampuan Hapus

Langkah-langkah untuk menambahkan kemampuan penghapusan ke DataList mirip dengan langkah-langkah untuk menambahkan kemampuan pengeditan. Singkatnya, kita perlu menambahkan tombol Hapus ke tombol tersebut ItemTemplate , saat diklik:

1. Membaca dalam produk ProductID yang sesuai melalui DataKeys koleksi.
2. Melakukan penghapusan dengan memanggil ProductsBLL metode kelas s DeleteProduct .
3. Mengikat ulang data ke DataList.

Mari kita mulai dengan menambahkan tombol Hapus ke ItemTemplate.

Saat diklik, Tombol yang CommandName merupakan Edit, Perbarui, atau Batal menaikkan peristiwa DataList bersama ItemCommand dengan peristiwa tambahan (misalnya, saat menggunakan Edit EditCommand acara juga dinaikkan). Demikian pula, Tombol, LinkButton, atau ImageButton apa pun di DataList yang propertinya CommandName diatur ke Hapus menyebabkan DeleteCommand peristiwa diaktifkan (bersama dengan ItemCommand).

Tambahkan tombol Hapus di samping tombol Edit di ItemTemplate, atur propertinya CommandName ke Hapus. Setelah menambahkan tombol ini, kontrol sintaks deklaratif DataList ItemTemplate Anda akan terlihat seperti:

<ItemTemplate>
    <h5>
        <asp:Label runat="server" ID="ProductNameLabel"
            Text='<%# Eval("ProductName") %>' />
    </h5>
    Price: <asp:Label runat="server" ID="Label1"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    <br />
    <asp:Button runat="server" id="EditProduct" CommandName="Edit"
        Text="Edit" />
     
    <asp:Button runat="server" id="DeleteProduct" CommandName="Delete"
        Text="Delete" />
    <br />
    <br />
</ItemTemplate>

Selanjutnya, buat penanganan aktivitas untuk peristiwa DataList, DeleteCommand menggunakan kode berikut:

protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
{
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
    // Delete the data
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.DeleteProduct(productID);
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Mengklik tombol Hapus menyebabkan postback dan mengaktifkan peristiwa DataList DeleteCommand . Di penanganan aktivitas, nilai produk yang ProductID diklik diakses dari DataKeys koleksi. Selanjutnya, produk dihapus dengan memanggil ProductsBLL metode kelas s DeleteProduct .

Setelah menghapus produk, penting bagi kami untuk menggabungkan kembali data ke DataList (DataList1.DataBind()), jika tidak, DataList akan terus menampilkan produk yang baru saja dihapus.

Ringkasan

Meskipun DataList tidak memiliki titik dan mengklik pengeditan dan penghapusan dukungan yang dinikmati oleh GridView, dengan sedikit kode dapat ditingkatkan untuk menyertakan fitur-fitur ini. Dalam tutorial ini kita melihat cara membuat daftar dua kolom produk yang dapat dihapus dan yang nama dan harganya dapat diedit. Menambahkan dukungan pengeditan dan penghapusan adalah masalah termasuk kontrol Web yang sesuai di ItemTemplate dan EditItemTemplate, membuat penanganan peristiwa yang sesuai, membaca nilai kunci yang dimasukkan pengguna dan primer, dan berinteraksi dengan Lapisan Logika Bisnis.

Meskipun kami telah menambahkan kemampuan pengeditan dan penghapusan dasar ke DataList, kemampuan ini tidak memiliki fitur yang lebih canggih. Misalnya, tidak ada validasi bidang input - jika pengguna memasukkan harga Terlalu mahal, pengecualian akan dilemparkan ketika Decimal.Parse mencoba mengonversi Terlalu mahal menjadi Decimal. Demikian pula, jika ada masalah dalam memperbarui data di Logika Bisnis atau Lapisan Akses Data, pengguna akan disajikan dengan layar kesalahan standar. Tanpa konfirmasi apa pun pada tombol Hapus, secara tidak sengaja menghapus produk terlalu mungkin.

Dalam tutorial mendatang kita akan melihat cara meningkatkan pengalaman pengguna pengeditan.

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.

Terima kasih khusus untuk

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau utama untuk tutorial ini adalah Zack Jones, Ken Pespisa, dan Randy Schmidt. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

Berikutnya