Menambahkan Metode Buat dan Membuat Tampilan

oleh Scott Hanselman

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

Di bagian ini kita akan menerapkan dukungan yang diperlukan untuk memungkinkan pengguna membuat film baru di database kita. Kami akan melakukan ini dengan menerapkan tindakan /Movies/Create URL.

Menerapkan URL /Movies/Create adalah proses dua langkah. Ketika pengguna pertama kali mengunjungi URL /Movies/Create, kami ingin menunjukkan kepada mereka formulir HTML yang dapat mereka isi untuk memasukkan film baru. Kemudian, ketika pengguna mengirimkan formulir dan memposting data kembali ke server, kami ingin mengambil konten yang diposting dan menyimpannya ke database kami.

Kami akan menerapkan dua langkah ini dalam dua metode Create() dalam kelas MoviesController kami. Satu metode akan menampilkan <formulir> yang harus diisi pengguna untuk membuat film baru. Metode kedua akan menangani pemrosesan data yang diposting ketika pengguna mengirimkan <formulir> kembali ke server, dan menyimpan Film baru dalam database kami.

Di bawah ini adalah kode yang akan kami tambahkan ke kelas MoviesController kami untuk mengimplementasikan ini:

public ActionResult Create()
{
    return View();
}

[HttpPost]
public ActionResult Create(Movie newMovie)
{

    if (ModelState.IsValid)
    {
        db.AddToMovies(newMovie);
        db.SaveChanges();

        return RedirectToAction("Index");
    }
    else
    {
        return View(newMovie);
    }
}

Kode di atas berisi semua kode yang akan kita butuhkan dalam Pengontrol kita.

Sekarang mari kita terapkan templat Buat Tampilan yang akan kita gunakan untuk menampilkan formulir kepada pengguna. Kami akan mengklik kanan metode Buat pertama dan memilih "Tambahkan Tampilan" untuk membuat templat tampilan untuk formulir Film kami.

Kita akan memilih bahwa kita akan meneruskan templat tampilan "Film" sebagai kelas data tampilannya, dan menunjukkan bahwa kita ingin "merancang" templat "Buat".

Setelah Anda mengklik tombol Tambahkan, templat Tampilan \Movies\Create.aspx akan dibuat untuk Anda. Karena kami memilih "Buat" dari dropdown "lihat konten", dialog Tambahkan Tampilan secara otomatis "di-scaffold" beberapa konten default untuk kami. Perancah membuat formulir> HTML<, tempat untuk pesan kesalahan validasi, dan karena perancah tahu tentang Film, perancah membuat Label dan Bidang untuk setiap properti kelas kami.

<% using (Html.BeginForm()) {%>
    <%: Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Fields</legend>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Id) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Id) %>
            <%: Html.ValidationMessageFor(model => model.Id) %>
        </div>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Title) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Title) %>
            <%: Html.ValidationMessageFor(model => model.Title) %>
        </div>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.ReleaseDate) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.ReleaseDate) %>
            <%: Html.ValidationMessageFor(model => model.ReleaseDate) %>
        </div>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Genre) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Genre) %>
            <%: Html.ValidationMessageFor(model => model.Genre) %>
        </div>
       
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Price) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Price) %>
            <%: Html.ValidationMessageFor(model => model.Price) %>
        </div>
       
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

<% } %>

Karena database kita secara otomatis memberi Film ID, mari kita hapus bidang yang mereferensikan model. Id dari Buat Tampilan kami. Hapus 7 baris setelah <Bidang</legenda legenda>> saat menampilkan bidang ID yang tidak kita inginkan.

Sekarang mari kita buat film baru dan tambahkan ke database. Kita akan melakukan ini dengan menjalankan aplikasi lagi dan mengunjungi URL "/Movies" dan klik tautan "Buat" untuk menambahkan Film baru.

Ketika kita mengklik tombol Buat, kita akan memposting kembali (melalui HTTP POST) data pada formulir ini ke metode /Movies/Create yang baru saja kita buat. Sama seperti ketika sistem secara otomatis mengambil parameter "numTimes" dan "name " keluar dari URL dan memetakannya ke parameter pada metode sebelumnya, sistem akan secara otomatis mengambil Bidang Formulir dari POST dan memetakannya ke objek. Dalam hal ini, nilai dari bidang dalam HTML seperti "ReleaseDate" dan "Title" akan secara otomatis dimasukkan ke dalam properti yang benar dari instans baru Film.

Mari kita lihat metode Buat kedua dari MoviesController kita lagi. Perhatikan bagaimana dibutuhkan objek "Film" sebagai argumen:

[HttpPost]
public ActionResult Create(Movie newMovie)
{
    if (ModelState.IsValid)
    {
        db.AddToMovies(newMovie);
        db.SaveChanges();

        return RedirectToAction("Index");
    }
    else
    {
        return View(newMovie);
    }
}

Objek Film ini kemudian diteruskan ke metode tindakan Buat versi [HttpPost], dan kami menyimpannya dalam database dan kemudian mengarahkan pengguna kembali ke metode tindakan Index() yang akan menampilkan hasil yang disimpan dalam daftar film:

Namun, kami tidak memeriksa apakah film kami benar, dan database tidak akan memungkinkan kami untuk menyimpan film tanpa Judul. Akan lebih baik jika kita bisa memberi tahu pengguna bahwa sebelum database melemparkan kesalahan. Kami akan melakukan ini selanjutnya dengan menambahkan dukungan validasi ke aplikasi kami.

SebelumnyaBerikutnya