Menambahkan Konfirmasi di Sisi Klien Saat Menghapus (VB)

oleh Scott Mitchell

Unduh PDF

Dalam antarmuka yang telah kita buat sejauh ini, pengguna dapat secara tidak sengaja menghapus data dengan mengklik tombol Hapus saat mereka bermaksud mengklik tombol Edit. Dalam tutorial ini kita akan menambahkan kotak dialog konfirmasi sisi klien yang muncul saat tombol Hapus diklik.

Pendahuluan

Selama beberapa tutorial sebelumnya, kita telah mempelajari cara menggunakan arsitektur aplikasi kami, ObjectDataSource, dan kontrol data Web secara bersamaan untuk menyediakan kemampuan menyisipkan, mengedit, dan menghapus. Antarmuka penghapusan yang telah kami periksa sejauh ini telah terdiri dari tombol Hapus yang, ketika diklik, menyebabkan postback dan memanggil metode ObjectDataSource s Delete() . Metode Delete() kemudian memanggil metode yang dikonfigurasi dari Lapisan Logika Bisnis, yang meneruskan panggilan ke Lapisan Akses Data, mengeluarkan pernyataan DELETE yang sebenarnya ke database.

Meskipun antarmuka pengguna ini memungkinkan pengunjung untuk menghapus rekaman melalui kontrol GridView, DetailsView, atau FormView, antarmuka pengguna ini tidak memiliki semacam konfirmasi ketika pengguna mengklik tombol Hapus. Jika pengguna secara tidak sengaja mengklik tombol Hapus saat mereka dimaksudkan untuk mengklik Edit, rekaman yang dimaksudkan untuk diperbarui akan dihapus. Untuk membantu mencegah hal ini, dalam tutorial ini kita akan menambahkan kotak dialog konfirmasi sisi klien yang muncul saat tombol Hapus diklik.

Fungsi JavaScript confirm(string) menampilkan parameter input string-nya sebagai teks di dalam kotak dialog modal yang dilengkapi dengan dua tombol - OK dan Batal (lihat Gambar 1). Fungsi confirm(string) mengembalikan nilai Boolean tergantung pada tombol apa yang diklik (true, jika pengguna mengklik OK, dan false jika mereka mengklik Batal).

Gambar 1: Metode JavaScript confirm(string) Menampilkan Modal, Client-Side Kotak Pesan

Selama pengiriman formulir, jika nilai false dikembalikan dari penanganan aktivitas sisi klien, maka pengiriman formulir dibatalkan. Dengan menggunakan fitur ini, kita dapat memiliki penangan aktivitas sisi onclick klien tombol Hapus mengembalikan nilai panggilan ke confirm("Are you sure you want to delete this product?"). Jika pengguna mengklik Batal, confirm(string) akan mengembalikan false, sehingga menyebabkan pengiriman formulir dibatalkan. Tanpa postback, produk yang tombol Hapusnya diklik tidak akan dihapus. Namun, jika pengguna mengklik OK dalam kotak dialog konfirmasi, postback akan terus berlanjut tanpa terhenti dan produk akan dihapus. Konsultasikan Menggunakan Metode JavaScript confirm() untuk Mengontrol Pengiriman Formulir untuk informasi selengkapnya tentang teknik ini.

Menambahkan skrip sisi klien yang diperlukan sedikit berbeda jika menggunakan templat daripada saat menggunakan CommandField. Oleh karena itu, dalam tutorial ini kita akan melihat contoh FormView dan GridView.

Nota

Menggunakan teknik konfirmasi sisi klien, seperti yang dibahas dalam tutorial ini, mengasumsikan bahwa pengguna Anda mengunjungi dengan browser yang mendukung JavaScript dan bahwa mereka mengaktifkan JavaScript. Jika salah satu asumsi ini tidak benar untuk pengguna tertentu, mengklik tombol Hapus akan segera menyebabkan postback (tidak menampilkan kotak pesan konfirmasi).

Langkah 1: Membuat FormView yang Mendukung Penghapusan

Mulailah dengan menambahkan FormView ke ConfirmationOnDelete.aspx halaman di EditInsertDelete folder, mengaitkannya dengan ObjectDataSource baru yang mengambil kembali informasi produk di kelas ProductsBLL melalui metode GetProducts(). Konfigurasikan juga ObjectDataSource sehingga ProductsBLL metode kelas s DeleteProduct(productID) dipetakan ke metode ObjectDataSource s Delete() ; pastikan bahwa daftar drop-down tab INSERT dan UPDATE diatur ke (Tidak Ada). Terakhir, centang kotak centang Aktifkan Paging di tag cerdas FormView.

Setelah langkah-langkah ini, markup deklaratif ObjectDataSource baru akan terlihat seperti berikut ini:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    DeleteMethod="DeleteProduct" OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
    <DeleteParameters>
        <asp:Parameter Name="productID" Type="Int32" />
    </DeleteParameters>
</asp:ObjectDataSource>

Seperti contoh masa lalu kami yang tidak menggunakan konkurensi optimis, luangkan waktu sejenak untuk menghapus properti ObjectDataSource.OldValuesParameterFormatString

Karena telah terikat ke kontrol ObjectDataSource yang hanya mendukung penghapusan, FormView hanya ItemTemplate menawarkan tombol Hapus, tidak memiliki tombol Baru dan Perbarui. Namun, markup deklaratif FormView mencakup EditItemTemplate berlebihan dan InsertItemTemplate, yang dapat dihapus. Luangkan waktu sejenak ItemTemplate untuk menyesuaikan sehingga hanya memperlihatkan subset bidang data produk. Saya telah mengonfigurasi saya punya konfigurasi untuk menunjukkan nama produk dalam judul <h3> di atas nama pemasok dan kategori (bersama dengan tombol Hapus).

<asp:FormView ID="FormView1" AllowPaging="True" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" runat="server">
    <ItemTemplate>
        <h3><i><%# Eval("ProductName") %></i></h3>
        <b>Category:</b>
        <asp:Label ID="CategoryNameLabel" runat="server"
            Text='<%# Eval("CategoryName") %>'>
        </asp:Label><br />
        <b>Supplier:</b>
        <asp:Label ID="SupplierNameLabel" runat="server"
            Text='<%# Eval("SupplierName") %>'>
        </asp:Label><br />
        <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
            CommandName="Delete" Text="Delete">
        </asp:LinkButton>
    </ItemTemplate>
</asp:FormView>

Dengan perubahan ini, kami memiliki halaman web yang berfungsi penuh yang memungkinkan pengguna untuk beralih melalui produk satu per satu, dengan kemampuan untuk menghapus produk hanya dengan mengklik tombol Hapus. Gambar 2 menunjukkan cuplikan layar kemajuan kami sejauh ini ketika dilihat melalui browser.

Gambar 2: FormView Menampilkan Informasi Tentang Satu Produk (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Memanggil fungsi confirm(string) dari tombol hapus Client-Side peristiwa onclick

Dengan FormView yang dibuat, langkah terakhir adalah mengonfigurasi tombol Hapus agar ketika diklik pengunjung, fungsi JavaScript confirm(string) dipanggil. Menambahkan skrip sisi klien ke peristiwa sisi klien pada Button, LinkButton, atau ImageButton dapat dilakukan melalui penggunaan onclick, yang baru di ASP.NET 2.0. Karena kita ingin memiliki nilai fungsi yang confirm(string) dikembalikan, cukup atur properti ini ke: return confirm('Are you certain that you want to delete this product?');

Setelah perubahan ini, sintaks deklaratif Delete LinkButton akan terlihat seperti:

<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
    CommandName="Delete" Text="Delete"
    OnClientClick="return confirm('Are you certain you want to delete this product?');">
</asp:LinkButton>

Sekian saja! Gambar 3 menunjukkan cuplikan layar konfirmasi ini yang sedang berjalan. Mengklik tombol Hapus memunculkan kotak dialog konfirmasi. Jika pengguna mengklik Batal, postback dibatalkan dan produk tidak dihapus. Namun, jika pengguna mengklik OK, postback berlanjut dan metode ObjectDataSource s Delete() dipanggil, yang berujung pada rekaman database yang dihapus.

Nota

String yang diteruskan ke confirm(string) fungsi JavaScript dibatasi dengan apostrof (bukan tanda kutip). Di JavaScript, string dapat dibatasi menggunakan salah satu karakter. Kami menggunakan apostrof di sini agar pemisah untuk string yang diteruskan ke confirm(string) tidak menimbulkan ambiguitas dengan pemisah yang digunakan untuk nilai properti OnClientClick.

Gambar 3: Konfirmasi Sekarang Ditampilkan Saat Mengklik Tombol Hapus (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Mengonfigurasi Properti OnClientClick untuk Tombol Hapus di CommandField

Saat bekerja dengan Tombol, LinkButton, atau ImageButton langsung dalam templat, kotak dialog konfirmasi dapat dikaitkan dengannya hanya dengan mengonfigurasi propertinya OnClientClick untuk mengembalikan hasil fungsi JavaScript confirm(string) . Namun, CommandField - yang menambahkan bidang tombol Hapus ke GridView atau DetailsView - tidak memiliki OnClientClick properti yang dapat diatur secara deklaratif. Sebagai gantinya, kita harus secara terprogram mereferensikan tombol Hapus di GridView atau DetailsView penanganan aktivitas yang sesuai DataBound , lalu mengatur propertinya OnClientClick di sana.

Nota

Saat mengatur properti tombol Hapus OnClientClick di penangan peristiwa yang sesuai DataBound, kami memiliki akses ke data yang terikat pada rekaman saat ini. Ini berarti kita dapat memperluas pesan konfirmasi untuk menyertakan detail tentang catatan tertentu, seperti, "Apakah Anda yakin ingin menghapus produk Chai?" Penyesuaian tersebut juga dimungkinkan dalam templat menggunakan sintaks pengikatan data.

Untuk berlatih mengatur OnClientClick properti untuk tombol Hapus di CommandField, mari kita tambahkan GridView ke halaman. Konfigurasikan GridView ini untuk menggunakan kontrol ObjectDataSource yang sama dengan yang digunakan FormView. Batasi juga GridView s BoundFields untuk hanya menyertakan nama, kategori, dan pemasok produk. Terakhir, centang kotak opsi aktifkan penghapusan dari tag pintar GridView. Ini akan menambahkan CommandField ke koleksi GridView Columns dengan propertinya ShowDeleteButton diatur ke true.

Setelah membuat perubahan ini, markup deklaratif GridView Anda akan terlihat seperti berikut ini:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:CommandField ShowDeleteButton="True" />
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="True"
            SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="True"
            SortExpression="SupplierName" />
    </Columns>
</asp:GridView>

CommandField berisi satu instans Delete LinkButton yang dapat diakses secara terprogram dari penanganan aktivitas GridView RowDataBound . Setelah dirujuk, kita dapat mengatur propertinya OnClientClick dengan sesuai. Buat penanganan aktivitas untuk RowDataBound peristiwa menggunakan kode berikut:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
    ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles GridView1.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        ' reference the Delete LinkButton
        Dim db As LinkButton = CType(e.Row.Cells(0).Controls(0), LinkButton)

        ' Get information about the product bound to the row
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)

        db.OnClientClick = String.Format( _
            "return confirm('Are you certain you want to delete the {0} product?');", _
            product.ProductName.Replace("'", "\'"))
    End If
End Sub

Penanganan aktivitas ini bekerja dengan baris data (yang akan memiliki tombol Hapus) dan dimulai dengan merujuk tombol Hapus secara terprogram. Secara umum gunakan pola berikut:

Dim obj As ButtonType = _
    CType(e.Row.Cells(commandFieldIndex).Controls(controlIndex), ButtonType)

ButtonType adalah jenis tombol yang digunakan oleh CommandField - Button, LinkButton, atau ImageButton. Secara default, CommandField menggunakan LinkButtons, tetapi ini dapat disesuaikan melalui CommandField ButtonType property. CommandFieldIndex adalah indeks ordinal CommandField dalam koleksi GridView, Columns sedangkan controlIndex adalah indeks tombol Hapus dalam koleksi CommandField.Controls Nilai controlIndex tergantung pada posisi tombol s relatif terhadap tombol lain di CommandField. Misalnya, jika satu-satunya tombol yang ditampilkan di CommandField adalah tombol Hapus, gunakan indeks 0. Namun, jika ada tombol Edit yang mendahului tombol Hapus, gunakan indeks 2. Alasan indeks 2 digunakan adalah karena dua kontrol ditambahkan oleh CommandField sebelum tombol Hapus: tombol Edit dan LiteralControl yang digunakan untuk menambahkan beberapa ruang antara tombol Edit dan Hapus.

Untuk contoh khusus kami, CommandField menggunakan LinkButtons dan, sebagai bidang paling kiri, memiliki commandFieldIndex sebesar 0. Karena tidak ada tombol lain tetapi tombol Hapus di CommandField, kami menggunakan controlIndex 0.

Setelah merujuk tombol Hapus di CommandField, kami selanjutnya mengambil informasi tentang produk yang terikat ke baris GridView saat ini. Terakhir, kami mengatur properti Hapus tombol s OnClientClick ke JavaScript yang sesuai, yang menyertakan nama produk. Karena string JavaScript yang diteruskan ke fungsi confirm(string) dibatasi menggunakan apostrof, kita harus keluar dari apostrof apa pun yang muncul dalam nama produk. Secara khusus, setiap apostrof dalam nama produk digantikan dengan "\'".

Setelah perubahan ini selesai, mengklik tombol Hapus di kotak dialog GridView menampilkan konfirmasi yang dikustomisasi (lihat Gambar 4). Seperti halnya kotak pesan konfirmasi dari FormView, jika pengguna mengklik Batalkan, maka postback dibatalkan, sehingga penghapusan tidak terjadi.

Nota

Teknik ini juga dapat digunakan untuk mengakses tombol Hapus secara terprogram di CommandField dalam DetailsView. Namun, untuk DetailsView, Anda perlu membuat penanganan peristiwa untuk DataBound, karena DetailsView tidak memiliki peristiwa RowDataBound.

Gambar 4: Mengklik Tombol Hapus Tampilan Kisi Menampilkan Kotak Dialog Konfirmasi yang Disesuaikan (Klik untuk melihat gambar ukuran penuh)

Menggunakan TemplateFields

Salah satu kerugian dari CommandField adalah bahwa tombolnya harus diakses melalui pengindeksan dan bahwa objek yang dihasilkan harus dilemparkan ke jenis tombol yang sesuai (Tombol, LinkButton, atau ImageButton). Menggunakan "angka ajaib" dan tipe yang dikodekan secara keras mengundang masalah yang tidak dapat ditemukan saat waktu eksekusi. Misalnya, jika Anda, atau pengembang lain, menambahkan tombol baru ke CommandField di beberapa titik di masa mendatang (seperti tombol Edit) atau mengubah ButtonType properti, kode yang ada masih akan dikompilasi tanpa kesalahan, tetapi mengunjungi halaman dapat menyebabkan pengecualian atau perilaku yang tidak terduga, tergantung pada bagaimana kode Anda ditulis dan perubahan apa yang dibuat.

Pendekatan alternatif adalah mengonversi GridView dan DetailsView s CommandFields menjadi TemplateFields. Ini akan menghasilkan TemplateField dengan ItemTemplate yang memiliki LinkButton (atau Tombol atau ImageButton) untuk setiap tombol di CommandField. Properti tombol OnClientClick ini dapat ditetapkan secara deklaratif, seperti yang kita lihat dengan FormView, atau dapat diakses secara terprogram di penanganan aktivitas yang sesuai DataBound menggunakan pola berikut:

Dim obj As ButtonType = CType(e.Row.FindControl("controlID"), ButtonType)

Di mana controlID adalah nilai properti tombol s ID . Meskipun pola ini masih memerlukan jenis yang dikodekan secara permanen untuk cast, pola ini menghapus kebutuhan untuk pengindeksan, memungkinkan tata letak berubah tanpa mengakibatkan kesalahan runtime.

Ringkasan

Fungsi JavaScript confirm(string) adalah teknik yang umum digunakan untuk mengontrol alur kerja pengiriman formulir. Saat dijalankan, fungsi menampilkan dialog kotak modal pada sisi klien yang menampilkan dua tombol, OK dan Batal. Jika pengguna mengklik OK, fungsi confirm(string) mengembalikan true; mengklik batal mengembalikan false. Fungsionalitas ini, ditambah dengan perilaku browser untuk membatalkan pengiriman formulir jika penanganan aktivitas selama proses pengiriman mengembalikan false, dapat digunakan untuk menampilkan kotak pesan konfirmasi saat menghapus rekaman.

Fungsi confirm(string) ini dapat dikaitkan dengan handler aktivitas sisi onclick klien kontrol Web Tombol melalui properti kontrol OnClientClick . Saat bekerja dengan tombol Hapus dalam templat - baik di salah satu templat FormView atau di TemplateField di DetailsView atau GridView - properti ini dapat diatur baik secara deklaratif atau terprogram, seperti yang kita lihat dalam tutorial ini.

Selamat Pemrograman!

Tentang Penulis

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

SebelumnyaBerikutnya