Memeriksa Metode Tindakan Edit dan Tampilan untuk Pengontrol Film

Catatan

Versi terbaru dari tutorial ini tersedia di sini menggunakan versi terbaru Visual Studio. Tutorial baru menggunakan ASP.NET Core MVC, yang memberikan banyak peningkatan atas tutorial ini.

Tutorial ini mengajarkan ASP.NET Core MVC dengan pengontrol dan tampilan. Razor Pages adalah alternatif baru dalam ASP.NET Core, model pemrograman berbasis halaman yang membuat membangun UI web lebih mudah dan lebih produktif. Kami sarankan Anda mencoba tutorial Razor Pages sebelum versi MVC. Tutorial Halaman Razor:

Lebih mudah diikuti.
Mencakup lebih banyak fitur.
Adalah pendekatan yang disukai untuk pengembangan aplikasi baru.

Di bagian ini, Anda akan memeriksa metode tindakan dan tampilan yang dihasilkan Edit untuk pengontrol film. Tapi pertama-tama kita akan mengambil pengalihan singkat untuk membuat tanggal rilis terlihat lebih baik. Buka file Models\Movie.cs dan tambahkan baris yang disorot yang ditunjukkan di bawah ini:

using System;
using System.ComponentModel.DataAnnotations;
using System.Data.Entity;

namespace MvcMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }

        [Display(Name = "Release Date")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }

    public class MovieDBContext : DbContext
    {
        public DbSet<Movie> Movies { get; set; }
    }
}

Anda juga dapat membuat kultur tanggal spesifik seperti ini:

[Display(Name = "Release Date")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
public DateTime ReleaseDate { get; set; }

Kami akan membahas DataAnnotations dalam tutorial berikutnya. Atribut Tampilan menentukan apa yang harus ditampilkan untuk nama bidang (dalam hal ini "Tanggal Rilis" alih-alih "ReleaseDate"). Atribut DataType menentukan jenis data, dalam hal ini adalah tanggal, sehingga informasi waktu yang disimpan di bidang tidak ditampilkan. Atribut DisplayFormat diperlukan untuk bug di browser Chrome yang salah merender format tanggal.

Jalankan aplikasi dan telusuri ke Movies pengontrol. Tahan penunjuk mouse di atas tautan Edit untuk melihat URL yang ditautkannya.

EditLink_sm

Tautan Edit dihasilkan oleh Html.ActionLink metode dalam tampilan Views\Movies\Index.cshtml :

@Html.ActionLink("Edit", "Edit", new { id=item.ID })

Html.ActionLink

Objek Html adalah pembantu yang diekspos menggunakan properti pada kelas dasar System.Web.Mvc.WebViewPage . Metode ActionLink pembantu memudahkan untuk secara dinamis menghasilkan hyperlink HTML yang ditautkan ke metode tindakan pada pengontrol. Argumen pertama untuk ActionLink metode ini adalah teks tautan untuk dirender (misalnya, <a>Edit Me</a>). Argumen kedua adalah nama metode tindakan yang akan dipanggil (Dalam hal ini, Edit tindakan). Argumen akhir adalah objek anonim yang menghasilkan data rute (dalam hal ini, ID 4).

Tautan yang dihasilkan yang ditampilkan pada gambar sebelumnya adalah http://localhost:1234/Movies/Edit/4. Rute default (ditetapkan dalam App_Start\RouteConfig.cs) mengambil pola {controller}/{action}/{id}URL . Oleh karena itu, ASP.NET diterjemahkan http://localhost:1234/Movies/Edit/4 ke dalam permintaan ke Edit metode Movies tindakan pengontrol dengan parameter ID sama dengan 4. Periksa kode berikut dari file App_Start\RouteConfig.cs . Metode MapRoute digunakan untuk merutekan permintaan HTTP ke pengontrol dan metode tindakan yang benar dan menyediakan parameter ID opsional. Metode MapRoute juga digunakan oleh HtmlHelpers seperti ActionLink untuk menghasilkan URL yang diberikan pengontrol, metode tindakan, dan data rute apa pun.

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", 
            id = UrlParameter.Optional }
    );
}

Anda juga dapat meneruskan parameter metode tindakan menggunakan string kueri. Misalnya, URL http://localhost:1234/Movies/Edit?ID=3 juga meneruskan parameter ID 3 ke Edit metode Movies tindakan pengontrol.

EditQueryString

Movies Buka pengontrol. Dua Edit metode tindakan ditunjukkan di bawah ini.

// GET: /Movies/Edit/5
public ActionResult Edit(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Movie movie = db.Movies.Find(id);
    if (movie == null)
    {
        return HttpNotFound();
    }
    return View(movie);
}

// POST: /Movies/Edit/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for 
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include="ID,Title,ReleaseDate,Genre,Price")] Movie movie)
{
    if (ModelState.IsValid)
    {
        db.Entry(movie).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(movie);
}

Perhatikan metode tindakan kedua Edit didahului oleh HttpPost atribut . Atribut ini menentukan bahwa kelebihan beban Edit metode hanya dapat dipanggil untuk permintaan POST. Anda dapat menerapkan atribut ke HttpGet metode edit pertama, tetapi itu tidak perlu karena itu adalah default. (Kami akan merujuk ke metode tindakan yang secara implisit ditetapkan HttpGet atribut sebagai HttpGet metode.) Atribut Bind adalah mekanisme keamanan penting lainnya yang mencegah peretas memposting data secara berlebihan ke model Anda. Anda seharusnya hanya menyertakan properti dalam atribut ikat yang ingin Anda ubah. Anda dapat membaca tentang overposting dan atribut ikatan dalam catatan keamanan saya yang berlebihan. Dalam model sederhana yang digunakan dalam tutorial ini, kita akan mengikat semua data dalam model. Atribut ValidateAntiForgeryToken digunakan untuk mencegah pemalsuan permintaan dan dipasangkan dengan @Html.AntiForgeryToken() dalam file tampilan edit (Views\Movies\Edit.cshtml), bagian ditunjukkan di bawah ini:

@model MvcMovie.Models.Movie

@{
    ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()    
    <div class="form-horizontal">
        <h4>Movie</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.ID)

        <div class="form-group">
            @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>

@Html.AntiForgeryToken() menghasilkan token anti-pemalsuan bentuk tersembunyi yang harus cocok dalam Edit metode Movies pengontrol. Anda dapat membaca selengkapnya tentang pemalsuan permintaan lintas situs (juga dikenal sebagai XSRF atau CSRF) dalam tutorial saya Pencegahan XSRF/CSRF di MVC.

Metode mengambil HttpGet Edit parameter ID film, mencari film menggunakan metode Kerangka Kerja Find Entitas, dan mengembalikan film yang dipilih ke tampilan Edit. Jika film tidak dapat ditemukan, HttpNotFound dikembalikan. Ketika sistem perancah membuat tampilan Edit, sistem memeriksa Movie kelas dan membuat kode untuk merender <label> dan <input> elemen untuk setiap properti kelas. Contoh berikut menunjukkan tampilan Edit yang dihasilkan oleh sistem perancah Visual Studio:

@model MvcMovie.Models.Movie

@{
    ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()    
    <div class="form-horizontal">
        <h4>Movie</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.ID)

        <div class="form-group">
            @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ReleaseDate, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ReleaseDate)
                @Html.ValidationMessageFor(model => model.ReleaseDate)
            </div>
        </div>
        @*Genre and Price removed for brevity.*@        
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Perhatikan bagaimana templat tampilan memiliki @model MvcMovie.Models.Movie pernyataan di bagian atas file — ini menentukan bahwa tampilan mengharapkan model untuk templat tampilan berjenis Movie.

Kode perancah menggunakan beberapa metode pembantu untuk menyederhanakan markup HTML. Pembantu Html.LabelFor menampilkan nama bidang ("Judul", "ReleaseDate", "Genre", atau "Harga"). Pembantu Html.EditorFor merender elemen HTML <input> . Pembantu menampilkan pesan validasi apa pun yang terkait dengan properti tersebut Html.ValidationMessageFor .

Jalankan aplikasi dan navigasikan ke URL /Movies . Klik tautan Edit. Di browser, lihat sumber untuk halaman tersebut. HTML untuk elemen formulir ditunjukkan di bawah ini.

<form action="/movies/Edit/4" method="post">
   <input name="__RequestVerificationToken" type="hidden" value="UxY6bkQyJCXO3Kn5AXg-6TXxOj6yVBi9tghHaQ5Lq_qwKvcojNXEEfcbn-FGh_0vuw4tS_BRk7QQQHlJp8AP4_X4orVNoQnp2cd8kXhykS01" />  <fieldset class="form-horizontal">
      <legend>Movie</legend>

      <input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="4" />

      <div class="control-group">
         <label class="control-label" for="Title">Title</label>
         <div class="controls">
            <input class="text-box single-line" id="Title" name="Title" type="text" value="GhostBusters" />
            <span class="field-validation-valid help-inline" data-valmsg-for="Title" data-valmsg-replace="true"></span>
         </div>
      </div>

      <div class="control-group">
         <label class="control-label" for="ReleaseDate">Release Date</label>
         <div class="controls">
            <input class="text-box single-line" data-val="true" data-val-date="The field Release Date must be a date." data-val-required="The Release Date field is required." id="ReleaseDate" name="ReleaseDate" type="date" value="1/1/1984" />
            <span class="field-validation-valid help-inline" data-valmsg-for="ReleaseDate" data-valmsg-replace="true"></span>
         </div>
      </div>

      <div class="control-group">
         <label class="control-label" for="Genre">Genre</label>
         <div class="controls">
            <input class="text-box single-line" id="Genre" name="Genre" type="text" value="Comedy" />
            <span class="field-validation-valid help-inline" data-valmsg-for="Genre" data-valmsg-replace="true"></span>
         </div>
      </div>

      <div class="control-group">
         <label class="control-label" for="Price">Price</label>
         <div class="controls">
            <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-required="The Price field is required." id="Price" name="Price" type="text" value="7.99" />
            <span class="field-validation-valid help-inline" data-valmsg-for="Price" data-valmsg-replace="true"></span>
         </div>
      </div>

      <div class="form-actions no-color">
         <input type="submit" value="Save" class="btn" />
      </div>
   </fieldset>
</form>

Elemen <input> berada dalam elemen HTML <form> yang atributnya action diatur untuk memposting ke URL /Movies/Edit . Data formulir akan diposting ke server saat tombol Simpan diklik. Baris kedua menunjukkan token XSRF tersembunyi yang dihasilkan oleh @Html.AntiForgeryToken() panggilan.

Memproses Permintaan POST

Daftar berikut menunjukkan HttpPost versi Edit metode tindakan.

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include="ID,Title,ReleaseDate,Genre,Price")] Movie movie)
{
    if (ModelState.IsValid)
    {
        db.Entry(movie).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(movie);
}

Atribut ValidateAntiForgeryToken memvalidasi token XSRF yang dihasilkan oleh @Html.AntiForgeryToken() panggilan dalam tampilan.

Pengikat model MVC ASP.NET mengambil nilai formulir yang diposting dan membuat Movie objek yang diteruskan sebagai movie parameter . Memverifikasi ModelState.IsValid bahwa data yang dikirimkan dalam formulir dapat digunakan untuk memodifikasi (mengedit atau memperbarui) Movie objek. Jika data valid, data film disimpan ke Movies kumpulan db(MovieDBContext instans). Data film baru disimpan ke database dengan memanggil SaveChanges metode MovieDBContext. Setelah menyimpan data, kode mengalihkan pengguna ke Index metode MoviesController tindakan kelas, yang menampilkan koleksi film, termasuk perubahan yang baru saja dibuat.

Segera setelah validasi sisi klien menentukan nilai bidang tidak valid, pesan kesalahan ditampilkan. Jika JavaScript dinonaktifkan, validasi sisi klien dinonaktifkan. Namun, server mendeteksi nilai yang diposting tidak valid, dan nilai formulir diputar ulang dengan pesan kesalahan.

Validasi diperiksa secara lebih rinci nanti dalam tutorial.

Pembantu Html.ValidationMessageFor dalam templat tampilan Edit.cshtml mengurus menampilkan pesan kesalahan yang sesuai.

abcNotValid

HttpGet Semua metode mengikuti pola yang sama. Mereka mendapatkan objek film (atau daftar objek, dalam kasus Index), dan meneruskan model ke tampilan. Metode Create meneruskan objek film kosong ke tampilan Buat. Semua metode yang membuat, mengedit, menghapus, atau memodifikasi data melakukannya dalam HttpPost kelebihan beban metode. Memodifikasi data dalam metode HTTP GET adalah risiko keamanan. Memodifikasi data dalam metode GET juga melanggar praktik terbaik HTTP dan pola REST arsitektur, yang menentukan bahwa permintaan GET tidak boleh mengubah status aplikasi Anda. Dengan kata lain, melakukan operasi GET harus menjadi operasi aman yang tidak memiliki efek samping dan tidak memodifikasi data Anda yang bertahan.

Validasi jQuery untuk lokal non-Bahasa Inggris

Jika Anda menggunakan komputer AS-Inggris, Anda dapat melewati bagian ini dan pergi ke tutorial berikutnya. Anda dapat mengunduh versi Globalisasi tutorial ini di sini. Untuk tutorial dua bagian yang sangat baik tentang Internasionalisasi, lihat Internasionalisasi MVC 5 ASP.NET Nadeem.

Catatan

untuk mendukung validasi jQuery untuk lokal non-Bahasa Inggris yang menggunakan koma (",") untuk format tanggal desimal, dan non-Bahasa Inggris AS, Anda harus menyertakan globalize.js dan budaya/file globalize.cultures.js spesifik Anda(dari https://github.com/jquery/globalize ) dan JavaScript untuk menggunakan Globalize.parseFloat. Anda bisa mendapatkan validasi jQuery non-Bahasa Inggris dari NuGet. (Jangan instal Globalisasi jika Anda menggunakan lokal bahasa Inggris.)

Dari menu Alat klik NuGet Package Manager, lalu klik Kelola Paket NuGet untuk Solusi.
Di panel kiri, pilih Telusuri*.*(Lihat gambar di bawah ini.)
Dalam kotak input, masukkan Globalize*.

Pilih jQuery.Validation.Globalize, pilih MvcMovie dan klik Instal. File Scripts\jquery.globalize\globalize.js akan ditambahkan ke proyek Anda. Folder *Scripts\jquery.globalize\cultures* akan berisi banyak file JavaScript budaya. Perhatikan, mungkin perlu waktu lima menit untuk menginstal paket ini.

Kode berikut menunjukkan modifikasi pada file Views\Movies\Edit.cshtml:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

<script src="~/Scripts/globalize/globalize.js"></script>
<script src="~/Scripts/globalize/cultures/globalize.culture.@(System.Threading.Thread.CurrentThread.CurrentCulture.Name).js"></script>
<script>
    $.validator.methods.number = function (value, element) {
        return this.optional(element) ||
            !isNaN(Globalize.parseFloat(value));
    }
    $(document).ready(function () {
        Globalize.culture('@(System.Threading.Thread.CurrentThread.CurrentCulture.Name)');
    });
</script>
<script>
    jQuery.extend(jQuery.validator.methods, {
        range: function (value, element, param) {
            //Use the Globalization plugin to parse the value
            var val = Globalize.parseFloat(value);
            return this.optional(element) || (
                val >= param[0] && val <= param[1]);
        }
    });
    $.validator.methods.date = function (value, element) {
        return this.optional(element) ||
            Globalize.parseDate(value) ||
            Globalize.parseDate(value, "yyyy-MM-dd");
    }
</script>
}

Untuk menghindari pengulangan kode ini di setiap tampilan Edit, Anda dapat memindahkannya ke file tata letak. Untuk mengoptimalkan unduhan skrip, lihat tutorial Saya Bundling dan Minifikasi.

Untuk informasi selengkapnya, lihat ASP.NET MVC 3 Internationalization dan ASP.NET MVC 3 Internationalization - Bagian 2 (NerdDinner).

Sebagai perbaikan sementara, jika Anda tidak bisa membuat validasi berfungsi di lokal Anda, Anda dapat memaksa komputer Anda untuk menggunakan bahasa Inggris AS atau Anda dapat menonaktifkan JavaScript di browser Anda. Untuk memaksa komputer Anda menggunakan bahasa Inggris AS, Anda dapat menambahkan elemen globalisasi ke file web.config root proyek. Kode berikut menunjukkan elemen globalisasi dengan budaya yang diatur ke Amerika Serikat bahasa Inggris.

<system.web>
    <globalization culture ="en-US" />
    <!--elements removed for clarity-->
  </system.web>

Dalam tutorial berikutnya, kita akan menerapkan fungsionalitas pencarian.

Sebelumnya Berikutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-06-16

Bagikan melalui

Memeriksa Metode Tindakan Edit dan Tampilan untuk Pengontrol Film

Memproses Permintaan POST

Validasi jQuery untuk lokal non-Bahasa Inggris

Saran dan Komentar

Sumber Daya Tambahan: