Bagikan melalui


Bagian 6: Menggunakan Anotasi Data untuk Validasi Model

oleh Jon Galloway

MVC Music Store adalah aplikasi tutorial yang memperkenalkan dan menjelaskan langkah demi langkah cara menggunakan ASP.NET MVC dan Visual Studio untuk pengembangan web.

MVC Music Store adalah implementasi penyimpanan sampel ringan yang menjual album musik secara online, dan mengimplementasikan administrasi situs dasar, rincian masuk pengguna, dan fungsionalitas ke cart belanja.

Seri tutorial ini merinci semua langkah yang diambil untuk membangun aplikasi sampel MVC Music Store ASP.NET. Bagian 6 mencakup Menggunakan Anotasi Data untuk Validasi Model.

Kami memiliki masalah besar dengan formulir Buat dan Edit: mereka tidak melakukan validasi apa pun. Kita dapat melakukan hal-hal seperti membiarkan bidang yang diperlukan kosong atau mengetik huruf di bidang Harga, dan kesalahan pertama yang akan kita lihat adalah dari database.

Kami dapat dengan mudah menambahkan validasi ke aplikasi kami dengan menambahkan Anotasi Data ke kelas model kami. Anotasi Data memungkinkan kami menjelaskan aturan yang ingin diterapkan ke properti model kami, dan ASP.NET MVC akan mengurus penegakan dan menampilkan pesan yang sesuai kepada pengguna kami.

Menambahkan Validasi ke Formulir Album kami

Kita akan menggunakan atribut Anotasi Data berikut:

  • Wajib – Menunjukkan bahwa properti adalah bidang yang diperlukan
  • DisplayName – Menentukan teks yang akan digunakan pada bidang formulir dan pesan validasi
  • StringLength – Menentukan panjang maksimum untuk bidang string
  • Rentang – Memberikan nilai maksimum dan minimum untuk bidang numerik
  • Bind – Mencantumkan bidang untuk dikecualikan atau disertakan saat mengikat parameter atau nilai formulir ke properti model
  • ScaffoldColumn – Memungkinkan menyembunyikan bidang dari formulir editor

*Catatan: Untuk informasi selengkapnya tentang Validasi Model menggunakan atribut Anotasi Data, lihat dokumentasi MSDN di *https://go.microsoft.com/fwlink/?LinkId=159063

Buka kelas Album dan tambahkan pernyataan berikut ke bagian atas.

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

Selanjutnya, perbarui properti untuk menambahkan atribut tampilan dan validasi seperti yang ditunjukkan di bawah ini.

namespace MvcMusicStore.Models
{
    [Bind(Exclude = "AlbumId")]
    public class Album
    {
        [ScaffoldColumn(false)]
        public int      AlbumId    { get; set; }
        [DisplayName("Genre")]
        public int      GenreId    { get; set; }
        [DisplayName("Artist")]
        public int      ArtistId   { get; set; }
        [Required(ErrorMessage = "An Album Title is required")]
        [StringLength(160)]
        public string   Title      { get; set; }
        [Range(0.01, 100.00,
            ErrorMessage = "Price must be between 0.01 and 100.00")]
        public decimal Price       { get; set; }
        [DisplayName("Album Art URL")]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }
        public virtual Genre  Genre    { get; set; }
        public virtual Artist Artist   { get; set; }
    }
}

Saat berada di sana, kami juga telah mengubah Genre dan Artis menjadi properti virtual. Ini memungkinkan Entity Framework untuk malas memuatnya seperlunya.

public virtual Genre    Genre       { get; set; }
public virtual Artist   Artist      { get; set; }

Setelah menambahkan atribut ini ke model Album kami, layar Buat dan Edit kami segera mulai memvalidasi bidang dan menggunakan Nama Tampilan yang kami pilih (misalnya Url Seni Album, bukan AlbumArtUrl). Jalankan aplikasi dan telusuri ke /StoreManager/Create.

Cuplikan layar formulir Buat memperlihatkan menu dropdown Genre dan Artis serta bidang Judul, Harga, dan Album Art U R L.

Selanjutnya, kita akan melanggar beberapa aturan validasi. Masukkan harga 0 dan biarkan Judul kosong. Ketika kita mengklik tombol Buat, kita akan melihat formulir ditampilkan dengan pesan kesalahan validasi yang menunjukkan bidang mana yang tidak memenuhi aturan validasi yang telah kita tentukan.

Cuplikan layar formulir Buat memperlihatkan bidang Judul dan Harga berwarna merah karena kesalahan dalam input dan kesalahan merah yang menyertainya.

Menguji Validasi Client-Side

Validasi sisi server sangat penting dari perspektif aplikasi, karena pengguna dapat menghindari validasi sisi klien. Namun, formulir halaman web yang hanya menerapkan validasi sisi server menunjukkan tiga masalah signifikan.

  1. Pengguna harus menunggu formulir diposting, divalidasi di server, dan agar respons dikirim ke browser mereka.
  2. Pengguna tidak mendapatkan umpan balik langsung ketika mereka memperbaiki bidang sehingga sekarang melewati aturan validasi.
  3. Kami membuang-buang sumber daya server untuk melakukan logika validasi alih-alih memanfaatkan browser pengguna.

Untungnya, templat perancah ASP.NET MVC 3 memiliki validasi sisi klien bawaan, tidak memerlukan pekerjaan tambahan apa pun.

Mengetik satu huruf di bidang Judul memenuhi persyaratan validasi, sehingga pesan validasi segera dihapus.

Cuplikan layar formulir Buat memperlihatkan bidang Harga berwarna merah karena kesalahan dalam input dan teks kesalahan merah yang menyertainya.