Bagikan melalui

Melakukan Validasi Sederhana (VB)

oleh Stephen Walther

Pelajari cara melakukan validasi dalam aplikasi MVC ASP.NET. Dalam tutorial ini, Stephen Walther memperkenalkan Anda ke status model dan pembantu HTML validasi.

Tujuan dari tutorial ini adalah untuk menjelaskan bagaimana Anda dapat melakukan validasi dalam aplikasi MVC ASP.NET. Misalnya, Anda mempelajari cara mencegah seseorang mengirimkan formulir yang tidak berisi nilai untuk bidang yang diperlukan. Anda mempelajari cara menggunakan status model dan pembantu HTML validasi.

Memahami Status Model

Anda menggunakan status model - atau lebih akurat, kamus status model - untuk mewakili kesalahan validasi. Misalnya, tindakan Buat() di Daftar 1 memvalidasi properti kelas Produk sebelum menambahkan kelas Produk ke database.

Saya tidak menyarankan agar Anda menambahkan validasi atau logika database Anda ke pengontrol. Pengontrol hanya boleh berisi logika yang terkait dengan kontrol alur aplikasi. Kami mengambil jalan pintas untuk menjaga semuanya tetap sederhana.

Daftar 1 - Controllers\ProductController.vb

'
' POST: /Product/Create

<AcceptVerbs(HttpVerbs.Post)> _
Public Function Create(<Bind(Exclude:="Id")> ByVal productToCreate As Product) As ActionResult
    ' Validation logic
    If productToCreate.Name.Trim().Length = 0 Then
    ModelState.AddModelError("Name", "Name is required.")
    End If
    If productToCreate.Description.Trim().Length = 0 Then
    ModelState.AddModelError("Description", "Description is required.")
    End If
    If productToCreate.UnitsInStock

Di Daftar 1, properti Nama, Deskripsi, dan UnitsInStock kelas Produk divalidasi. Jika salah satu properti ini gagal dalam pengujian validasi, maka kesalahan ditambahkan ke kamus status model (diwakili oleh properti ModelState dari kelas Pengontrol).

Jika ada kesalahan dalam status model, properti ModelState.IsValid mengembalikan false. Dalam hal ini, formulir HTML untuk membuat produk baru diputar ulang. Jika tidak, jika tidak ada kesalahan validasi, Produk baru ditambahkan ke database.

Menggunakan Pembantu Validasi

Kerangka kerja MVC ASP.NET mencakup dua pembantu validasi: pembantu Html.ValidationMessage() dan pembantu Html.ValidationSummary(). Anda menggunakan kedua pembantu ini dalam tampilan untuk menampilkan pesan kesalahan validasi.

Pembantu Html.ValidationMessage() dan Html.ValidationSummary() digunakan dalam tampilan Buat dan Edit yang dihasilkan secara otomatis oleh perancah MVC ASP.NET. Ikuti langkah-langkah ini untuk membuat tampilan Buat:

  1. Klik kanan tindakan Buat() di pengontrol Produk dan pilih opsi menu Tambahkan Tampilan (lihat Gambar 1).
  2. Dalam dialog Tambahkan Tampilan , centang kotak centang berlabel Buat tampilan yang di ketik dengan kuat (lihat Gambar 2).
  3. Dari daftar dropdown Lihat kelas data , pilih kelas Produk.
  4. Dari daftar dropdown Tampilkan konten , pilih Buat.
  5. Klik tombol Tambahkan.

Pastikan Anda membuat aplikasi sebelum menambahkan tampilan. Jika tidak, daftar kelas tidak akan muncul di daftar dropdown Tampilkan kelas data .

Cuplikan layar file Product Controller dot c s di editor kode, yang menampilkan menu klik kanan dengan item menu Tambahkan Tampilan yang disorot.

Gambar 01: Menambahkan tampilan (Klik untuk melihat gambar ukuran penuh)

Cuplikan layar kotak dialog Tambahkan Tampilan, yang memperlihatkan bahwa kotak centang Buat tampilan yang ditik dengan kuat terisi.

Gambar 02: Membuat tampilan yang sangat ditik (Klik untuk melihat gambar ukuran penuh)

Setelah menyelesaikan langkah-langkah ini, Anda mendapatkan tampilan Buat di Daftar 2.

Daftar 2 - Views\Product\Create.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MvcApplication1.Product)" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% Using Html.BeginForm()%>

        <fieldset>
            <legend>Fields</legend>

            <p>
                <label for="Name">Name:</label>
                <%= Html.TextBox("Name") %>
                <%= Html.ValidationMessage("Name", "*") %>
            </p>
            <p>
                <label for="Description">Description:</label>
                <%= Html.TextBox("Description") %>
                <%= Html.ValidationMessage("Description", "*") %>
            </p>
            <p>
                <label for="Price">Price:</label>
                <%= Html.TextBox("Price") %>
                <%= Html.ValidationMessage("Price", "*") %>
            </p>
            <p>
                <label for="UnitsInStock">UnitsInStock:</label>
                <%= Html.TextBox("UnitsInStock") %>
                <%= Html.ValidationMessage("UnitsInStock", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% End Using %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Dalam Daftar 2, pembantu Html.ValidationSummary() dipanggil tepat di atas formulir HTML. Pembantu ini digunakan untuk menampilkan daftar pesan kesalahan validasi. Pembantu Html.ValidationSummary() merender kesalahan dalam daftar berpoin.

Pembantu Html.ValidationMessage() dipanggil di samping setiap bidang formulir HTML. Pembantu ini digunakan untuk menampilkan pesan kesalahan tepat di samping bidang formulir. Dalam kasus Listing 2, pembantu Html.ValidationMessage() menampilkan tanda bintang ketika ada kesalahan.

Halaman di Gambar 3 mengilustrasikan pesan kesalahan yang dirender oleh pembantu validasi saat formulir dikirimkan dengan bidang yang hilang dan nilai yang tidak valid.

Cuplikan layar jendela Internet Explorer, yang memperlihatkan tampilan Buat dengan pesan kesalahan yang dihasilkan dari bidang yang diisi dengan nilai yang tidak valid.

Gambar 03: Tampilan Buat yang dikirimkan dengan masalah (Klik untuk melihat gambar ukuran penuh)

Perhatikan bahwa tampilan bidang input HTML juga dimodifikasi ketika ada kesalahan validasi. Pembantu Html.TextBox() merender atribut class="input-validation-error" ketika ada kesalahan validasi yang terkait dengan properti yang dirender oleh pembantu Html.TextBox().

Ada tiga kelas lembar gaya berkaskala yang digunakan untuk mengontrol tampilan kesalahan validasi:

  • input-validation-error - Diterapkan ke tag input> yang <dirender oleh pembantu Html.TextBox().
  • field-validation-error - Diterapkan ke tag rentang> yang <dirender oleh pembantu Html.ValidationMessage().
  • validation-summary-errors - Diterapkan ke tag ul> yang <dirender oleh pembantu Html.ValidationSummary().

Anda dapat memodifikasi kelas lembar gaya kaskade ini, dan karenanya mengubah tampilan kesalahan validasi, dengan memodifikasi file Site.css yang terletak di folder Konten.

Catatan

Kelas HtmlHelper mencakup properti statis baca-saja untuk mengambil nama kelas CSS terkait validasi. Properti statis ini diberi nama ValidationInputCssClassName, ValidationFieldCssClassName, dan ValidationSummaryCssClassName.

Validasi Prebinding dan Validasi Pascabinding

Jika Anda mengirimkan formulir HTML untuk membuat Produk, dan Anda memasukkan nilai yang tidak valid untuk bidang harga dan tidak ada nilai untuk bidang UnitsInStock, maka Anda akan mendapatkan pesan validasi yang ditampilkan di Gambar 4. Dari mana pesan kesalahan validasi ini berasal?

Cuplikan layar jendela Internet Explorer, yang memperlihatkan Bidang Harga dan Unit di Stok ditandai sebagai kesalahan validasi.

Gambar 04: Kesalahan Validasi Prebinding (Klik untuk melihat gambar ukuran penuh)

Sebenarnya ada dua jenis pesan kesalahan validasi - yang dihasilkan sebelum bidang formulir HTML terikat ke kelas dan yang dihasilkan setelah bidang formulir terikat ke kelas . Dengan kata lain, ada kesalahan validasi prebinding dan kesalahan validasi pascabinding.

Tindakan Buat() yang diekspos oleh pengontrol Produk di Daftar 1 menerima instans kelas Produk. Tanda tangan metode Buat terlihat seperti ini:

Public Function Create(<Bind(Exclude:="Id")> ByVal productToCreate As Product) As ActionResult

Nilai bidang formulir HTML dari formulir Buat terikat ke kelas productToCreate dengan sesuatu yang disebut pengikat model. Pengikat model default menambahkan pesan kesalahan ke status model secara otomatis ketika tidak dapat mengikat bidang formulir ke properti formulir.

Pengikat model default tidak dapat mengikat string "apple" ke properti Harga kelas Produk. Anda tidak dapat menetapkan string ke properti desimal. Oleh karena itu, pengikat model menambahkan kesalahan ke status model.

Pengikat model default juga tidak dapat menetapkan nilai Tidak Ada ke properti yang tidak menerima nilai Tidak Ada. Secara khusus, pengikat model tidak dapat menetapkan nilai Tidak Ada ke properti UnitsInStock. Sekali lagi, pengikat model menyerah dan menambahkan pesan kesalahan ke status model.

Jika Anda ingin menyesuaikan tampilan pesan kesalahan pra-pengikatan ini, Maka Anda perlu membuat string sumber daya untuk pesan-pesan ini.

Ringkasan

Tujuan dari tutorial ini adalah untuk menjelaskan mekanisme dasar validasi dalam kerangka kerja MVC ASP.NET. Anda mempelajari cara menggunakan status model dan pembantu HTML validasi. Kami juga membahas perbedaan antara validasi prebinding dan postbinding. Dalam tutorial lain, kita akan membahas berbagai strategi untuk memindahkan kode validasi Anda dari pengontrol dan ke kelas model Anda.

SebelumnyaBerikutnya