Menambahkan Kontrol Validasi ke Antarmuka Pengeditan DataList (VB)

oleh Scott Mitchell

Unduh PDF

Dalam tutorial ini kita akan melihat betapa mudahnya menambahkan kontrol validasi ke EditItemTemplate DataList untuk menyediakan antarmuka pengguna pengeditan yang lebih mudah.

Pendahuluan

Dalam tutorial pengeditan DataList sejauh ini, antarmuka pengeditan DataLists belum menyertakan validasi input pengguna proaktif meskipun input pengguna yang tidak valid seperti nama produk yang hilang atau harga negatif menghasilkan pengecualian. Dalam tutorial sebelumnya, kami memeriksa cara menambahkan kode penanganan pengecualian ke penanganan aktivitas DataList UpdateCommand untuk menangkap dan menampilkan informasi dengan baik tentang pengecualian apa pun yang dimunculkan. Namun, idealnya, antarmuka pengeditan akan mencakup kontrol validasi untuk mencegah pengguna memasukkan data yang tidak valid tersebut di tempat pertama.

Dalam tutorial ini kita akan melihat betapa mudahnya menambahkan kontrol validasi ke DataList EditItemTemplate untuk menyediakan antarmuka pengguna pengeditan yang lebih mudah. Secara khusus, tutorial ini mengambil contoh yang dibuat dalam tutorial sebelumnya dan menambah antarmuka pengeditan untuk menyertakan validasi yang sesuai.

Langkah 1: Mereplikasi Contoh dariMenangani Pengecualian Tingkat BLL dan DAL

Dalam tutorial Menangani Pengecualian Tingkat BLL dan DAL, kami membuat halaman yang mencantumkan nama dan harga produk dalam DataList dua kolom yang dapat diedit. Tujuan kami untuk tutorial ini adalah untuk menambah antarmuka pengeditan DataList untuk menyertakan kontrol validasi. Secara khusus, logika validasi kami akan:

• Mengharuskan nama produk disediakan
• Pastikan bahwa nilai yang dimasukkan untuk harga adalah format mata uang yang valid
• Pastikan bahwa nilai yang dimasukkan untuk harga lebih besar dari atau sama dengan nol, karena nilai negatif UnitPrice ilegal

Sebelum kita dapat melihat penambahan contoh sebelumnya untuk menyertakan validasi, pertama-tama kita perlu mereplikasi contoh dari ErrorHandling.aspx halaman di EditDeleteDataList folder ke halaman untuk tutorial ini, UIValidation.aspx. Untuk mencapai hal ini, kita perlu menyalin markup ErrorHandling.aspx deklaratif halaman dan kode sumbernya. Salin terlebih dahulu melalui markup deklaratif dengan melakukan langkah-langkah berikut:

1. Buka halaman di ErrorHandling.aspx Visual Studio
2. Buka markup deklaratif halaman (klik tombol Sumber di bagian bawah halaman)
3. Salin teks dalam <asp:Content> tag dan </asp:Content> (baris 3 hingga 32), seperti yang ditunjukkan pada Gambar 1.

Gambar 2: Salin Teks Dalam <asp:Content> Kontrol (Klik untuk melihat gambar ukuran penuh)

1. UIValidation.aspx Buka halaman
2. Masuk ke markup deklaratif halaman
3. Tempelkan teks dalam <asp:Content> kontrol.

Untuk menyalin kode sumber, buka ErrorHandling.aspx.vb halaman dan salin hanya teks dalamEditDeleteDataList_ErrorHandling kelas . Salin tiga penanganan aktivitas (Products_EditCommand, , dan Products_CancelCommand) bersama dengan Products_UpdateCommand metode , tetapi janganDisplayExceptionDetailssalin deklarasi atau pernyataan usingkelas. Tempelkan teks yang disalin dalamEditDeleteDataList_UIValidation kelas di UIValidation.aspx.vb.

Setelah memindahkan konten dan kode dari ErrorHandling.aspx ke UIValidation.aspx, luangkan waktu sejenak untuk menguji halaman di browser. Anda akan melihat output yang sama dan mengalami fungsionalitas yang sama di masing-masing dari dua halaman ini (lihat Gambar 2).

Gambar 2: UIValidation.aspx Halaman Menilik Fungsionalitas di ErrorHandling.aspx (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Menambahkan Kontrol Validasi ke DataList s EditItemTemplate

Saat membuat formulir entri data, penting bagi pengguna untuk memasukkan bidang yang diperlukan dan bahwa semua input yang disediakan adalah nilai legal dan diformat dengan benar. Untuk membantu memastikan bahwa input pengguna valid, ASP.NET menyediakan lima kontrol validasi bawaan yang dirancang untuk memvalidasi nilai kontrol Web input tunggal:

• RequiredFieldValidator memastikan bahwa nilai telah disediakan
• CompareValidator memvalidasi nilai terhadap nilai kontrol Web lain atau nilai konstanta, atau memastikan bahwa format nilai s legal untuk jenis data tertentu
• RangeValidator memastikan bahwa nilai berada dalam rentang nilai
• RegularExpressionValidator memvalidasi nilai terhadap ekspresi reguler
• CustomValidator memvalidator nilai terhadap metode kustom yang ditentukan pengguna

Untuk informasi selengkapnya tentang kelima kontrol ini, lihat kembali tutorial Menambahkan Kontrol Validasi ke Tutorial Mengedit dan Menyisipkan Antarmuka atau lihat bagian Kontrol Validasi dari Tutorial Mulai Cepat ASP.NET.

Untuk tutorial kami, kami harus menggunakan RequiredFieldValidator untuk memastikan bahwa nilai untuk nama produk telah disediakan dan CompareValidator untuk memastikan bahwa harga yang dimasukkan memiliki nilai yang lebih besar dari atau sama dengan 0 dan disajikan dalam format mata uang yang valid.

Catatan

Meskipun ASP.NET 1.x memiliki lima kontrol validasi yang sama ini, ASP.NET 2.0 telah menambahkan sejumlah peningkatan, dua utamanya adalah dukungan skrip sisi klien untuk browser selain Internet Explorer dan kemampuan untuk mempartisi kontrol validasi pada halaman ke dalam grup validasi. Untuk informasi selengkapnya tentang fitur kontrol validasi baru di 2.0, lihat Membedah Kontrol Validasi di ASP.NET 2.0.

Mari kita mulai dengan menambahkan kontrol validasi yang diperlukan ke DataList s EditItemTemplate. Tugas ini dapat dilakukan melalui Perancang dengan mengklik tautan Edit Templat dari tag pintar DataList, atau melalui sintaks deklaratif. Mari kita melangkah melalui proses menggunakan opsi Edit Templat dari tampilan Desain. Setelah memilih untuk mengedit DataList, EditItemTemplatetambahkan RequiredFieldValidator dengan menyeretnya dari Kotak Alat ke antarmuka pengeditan templat, menempatkannya setelah ProductName Kotak Teks.

Gambar 3: Tambahkan RequiredFieldValidator ke EditItemTemplate AfterProductName Kotak Teks (Klik untuk melihat gambar ukuran penuh)

Semua kontrol validasi berfungsi dengan memvalidasi input kontrol Web ASP.NET tunggal. Oleh karena itu, kita perlu menunjukkan bahwa RequiredFieldValidator yang baru saja kita tambahkan harus memvalidasi terhadap ProductName TextBox; ini dilakukan dengan mengatur propertiControlToValidate validasi ke ID kontrol Web yang sesuai (ProductName, dalam instans ini). Selanjutnya, atur properti keErrorMessageAnda harus memberikan nama produk danTextproperti ke *. Nilai Text properti, jika disediakan, adalah teks yang ditampilkan oleh kontrol validasi jika validasi gagal. Nilai ErrorMessage properti, yang diperlukan, digunakan oleh kontrol ValidationSummary; jika Text nilai properti dihilangkan, ErrorMessage nilai properti ditampilkan oleh kontrol validasi pada input yang tidak valid.

Setelah mengatur ketiga properti RequiredFieldValidator ini, layar Anda akan terlihat mirip dengan Gambar 4.

Gambar 4: Atur Properti , , ControlToValidate, dan ErrorMessage RequiredFieldValidator Text(Klik untuk melihat gambar ukuran penuh)

Dengan RequiredFieldValidator ditambahkan ke EditItemTemplate, yang tersisa adalah menambahkan validasi yang diperlukan untuk textBox harga produk. UnitPrice Karena bersifat opsional saat mengedit rekaman, kita tidak perlu menambahkan RequiredFieldValidator. Namun, kami perlu menambahkan CompareValidator untuk memastikan bahwa UnitPrice, jika disediakan, diformat dengan benar sebagai mata uang dan lebih besar dari atau sama dengan 0.

Tambahkan CompareValidator ke dalam EditItemTemplate dan atur propertinya ControlToValidate ke UnitPrice, propertinya ErrorMessage ke Harga harus lebih besar dari atau sama dengan nol dan tidak dapat menyertakan simbol mata uang, dan propertinya Text ke *. Untuk menunjukkan bahwa UnitPrice nilai harus lebih besar dari atau sama dengan 0, atur propertiOperatorCompareValidator ke GreaterThanEqual , propertinya ValueToCompare ke 0, dan propertinyaType ke .Currency

Setelah menambahkan dua kontrol validasi ini, sintaks deklaratif DataList EditItemTemplate akan terlihat mirip dengan yang berikut ini:

<EditItemTemplate>
    Product name:
        <asp:TextBox ID="ProductName" runat="server"
            Text='<%# Eval("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            ControlToValidate="ProductName"
            ErrorMessage="You must provide the product's name"
            runat="server">*</asp:RequiredFieldValidator>
    <br />
    Price:
        <asp:TextBox ID="UnitPrice" runat="server"
            Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1"
            ControlToValidate="UnitPrice"
            ErrorMessage="The price must be greater than or equal to zero
                          and cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
            runat="server">*</asp:CompareValidator><br />
    <br />
    <asp:Button ID="UpdateProduct" runat="server" CommandName="Update"
        Text="Update" /> 
    <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel"
        Text="Cancel" />
</EditItemTemplate>

Setelah membuat perubahan ini, buka halaman di browser. Jika Anda mencoba menghilangkan nama atau memasukkan nilai harga yang tidak valid saat mengedit produk, tanda bintang muncul di samping kotak teks. Seperti yang ditunjukkan Gambar 5, nilai harga yang menyertakan simbol mata uang seperti $19,95 dianggap tidak valid. CompareValidator memungkinkan CurrencyType pemisah digit (seperti koma atau titik, tergantung pada pengaturan budaya) dan tanda plus atau minus terkemuka, tetapi tidak mengizinkan simbol mata uang. Perilaku ini dapat memikat pengguna karena antarmuka pengeditan saat ini merender UnitPrice menggunakan format mata uang.

Gambar 5: Tanda Bintang Muncul di Samping Kotak Teks dengan Input Tidak Valid (Klik untuk melihat gambar ukuran penuh)

Meskipun validasi berfungsi apa adanya, pengguna harus menghapus simbol mata uang secara manual saat mengedit rekaman, yang tidak dapat diterima. Selain itu, jika ada input yang tidak valid di antarmuka pengeditan, tombol Perbarui atau Batalkan, ketika diklik, akan memanggil postback. Idealnya, tombol Batalkan akan mengembalikan DataList ke status pra-pengeditannya terlepas dari validitas input pengguna. Selain itu, kita perlu memastikan bahwa data halaman valid sebelum memperbarui informasi produk di penanganan aktivitas DataList UpdateCommand , karena validasi mengontrol logika sisi klien dapat dilewati oleh pengguna yang browsernya tidak mendukung JavaScript atau menonaktifkan dukungannya.

Menghapus Simbol Mata Uang dari Kotak Teks EditItemTemplate s UnitPrice

Saat menggunakan CompareValidator s Currency``Type, input yang sedang divalidasi tidak boleh menyertakan simbol mata uang apa pun. Kehadiran simbol tersebut menyebabkan CompareValidator menandai input sebagai tidak valid. Namun, antarmuka pengeditan kami saat ini menyertakan simbol mata uang di UnitPrice TextBox, yang berarti pengguna harus secara eksplisit menghapus simbol mata uang sebelum menyimpan perubahannya. Untuk memperbaikinya, kami memiliki tiga opsi:

1. Konfigurasikan EditItemTemplate agar UnitPrice nilai TextBox tidak diformat sebagai mata uang.
2. Izinkan pengguna memasukkan simbol mata uang dengan menghapus CompareValidator dan menggantinya dengan RegularExpressionValidator yang memeriksa nilai mata uang yang diformat dengan benar. Tantangannya di sini adalah bahwa ekspresi reguler untuk memvalidasi nilai mata uang tidak sesingkat CompareValidator dan akan memerlukan penulisan kode jika kita ingin menggabungkan pengaturan budaya.
3. Hapus kontrol validasi sama sekali dan andalkan logika validasi sisi server kustom di penanganan aktivitas GridView RowUpdating .

Mari kita pergi dengan opsi 1 untuk tutorial ini. Saat ini diformat UnitPrice sebagai nilai mata uang karena ekspresi pengikatan data untuk TextBox di EditItemTemplate: <%# Eval("UnitPrice", "{0:c}") %>. Eval Ubah pernyataan menjadi Eval("UnitPrice", "{0:n2}"), yang memformat hasil sebagai angka dengan dua digit presisi. Ini dapat dilakukan langsung melalui sintaks deklaratif atau dengan mengklik tautan Edit DataBindings dari UnitPrice TextBox di DataList s EditItemTemplate.

Dengan perubahan ini, harga yang diformat dalam antarmuka pengeditan mencakup koma sebagai pemisah grup dan periode sebagai pemisah desimal, tetapi meninggalkan simbol mata uang.

Catatan

Saat menghapus format mata uang dari antarmuka yang dapat diedit, saya merasa berguna untuk menempatkan simbol mata uang sebagai teks di luar Kotak Teks. Ini berfungsi sebagai petunjuk bagi pengguna bahwa mereka tidak perlu memberikan simbol mata uang.

Memperbaiki Tombol Batal

Secara default, kontrol Web validasi memancarkan JavaScript untuk melakukan validasi di sisi klien. Saat Tombol, LinkButton, atau ImageButton diklik, kontrol validasi pada halaman dicentang di sisi klien sebelum postback terjadi. Jika ada data yang tidak valid, postback dibatalkan. Namun, untuk Tombol tertentu, validitas data mungkin imaterial; dalam kasus seperti itu, membatalkan postback karena data yang tidak valid adalah gangguan.

Tombol Batalkan adalah contoh seperti itu. Bayangkan bahwa pengguna memasukkan data yang tidak valid, seperti menghilangkan nama produk, dan kemudian memutuskan dia tidak ingin menyimpan produk setelah semua dan menekan tombol Batalkan. Saat ini, tombol Batal memicu kontrol validasi pada halaman, yang melaporkan bahwa nama produk hilang dan mencegah postback. Pengguna kami harus mengetikkan beberapa teks ke ProductName dalam TextBox hanya untuk membatalkan proses pengeditan.

Untungnya, Tombol, LinkButton, dan ImageButton memiliki CausesValidation properti yang dapat menunjukkan apakah mengklik Tombol harus memulai logika validasi (default ke True). Atur properti CausesValidationBatalkan Tombol ke False .

Memastikan Input Valid di UpdateCommand Event Handler

Karena skrip sisi klien yang dipancarkan oleh kontrol validasi, jika pengguna memasukkan input yang tidak valid, kontrol validasi membatalkan postback apa pun yang dimulai oleh kontrol Tombol, LinkButton, atau ImageButton yang propertinya CausesValidation ( True default). Namun, jika pengguna mengunjungi dengan browser kuno atau yang dukungan JavaScript-nya telah dinonaktifkan, pemeriksaan validasi sisi klien tidak akan dijalankan.

Semua kontrol validasi ASP.NET mengulangi logika validasi mereka segera setelah postback dan melaporkan validitas keseluruhan input halaman melalui Page.IsValid properti . Namun, alur halaman tidak terganggu atau dihentikan dengan cara apa pun berdasarkan nilai Page.IsValid. Sebagai pengembang, kami bertanggung jawab untuk memastikan bahwa Page.IsValid properti memiliki nilai True sebelum melanjutkan dengan kode yang mengasumsikan data input yang valid.

Jika pengguna menonaktifkan JavaScript, mengunjungi halaman kami, mengedit produk, memasukkan nilai harga Terlalu mahal, dan mengklik tombol Perbarui, validasi sisi klien akan dilewati dan postback akan ensue. Pada postback, penanganan aktivitas halaman UpdateCommand ASP.NET dijalankan dan pengecualian dinaikkan saat mencoba mengurai Terlalu mahal ke Decimal. Karena kami memiliki penanganan pengecualian, pengecualian seperti itu akan ditangani dengan anggun, tetapi kami dapat mencegah data yang tidak valid tergelincir di tempat pertama dengan hanya melanjutkan dengan UpdateCommand penanganan aktivitas jika Page.IsValid memiliki nilai True.

Tambahkan kode berikut ke awal UpdateCommand penanganan aktivitas, segera sebelum Try blok:

If Not Page.IsValid Then
    Exit Sub
End If

Dengan penambahan ini, produk akan mencoba untuk diperbarui hanya jika data yang dikirimkan valid. Sebagian besar pengguna tidak akan dapat mem-postback data yang tidak valid karena validasi mengontrol skrip sisi klien, tetapi pengguna yang browsernya tidak mendukung JavaScript atau yang memiliki dukungan JavaScript dinonaktifkan, dapat melewati pemeriksaan sisi klien dan mengirimkan data yang tidak valid.

Catatan

Pembaca astute akan ingat bahwa saat memperbarui data dengan GridView, kami tidak perlu secara eksplisit memeriksa Page.IsValid properti di kelas code-behind halaman kami. Ini karena GridView berkonsultasi dengan Page.IsValid properti untuk kami dan hanya melanjutkan dengan pembaruan hanya jika mengembalikan nilai True.

Langkah 3: Meringkas Masalah Entri Data

Selain lima kontrol validasi, ASP.NET menyertakan kontrol ValidationSummary, yang menampilkan ErrorMessage kontrol validasi yang mendeteksi data yang tidak valid. Data ringkasan ini dapat ditampilkan sebagai teks di halaman web atau melalui kotak pesan sisi klien modal. Mari kita tingkatkan tutorial ini untuk menyertakan kotak pesan sisi klien yang meringkas masalah validasi apa pun.

Untuk mencapai hal ini, seret kontrol ValidationSummary dari Kotak Alat ke Perancang. Lokasi kontrol ValidationSummary tidak terlalu penting, karena kita akan mengonfigurasinya untuk hanya menampilkan ringkasan sebagai kotak pesan. Setelah menambahkan kontrol, atur propertinya ShowSummary ke False dan propertinya ShowMessageBox ke .True Dengan penambahan ini, kesalahan validasi apa pun dirangkum dalam kotak pesan sisi klien (lihat Gambar 6).

Gambar 6: Kesalahan Validasi Dirangkum dalam Kotak Pesan Sisi Klien (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Dalam tutorial ini kita melihat cara mengurangi kemungkinan pengecualian dengan menggunakan kontrol validasi untuk secara proaktif memastikan bahwa input pengguna kami valid sebelum mencoba menggunakannya dalam alur kerja pembaruan. ASP.NET menyediakan lima kontrol Web validasi yang dirancang untuk memeriksa input kontrol Web tertentu dan melaporkan kembali validitas input. Dalam tutorial ini kami menggunakan dua dari lima kontrol RequiredFieldValidator dan CompareValidator untuk memastikan bahwa nama produk disediakan dan bahwa harga memiliki format mata uang dengan nilai lebih besar dari atau sama dengan nol.

Menambahkan kontrol validasi ke antarmuka pengeditan DataList semederhana menyeretnya ke EditItemTemplate dari Kotak Alat dan mengatur beberapa properti. Secara default, kontrol validasi secara otomatis memancarkan skrip validasi sisi klien; mereka juga menyediakan validasi sisi server pada postback, menyimpan hasil kumulatif dalam Page.IsValid properti . Untuk melewati validasi sisi klien saat Tombol, LinkButton, atau ImageButton diklik, atur properti tombol s CausesValidation ke False. Selain itu, sebelum melakukan tugas apa pun dengan data yang dikirimkan pada postback, pastikan bahwa Page.IsValid properti mengembalikan True.

Semua tutorial pengeditan DataList yang telah kami periksa sejauh ini memiliki antarmuka pengeditan yang sangat sederhana TextBox untuk nama produk dan yang lain untuk harga. Antarmuka pengeditan, bagaimanapun, dapat berisi campuran kontrol Web yang berbeda, seperti DropDownLists, Kalender, RadioButtons, CheckBoxes, dan sebagainya. Dalam tutorial berikutnya, kita akan melihat membangun antarmuka yang menggunakan berbagai kontrol Web.

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 Dennis Patterson, Ken Pespisa, dan Liz Shulok. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

SebelumnyaBerikutnya