Mengakses Data Model Anda dari Pengontrol Baru

oleh Rick Anderson

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 membuat kelas baru MoviesController dan menulis kode yang mengambil data film dan menampilkannya di browser menggunakan templat tampilan.

Bangun aplikasi sebelum melanjutkan ke langkah berikutnya. Jika Anda tidak membuat aplikasi, Anda akan mendapatkan kesalahan saat menambahkan pengontrol.

Di Penjelajah Solusi, klik kanan folder Pengontrol lalu klik Tambahkan, lalu Pengontrol.

Dalam kotak dialog Tambahkan Perancah , klik Pengontrol MVC 5 dengan tampilan, menggunakan Kerangka Kerja Entitas, lalu klik Tambahkan.

• Pilih Film (MvcMovie.Models) untuk kelas Model.

• Pilih MovieDBContext (MvcMovie.Models) untuk kelas Konteks data.

• Untuk nama Pengontrol masukkan MoviesController.

  Gambar di bawah ini menunjukkan dialog yang telah selesai.

Klik Tambahkan. (Jika Anda mendapatkan kesalahan, Anda mungkin tidak membangun aplikasi sebelum mulai menambahkan pengontrol.) Visual Studio membuat file dan folder berikut:

• File MoviesController.cs di folder Pengontrol .
• Folder Views\Movies .
• Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, dan Index.cshtml di folder Views\Movies baru.

Visual Studio secara otomatis membuat metode dan tampilan tindakan CRUD (buat, baca, perbarui, dan hapus) untuk Anda (pembuatan otomatis metode dan tampilan tindakan CRUD dikenal sebagai perancah). Anda sekarang memiliki aplikasi web yang berfungsi penuh yang memungkinkan Anda membuat, mencantumkan, mengedit, dan menghapus entri film.

Jalankan aplikasi dan klik tautan MVC Movie (atau telusuri ke Movies pengontrol dengan menambahkan /Movies ke URL di bilah alamat browser Anda). Karena aplikasi mengandalkan perutean default (ditentukan dalam file App_Start\RouteConfig.cs), permintaan http://localhost:xxxxx/Movies browser dirutekan ke metode Movies tindakan default Index pengontrol. Dengan kata lain, permintaan http://localhost:xxxxx/Movies browser secara efektif sama dengan permintaan http://localhost:xxxxx/Movies/Indexbrowser . Hasilnya adalah daftar film kosong, karena Anda belum menambahkannya.

Membuat Film

Pilih tautan Buat Baru . Masukkan beberapa detail tentang film lalu klik tombol Buat .

Catatan

Anda mungkin tidak dapat memasukkan titik desimal atau koma di bidang Harga. Untuk mendukung validasi jQuery untuk lokal non-Bahasa Inggris yang menggunakan koma (",") untuk format tanggal desimal, dan bukan US-English, Anda harus menyertakan globalize.js dan kultur/file globalize.cultures.js spesifik Anda(dari https://github.com/jquery/globalize ) dan JavaScript untuk menggunakan Globalize.parseFloat. Saya akan menunjukkan cara melakukan ini di tutorial berikutnya. Untuk saat ini, cukup masukkan seluruh angka seperti 10.

Mengklik tombol Buat menyebabkan formulir diposting ke server, tempat informasi film disimpan dalam database. Anda kemudian dialihkan ke URL /Movies , tempat Anda dapat melihat film yang baru dibuat di daftar.

Buat beberapa entri film lagi. Coba tautan Edit, Detail, dan Hapus , yang semuanya berfungsi.

Memeriksa Kode yang Dihasilkan

Buka file Controllers\MoviesController.cs dan periksa metode yang dihasilkan Index . Sebagian pengontrol film dengan Index metode ditunjukkan di bawah ini.

public class MoviesController : Controller
{
    private MovieDBContext db = new MovieDBContext();

    // GET: /Movies/
    public ActionResult Index()
    {
        return View(db.Movies.ToList());
    }

Permintaan ke Movies pengontrol mengembalikan semua entri dalam Movies tabel lalu meneruskan hasilnya ke Index tampilan. Baris berikut dari MoviesController kelas membuat instans konteks database film, seperti yang dijelaskan sebelumnya. Anda bisa menggunakan konteks database film untuk mengkueri, mengedit, dan menghapus film.

private MovieDBContext db = new MovieDBContext();

Model yang Sangat Ditik dan @model Kata Kunci

Sebelumnya dalam tutorial ini, Anda melihat bagaimana pengontrol dapat meneruskan data atau objek ke templat tampilan menggunakan ViewBag objek . ViewBag adalah objek dinamis yang menyediakan cara terikat terlambat yang nyaman untuk meneruskan informasi ke tampilan.

MVC juga menyediakan kemampuan untuk meneruskan objek yang ditik dengan kuat ke templat tampilan. Pendekatan yang sangat ditik ini memungkinkan pemeriksaan waktu kompilasi yang lebih baik dari kode Anda dan IntelliSense yang lebih kaya di editor Visual Studio. Mekanisme perancah di Visual Studio menggunakan pendekatan ini (yaitu, melewati model yang sangat ditik) dengan MoviesController kelas dan melihat templat saat membuat metode dan tampilan.

Dalam file Controllers\MoviesController.cs periksa metode yang dihasilkan Details . Metode Details ini ditunjukkan di bawah ini.

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

Parameter id umumnya diteruskan sebagai data rute, misalnya http://localhost:1234/movies/details/1 akan mengatur pengontrol ke pengontrol film, tindakan ke details dan id ke 1. Anda juga dapat meneruskan id dengan string kueri sebagai berikut:

http://localhost:1234/movies/details?id=1

Movie Jika ditemukan, instans Movie model diteruskan ke Details tampilan:

return View(movie);

Periksa isi file Views\Movies\Details.cshtml :

@model MvcMovie.Models.Movie

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
    <h4>Movie</h4>
<hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Title)
        </dt>
         @*Markup omitted for clarity.*@        
    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

Dengan menyertakan @model pernyataan di bagian atas file templat tampilan, Anda dapat menentukan jenis objek yang diharapkan tampilan. Saat Anda membuat pengontrol film, Visual Studio secara otomatis menyertakan pernyataan berikut @model di bagian atas file Details.cshtml :

@model MvcMovie.Models.Movie

Direktif ini @model memungkinkan Anda untuk mengakses film yang diteruskan pengontrol ke tampilan dengan menggunakan Model objek yang sangat diketik. Misalnya, dalam templat Details.cshtml , kode meneruskan setiap bidang film ke DisplayNameFor dan DisplayFor HTML Helpers dengan objek yang ditik Model dengan kuat. Metode Create dan Edit dan templat tampilan juga meneruskan objek model film.

Periksa templat tampilan Index.cshtml dan Index metode dalam file MoviesController.cs . Perhatikan bagaimana kode membuat List objek saat memanggil metode pembantu ViewIndex dalam metode tindakan. Kode kemudian meneruskan daftar ini Movies dari Index metode tindakan ke tampilan:

public ActionResult Index()
{
    return View(db.Movies.ToList());
}

Saat Anda membuat pengontrol film, Visual Studio secara otomatis menyertakan pernyataan berikut @model di bagian atas file Index.cshtml :

@model IEnumerable<MvcMovie.Models.Movie>

Direktif ini @model memungkinkan Anda mengakses daftar film yang diteruskan pengontrol ke tampilan dengan menggunakan Model objek yang sangat diketik. Misalnya, dalam templat Index.cshtml , kode mengulang melalui film dengan melakukan pernyataan atas objek yang foreach ditik Model dengan kuat:

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ReleaseDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Genre)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
         <th>
            @Html.DisplayFor(modelItem => item.Rating)
        </th>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID })  |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID }) 
        </td>
    </tr>
}

Model Karena objek dititik dengan kuat (sebagai IEnumerable<Movie> objek), setiap item objek dalam perulangan di ketik sebagai Movie. Di antara manfaat lainnya, ini berarti Anda mendapatkan pemeriksaan waktu kompilasi kode dan dukungan IntelliSense penuh di editor kode:

Bekerja dengan SQL Server LocalDB

Kode Kerangka Kerja Entitas Pertama mendeteksi bahwa string koneksi database yang disediakan menunjuk ke Movies database yang belum ada, sehingga Kode Pertama membuat database secara otomatis. Anda dapat memverifikasi bahwa itu telah dibuat dengan melihat di folder App_Data . Jika Anda tidak melihat file Movies.mdf , klik tombol Perlihatkan Semua File di toolbar Penjelajah Solusi , klik tombol Refresh , lalu perluas folder App_Data .

Klik dua kali Movies.mdf untuk membuka SERVER EXPLORER, lalu perluas folder Tabel untuk melihat tabel Film. Perhatikan ikon kunci di samping ID. Secara default, EF akan membuat properti bernama ID sebagai kunci utama. Untuk informasi selengkapnya tentang EF dan MVC, lihat Tutorial luar biasa Tom Dykstra tentang MVC dan EF.

Movies Klik kanan tabel dan pilih Perlihatkan Data Tabel untuk melihat data yang Anda buat.

Movies Klik kanan tabel dan pilih Buka Definisi Tabel untuk melihat struktur tabel yang pertama kali dibuat oleh Kode Kerangka Kerja Entitas untuk Anda.

Perhatikan bagaimana skema Movies tabel memetakan ke kelas yang Movie Anda buat sebelumnya. Kode Kerangka Kerja Entitas Pertama secara otomatis membuat skema ini untuk Anda berdasarkan kelas Anda Movie .

Setelah selesai, tutup koneksi dengan mengklik kanan MovieDBContext dan memilih Tutup Koneksi. (Jika Anda tidak menutup koneksi, Anda mungkin mendapatkan kesalahan saat menjalankan proyek di lain waktu).

Sekarang Anda memiliki database dan halaman untuk menampilkan, mengedit, memperbarui, dan menghapus data. Dalam tutorial berikutnya, kita akan memeriksa sisa kode perancah dan menambahkan SearchIndex metode dan SearchIndex tampilan yang memungkinkan Anda mencari film dalam database ini. Untuk informasi selengkapnya tentang menggunakan Kerangka Kerja Entitas dengan MVC, lihat Membuat Model Data Kerangka Kerja Entitas untuk Aplikasi MVC ASP.NET.

SebelumnyaBerikutnya