ASP.NET Pembantu, Formulir, dan Validasi MVC 4

Di ASP.NET Model MVC 4 dan Lab Langsung Akses Data, Anda telah memuat dan menampilkan data dari database. Di Lab Langsung ini, Anda akan menambahkan ke aplikasi Music Store kemampuan untuk mengedit data tersebut.

Dengan mengingat tujuan tersebut, Anda akan terlebih dahulu membuat pengontrol yang akan mendukung tindakan Buat, Baca, Perbarui, dan Hapus (CRUD) album. Anda akan menghasilkan templat Tampilan Indeks yang memanfaatkan fitur perancah MVC ASP.NET untuk menampilkan properti album dalam tabel HTML. Untuk meningkatkan tampilan tersebut, Anda akan menambahkan pembantu HTML kustom yang akan memotong deskripsi panjang.

Setelah itu, Anda akan menambahkan Edit dan Buat Tampilan yang akan memungkinkan Anda mengubah album dalam database, dengan bantuan elemen formulir seperti dropdown.

Terakhir, Anda akan mengizinkan pengguna menghapus album dan juga Anda akan mencegah mereka memasukkan data yang salah dengan memvalidasi input mereka.

Lab Langsung ini mengasumsikan Anda memiliki pengetahuan dasar tentang MVC ASP.NET. Jika Anda belum menggunakan MVC ASP.NET sebelumnya, kami sarankan Anda untuk membahas ASP.NET MVC Fundamentals Hands-on Lab.

Lab ini memandu Anda melalui penyempurnaan dan fitur baru yang sebelumnya dijelaskan dengan menerapkan perubahan kecil pada sampel aplikasi Web yang disediakan di folder Sumber.

Catatan

Semua kode sampel dan cuplikan disertakan dalam Kit Pelatihan Kamp Web, tersedia di Rilis Microsoft-Web/WebCampTrainingKit. Proyek khusus untuk lab ini tersedia di ASP.NET MVC 4 Helpers, Forms dan Validation.

Tujuan

Di Lab Langsung ini, Anda akan mempelajari cara:

Membuat pengontrol untuk mendukung operasi CRUD
Membuat Tampilan Indeks untuk menampilkan properti entitas dalam tabel HTML
Menambahkan pembantu HTML kustom
Membuat dan mengkustomisasi Tampilan Edit
Membedakan antara metode tindakan yang bereaksi terhadap panggilan HTTP-GET atau HTTP-POST
Menambahkan dan mengkustomisasi Tampilan Buat
Menangani penghapusan entitas
Memvalidasi input pengguna

Prasyarat

Anda harus memiliki item berikut untuk menyelesaikan lab ini:

Microsoft Visual Studio Express 2012 untuk Web atau superior (baca Lampiran A untuk petunjuk tentang cara menginstalnya).

Siapkan

Menginstal Cuplikan Kode

Untuk kenyamanan, banyak kode yang akan Anda kelola di sepanjang lab ini tersedia sebagai cuplikan kode Visual Studio. Untuk menginstal cuplikan kode, jalankan file .\Source\Setup\CodeSnippets.vsi .

Jika Anda tidak terbiasa dengan Cuplikan Visual Studio Code, dan ingin mempelajari cara menggunakannya, Anda dapat merujuk ke lampiran dari dokumen ini "Lampiran B: Menggunakan Cuplikan Kode".

Latihan

Latihan berikut membentuk Lab Langsung ini:

Membuat pengontrol Manajer Penyimpanan dan tampilan Indeksnya
Menambahkan Pembantu HTML
Membuat Tampilan Edit
Menambahkan Tampilan Buat
Menangani Penghapusan
Menambahkan Validasi
Menggunakan jQuery Tidak Mengganggu di Sisi Klien

Catatan

Setiap latihan disertai dengan folder Akhir yang berisi solusi yang dihasilkan yang harus Anda peroleh setelah menyelesaikan latihan. Anda dapat menggunakan solusi ini sebagai panduan jika Anda memerlukan bantuan tambahan untuk mengerjakan latihan.

Perkiraan waktu untuk menyelesaikan lab ini: 60 menit

Latihan 1: Membuat pengontrol Store Manager dan tampilan Indeksnya

Dalam latihan ini, Anda akan mempelajari cara membuat pengontrol baru untuk mendukung operasi CRUD, menyesuaikan metode tindakan Indeksnya untuk mengembalikan daftar album dari database dan akhirnya menghasilkan templat Tampilan Indeks yang memanfaatkan fitur perancah ASP.NET MVC untuk menampilkan properti album dalam tabel HTML.

Tugas 1 - Membuat StoreManagerController

Dalam tugas ini, Anda akan membuat pengontrol baru yang disebut StoreManagerController untuk mendukung operasi CRUD.

Buka folder Mulai solusi yang terletak di Source/Ex1-CreatingTheStoreManagerController/Begin/.
1. Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.
2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.
  
  Catatan
  
  Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Tambahkan pengontrol baru. Untuk melakukan ini, klik kanan folder Pengontrol dalam Penjelajah Solusi, pilih Tambahkan lalu perintah Pengontrol. Ubah Nama Pengontrol ke StoreManagerController dan pastikan opsi pengontrol MVC dengan tindakan baca/tulis kosong dipilih. Klik Tambahkan.

Tambahkan Dialog Pengontrol

Kelas Pengontrol baru dihasilkan. Karena Anda menunjukkan untuk menambahkan tindakan untuk baca/tulis, metode stub untuk itu, tindakan CRUD umum dibuat dengan komentar TODO yang diisi, meminta untuk menyertakan logika spesifik aplikasi.

Tugas 2 - Menyesuaikan Indeks StoreManager

Dalam tugas ini, Anda akan menyesuaikan metode tindakan Indeks StoreManager untuk mengembalikan Tampilan dengan daftar album dari database.

Di kelas StoreManagerController, tambahkan yang berikut ini menggunakan direktif.

(Cuplikan Kode - ASP.NET MVC 4 Pembantu dan Formulir dan Validasi - Ex1 menggunakan MvcMusicStore)
```
using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;
```
Tambahkan bidang ke StoreManagerController untuk menyimpan instans MusicStoreEntities.

(Cuplikan Kode - ASP.NET MVC 4 Pembantu dan Formulir dan Validasi - Ex1 MusicStoreEntities)
```
public class StoreManagerController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();
```
Terapkan tindakan Indeks StoreManagerController untuk mengembalikan Tampilan dengan daftar album.

Logika tindakan Pengontrol akan sangat mirip dengan tindakan Indeks StoreController yang ditulis sebelumnya. Gunakan LINQ untuk mengambil semua album, termasuk informasi Genre dan Artis untuk ditampilkan.

(Cuplikan Kode - ASP.NET MVC 4 Helpers and Forms and Validation - Ex1 StoreManagerController Index)
```
//
// GET: /StoreManager/

public ActionResult Index()
{
    var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
         .OrderBy(a => a.Price);

    return this.View(albums.ToList());
}
```

Tugas 3 - Membuat Tampilan Indeks

Dalam tugas ini, Anda akan membuat templat Tampilan Indeks untuk menampilkan daftar album yang dikembalikan oleh Pengontrol StoreManager .

Sebelum membuat templat Tampilan baru, Anda harus membuat proyek sehingga Dialog Tambahkan Tampilan tahu tentang kelas Album yang akan digunakan. Pilih Build | Bangun MvcMusicStore untuk membangun proyek.
Klik kanan di dalam metode tindakan Indeks dan pilih Tambahkan Tampilan. Ini akan memunculkan dialog Tambahkan Tampilan .

Menambahkan Tampilan dari dalam metode Indeks
Dalam dialog Tambahkan Tampilan, verifikasi bahwa Nama Tampilan adalah Indeks. Pilih opsi Buat tampilan yang diketik dengan kuat, dan pilih Album (MvcMusicStore.Models) dari menu drop-down kelas Model. Pilih Daftar dari menu drop-down Templat perancah. Biarkan Mesin tampilan ke Razor dan bidang lainnya dengan nilai defaultnya lalu klik Tambahkan.

Menambahkan Tampilan Indeks

Tugas 4 - Menyesuaikan perancah Tampilan Indeks

Dalam tugas ini, Anda akan menyesuaikan templat Tampilan sederhana yang dibuat dengan fitur perancah MVC ASP.NET agar menampilkan bidang yang Anda inginkan.

Catatan

Dukungan perancah dalam ASP.NET MVC menghasilkan templat Tampilan sederhana yang mencantumkan semua bidang dalam model Album. Perancah menyediakan cara cepat untuk memulai tampilan yang ditik dengan kuat: daripada harus menulis templat Tampilan secara manual, perancah dengan cepat menghasilkan templat default dan kemudian Anda dapat memodifikasi kode yang dihasilkan.

Tinjau kode yang dibuat. Daftar bidang yang dihasilkan akan menjadi bagian dari tabel HTML berikut yang digunakan Perancah untuk menampilkan data tabular.

@model IEnumerable<MvcMusicStore.Models.Album>

@{
     ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
     @Html.ActionLink("Create New", "Create")
</p>
<table>
     <tr>
          <th>
                @Html.DisplayNameFor(model => model.GenreId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.ArtistId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Title)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Price)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.AlbumArtUrl)
          </th>
          <th></th>
     </tr>

@foreach (var item in Model) {
     <tr>
          <td>
                @Html.DisplayFor(modelItem => item.GenreId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.ArtistId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.AlbumArtUrl)
          </td>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
                @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
     </tr>
}

</table>

<Ganti kode tabel> dengan kode berikut untuk hanya menampilkan bidang Genre, Artis, Judul Album, dan Harga. Ini menghapus kolom Url AlbumId dan Album Art. Selain itu, ini mengubah kolom GenreId dan ArtistId untuk menampilkan properti kelas tertaut Artist.Name dan Genre.Name, dan menghapus tautan Detail .

<table>
    <tr>
      <th></th>
      <th>Genre</th>
      <th>Artist</th>
      <th>Title</th>
      <th>Price</th>
    </tr>

    @foreach (var item in Model) {
     <tr>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Artist.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
     </tr>
    }
</table>

Ubah deskripsi berikut.

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

Tugas 5 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa templat Tampilan Indeks StoreManager menampilkan daftar album sesuai dengan desain langkah-langkah sebelumnya.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL ke /StoreManager untuk memverifikasi bahwa daftar album ditampilkan, memperlihatkan Judul, Artis, dan Genre mereka.

Menelusuri daftar album

Latihan 2: Menambahkan Pembantu HTML

Halaman Indeks StoreManager memiliki satu masalah potensial: Properti Judul dan Nama Artis keduanya bisa cukup panjang untuk melempar pemformatan tabel. Dalam latihan ini Anda akan mempelajari cara menambahkan pembantu HTML kustom untuk memotong teks tersebut.

Dalam gambar berikut, Anda dapat melihat bagaimana format dimodifikasi karena panjang teks saat Anda menggunakan ukuran browser kecil.

Menelusuri daftar Album dengan teks yang tidak terpotong

Menelusuri daftar Album dengan teks yang tidak terpotong

Tugas 1 - Memperluas Pembantu HTML

Dalam tugas ini, Anda akan menambahkan metode baru Potong ke objek HTML yang diekspos dalam tampilan MVC ASP.NET. Untuk melakukan ini, Anda akan menerapkan metode ekstensi ke kelas System.Web.Mvc.HtmlHelper bawaan yang disediakan oleh ASP.NET MVC.

Catatan

Untuk membaca selengkapnya tentang Metode Ekstensi, silakan kunjungi artikel msdn ini. https://msdn.microsoft.com/library/bb383977.aspx.

Buka folder Mulai solusi yang terletak di Folder Source/Ex2-AddingAnHTMLHelper/Begin/ . Jika tidak, Anda mungkin terus menggunakan solusi Akhir yang diperoleh dengan menyelesaikan latihan sebelumnya.
1. Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.
2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.
  
  Catatan
  
  Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Buka Tampilan Indeks StoreManager. Untuk melakukan ini, di Penjelajah Solusi perluas folder Tampilan, lalu StoreManager dan buka file Index.cshtml.

Tambahkan kode berikut di bawah arahan @model untuk menentukan metode pembantu Potong .

@model IEnumerable<MvcMusicStore.Models.Album>

@helper Truncate(string input, int length)
{
     if (input.Length <= length) {
          @input
     } else {
          @input.Substring(0, length)<text>...</text>
     }
} 

@{
     ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

Tugas 2 - Memotong Teks di Halaman

Dalam tugas ini, Anda akan menggunakan metode Potong untuk memotong teks dalam templat Tampilan.

Buka Tampilan Indeks StoreManager. Untuk melakukan ini, di Penjelajah Solusi perluas folder Tampilan, lalu StoreManager dan buka file Index.cshtml.

Ganti baris yang menampilkan Nama Artis dan Judul Album. Untuk melakukan ini, ganti baris berikut.

<tr>
     <td>
          @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

          @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Genre.Name)
     </td>
     <td>
          @Truncate(item.Artist.Name, 25)
     </td>
     <td>
          @Truncate(item.Title, 25)
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Price)
     </td>
</tr>

Tugas 3 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa templat Tampilan Indeks StoreManager memotong Judul Album dan Nama Artis.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL ke /StoreManager untuk memverifikasi bahwa teks panjang di kolom Judul dan Artis dipotong.

Judul terpotong dan Nama Artis

Latihan 3: Membuat Tampilan Edit

Dalam latihan ini, Anda akan mempelajari cara membuat formulir untuk memungkinkan manajer penyimpanan mengedit Album. Mereka akan menelusuri URL /StoreManager/Edit/id (id menjadi id unik album untuk diedit), sehingga melakukan panggilan HTTP-GET ke server.

Metode tindakan Edit Pengontrol akan mengambil Album yang sesuai dari database, membuat objek StoreManagerViewModel untuk merangkumnya (bersama dengan daftar Artis dan Genre), lalu meneruskannya ke templat Tampilan untuk merender halaman HTML kembali kepada pengguna. Halaman ini akan berisi <elemen formulir> dengan kotak teks dan dropdown untuk mengedit properti Album.

Setelah pengguna memperbarui nilai formulir Album dan mengklik tombol Simpan , perubahan dikirimkan melalui panggilan HTTP-POST kembali ke /StoreManager/Edit/id. Meskipun URL tetap sama seperti dalam panggilan terakhir, ASP.NET MVC mengidentifikasi bahwa kali ini adalah HTTP-POST dan karena itu menjalankan metode tindakan Edit yang berbeda (satu dihiasi dengan [HttpPost]).

Tugas 1 - Menerapkan Metode Tindakan Edit HTTP-GET

Dalam tugas ini, Anda akan menerapkan versi HTTP-GET dari metode tindakan Edit untuk mengambil Album yang sesuai dari database, serta daftar semua Genre dan Artis. Ini akan mengemas data ini ke objek StoreManagerViewModel yang ditentukan pada langkah terakhir, yang kemudian akan diteruskan ke templat Tampilan untuk merender respons dengan.

Buka folder Mulai solusi yang terletak di Source/Ex3-CreatingTheEditView/Begin/. Jika tidak, Anda mungkin terus menggunakan solusi Akhir yang diperoleh dengan menyelesaikan latihan sebelumnya.
1. Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.
2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.
  
  Catatan
  
  Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Buka kelas StoreManagerController. Untuk melakukan ini, perluas folder Pengontrol dan klik dua kali StoreManagerController.cs.
Ganti metode tindakan HTTP-GET Edit dengan kode berikut untuk mengambil Album yang sesuai serta daftar Genre dan Artis.

(Cuplikan Kode - ASP.NET MVC 4 Helpers dan Forms and Validation - Ex3 StoreManagerController HTTP-GET Edit action)
```
public ActionResult Edit(int id)
{
    Album album = this.db.Albums.Find(id);

    if (album == null)
    {
         return this.HttpNotFound();
    }

    this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
    this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

    return this.View(album);
}
```
Catatan

Anda menggunakan System.Web.Mvc SelectList untuk Artis dan Genre, bukan System.Collections.Generic List.

SelectList adalah cara yang lebih bersih untuk mengisi dropdown HTML dan mengelola hal-hal seperti pilihan saat ini. Membuat instans dan kemudian menyiapkan objek ViewModel ini dalam tindakan pengontrol akan membuat skenario Edit formulir lebih bersih.

Tugas 2 - Membuat Tampilan Edit

Dalam tugas ini, Anda akan membuat templat Edit Tampilan yang nantinya akan menampilkan properti album.

Buat Tampilan Edit. Untuk melakukan ini, klik kanan di dalam metode tindakan Edit dan pilih Tambahkan Tampilan.
Dalam dialog Tambahkan Tampilan, verifikasi bahwa Nama Tampilan adalah Edit. Centang kotak centang Buat tampilan yang diketik dengan kuat dan pilih Album (MvcMusicStore.Models) dari menu drop-down Tampilkan kelas data. Pilih Edit dari menu drop-down Templat perancah. Biarkan bidang lain dengan nilai defaultnya lalu klik Tambahkan.

Menambahkan tampilan Edit

Tugas 3 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa halaman Tampilan Edit StoreManager menampilkan nilai properti untuk album yang diteruskan sebagai parameter.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL menjadi /StoreManager/Edit/1 untuk memverifikasi bahwa nilai properti untuk album yang diteruskan ditampilkan.

Menelusuri tampilan Edit Album

Tugas 4 - Menerapkan drop-down pada Templat Editor Album

Dalam tugas ini, Anda akan menambahkan drop-down ke templat Tampilan yang dibuat di tugas terakhir, sehingga pengguna dapat memilih dari daftar Artis dan Genre.

Ganti semua kode set bidang Album dengan yang berikut ini:

<fieldset>
     <legend>Album</legend>

     @Html.HiddenFor(model => model.AlbumId)

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Price)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Price)
          @Html.ValidationMessageFor(model => model.Price)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.AlbumArtUrl)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.AlbumArtUrl)
          @Html.ValidationMessageFor(model => model.AlbumArtUrl)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Artist)
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Genre)
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <p>
          <input type="submit" value="Save" />
     </p>
</fieldset>

Catatan

Pembantu Html.DropDownList telah ditambahkan ke drop-down render untuk memilih Artis dan Genre. Parameter yang diteruskan ke Html.DropDownList adalah:

Nama bidang formulir ("ArtistId").
Daftar Pilih nilai untuk menu drop-down.

Tugas 5 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa halaman Tampilan Edit StoreManager menampilkan drop-down alih-alih bidang teks Artis dan ID Genre.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL ke /StoreManager/Edit/1 untuk memverifikasi bahwa URL menampilkan drop-down alih-alih bidang teks Artis dan ID Genre.

Menelusuri tampilan Edit Album, kali ini dengan dropdown

Tugas 6 - Menerapkan metode tindakan HTTP-POST Edit

Sekarang setelah Tampilan Edit ditampilkan seperti yang diharapkan, Anda perlu mengimplementasikan metode Tindakan Edit HTTP-POST untuk menyimpan perubahan yang dibuat pada Album.

Tutup browser jika diperlukan, untuk kembali ke jendela Visual Studio. Buka StoreManagerController dari folder Pengontrol .
Ganti kode metode tindakan HTTP-POST Edit dengan yang berikut (perhatikan bahwa metode yang harus diganti adalah versi kelebihan beban yang menerima dua parameter):

(Cuplikan Kode - ASP.NET MVC 4 Helpers dan Forms and Validation - Ex3 StoreManagerController HTTP-POST Edit action)
```
[HttpPost]
public ActionResult Edit(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Entry(album).State = EntityState.Modified;
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}
```
Catatan

Metode ini akan dijalankan ketika pengguna mengklik tombol Simpan dari Tampilan dan melakukan HTTP-POST dari nilai formulir kembali ke server untuk mempertahankannya dalam database. Dekorator [HttpPost] menunjukkan bahwa metode harus digunakan untuk skenario HTTP-POST tersebut. Metode mengambil objek Album . ASP.NET MVC akan secara otomatis membuat objek Album dari nilai formulir> yang diposting<.

Metode ini akan melakukan langkah-langkah berikut:
1. Jika model valid:
  1. Perbarui entri album dalam konteks untuk menandainya sebagai objek yang dimodifikasi.
  2. Simpan perubahan dan alihkan ke tampilan indeks.
2. Jika model tidak valid, model akan mengisi ViewBag dengan GenreId dan ArtistId, maka model tersebut akan mengembalikan tampilan dengan objek Album yang diterima untuk memungkinkan pengguna melakukan pembaruan yang diperlukan.

Tugas 7 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa halaman Tampilan Edit StoreManager benar-benar menyimpan data Album yang diperbarui dalam database.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL menjadi /StoreManager/Edit/1. Ubah judul Album menjadi Muat dan klik Simpan. Verifikasi bahwa judul album benar-benar berubah dalam daftar album.

Memperbarui Album

Latihan 4: Menambahkan Tampilan Buat

Sekarang setelah StoreManagerController mendukung kemampuan Edit , dalam latihan ini Anda akan mempelajari cara menambahkan templat Buat Tampilan untuk memungkinkan manajer toko menambahkan Album baru ke aplikasi.

Seperti yang Anda lakukan dengan fungsionalitas Edit, Anda akan menerapkan skenario Buat menggunakan dua metode terpisah dalam kelas StoreManagerController :

Satu metode tindakan akan menampilkan formulir kosong ketika manajer penyimpanan pertama kali mengunjungi URL /StoreManager/Create .
Metode tindakan kedua akan menangani skenario di mana manajer penyimpanan mengklik tombol Simpan dalam formulir dan mengirimkan nilai kembali ke URL /StoreManager/Create sebagai HTTP-POST.

Tugas 1 - Menerapkan metode tindakan HTTP-GET Create

Dalam tugas ini, Anda akan menerapkan versi HTTP-GET dari metode tindakan Buat untuk mengambil daftar semua Genre dan Artis, mengemas data ini ke dalam objek StoreManagerViewModel , yang kemudian akan diteruskan ke templat Tampilan.

Buka folder Mulai solusi yang terletak di Source/Ex4-AddingACreateView/Begin/. Jika tidak, Anda mungkin terus menggunakan solusi Akhir yang diperoleh dengan menyelesaikan latihan sebelumnya.
1. Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.
2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.
  
  Catatan
  
  Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Buka kelas StoreManagerController . Untuk melakukan ini, perluas folder Pengontrol dan klik dua kali StoreManagerController.cs.

Ganti kode Buat metode tindakan dengan yang berikut ini:

(Cuplikan Kode - ASP.NET MVC 4 Helpers and Forms and Validation - Ex4 StoreManagerController HTTP-GET Create action)

//
// GET: /StoreManager/Create

public ActionResult Create()
{
     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");

     return this.View();
}

Tugas 2 - Menambahkan Tampilan Buat

Dalam tugas ini, Anda akan menambahkan templat Buat Tampilan yang akan menampilkan formulir Album baru (kosong).

Klik kanan di dalam metode Buat tindakan dan pilih Tambahkan Tampilan. Ini akan memunculkan dialog Tambahkan Tampilan.
Dalam dialog Tambahkan Tampilan, verifikasi bahwa Nama Tampilan adalah Buat. Pilih opsi Buat tampilan yang diketik dengan kuat dan pilih Album (MvcMusicStore.Models) dari menu drop-down kelas Model dan Buat dari menu drop-down templat Perancah. Biarkan bidang lain dengan nilai defaultnya lalu klik Tambahkan.

Menambahkan Tampilan Buat

Perbarui bidang GenreId dan ArtistId untuk menggunakan daftar drop-down seperti yang ditunjukkan di bawah ini:

...
<fieldset>
     <legend>Album</legend>

     <div class="editor-label">
          @Html.LabelFor(model => model.GenreId, "Genre")
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", String.Empty)
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.ArtistId, "Artist")
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", String.Empty)
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
    ...

Tugas 3 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa halaman Tampilan Buat StoreManager menampilkan formulir Album kosong.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL menjadi /StoreManager/Create. Verifikasi bahwa formulir kosong ditampilkan untuk mengisi properti Album baru.

Buat Tampilan dengan formulir kosong

Tugas 4 - Menerapkan Metode Tindakan Buat HTTP-POST

Dalam tugas ini, Anda akan menerapkan versi HTTP-POST dari metode tindakan Buat yang akan dipanggil saat pengguna mengklik tombol Simpan . Metode harus menyimpan album baru dalam database.

Tutup browser jika diperlukan, untuk kembali ke jendela Visual Studio. Buka kelas StoreManagerController . Untuk melakukan ini, perluas folder Pengontrol dan klik dua kali StoreManagerController.cs.

Ganti kode metode tindakan HTTP-POST Create dengan yang berikut:

(Cuplikan Kode - ASP.NET MVC 4 Helpers and Forms and Validation - Ex4 StoreManagerController HTTP- POST Create action)

[HttpPost]
public ActionResult Create(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Albums.Add(album);
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

Catatan

Tindakan Buat cukup mirip dengan metode tindakan Edit sebelumnya tetapi alih-alih mengatur objek sebagai dimodifikasi, tindakan tersebut ditambahkan ke konteks.

Tugas 5 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa halaman Buat Tampilan StoreManager memungkinkan Anda membuat Album baru lalu mengalihkan ke Tampilan Indeks StoreManager.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL menjadi /StoreManager/Create. Isi semua bidang formulir dengan data untuk Album baru, seperti bidang dalam gambar berikut:

Membuat Album
Verifikasi bahwa Anda dialihkan ke Tampilan Indeks StoreManager yang menyertakan Album baru yang baru saja dibuat.

Album Baru Dibuat

Latihan 5: Menangani Penghapusan

Kemampuan untuk menghapus album belum diimplementasikan. Inilah yang akan menjadi latihan ini. Seperti sebelumnya, Anda akan menerapkan skenario Hapus menggunakan dua metode terpisah dalam kelas StoreManagerController :

Satu metode tindakan akan menampilkan formulir konfirmasi
Metode tindakan kedua akan menangani pengiriman formulir

Tugas 1 - Menerapkan Metode Tindakan Penghapusan HTTP-GET

Dalam tugas ini, Anda akan menerapkan versi HTTP-GET dari metode tindakan Hapus untuk mengambil informasi album.

Buka folder Mulai solusi yang terletak di Source/Ex5-HandlingDeletion/Begin/. Jika tidak, Anda mungkin terus menggunakan solusi Akhir yang diperoleh dengan menyelesaikan latihan sebelumnya.
1. Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.
2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.
  
  Catatan
  
  Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Buka kelas StoreManagerController . Untuk melakukan ini, perluas folder Pengontrol dan klik dua kali StoreManagerController.cs.
Tindakan Hapus pengontrol sama persis dengan tindakan pengontrol Detail Penyimpanan sebelumnya: tindakan ini meminta objek album dari database menggunakan id yang disediakan di URL dan mengembalikan Tampilan yang sesuai. Untuk melakukan ini, ganti kode metode tindakan HTTP-GET Delete dengan yang berikut:

(Cuplikan Kode - ASP.NET MVC 4 Pembantu dan Formulir dan Validasi - Tindakan Penghapusan HTTP-GET Penghapusan Penanganan Ex5)
```
//
// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)
{
     Album album = this.db.Albums.Find(id);

     if (album == null)
     {
          return this.HttpNotFound();
     }

     return this.View(album);
}
```
Klik kanan di dalam metode tindakan Hapus dan pilih Tambahkan Tampilan. Ini akan memunculkan dialog Tambahkan Tampilan.
Dalam dialog Tambahkan Tampilan, verifikasi bahwa Nama tampilan adalah Hapus. Pilih opsi Buat tampilan yang diketik dengan kuat dan pilih Album (MvcMusicStore.Models) dari menu drop-down kelas Model. Pilih Hapus dari menu drop-down Templat perancah. Biarkan bidang lain dengan nilai defaultnya lalu klik Tambahkan.

Menambahkan Tampilan Hapus

Templat Hapus memperlihatkan semua bidang dari model. Anda hanya akan menampilkan judul album. Untuk melakukan ini, ganti konten tampilan dengan kode berikut:

@model MvcMusicStore.Models.Album
@{
     ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>

<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>

@using (Html.BeginForm()) {
     <p>
          <input type="submit" value="Delete" /> |
          @Html.ActionLink("Back to List", "Index")
     </p>
}

Tugas 2 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa halaman Tampilan Hapus StoreManager menampilkan formulir penghapusan konfirmasi.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL menjadi /StoreManager. Pilih satu album yang akan dihapus dengan mengklik Hapus dan verifikasi bahwa tampilan baru diunggah.

Menghapus Album

Tugas 3- Menerapkan Metode Tindakan Penghapusan HTTP-POST

Dalam tugas ini, Anda akan menerapkan versi HTTP-POST dari metode tindakan Hapus yang akan dipanggil ketika pengguna mengklik tombol Hapus . Metode harus menghapus album dalam database.

Tutup browser jika diperlukan, untuk kembali ke jendela Visual Studio. Buka kelas StoreManagerController . Untuk melakukan ini, perluas folder Pengontrol dan klik dua kali StoreManagerController.cs.

Ganti kode metode tindakan PENGHAPUSAN HTTP-POST dengan yang berikut:

(Cuplikan Kode - ASP.NET Pembantu dan Formulir dan Validasi MVC 4 - Tindakan Penghapusan HTTP-POST Penghapusan Penanganan Ex5)

//
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
     Album album = this.db.Albums.Find(id);
     this.db.Albums.Remove(album);
     this.db.SaveChanges();

     return this.RedirectToAction("Index"); 
}

Tugas 4 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa halaman Tampilan Hapus StoreManager memungkinkan Anda menghapus Album lalu mengalihkan ke Tampilan Indeks StoreManager.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL menjadi /StoreManager. Pilih satu album yang akan dihapus dengan mengklik Hapus. Konfirmasi penghapusan dengan mengklik tombol Hapus :

Menghapus Album
Verifikasi bahwa album telah dihapus karena tidak muncul di halaman Indeks .

Latihan 6: Menambahkan Validasi

Saat ini, formulir Buat dan Edit yang Anda miliki tidak melakukan validasi apa pun. Jika pengguna membiarkan bidang yang diperlukan kosong atau ketik huruf di bidang harga, kesalahan pertama yang akan Anda dapatkan adalah dari database.

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

Tugas 1 - Menambahkan Anotasi Data

Dalam tugas ini, Anda akan menambahkan Anotasi Data ke Model Album yang akan membuat halaman Buat dan Edit menampilkan pesan validasi jika sesuai.

Untuk kelas Model sederhana, menambahkan Anotasi Data baru saja ditangani dengan menambahkan pernyataan penggunaan untuk System.ComponentModel.DataAnnotation, lalu menempatkan atribut [Required] pada properti yang sesuai. Contoh berikut akan menjadikan properti Nama sebagai bidang yang diperlukan di Tampilan.

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

Ini sedikit lebih kompleks dalam kasus seperti aplikasi ini di mana Model Data Entitas dihasilkan. Jika Anda menambahkan Anotasi Data langsung ke kelas model, anotasi tersebut akan ditimpa jika Anda memperbarui model dari database. Sebagai gantinya, Anda dapat menggunakan kelas parsial metadata yang akan ada untuk menyimpan anotasi dan dikaitkan dengan kelas model menggunakan atribut [MetadataType ].

Buka folder Mulai solusi yang terletak di Sumber/Ex6-AddingValidation/Begin/. Jika tidak, Anda mungkin terus menggunakan solusi Akhir yang diperoleh dengan menyelesaikan latihan sebelumnya.
1. Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.
2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.
  
  Catatan
  
  Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Buka Album.cs dari folder Model.
Ganti konten Album.cs dengan kode yang disorot, sehingga terlihat seperti berikut ini:

Catatan

Baris [DisplayFormat(ConvertEmptyStringToNull=false)] menunjukkan bahwa string kosong dari model tidak akan dikonversi ke null saat bidang data diperbarui di sumber data. Pengaturan ini akan menghindari pengecualian ketika Kerangka Kerja Entitas menetapkan nilai null ke model sebelum Anotasi Data memvalidasi bidang.

(Cuplikan Kode - ASP.NET MVC 4 Pembantu dan Formulir dan Validasi - Kelas parsial metadata Album Ex6)
```
namespace MvcMusicStore.Models
{
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    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")]
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        [StringLength(160, MinimumLength = 2)]
        public string Title { get; set; }

        [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [DisplayName("Album Art URL")]
        [DataType(DataType.ImageUrl)]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }

        public virtual Genre Genre { get; set; }

        public virtual Artist Artist { get; set; }
    }
}
```
Catatan

Kelas parsial Album ini memiliki atribut MetadataType yang menunjuk ke kelas AlbumMetaData untuk Anotasi Data. Ini adalah beberapa atribut Anotasi Data yang Anda gunakan untuk membuat anotasi model Album:
- Wajib - Menunjukkan bahwa properti adalah bidang yang diperlukan
- DisplayName - Menentukan teks yang akan digunakan pada bidang formulir dan pesan validasi
- DisplayFormat - Menentukan bagaimana bidang data ditampilkan dan diformat.
- StringLength - Menentukan panjang maksimum untuk bidang string
- Rentang - Memberikan nilai maksimum dan minimum untuk bidang numerik
- ScaffoldColumn - Memungkinkan menyembunyikan bidang dari formulir editor

Tugas 2 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa bidang Buat dan Edit halaman memvalidasi, menggunakan nama tampilan yang dipilih dalam tugas terakhir.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL menjadi /StoreManager/Create. Verifikasi bahwa nama tampilan cocok dengan nama yang ada di kelas parsial (seperti URL Album Art, bukan AlbumArtUrl)
Klik Buat, tanpa mengisi formulir. Verifikasi bahwa Anda mendapatkan pesan validasi yang sesuai.

Bidang yang divalidasi di halaman Buat
Anda dapat memverifikasi bahwa hal yang sama terjadi pada halaman Edit . Ubah URL menjadi /StoreManager/Edit/1 dan verifikasi bahwa nama tampilan cocok dengan yang ada di kelas parsial (seperti URL Album Art, bukan AlbumArtUrl). Kosongkan bidang Judul dan Harga dan klik Simpan. Verifikasi bahwa Anda mendapatkan pesan validasi yang sesuai.

Bidang yang divalidasi di halaman Edit

Latihan 7: Menggunakan jQuery tidak mengganggu di Sisi Klien

Dalam latihan ini, Anda akan mempelajari cara mengaktifkan validasi JQuery MVC 4 Tidak mengganggu di sisi klien.

Catatan

JQuery Yang tidak mengganggu menggunakan JavaScript awalan data-ajax untuk memanggil metode tindakan di server daripada memancarkan skrip klien sebaris secara intrusif.

Tugas 1 - Menjalankan Aplikasi sebelum Mengaktifkan jQuery Tidak Mengganggu

Dalam tugas ini, Anda akan menjalankan aplikasi sebelum menyertakan jQuery untuk membandingkan kedua model validasi.

Buka folder Mulai solusi yang terletak di Source/Ex7-UnobtrusivejQueryValidation/Begin/. Jika tidak, Anda mungkin terus menggunakan solusi Akhir yang diperoleh dengan menyelesaikan latihan sebelumnya.
1. Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.
2. Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
3. Terakhir, bangun solusi dengan mengklik Build | Build Solution.
  
  Catatan
  
  Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Tekan F5 untuk menjalankan aplikasi.
Proyek dimulai di halaman Beranda. Telusuri /StoreManager/Buat dan klik Buat tanpa mengisi formulir untuk memverifikasi bahwa Anda mendapatkan pesan validasi:

Validasi klien dinonaktifkan

Di browser, buka kode sumber HTML:

...
          <div class="editor-label">
                <label for="Price">Price</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                <span class="field-validation-valid" id="Price_validationMessage"></span>
          </div>

          <div class="editor-label">
                <label for="AlbumArtUrl">Album Art URL</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
          </div>

          <p>
                <input type="submit" value="Create" />
          </p>
     </fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...

Tugas 2 - Mengaktifkan Validasi Klien Yang Tidak Mengganggu

Dalam tugas ini, Anda akan mengaktifkan validasi klien jQuery yang tidak mengganggu dari file Web.config, yang secara default diatur ke false dalam semua proyek MVC 4 ASP.NET baru. Selain itu, Anda akan menambahkan referensi skrip yang diperlukan untuk membuat jQuery Unobtrusive Client Validation berfungsi.

Buka file Web.Config di akar proyek, dan pastikan bahwa nilai kunci ClientValidationEnabled dan UnobtrusiveJavaScriptEnabled diatur ke true.
```
...
<configuration>
  <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="webpages:Enabled" value="false" />
     <add key="PreserveLoginUrl" value="true" />
     <add key="ClientValidationEnabled" value="true" />
     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...
```
Catatan

Anda juga dapat mengaktifkan validasi klien berdasarkan kode di Global.asax.cs untuk mendapatkan hasil yang sama:

HtmlHelper.ClientValidationEnabled = true;

Selain itu, Anda dapat menetapkan atribut ClientValidationEnabled ke pengontrol apa pun untuk memiliki perilaku kustom.
Buka Create.cshtml di Views\StoreManager.
Pastikan file skrip berikut, jquery.validate dan jquery.validate.unobtrusive, direferensikan dalam tampilan melalui bundel "~/bundles/jqueryval".
```
...
@section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
}
```
Catatan

Semua pustaka jQuery ini disertakan dalam proyek baru MVC 4. Anda dapat menemukan lebih banyak pustaka di folder /Scripts proyek Anda.

Untuk membuat pustaka validasi ini berfungsi, Anda perlu menambahkan referensi ke pustaka kerangka kerja jQuery. Karena referensi ini sudah ditambahkan dalam file _Layout.cshtml , Anda tidak perlu menambahkannya dalam tampilan khusus ini.

Tugas 3 - Menjalankan Aplikasi Menggunakan Validasi jQuery Yang Tidak Mengganggu

Dalam tugas ini, Anda akan menguji bahwa templat tampilan buat StoreManager melakukan validasi sisi klien menggunakan pustaka jQuery saat pengguna membuat album baru.

Tekan F5 untuk menjalankan aplikasi.
Proyek dimulai di halaman Beranda. Telusuri /StoreManager/Buat dan klik Buat tanpa mengisi formulir untuk memverifikasi bahwa Anda mendapatkan pesan validasi:

Validasi klien dengan jQuery diaktifkan

Di browser, buka kode sumber untuk Buat tampilan:

...
<div class="editor-label">
    <label for="Title">Title</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="Price">Price</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>        
...

Catatan

Untuk setiap aturan validasi klien, jQuery tidak mengganggu menambahkan atribut dengan data-val-rulename="message". Di bawah ini adalah daftar tag yang dimasukkan jQuery yang tidak mengganggu ke dalam bidang input html untuk melakukan validasi klien:

Data-val
Data-val-number
Rentang val data
Data-val-range-min / Data-val-range-max
Data-val diperlukan
Panjang data-val
Data-val-length-max / Data-val-length-min

Semua nilai data diisi dengan Anotasi Data model. Kemudian, semua logika yang berfungsi di sisi server dapat dijalankan di sisi klien. Misalnya, Atribut Harga memiliki anotasi data berikut dalam model:

[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }

Setelah menggunakan jQuery Unobtrusive, kode yang dihasilkan adalah:

<input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />

Ringkasan

Dengan menyelesaikan Lab Langsung ini, Anda telah mempelajari cara mengaktifkan pengguna untuk mengubah data yang disimpan dalam database dengan menggunakan hal berikut:

Tindakan pengontrol seperti Indeks, Buat, Edit, Hapus
ASP.NET fitur perancah MVC untuk menampilkan properti dalam tabel HTML
Pembantu HTML kustom untuk meningkatkan pengalaman pengguna
Metode tindakan yang bereaksi terhadap panggilan HTTP-GET atau HTTP-POST
Templat editor bersama untuk templat Tampilan serupa seperti Buat dan Edit
Elemen formulir seperti drop-down
Anotasi data untuk validasi Model
Validasi Sisi Klien menggunakan pustaka jQuery Unobtrusive

Lampiran A: Menginstal Visual Studio Express 2012 untuk Web

Anda dapat menginstal Microsoft Visual Studio Express 2012 untuk Web atau versi "Ekspres" lainnya menggunakan Microsoft Web Platform Installer. Instruksi berikut memandu Anda melalui langkah-langkah yang diperlukan untuk menginstal Visual studio Express 2012 untuk Web menggunakan Microsoft Web Platform Installer.

Buka [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Atau, jika Anda sudah menginstal Penginstal Platform Web, Anda dapat membukanya dan mencari produk "Visual Studio Express 2012 untuk Web dengan Windows Azure SDK".
Klik Instal Sekarang. Jika Anda tidak memiliki Penginstal Platform Web, Anda akan diarahkan untuk mengunduh dan menginstalnya terlebih dahulu.
Setelah Penginstal Platform Web terbuka, klik Instal untuk memulai penyiapan.

Menginstal Visual Studio Express
Baca semua lisensi dan ketentuan produk dan klik Saya Terima untuk melanjutkan.

Menerima persyaratan lisensi
Tunggu hingga proses pengunduhan dan penginstalan selesai.

Kemajuan penginstalan
Setelah penginstalan selesai, klik Selesai.

Penginstalan selesai
Klik Keluar untuk menutup Penginstal Platform Web.
Untuk membuka Visual Studio Express for Web, buka layar Mulai dan mulai menulis "VS Express", lalu klik petak VS Express untuk Web .

Vs Express untuk petak web

Lampiran B: Menggunakan Cuplikan Kode

Dengan cuplikan kode, Anda memiliki semua kode yang Anda butuhkan di ujung jari Anda. Dokumen lab akan memberi tahu Anda kapan tepatnya Anda dapat menggunakannya, seperti yang ditunjukkan pada gambar berikut.

Menggunakan cuplikan kode Visual Studio untuk menyisipkan kode ke dalam proyek Anda

Menggunakan cuplikan kode Visual Studio untuk menyisipkan kode ke dalam proyek Anda

Untuk menambahkan cuplikan kode menggunakan keyboard (hanya C#)

Tempatkan kursor tempat Anda ingin menyisipkan kode.
Mulai ketik nama cuplikan (tanpa spasi atau tanda hubung).
Tonton saat IntelliSense menampilkan nama cuplikan yang cocok.
Pilih cuplikan yang benar (atau terus ketik hingga seluruh nama cuplikan dipilih).
Tekan tombol Tab dua kali untuk menyisipkan cuplikan di lokasi kursor.

Mulai ketik nama cuplikan

Mulai ketik nama cuplikan

Tekan Tab untuk memilih cuplikan yang disorot

Tekan Tab untuk memilih cuplikan yang disorot

Tekan Tab lagi dan cuplikan akan diperluas

Tekan Tab lagi dan cuplikan akan diperluas

Untuk menambahkan cuplikan kode menggunakan mouse (C#, Visual Basic dan XML) 1. Klik kanan tempat Anda ingin menyisipkan cuplikan kode.

Pilih Sisipkan Cuplikan diikuti dengan Cuplikan Kode Saya.
Pilih cuplikan yang relevan dari daftar, dengan mengkliknya.

Klik kanan tempat Anda ingin menyisipkan cuplikan kode dan pilih Sisipkan Cuplikan

Klik kanan tempat Anda ingin menyisipkan cuplikan kode dan pilih Sisipkan Cuplikan

Pilih cuplikan yang relevan dari daftar, dengan mengkliknya

Pilih cuplikan yang relevan dari daftar, dengan mengkliknya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-07-13

Bagikan melalui

ASP.NET Pembantu, Formulir, dan Validasi MVC 4

Tujuan

Prasyarat

Siapkan

Latihan

Latihan 1: Membuat pengontrol Store Manager dan tampilan Indeksnya

Tugas 1 - Membuat StoreManagerController

Tugas 2 - Menyesuaikan Indeks StoreManager

Tugas 3 - Membuat Tampilan Indeks

Tugas 4 - Menyesuaikan perancah Tampilan Indeks

Tugas 5 - Menjalankan Aplikasi

Latihan 2: Menambahkan Pembantu HTML

Tugas 1 - Memperluas Pembantu HTML

Tugas 2 - Memotong Teks di Halaman

Tugas 3 - Menjalankan Aplikasi

Latihan 3: Membuat Tampilan Edit

Tugas 1 - Menerapkan Metode Tindakan Edit HTTP-GET

Tugas 2 - Membuat Tampilan Edit

Tugas 3 - Menjalankan Aplikasi

Tugas 4 - Menerapkan drop-down pada Templat Editor Album

Tugas 5 - Menjalankan Aplikasi

Tugas 6 - Menerapkan metode tindakan HTTP-POST Edit

Tugas 7 - Menjalankan Aplikasi

Latihan 4: Menambahkan Tampilan Buat

Tugas 1 - Menerapkan metode tindakan HTTP-GET Create

Tugas 2 - Menambahkan Tampilan Buat

Tugas 3 - Menjalankan Aplikasi

Tugas 4 - Menerapkan Metode Tindakan Buat HTTP-POST

Tugas 5 - Menjalankan Aplikasi

Latihan 5: Menangani Penghapusan

Tugas 1 - Menerapkan Metode Tindakan Penghapusan HTTP-GET

Tugas 2 - Menjalankan Aplikasi

Tugas 3- Menerapkan Metode Tindakan Penghapusan HTTP-POST

Tugas 4 - Menjalankan Aplikasi

Latihan 6: Menambahkan Validasi

Tugas 1 - Menambahkan Anotasi Data

Tugas 2 - Menjalankan Aplikasi

Latihan 7: Menggunakan jQuery tidak mengganggu di Sisi Klien

Tugas 1 - Menjalankan Aplikasi sebelum Mengaktifkan jQuery Tidak Mengganggu

Tugas 2 - Mengaktifkan Validasi Klien Yang Tidak Mengganggu

Tugas 3 - Menjalankan Aplikasi Menggunakan Validasi jQuery Yang Tidak Mengganggu

Ringkasan

Lampiran A: Menginstal Visual Studio Express 2012 untuk Web

Lampiran B: Menggunakan Cuplikan Kode

Saran dan Komentar

Sumber Daya Tambahan: