Bagian 9, tambahkan validasi ke aplikasi MVC Inti ASP.NET

Oleh Rick Anderson

Di bagian ini:

• Logika validasi ditambahkan ke Movie model.
• Anda memastikan bahwa aturan validasi diberlakukan setiap kali pengguna membuat atau mengedit film.

Menjaga hal-hal TETAP KERING

Salah satu tenet desain MVC adalah DRY ("Don't Repeat Yourself"). ASP.NET Core MVC mendorong Anda untuk menentukan fungsionalitas atau perilaku hanya sekali, lalu membuatnya tercermin di mana-mana dalam aplikasi. Ini mengurangi jumlah kode yang perlu Anda tulis dan membuat kode yang Anda tulis lebih sedikit rawan kesalahan, lebih mudah diuji, dan lebih mudah dipertahankan.

Dukungan validasi yang diberikan oleh MVC dan Entity Framework Core adalah contoh yang baik dari prinsip DRY dalam tindakan. Anda dapat secara deklaratif menentukan aturan validasi di satu tempat (di kelas model) dan aturan diberlakukan di mana saja di aplikasi.

Validasi di .NET 10

Di .NET 10, API validasi terpadu telah dipindahkan ke Microsoft.Extensions.Validation paket NuGet. Perubahan ini membuat API validasi tersedia di luar skenario HTTP Inti ASP.NET.

Untuk menggunakan Microsoft.Extensions.Validation API:

• Tambahkan referensi paket berikut:

  <PackageReference Include="Microsoft.Extensions.Validation" Version="10.0.0" />
  

  Fungsionalitasnya tetap sama tetapi sekarang memerlukan referensi paket eksplisit.

• Daftarkan layanan validasi dengan injeksi dependensi:

  builder.Services.AddValidation();
  

Menghapus data yang diedit sebelumnya

Pada langkah berikutnya, aturan validasi ditambahkan yang tidak mengizinkan nilai null. Jalankan aplikasi, navigasikan ke /Movies/Index, hapus semua film yang tercantum, dan hentikan aplikasi. Aplikasi akan menggunakan data seed saat berikutnya dijalankan.

Menambahkan aturan validasi ke model film

Namespace DataAnnotations menyediakan sekumpulan atribut validasi bawaan yang diterapkan secara deklaratif ke kelas atau properti. DataAnnotations juga berisi atribut pemformatan seperti DataType yang membantu pemformatan dan tidak memberikan validasi apa pun.

Movie Perbarui kelas untuk memanfaatkan atribut Requiredvalidasi bawaan , , StringLength, RegularExpressiondan RangeDataType atribut pemformatan.

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MvcMovie.Models;

public class Movie
{
    public int Id { get; set; }

    [StringLength(60, MinimumLength = 3)]
    [Required]
    public string? Title { get; set; }

    [Display(Name = "Release Date")]
    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }    

    [RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$")]
    [Required]
    [StringLength(30)]
    public string? Genre { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$")]
    [StringLength(5)]
    [Required]
    public string? Rating { get; set; }
}

Atribut validasi menentukan perilaku yang ingin Anda terapkan pada properti model yang diterapkan:

• Atribut Required dan MinimumLength menunjukkan bahwa properti harus memiliki nilai; tetapi tidak ada yang mencegah pengguna memasukkan spasi kosong untuk memenuhi validasi ini.

• Atribut RegularExpression digunakan untuk membatasi karakter apa yang dapat dimasukkan. Dalam kode sebelumnya, "Genre":

  • Hanya boleh menggunakan huruf.
  • Huruf pertama harus huruf besar. Spasi kosong diperbolehkan sementara angka, dan karakter khusus tidak diperbolehkan.

• RegularExpression "Rating":

  • Mengharuskan karakter pertama berupa huruf besar.
  • Mengizinkan karakter dan angka khusus di spasi berikutnya. "PG-13" valid untuk rating, tetapi gagal untuk "Genre".

• Atribut Range membatasi nilai dalam rentang yang ditentukan.

• Atribut ini StringLength memungkinkan Anda mengatur panjang maksimum properti string, dan secara opsional panjang minimumnya.

• Jenis nilai (seperti decimal, int, float, DateTime) secara inheren diperlukan dan tidak memerlukan atribut [Required].

Memiliki aturan validasi yang diberlakukan secara otomatis oleh ASP.NET Core membantu membuat aplikasi Anda lebih kuat. Ini juga memastikan bahwa Anda tidak bisa lupa untuk memvalidasi sesuatu dan secara tidak sengaja membiarkan data buruk ke dalam database.

UI Kesalahan Validasi

Jalankan aplikasi dan navigasikan ke pengontrol Film.

Pilih tautan Buat Baru untuk menambahkan film baru. Isi formulir dengan beberapa nilai yang tidak valid. Segera setelah validasi sisi klien jQuery mendeteksi kesalahan, ia menampilkan pesan kesalahan.

Catatan

Anda mungkin tidak dapat memasukkan koma desimal di bidang desimal. Untuk mendukung validasi jQuery untuk lokal non-Bahasa Inggris yang menggunakan koma (",") untuk format tanggal desimal, dan non-Bahasa Inggris AS, Anda harus mengambil langkah-langkah untuk meng globalisasi aplikasi Anda. Lihat komentar GitHub 4076 ini untuk instruksi tentang menambahkan koma desimal.

Perhatikan bagaimana formulir telah secara otomatis merender pesan kesalahan validasi yang sesuai di setiap bidang yang berisi nilai yang tidak valid. Kesalahan diberlakukan baik sisi klien (menggunakan JavaScript dan jQuery) dan sisi server (jika pengguna menonaktifkan JavaScript).

Manfaat yang signifikan adalah Anda tidak perlu mengubah satu baris kode di MoviesController kelas atau dalam Create.cshtml tampilan untuk mengaktifkan UI validasi ini. Pengontrol dan tampilan yang Anda buat sebelumnya dalam tutorial ini secara otomatis mengambil aturan validasi yang Anda tentukan dengan menggunakan atribut validasi pada properti Movie kelas model. Uji validasi menggunakan Edit metode tindakan, dan validasi yang sama diterapkan.

Data formulir tidak dikirim ke server sampai tidak ada kesalahan validasi sisi klien. Anda dapat memverifikasi ini dengan menempatkan titik henti dalam HTTP Post metode , dengan menggunakan alat Fiddler , atau Alat pengembang F12.

Cara kerja validasi

Anda mungkin bertanya-tanya bagaimana UI validasi dihasilkan tanpa pembaruan kode di pengontrol atau tampilan. Kode berikut menunjukkan dua Create metode.

// GET: Movies/Create
public IActionResult Create()
{
    return View();
}

// POST: Movies/Create
// To protect from overposting attacks, enable the specific properties you want to bind to.
// For more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,Title,ReleaseDate,Genre,Price,Rating")] Movie movie)
{
    if (ModelState.IsValid)
    {
        _context.Add(movie);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    return View(movie);
}

Metode tindakan pertama (HTTP GET) Create menampilkan formulir Buat awal. Versi kedua ([HttpPost]) menangani posting formulir. Metode kedua Create (Versi [HttpPost] ) memanggil ModelState.IsValid untuk memeriksa apakah film memiliki kesalahan validasi. Memanggil metode ini mengevaluasi atribut validasi apa pun yang telah diterapkan ke objek. Jika objek memiliki kesalahan validasi, Create metode akan menampilkan kembali formulir. Jika tidak ada kesalahan, metode menyimpan film baru dalam database. Dalam contoh film kami, formulir tidak diposting ke server ketika ada kesalahan validasi yang terdeteksi di sisi klien; metode kedua Create tidak pernah dipanggil ketika ada kesalahan validasi sisi klien. Jika Anda menonaktifkan JavaScript di browser Anda, validasi klien dinonaktifkan dan Anda dapat menguji metode Create HTTP POST ModelState.IsValid yang mendeteksi kesalahan validasi apa pun.

Anda dapat mengatur titik henti dalam [HttpPost] Create metode dan memverifikasi metode tidak pernah dipanggil, validasi sisi klien tidak akan mengirimkan data formulir saat kesalahan validasi terdeteksi. Jika Anda menonaktifkan JavaScript di browser Anda, kirim formulir dengan kesalahan, titik henti akan tertembak. Anda masih mendapatkan validasi penuh tanpa JavaScript.

Gambar berikut menunjukkan cara menonaktifkan JavaScript di browser Firefox.

Gambar berikut menunjukkan cara menonaktifkan JavaScript di browser Chrome.

Setelah Anda menonaktifkan JavaScript, posting data yang tidak valid dan menelusuri debugger.

Sebagian Create.cshtml templat tampilan diperlihatkan dalam markup berikut:

<h4>Movie</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>

            @*Markup removed for brevity.*@

Markup sebelumnya digunakan oleh metode tindakan untuk menampilkan formulir awal dan untuk memutarnya kembali jika terjadi kesalahan.

Pembantu Tag Input menggunakan atribut DataAnnotations dan menghasilkan atribut HTML yang diperlukan untuk Validasi jQuery di sisi klien. Pembantu Tag Validasi menampilkan kesalahan validasi. Lihat Validasi untuk informasi selengkapnya.

Apa yang benar-benar bagus tentang pendekatan ini adalah bahwa baik pengontrol maupun Create templat tampilan tidak tahu apa-apa tentang aturan validasi aktual yang diberlakukan atau tentang pesan kesalahan tertentu yang ditampilkan. Aturan validasi dan string kesalahan hanya ditentukan di Movie kelas . Aturan validasi yang sama ini secara otomatis diterapkan ke Edit tampilan dan templat tampilan lain yang mungkin Anda buat yang mengedit model Anda.

Ketika Anda perlu mengubah logika validasi, Anda dapat melakukannya tepat di satu tempat dengan menambahkan atribut validasi ke model (dalam contoh ini, Movie kelas ). Anda tidak perlu khawatir tentang berbagai bagian aplikasi yang tidak konsisten dengan bagaimana aturan diberlakukan - semua logika validasi akan didefinisikan di satu tempat dan digunakan di mana-mana. Ini menjaga kode sangat bersih, dan membuatnya mudah untuk dipertahankan dan berkembang. Dan itu berarti bahwa Anda akan sepenuhnya menghormati prinsip DRY.

Menggunakan Atribut DataType

Movie.cs Buka file dan periksa Movie kelas . Namespace System.ComponentModel.DataAnnotations menyediakan atribut pemformatan selain kumpulan atribut validasi bawaan. Kami telah menerapkan DataType nilai enumerasi ke tanggal rilis dan ke bidang harga. Kode berikut menunjukkan ReleaseDate properti dan Price dengan atribut yang sesuai DataType .

[Display(Name = "Release Date")]
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

[Range(1, 100)]
[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }    

Atribut DataType hanya memberikan petunjuk bagi mesin tampilan untuk memformat data dan menyediakan elemen/atribut seperti <a> untuk URL dan <a href="mailto:EmailAddress.com"> untuk email. Anda dapat menggunakan RegularExpression atribut untuk memvalidasi format data. Atribut DataType digunakan untuk menentukan jenis data yang lebih spesifik daripada jenis intrinsik database, atribut tersebut bukan atribut validasi. Dalam hal ini kita hanya ingin melacak tanggal, bukan waktu. DataType Enumerasi menyediakan banyak jenis data, seperti Tanggal, Waktu, Nomor Telepon, Mata Uang, EmailAddress, dan banyak lagi. Atribut ini DataType juga dapat memungkinkan aplikasi untuk secara otomatis menyediakan fitur khusus jenis. Misalnya, mailto: tautan dapat dibuat untuk DataType.EmailAddress, dan pemilih tanggal dapat disediakan untuk DataType.Date di browser yang mendukung HTML5. Atribut DataType memancarkan atribut HTML 5 data- (tanda hubung data yang diucapkan) yang dapat dipahami browser HTML 5. Atribut DataType tidak memberikan validasi apa pun.

DataType.Date tidak menentukan format tanggal yang ditampilkan. Secara default, bidang data ditampilkan sesuai dengan format default berdasarkan CultureInfoserver .

Atribut DisplayFormat digunakan untuk secara eksplisit menentukan format tanggal:

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime ReleaseDate { get; set; }

Pengaturan ApplyFormatInEditMode menentukan bahwa pemformatan juga harus diterapkan saat nilai ditampilkan dalam kotak teks untuk pengeditan. (Anda mungkin tidak menginginkannya untuk beberapa bidang — misalnya, untuk nilai mata uang, Anda mungkin tidak ingin simbol mata uang dalam kotak teks untuk pengeditan.)

Anda dapat menggunakan atribut dengan DisplayFormat sendirinya, tetapi umumnya merupakan ide yang baik untuk menggunakan DataType atribut . Atribut DataType ini menyampaikan semantik data dibandingkan dengan cara merendernya di layar, dan memberikan manfaat berikut yang tidak Anda dapatkan dengan DisplayFormat:

• Browser dapat mengaktifkan fitur HTML5 (misalnya untuk menampilkan kontrol kalender, simbol mata uang yang sesuai lokal, tautan email, dll.)

• Secara default, browser akan merender data menggunakan format yang benar berdasarkan lokal Anda.

• Atribut DataType dapat mengaktifkan MVC untuk memilih templat bidang yang tepat untuk merender data ( DisplayFormat jika digunakan dengan sendirinya menggunakan templat string).

Catatan

Validasi jQuery tidak berfungsi dengan Range atribut dan DateTime. Misalnya, kode berikut akan selalu menampilkan kesalahan validasi sisi klien, bahkan ketika tanggal berada dalam rentang yang ditentukan:

[Range(typeof(DateTime), "1/1/1966", "1/1/2020")]

Anda harus menonaktifkan validasi tanggal jQuery untuk menggunakan Range atribut dengan DateTime. Ini umumnya bukan praktik yang baik untuk mengkompilasi tanggal keras dalam model Anda, jadi menggunakan Range atribut dan DateTime tidak disarankan.

Kode berikut menunjukkan menggabungkan atribut pada satu baris:

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MvcMovie.Models;

public class Movie
{
    public int Id { get; set; }
    [StringLength(60, MinimumLength = 3)]
    public string? Title { get; set; }
    [Display(Name = "Release Date"), DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }
    [RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$"), Required, StringLength(30)]
    public string? Genre { get; set; }
    [Range(1, 100), DataType(DataType.Currency), Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }
    [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$"), StringLength(5)]
    public string? Rating { get; set; }
}

Di bagian berikutnya dari seri ini, kami meninjau aplikasi dan melakukan beberapa peningkatan pada metode dan Details yang dihasilkan Delete secara otomatis.

Sumber Daya Tambahan:

• Bekerja dengan Formulir
• Globalisasi dan pelokalan
• Pengantar Pembantu Tag
• Pembantu Tag Penulis

SebelumnyaBerikutnya