Menambahkan Kontrol Validasi ke Antarmuka Pengeditan dan Penyisipan (VB)

oleh Scott Mitchell

Unduh PDF

Dalam tutorial ini kita akan melihat betapa mudahnya menambahkan kontrol validasi ke EditItemTemplate dan InsertItemTemplate dari kontrol Web data, untuk menyediakan antarmuka pengguna yang lebih mudah.

Pendahuluan

Kontrol GridView dan DetailsView dalam contoh yang telah kita jelajahi selama tiga tutorial terakhir semuanya terdiri dari BoundFields dan CheckBoxFields (jenis bidang yang secara otomatis ditambahkan oleh Visual Studio saat mengikat GridView atau DetailsView ke kontrol sumber data melalui tag pintar). Saat mengedit baris di GridView atau DetailsView, BoundFields yang tidak baca-saja dikonversi menjadi kotak teks, tempat pengguna akhir dapat memodifikasi data yang ada. Demikian pula, saat menyisipkan rekaman baru ke dalam kontrol DetailsView, BoundFields yang propertinya InsertVisible diatur ke True (default) dirender sebagai kotak teks kosong, tempat pengguna dapat memberikan nilai bidang rekaman baru. Demikian juga, CheckBoxFields, yang dinonaktifkan di antarmuka standar baca-saja, dikonversi menjadi kotak centang yang diaktifkan di antarmuka pengeditan dan penyisipan.

Meskipun antarmuka pengeditan dan penyisipan default untuk BoundField dan CheckBoxField dapat membantu, antarmuka tidak memiliki semacam validasi. Jika pengguna membuat kesalahan entri data - seperti menghilangkan ProductName bidang atau memasukkan nilai yang tidak valid untuk UnitsInStock (seperti -50) pengecualian akan dinaikkan dari dalam kedalaman arsitektur aplikasi. Meskipun pengecualian ini dapat ditangani dengan baik seperti yang ditunjukkan dalam tutorial sebelumnya, idealnya pengeditan atau penyisipan antarmuka pengguna akan mencakup kontrol validasi untuk mencegah pengguna memasukkan data yang tidak valid tersebut di tempat pertama.

Untuk menyediakan antarmuka pengeditan atau penyisipan yang disesuaikan, kita perlu mengganti BoundField atau CheckBoxField dengan TemplateField. TemplateFields, yang merupakan topik diskusi dalam Menggunakan TemplateFields di GridView Control dan Using TemplateFields dalam tutorial DetailsView Control , dapat terdiri dari beberapa templat yang menentukan antarmuka terpisah untuk status baris yang berbeda. TemplateField ItemTemplate digunakan untuk saat merender bidang atau baris baca-saja di kontrol DetailsView atau GridView, sedangkan EditItemTemplate dan InsertItemTemplate menunjukkan antarmuka yang akan digunakan untuk mode pengeditan dan penyisipan, masing-masing.

Dalam tutorial ini kita akan melihat betapa mudahnya menambahkan kontrol validasi ke TemplateField EditItemTemplate dan InsertItemTemplate untuk menyediakan antarmuka pengguna yang lebih mudah. Secara khusus, tutorial ini mengambil contoh yang dibuat dalam tutorial Memeriksa Peristiwa yang Terkait dengan Menyisipkan, Memperbarui, dan Menghapus dan menambah antarmuka pengeditan dan penyisipan untuk menyertakan validasi yang sesuai.

Langkah 1: Mereplikasi Contoh dariMemeriksa Peristiwa yang Terkait dengan Menyisipkan, Memperbarui, dan Menghapus

Dalam tutorial Memeriksa Peristiwa yang Terkait dengan Menyisipkan, Memperbarui, dan Menghapus, kami membuat halaman yang mencantumkan nama dan harga produk dalam GridView yang dapat diedit. Selain itu, halaman menyertakan DetailsView yang propertinya DefaultMode diatur ke Insert, sehingga selalu dirender dalam mode sisipkan. Dari Detail IniTampilan, pengguna dapat memasukkan nama dan harga untuk produk baru, klik Sisipkan, dan menambahkannya ke sistem (lihat Gambar 1).

Gambar 1: Contoh Sebelumnya Memungkinkan Pengguna Menambahkan Produk Baru dan Mengedit Produk yang Sudah Ada (Klik untuk melihat gambar ukuran penuh)

Tujuan kami untuk tutorial ini adalah untuk menambah DetailsView dan GridView untuk memberikan kontrol validasi. Secara khusus, logika validasi kami akan:

• Mengharuskan nama disediakan saat menyisipkan atau mengedit produk
• Mengharuskan harga disediakan saat menyisipkan rekaman; saat mengedit rekaman, kami masih akan memerlukan harga, tetapi akan menggunakan logika terprogram di penanganan aktivitas GridView RowUpdating yang sudah ada dari tutorial sebelumnya
• Pastikan bahwa nilai yang dimasukkan untuk harga adalah format mata uang yang valid

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

1. Buka halaman di DataModificationEvents.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 44), seperti yang ditunjukkan pada Gambar 2.

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 DataModificationEvents.aspx.vb halaman dan salin hanya teks dalamEditInsertDelete_DataModificationEvents kelas . Salin tiga penanganan aktivitas (Page_Load, , dan GridView1_RowUpdating), tetapi janganObjectDataSource1_Insertingsalin deklarasi kelas. Tempelkan teks yang disalin dalamEditInsertDelete_UIValidation kelas di UIValidation.aspx.vb.

Setelah memindahkan konten dan kode dari DataModificationEvents.aspx ke UIValidation.aspx, luangkan waktu sejenak untuk menguji kemajuan Anda di browser. Anda akan melihat output yang sama dan mengalami fungsionalitas yang sama di masing-masing dari dua halaman ini (lihat kembali ke Gambar 1 untuk cuplikan DataModificationEvents.aspx layar dalam tindakan).

Langkah 2: Mengonversi BoundFields Menjadi TemplateFields

Untuk menambahkan kontrol validasi ke antarmuka pengeditan dan penyisipan, BoundFields yang digunakan oleh kontrol DetailsView dan GridView perlu dikonversi menjadi TemplateFields. Untuk mencapai hal ini, klik tautan Edit Kolom dan Edit Bidang di tag pintar GridView dan DetailsView. Di sana, pilih masing-masing BoundFields dan klik tautan "Konversi bidang ini menjadi TemplateField".

Gambar 3: Konversi Setiap BoundFields DetailsView dan GridView Menjadi TemplateFields (Klik untuk melihat gambar ukuran penuh)

Mengonversi BoundField menjadi TemplateField melalui kotak dialog Bidang menghasilkan TemplateField yang menunjukkan antarmuka baca-saja, pengeditan, dan penyisipan yang sama dengan BoundField itu sendiri. Markup berikut menunjukkan sintaks deklaratif untuk ProductName bidang di DetailsView setelah dikonversi menjadi TemplateField:

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </EditItemTemplate>
    <InsertItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </InsertItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Perhatikan bahwa TemplateField ini memiliki tiga templat yang dibuat ItemTemplatesecara otomatis, , EditItemTemplatedan InsertItemTemplate. ItemTemplate menampilkan nilai bidang data tunggal (ProductName) menggunakan kontrol Label Web, sementara EditItemTemplate dan InsertItemTemplate menyajikan nilai bidang data dalam kontrol Web TextBox yang mengaitkan bidang data dengan properti TextBox Text menggunakan pengikatan data dua arah. Karena kami hanya menggunakan DetailsView di halaman ini untuk menyisipkan, Anda dapat menghapus ItemTemplate dan EditItemTemplate dari dua TemplateFields, meskipun tidak ada salahnya meninggalkannya.

Karena GridView tidak mendukung fitur penyisipan bawaan dari DetailsView, mengonversi bidang GridView ProductName menjadi TemplateField hanya menghasilkan dan ItemTemplateEditItemTemplate:

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Dengan mengklik "Konversi bidang ini menjadi TemplateField," Visual Studio telah membuat TemplateField yang templatnya menilik antarmuka pengguna dari BoundField yang dikonversi. Anda dapat memverifikasi ini dengan mengunjungi halaman ini melalui browser. Anda akan menemukan bahwa penampilan dan perilaku TemplateFields identik dengan pengalaman ketika BoundFields digunakan sebagai gantinya.

Catatan

Jangan ragu untuk menyesuaikan antarmuka pengeditan dalam templat sesuai kebutuhan. Misalnya, kita mungkin ingin memiliki Kotak Teks di UnitPrice TemplateFields yang dirender sebagai kotak teks yang lebih kecil daripada ProductName kotak teks. Untuk mencapai hal ini, Anda dapat mengatur properti TextBox Columns ke nilai yang sesuai atau memberikan lebar absolut melalui Width properti . Dalam tutorial berikutnya kita akan melihat cara sepenuhnya menyesuaikan antarmuka pengeditan dengan mengganti TextBox dengan kontrol Web entri data alternatif.

Langkah 3: Menambahkan Kontrol Validasi ke GridViewEditItemTemplate

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 digunakan untuk memvalidasi nilai kontrol input tunggal:

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

Untuk informasi selengkapnya tentang kelima kontrol ini, lihat bagian Kontrol Validasi dari Tutorial Mulai Cepat ASP.NET.

Untuk tutorial kami, kita harus menggunakan RequiredFieldValidator di DetailsView dan GridView's ProductName TemplateFields dan RequiredFieldValidator di DetailsView's UnitPrice TemplateField. Selain itu, kita harus menambahkan CompareValidator ke Kedua TemplateFields UnitPrice kontrol yang 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 EditItemTemplate di TemplateFields GridView. Untuk mencapai hal ini, klik tautan Edit Templat dari tag pintar GridView untuk memunculkan antarmuka pengeditan templat. Dari sini, Anda dapat memilih templat mana yang akan diedit dari daftar drop-down. Karena kami ingin menambah antarmuka pengeditan, kita perlu menambahkan kontrol validasi ke ProductName dan UnitPrice.EditItemTemplate

Gambar 4: Kita Perlu Memperluas ProductName dan UnitPrice's EditItemTemplate (Klik untuk melihat gambar ukuran penuh)

ProductName EditItemTemplateDi , tambahkan RequiredFieldValidator dengan menyeretnya dari Kotak Alat ke antarmuka pengeditan templat, menempatkan setelah Kotak Teks.

Gambar 5: Tambahkan RequiredFieldValidator ke ProductNameEditItemTemplate (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 TextBox di EditItemTemplate; ini dicapai dengan mengatur properti ControlToValidate kontrol validasi ke ID kontrol Web yang sesuai. TextBox saat ini memiliki nondeskrip ID , TextBox1tetapi mari kita ubah menjadi sesuatu yang lebih tepat. Klik Kotak Teks di templat lalu, dari jendela Properti, ubah ID dari TextBox1 ke EditProductName.

Gambar 6: Ubah Kotak Teks ID menjadi EditProductName (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, atur properti RequiredFieldValidator ControlToValidate ke EditProductName. Terakhir, atur properti ErrorMessage ke "Anda harus memberikan nama produk" dan properti Teks 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 juga merupakan teks yang ditampilkan oleh kontrol validasi pada input yang tidak valid.

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

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

Dengan RequiredFieldValidator ditambahkan ke ProductNameEditItemTemplate, yang tersisa adalah menambahkan validasi yang diperlukan ke UnitPriceEditItemTemplate. Karena kami telah memutuskan bahwa, untuk halaman ini, UnitPrice 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.

Sebelum kita menambahkan CompareValidator ke UnitPriceEditItemTemplate, mari kita ubah ID kontrol Web TextBox terlebih dahulu dari TextBox2 ke EditUnitPrice. Setelah melakukan perubahan ini, tambahkan CompareValidator, atur propertinya ControlToValidate ke EditUnitPrice, 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 nilai UnitPrice harus lebih besar dari atau sama dengan 0, atur properti Operator dari CompareValidator ke GreaterThanEqual, properti ValueToCompare menjadi "0", dan properti Type ke Currency. Sintaksis deklaratif berikut menunjukkan UnitPrice TemplateField EditItemTemplate setelah perubahan ini dibuat:

<EditItemTemplate>
    <asp:TextBox ID="EditUnitPrice" runat="server"
      Text='<%# Bind("UnitPrice", "{0:c}") %>'
      Columns="6"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator1" runat="server"
        ControlToValidate="EditUnitPrice"
        ErrorMessage="The price must be greater than or equal to zero and
                       cannot include the currency symbol"
        Operator="GreaterThanEqual" Type="Currency"
        ValueToCompare="0">*</asp:CompareValidator>
</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 8, nilai harga yang menyertakan simbol mata uang seperti $19,95 dianggap tidak valid. CompareValidator CurrencyType memungkinkan 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.

Catatan

Ingat bahwa dalam tutorial Peristiwa yang Berhubungan dengan Penyisipan, Pembaruan, dan Penghapusan kami mengatur properti BoundField DataFormatString ke {0:c} untuk memformatnya sebagai mata uang. Selain itu, kami mengatur ApplyFormatInEditMode properti ke true, menyebabkan antarmuka pengeditan GridView memformat UnitPrice sebagai mata uang. Saat mengonversi BoundField menjadi TemplateField, Visual Studio mencatat pengaturan ini dan memformat properti TextBox Text sebagai mata uang menggunakan sintaks <%# Bind("UnitPrice", "{0:c}") %>pengikatan data .

Gambar 8: 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. Untuk memperbaiki hal ini, kami memiliki tiga opsi:

1. Konfigurasikan EditItemTemplate agar nilai tidak diformat UnitPrice 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. Masalahnya di sini adalah bahwa ekspresi reguler untuk memvalidasi nilai mata uang tidak cantik dan akan memerlukan penulisan kode jika kita ingin menggabungkan pengaturan budaya.
3. Hapus kontrol validasi sama sekali dan andalkan logika validasi sisi server di penanganan aktivitas GridView RowUpdating .

Mari kita gunakan opsi #1 untuk latihan ini. Saat ini diformat UnitPrice sebagai mata uang karena ekspresi pengikatan data untuk TextBox di EditItemTemplate: <%# Bind("UnitPrice", "{0:c}") %>. Ubah pernyataan Ikat menjadi Bind("UnitPrice", "{0:n2}"), yang memformat hasilnya sebagai angka dengan dua digit presisi. Ini dapat dilakukan langsung melalui sintaks deklaratif atau dengan mengklik tautan Edit DataBindings dari EditUnitPrice TextBox di UnitPrice TemplateField ( EditItemTemplate lihat Gambar 9 dan 10).

Gambar 9: Klik tautan Edit DataBindings TextBox (Klik untuk melihat gambar ukuran penuh)

Gambar 10: Tentukan Penentu Bind Format dalam Pernyataan (Klik untuk melihat gambar ukuran penuh)

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

UnitPrice EditItemTemplate tidak termasuk RequiredFieldValidator, yang memungkinkan postback untuk melanjutkan dan logika pembaruan dimulai. Namun, penanganan aktivitas yang RowUpdating disalin dari tutorial Memeriksa Peristiwa yang Terkait dengan Menyisipkan, Memperbarui, dan Menghapus menyertakan pemeriksaan terprogram yang memastikan bahwa UnitPrice disediakan. Jangan ragu untuk menghapus logika ini, biarkan sebagaimana adanya, atau tambahkan RequiredFieldValidator ke UnitPriceEditItemTemplate.

Langkah 4: 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 Validasi tidak terlalu penting, karena kita akan mengonfigurasinya untuk hanya menampilkan ringkasan sebagai kotak pesan. Setelah menambahkan kontrol, atur properti ShowSummary-nya ke False dan properti ShowMessageBox-nya ke True. Dengan penambahan ini, kesalahan validasi apa pun dirangkum dalam kotak pesan sisi klien.

Gambar 11: Kesalahan Validasi Diringkas dalam kotak pesan Client-Side (Klik untuk melihat gambar ukuran penuh)

Langkah 5: Menambahkan Kontrol Validasi ke DetailsViewInsertItemTemplate

Yang tersisa untuk tutorial ini adalah menambahkan kontrol validasi ke antarmuka penyisipan DetailsView. Proses penambahan kontrol validasi ke templat DetailsView identik dengan yang diperiksa di Langkah 3; oleh karena itu, kita akan mempermudah tugas dalam langkah ini. Seperti yang kami lakukan dengan GridView EditItemTemplate , saya mendorong Anda untuk mengganti nama ID TextBoxes dari nondeskrip TextBox1 dan TextBox2 ke InsertProductName dan InsertUnitPrice.

Tambahkan RequiredFieldValidator ke ProductNameInsertItemTemplate. ControlToValidate Atur ke kotak ID teks dalam templat, propertinya Text ke "*" dan propertinya ErrorMessage ke "Anda harus memberikan nama produk".

UnitPrice Karena diperlukan untuk halaman ini saat menambahkan rekaman baru, tambahkan RequiredFieldValidator ke UnitPriceInsertItemTemplate , mengatur ControlToValidateproperti , Text, dan ErrorMessage dengan tepat. Terakhir, tambahkan CompareValidator ke UnitPriceInsertItemTemplate juga, mengonfigurasi ControlToValidateproperti , , Text, ErrorMessageType, Operator, dan ValueToCompare seperti yang kita lakukan dengan UnitPriceCompareValidator di GridView.EditItemTemplate

Setelah menambahkan kontrol validasi ini, produk baru tidak dapat ditambahkan ke sistem jika namanya tidak disediakan atau jika harganya adalah angka negatif atau diformat secara ilegal.

Gambar 12: Logika Validasi telah Ditambahkan ke Antarmuka Penyisipan DetailsView (Klik untuk melihat gambar ukuran penuh)

Langkah 6: Mempartisi Kontrol Validasi Ke Dalam Grup Validasi

Halaman kami terdiri dari dua set kontrol validasi yang berbeda secara logis: yang sesuai dengan antarmuka pengeditan GridView dan yang sesuai dengan antarmuka penyisipan DetailsView. Secara bawaan, ketika postback terjadi semua kontrol validasi pada halaman diperiksa. Namun, saat mengedit rekaman, kami tidak ingin kontrol validasi antarmuka penyisipan DetailsView divalidasi. Gambar 13 mengilustrasikan dilema kami saat ini ketika pengguna mengedit produk dengan nilai hukum yang sempurna, mengklik Perbarui menyebabkan kesalahan validasi karena nilai nama dan harga di antarmuka penyisipan kosong.

Gambar 13: Memperbarui Produk Menyebabkan Kontrol Validasi Antarmuka Penyisipan diaktifkan (Klik untuk melihat gambar ukuran penuh)

Kontrol validasi di ASP.NET 2.0 dapat dipartisi ke dalam grup validasi melalui properti mereka ValidationGroup . Untuk mengaitkan serangkaian kontrol validasi dalam grup, cukup atur propertinya ValidationGroup ke nilai yang sama. Untuk tutorial kami, atur ValidationGroup properti kontrol validasi di TemplateFields GridView ke EditValidationControls dan ValidationGroup properti TemplateFields DetailsView ke InsertValidationControls. Perubahan ini dapat dilakukan langsung di markup deklaratif atau melalui jendela Properti saat menggunakan antarmuka templat edit Perancang.

Selain kontrol validasi, kontrol terkait Tombol dan Tombol di ASP.NET 2.0 juga menyertakan ValidationGroup properti. Validator grup validasi diperiksa validitasnya hanya ketika postback diinduksi oleh Tombol yang memiliki pengaturan properti yang sama ValidationGroup . Misalnya, agar tombol Sisipkan DetailsView memicu InsertValidationControls grup validasi, kita perlu mengatur properti CommandField ValidationGroup ke InsertValidationControls (lihat Gambar 14). Selain itu, atur properti CommandField ValidationGroup GridView ke EditValidationControls.

Gambar 14: Atur properti DetailsView CommandField ValidationGroup ke InsertValidationControls (Klik untuk melihat gambar ukuran penuh)

Setelah perubahan ini, DetailsView dan TemplateFields dan CommandFields GridView akan terlihat mirip dengan yang berikut ini:

TemplateFields dan CommandField DetailsView

<asp:TemplateField HeaderText="ProductName"
  SortExpression="ProductName">
    <InsertItemTemplate>
        <asp:TextBox ID="InsertProductName" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2"
          runat="server" ControlToValidate="InsertProductName"
            ErrorMessage="You must provide the product name"
            ValidationGroup="InsertValidationControls">*
        </asp:RequiredFieldValidator>
    </InsertItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
    <InsertItemTemplate>
         <asp:TextBox ID="InsertUnitPrice" runat="server"
           Text='<%# Bind("UnitPrice") %>' Columns="6">
         </asp:TextBox>
         <asp:RequiredFieldValidator ID="RequiredFieldValidator3"
           runat="server" ControlToValidate="InsertUnitPrice"
            ErrorMessage="You must provide the product price"
            ValidationGroup="InsertValidationControls">*
         </asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator2" runat="server"
           ControlToValidate="InsertUnitPrice"
           ErrorMessage="The price must be greater than or equal to zero and
                          cannot include the currency symbol"
           Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
           ValidationGroup="InsertValidationControls">*
        </asp:CompareValidator>
     </InsertItemTemplate>
 </asp:TemplateField>
<asp:CommandField ShowInsertButton="True"
  ValidationGroup="InsertValidationControls" />

CommandField dan TemplateFields GridView

<asp:CommandField ShowEditButton="True" ValidationGroup="EditValidationControls" />
<asp:TemplateField HeaderText="ProductName"
  SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="EditProductName" runat="server"
          Text='<%# Bind("ProductName") %>'>
        </asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            runat="server" ControlToValidate="EditProductName"
            ErrorMessage="You must provide the product name"
            ValidationGroup="EditValidationControls">*
        </asp:RequiredFieldValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
    <EditItemTemplate>
        <asp:TextBox ID="EditUnitPrice" runat="server"
          Text='<%# Bind("UnitPrice", "{0:n2}") %>' Columns="6"></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1" runat="server"
            ControlToValidate="EditUnitPrice"
            ErrorMessage="The price must be greater than or equal to zero and
                           cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency"
            ValueToCompare="0"
            ValidationGroup="EditValidationControls">*
        </asp:CompareValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("UnitPrice", "{0:c}") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Pada titik ini kontrol validasi khusus edit diaktifkan hanya ketika tombol Pembaruan GridView diklik dan kontrol validasi khusus penyisipan diaktifkan hanya ketika tombol Sisipkan DetailsView diklik, menyelesaikan masalah yang disorot oleh Gambar 13. Namun, dengan perubahan ini, kontrol ValidationSummary kami tidak lagi ditampilkan saat memasukkan data yang tidak valid. Kontrol ValidationSummary juga berisi ValidationGroup properti dan hanya menampilkan informasi ringkasan untuk kontrol validasi tersebut dalam grup validasinya. Oleh karena itu, kita perlu memiliki dua kontrol validasi di halaman ini, satu untuk grup validasi dan satu untuk InsertValidationControlsEditValidationControls.

<asp:ValidationSummary ID="ValidationSummary1" runat="server"
    ShowMessageBox="True" ShowSummary="False"
    ValidationGroup="EditValidationControls" />
<asp:ValidationSummary ID="ValidationSummary2" runat="server"
    ShowMessageBox="True" ShowSummary="False"
    ValidationGroup="InsertValidationControls" />

Dengan tambahan ini tutorial kami selesai!

Ringkasan

Meskipun BoundFields dapat menyediakan antarmuka penyisipan dan pengeditan, antarmuka tidak dapat disesuaikan. Umumnya, kami ingin menambahkan kontrol validasi ke antarmuka pengeditan dan penyisipan untuk memastikan bahwa pengguna memasukkan input yang diperlukan dalam format hukum. Untuk mencapai hal ini, kita harus mengonversi BoundFields menjadi TemplateFields dan menambahkan kontrol validasi ke templat yang sesuai. Dalam tutorial ini kami memperluas contoh dari tutorial Memeriksa Peristiwa yang Terkait dengan Menyisipkan, Memperbarui, dan Menghapus , menambahkan kontrol validasi ke antarmuka penyisipan DetailsView dan antarmuka pengeditan GridView. Selain itu, kita melihat cara menampilkan informasi validasi ringkasan menggunakan kontrol ValidationSummary dan cara mempartisi kontrol validasi pada halaman ke dalam grup validasi yang berbeda.

Seperti yang kita lihat dalam tutorial ini, TemplateFields memungkinkan antarmuka pengeditan dan penyisipan untuk ditambah untuk menyertakan kontrol validasi. TemplateFields juga dapat diperluas untuk menyertakan kontrol Web input tambahan, memungkinkan TextBox digantikan oleh kontrol Web yang lebih cocok. Dalam tutorial berikutnya kita akan melihat cara mengganti kontrol TextBox dengan kontrol DropDownList yang terikat data, yang sangat ideal saat mengedit kunci asing (seperti CategoryID atau SupplierID dalam Products tabel).

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

Berikutnya Sebelumnya