Menambahkan Validasi ke Model - Cara mengimplementasikan dukungan yang diperlukan untuk mengaktifkan validasi input

oleh Scott Hanselman

Ini adalah tutorial pemula yang memperkenalkan dasar-dasar ASP.NET MVC. Anda akan membuat aplikasi web sederhana yang membaca dan menulis dari database. Kunjungi pusat pembelajaran MVC ASP.NET untuk menemukan tutorial dan sampel MVC ASP.NET lainnya.

Di bagian ini kita akan menerapkan dukungan yang diperlukan untuk mengaktifkan validasi input dalam aplikasi kita. Kami akan memastikan bahwa konten database kami selalu benar, dan memberikan pesan kesalahan yang bermanfaat kepada pengguna akhir saat mereka mencoba dan memasukkan data Film yang tidak valid. Kita akan mulai dengan menambahkan sedikit logika validasi ke kelas Film.

Klik kanan pada folder Model dan pilih Tambahkan Kelas. Beri nama kelas Anda Film.

Ketika kita membuat Model Entitas Film sebelumnya, IDE membuat kelas Film. Bahkan, bagian dari kelas Film dapat berada dalam satu file dan berpartisi di file lain. Ini disebut Kelas Parsial. Kita akan memperluas kelas Film dari file lain.

Kita akan membuat kelas film parsial yang menunjuk ke "kelas teman" dengan beberapa atribut yang akan memberikan petunjuk validasi ke sistem. Kami akan menandai Judul dan Harga sebagai Diperlukan, dan juga bersikeras bahwa Harga berada dalam rentang tertentu. Klik kanan folder Model dan pilih Tambahkan Kelas. Beri nama kelas Film Anda dan Klik tombol OK. Seperti inilah kelas Film parsial kami.

using System.ComponentModel.DataAnnotations;

namespace Movies.Models
{
    [MetadataType(typeof(MovieMetadata))]
    public partial class Movie
    {
        class MovieMetadata
        {
            [Required(ErrorMessage="Titles are required")]
            public string Title { get; set; }

            [Range(5,100,ErrorMessage ="Movies cost between $5 and $100.")]
            public decimal Price { get; set; }
        }
    }
}

Re-Run aplikasi Anda dan coba masukkan film dengan harga lebih dari 100. Anda akan mendapatkan kesalahan setelah mengirimkan formulir. Kesalahan tertangkap di sisi server dan terjadi setelah Formulir DIPOSISIKAN. Perhatikan bagaimana ASP.NET pembantu HTML bawaan MVC cukup cerdas untuk menampilkan pesan kesalahan dan mempertahankan nilai bagi kami dalam elemen kotak teks:

Ini berfungsi dengan baik, tetapi akan menyenangkan jika kita dapat memberi tahu pengguna di sisi klien, segera, sebelum server terlibat.

Mari kita aktifkan beberapa validasi sisi klien dengan JavaScript.

Menambahkan Validasi Client-Side

Karena kelas Film kami sudah memiliki beberapa atribut validasi, kami hanya perlu menambahkan beberapa file JavaScript ke templat Create.aspx View kami dan menambahkan baris kode untuk memungkinkan validasi sisi klien berlangsung.

Dari dalam VWD buka folder Views/Movie kami dan buka Create.aspx.

Buka folder Skrip di Penjelajah Solusi dan seret tiga skrip berikut ke dalam <tag kepala> .

• MicrosoftAjax.js
• MicrosoftMvcValidation.js

Anda ingin file skrip ini muncul dalam urutan ini.

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

Selain itu, tambahkan baris tunggal ini di atas Html.BeginForm:

<% Html.EnableClientValidation(); %>

Berikut adalah kode yang ditampilkan dalam IDE.

Jalankan aplikasi Anda dan kunjungi /Movies/Create lagi, dan klik Buat tanpa memasukkan data apa pun. Pesan kesalahan muncul segera tanpa flash halaman yang kami kaitkan dengan pengiriman data kembali ke server. Ini karena ASP.NET MVC sekarang memvalidasi input pada klien (menggunakan JavaScript) dan di server.

Ini terlihat bagus! Sekarang mari kita tambahkan satu kolom tambahan ke database.

SebelumnyaBerikutnya