Bagian 3: Tampilan dan ViewModels

oleh Jon Galloway

MVC Music Store adalah aplikasi tutorial yang memperkenalkan dan menjelaskan langkah demi langkah cara menggunakan ASP.NET MVC dan Visual Studio untuk pengembangan web.

MVC Music Store adalah implementasi penyimpanan sampel ringan yang menjual album musik secara online, dan mengimplementasikan administrasi situs dasar, rincian masuk pengguna, dan fungsionalitas kedai belanja.

Seri tutorial ini merinci semua langkah yang diambil untuk membangun aplikasi sampel MVC Music Store ASP.NET. Bagian 3 mencakup Tampilan dan ViewModels.

Sejauh ini kami baru saja mengembalikan string dari tindakan pengontrol. Itu adalah cara yang bagus untuk mendapatkan gambaran tentang cara kerja pengontrol, tetapi bukan bagaimana Anda ingin membangun aplikasi web nyata. Kami akan menginginkan cara yang lebih baik untuk menghasilkan HTML kembali ke browser yang mengunjungi situs kami - salah satu tempat kami dapat menggunakan file templat untuk lebih mudah menyesuaikan kirim kembali konten HTML. Itulah yang dilakukan Views.

Menambahkan templat Tampilan

Untuk menggunakan templat tampilan, kita akan mengubah metode Indeks HomeController untuk mengembalikan ActionResult, dan mengembalikan View(), seperti di bawah ini:

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
}

Perubahan di atas menunjukkan bahwa alih-alih mengembalikan string, kami ingin menggunakan "Tampilan" untuk menghasilkan hasil kembali.

Sekarang kami akan menambahkan templat Tampilan yang sesuai ke proyek kami. Untuk melakukan ini, kita akan memposisikan kursor teks dalam metode tindakan Indeks, lalu klik kanan dan pilih "Tambahkan Tampilan". Ini akan memunculkan dialog Tambahkan Tampilan:

Dialog "Tambahkan Tampilan" memungkinkan kami menghasilkan file templat Tampilan dengan cepat dan mudah. Secara default dialog "Tambahkan Tampilan" telah mengisi nama templat Tampilan untuk dibuat sehingga cocok dengan metode tindakan yang akan menggunakannya. Karena kami menggunakan menu konteks "Tambahkan Tampilan" dalam metode tindakan Index() dari HomeController kami, dialog "Tambahkan Tampilan" di atas memiliki "Indeks" sebagai nama tampilan yang telah diisi sebelumnya secara default. Kami tidak perlu mengubah opsi apa pun pada dialog ini, jadi klik tombol Tambahkan.

Ketika kita mengklik tombol Tambahkan, Visual Web Developer akan membuat templat tampilan Index.cshtml baru untuk kita di direktori \Views\Home, membuat folder jika belum ada.

Nama dan lokasi folder file "Index.cshtml" penting, dan mengikuti konvensi penamaan ASP.NET MVC default. Nama direktori, \Views\Home, cocok dengan pengontrol - yang bernama HomeController. Nama templat tampilan, Indeks, cocok dengan metode tindakan pengontrol yang akan menampilkan tampilan.

ASP.NET MVC memungkinkan kita untuk menghindari keharusan secara eksplisit menentukan nama atau lokasi templat tampilan saat kita menggunakan konvensi penamaan ini untuk mengembalikan tampilan. Secara default akan merender templat tampilan \Views\Home\Index.cshtml ketika kami menulis kode seperti di bawah ini dalam HomeController kami:

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
}

Pengembang Web Visual membuat dan membuka templat tampilan "Index.cshtml" setelah kami mengklik tombol "Tambahkan" dalam dialog "Tambahkan Tampilan". Konten Index.cshtml ditunjukkan di bawah ini.

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>

Tampilan ini menggunakan sintaks Razor, yang lebih ringkas daripada mesin tampilan Web Forms yang digunakan dalam ASP.NET Web Forms dan versi ASP.NET MVC sebelumnya. Mesin tampilan Web Forms masih tersedia di ASP.NET MVC 3, tetapi banyak pengembang menemukan bahwa mesin tampilan Razor cocok ASP.NET pengembangan MVC dengan sangat baik.

Tiga baris pertama mengatur judul halaman menggunakan ViewBag.Title. Kita akan melihat cara kerjanya secara lebih rinci segera, tetapi pertama-tama mari kita perbarui teks judul teks dan melihat halaman. <Perbarui tag h2> untuk mengatakan "Ini adalah Halaman Beranda" seperti yang ditunjukkan di bawah ini.

@{
    ViewBag.Title = "Index";
}
<h2>This is the Home Page</h2>

Menjalankan aplikasi menunjukkan bahwa teks baru kami terlihat di halaman beranda.

Menggunakan Tata Letak untuk elemen situs umum

Sebagian besar situs web memiliki konten yang dibagikan di antara banyak halaman: navigasi, footer, gambar logo, referensi lembar gaya, dll. Mesin tampilan Razor memudahkan pengelolaan menggunakan halaman yang disebut _Layout.cshtml yang secara otomatis dibuat untuk kami di dalam folder /Views/Shared.

Klik dua kali pada folder ini untuk melihat isi, yang ditunjukkan di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"     
            type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"
            type="text/javascript"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

Konten dari tampilan individual kami akan ditampilkan oleh @RenderBody() perintah , dan konten umum apa pun yang ingin kami munculkan di luar yang dapat ditambahkan ke markup _Layout.cshtml. Kami ingin MVC Music Store memiliki header umum dengan tautan ke halaman Beranda dan area Toko kami di semua halaman di situs, jadi kami akan menambahkannya ke templat tepat di atas pernyataan itu @RenderBody() .

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"
type="text/javascript"></script>
</head>
<body>
    <div id="header">
        <h1>
            ASP.NET MVC MUSIC STORE</h1>
        <ul id="navlist">
            <li class="first"><a href="/"
id="current">Home</a></li>
            <li><a
href="/Store/">Store</a></li>
        </ul>
    </div>
    @RenderBody()
</body>
</html>

Memperbarui StyleSheet

Templat proyek kosong mencakup file CSS yang sangat efisien yang hanya menyertakan gaya yang digunakan untuk menampilkan pesan validasi. Perancang kami telah menyediakan beberapa CSS dan gambar tambahan untuk menentukan tampilan dan nuansa untuk situs kami, jadi kami akan menambahkannya sekarang.

File CSS dan Gambar yang diperbarui disertakan dalam direktori Konten MvcMusicStore-Assets.zip yang tersedia di MVC-Music-Store. Kami akan memilih keduanya di Windows Explorer dan meletakkannya ke folder Konten Solusi kami di Visual Web Developer, seperti yang ditunjukkan di bawah ini:

Anda akan diminta untuk mengonfirmasi apakah Anda ingin menimpa file Site.css yang ada. Klik Ya.

Folder Konten aplikasi Anda sekarang akan muncul sebagai berikut:

Sekarang mari kita jalankan aplikasi dan lihat tampilan perubahan kita di halaman Beranda.

• Mari kita tinjau apa yang berubah: Metode tindakan Indeks HomeController ditemukan dan menampilkan templat \Views\Home\Index.cshtmlView, meskipun kode kami disebut "return View()", karena templat Tampilan kami mengikuti konvensi penamaan standar.
• Halaman Beranda menampilkan pesan selamat datang sederhana yang ditentukan dalam templat tampilan \Views\Home\Index.cshtml.
• Halaman Beranda menggunakan templat _Layout.cshtml kami, sehingga pesan selamat datang terkandung dalam tata letak HTML situs standar.

Menggunakan Model untuk meneruskan informasi ke Tampilan kami

Templat Tampilan yang hanya menampilkan HTML yang dikodekan secara permanen tidak akan membuat situs web yang sangat menarik. Untuk membuat situs web dinamis, kita akan meneruskan informasi dari tindakan pengontrol ke templat tampilan kita.

Dalam pola Model-View-Controller, istilah Model mengacu pada objek yang mewakili data dalam aplikasi. Seringkali, objek model sesuai dengan tabel di database Anda, tetapi tidak perlu.

Metode tindakan pengontrol yang mengembalikan ActionResult dapat meneruskan objek model ke tampilan. Ini memungkinkan Pengontrol untuk mengemas semua informasi yang diperlukan dengan bersih untuk menghasilkan respons, lalu meneruskan informasi ini ke templat Tampilan untuk digunakan guna menghasilkan respons HTML yang sesuai. Ini paling mudah dipahami dengan melihatnya beraksi, jadi mari kita mulai.

Pertama, kita akan membuat beberapa kelas Model untuk mewakili Genre dan Album dalam toko kita. Mari kita mulai dengan membuat kelas Genre. Klik kanan folder "Model" dalam proyek Anda, pilih opsi "Tambahkan Kelas", dan beri nama file "Genre.cs".

Kemudian tambahkan properti Nama string publik ke kelas yang dibuat:

public class Genre
{
    public string Name { get; set; }
}

Catatan: Jika Anda bertanya-tanya, notasi { get; set; } menggunakan fitur properti C#yang diterapkan secara otomatis. Ini memberi kita manfaat dari properti tanpa mengharuskan kita untuk mendeklarasikan bidang dukungan.

Selanjutnya, ikuti langkah yang sama untuk membuat kelas Album (bernama Album.cs) yang memiliki Judul dan properti Genre:

public class Album
{
    public string Title { get; set; }
    public Genre Genre { get; set; }
}

Sekarang kita dapat memodifikasi StoreController untuk menggunakan Tampilan yang menampilkan informasi dinamis dari Model kita. Jika - untuk tujuan demonstrasi saat ini - kami menamai Album kami berdasarkan ID permintaan, kami dapat menampilkan informasi tersebut seperti pada tampilan di bawah ini.

Kita akan mulai dengan mengubah tindakan Detail Toko sehingga menampilkan informasi untuk satu album. Tambahkan pernyataan "using" ke bagian atas kelas StoreControllers untuk menyertakan namespace MvcMusicStore.Models, jadi kita tidak perlu mengetik MvcMusicStore.Models.Album setiap kali kita ingin menggunakan kelas album. Bagian "menggunakan" dari kelas tersebut sekarang akan muncul seperti di bawah ini.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;

Selanjutnya, kita akan memperbarui tindakan Pengontrol Detail sehingga mengembalikan ActionResult daripada string, seperti yang kita lakukan dengan metode Indeks HomeController.

public ActionResult Details(int id)

Sekarang kita dapat memodifikasi logika untuk mengembalikan objek Album ke tampilan. Nanti dalam tutorial ini kita akan mengambil data dari database - tetapi untuk saat ini kita akan menggunakan "data dummy" untuk memulai.

public ActionResult Details(int id)
 {
    var album = new Album { Title = "Album " + id };
    return View(album);
 }

Catatan: Jika Anda tidak terbiasa dengan C#, Anda dapat berasumsi bahwa menggunakan var berarti variabel album kami terikat terlambat. Itu tidak benar - pengkompilasi C# menggunakan type-inference berdasarkan apa yang kami tetapkan ke variabel untuk menentukan bahwa album berjenis Album dan mengkompilasi variabel album lokal sebagai jenis Album, jadi kami mendapatkan pemeriksaan waktu kompilasi dan dukungan editor kode Visual Studio.

Sekarang mari kita buat templat Tampilan yang menggunakan Album kita untuk menghasilkan respons HTML. Sebelum kita melakukannya, kita perlu membangun proyek sehingga dialog Tambahkan Tampilan tahu tentang kelas Album yang baru dibuat. Anda dapat membangun proyek dengan memilih item menu Debug⇨Build MvcMusicStore (untuk kredit tambahan, Anda dapat menggunakan pintasan Ctrl-Shift-B untuk membangun proyek).

Sekarang setelah kami menyiapkan kelas pendukung, kami siap untuk membangun templat Tampilan kami. Klik kanan dalam metode Detail dan pilih "Tambahkan Tampilan..." dari menu konteks.

Kita akan membuat templat Tampilan baru seperti yang kita lakukan sebelumnya dengan HomeController. Karena kita membuatnya dari StoreController secara default akan dihasilkan dalam file \Views\Store\Index.cshtml.

Tidak seperti sebelumnya, kita akan memeriksa kotak centang "Buat tampilan yang sangat ditik". Kami kemudian akan memilih kelas "Album" kami dalam daftar drop-down "Lihat kelas data". Ini akan menyebabkan dialog "Tambahkan Tampilan" membuat templat Tampilan yang mengharapkan bahwa objek Album akan diteruskan ke dalamnya untuk digunakan.

Ketika kita klik tombol "Tambahkan" kita \Views\Store\Details.cshtml View template akan dibuat, berisi kode berikut.

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

Perhatikan baris pertama, yang menunjukkan bahwa tampilan ini sangat ditik ke kelas Album kami. Mesin tampilan Razor memahami bahwa itu telah melewati objek Album, sehingga kita dapat dengan mudah mengakses properti model dan bahkan memiliki manfaat IntelliSense di editor Visual Web Developer.

<Perbarui tag h2> sehingga menampilkan properti Judul Album dengan memodifikasi baris tersebut agar muncul sebagai berikut.

<h2>Album: @Model.Title</h2>

Perhatikan bahwa IntelliSense dipicu saat Anda memasuki periode setelah @Model kata kunci, memperlihatkan properti dan metode yang didukung kelas Album.

Sekarang mari kita jalankan kembali proyek kita dan kunjungi URL /Store/Details/5. Kita akan melihat detail Album seperti di bawah ini.

Sekarang kita akan membuat pembaruan serupa untuk metode tindakan Telusuri Toko. Perbarui metode sehingga mengembalikan ActionResult, dan ubah logika metode sehingga membuat objek Genre baru dan mengembalikannya ke Tampilan.

public ActionResult Browse(string genre)
 {
    var genreModel = new Genre { Name = genre };
    return View(genreModel);
 }

Klik kanan di metode Telusuri dan pilih "Tambahkan Tampilan..." dari menu konteks, lalu tambahkan Tampilan yang ditik dengan kuat, tambahkan yang ditik dengan kuat ke kelas Genre.

<Perbarui elemen h2> dalam kode tampilan (di /Views/Store/Browse.cshtml) untuk menampilkan informasi Genre.

@model MvcMusicStore.Models.Genre
@{
    ViewBag.Title = "Browse";
}
<h2>Browsing Genre: @Model.Name</h2>

Sekarang mari kita jalankan kembali proyek kita dan telusuri ke /Store/Browse? Genre=URL Disko. Kita akan melihat halaman Telusuri ditampilkan seperti di bawah ini.

Terakhir, mari kita buat pembaruan yang sedikit lebih kompleks ke metode tindakan Indeks Penyimpanan dan lihat untuk menampilkan daftar semua Genre di penyimpanan kami. Kita akan melakukannya dengan menggunakan Daftar Genre sebagai objek model kita, bukan hanya satu Genre.

public ActionResult Index()
{
    var genres = new List<Genre>
    {
        new Genre { Name = "Disco"},
        new Genre { Name = "Jazz"},
        new Genre { Name = "Rock"}
    };
    return View(genres);
 }

Klik kanan dalam metode tindakan Indeks Penyimpanan dan pilih Tambahkan Tampilan seperti sebelumnya, pilih Genre sebagai kelas Model, dan tekan tombol Tambahkan.

Pertama, kita akan mengubah @model deklarasi untuk menunjukkan bahwa tampilan akan mengharapkan beberapa objek Genre daripada hanya satu. Ubah baris pertama /Store/Index.cshtml untuk dibaca sebagai berikut:

@model IEnumerable<MvcMusicStore.Models.Genre>

Ini memberi tahu mesin tampilan Razor bahwa itu akan bekerja dengan objek model yang dapat menampung beberapa objek Genre. Kami menggunakan Genre IEnumerable<daripada Genre> Daftar<karena lebih umum, memungkinkan kami mengubah jenis model nanti ke jenis objek apa pun yang mendukung antarmuka IEnumerable.>

Selanjutnya, kita akan mengulangi objek Genre dalam model seperti yang ditunjukkan pada kode tampilan lengkap di bawah ini.

@model IEnumerable<MvcMusicStore.Models.Genre>
@{
    ViewBag.Title = "Store";
}
<h3>Browse Genres</h3>
<p>
    Select from @Model.Count()
genres:</p>
<ul>
    @foreach (var genre in Model)
    {
        <li>@genre.Name</li>
    }
</ul>

Perhatikan bahwa kami memiliki dukungan IntelliSense penuh saat kami memasukkan kode ini, sehingga ketika kami mengetik "@Model." kami melihat semua metode dan properti yang didukung oleh IEnumerable jenis Genre.

Dalam perulangan "foreach" kami, Pengembang Web Visual tahu bahwa setiap item berjenis Genre, jadi kami melihat IntelliSense untuk setiap jenis Genre.

Selanjutnya, fitur perancah memeriksa objek Genre dan menentukan bahwa masing-masing akan memiliki properti Nama, sehingga mengulang dan menulisnya. Ini juga menghasilkan tautan Edit, Detail, dan Hapus ke setiap item individual. Kami akan memanfaatkannya nanti di manajer toko kami, tetapi untuk saat ini kami ingin memiliki daftar sederhana sebagai gantinya.

Ketika kita menjalankan aplikasi dan menelusuri ke /Store, kita melihat bahwa jumlah dan daftar Genre ditampilkan.

Menambahkan Tautan antar halaman

URL /Store kami yang mencantumkan Genre saat ini mencantumkan nama Genre hanya sebagai teks biasa. Mari kita ubah ini sehingga alih-alih teks biasa kita sebaliknya memiliki tautan Nama genre ke URL /Store/Browse yang sesuai, sehingga mengklik genre musik seperti "Disko" akan menavigasi ke URL /Store/Browse?genre=Disco. Kita dapat memperbarui templat Tampilan \Views\Store\Index.cshtml untuk mengeluarkan tautan ini menggunakan kode seperti di bawah ini (jangan ketik ini - kita akan meningkatkannya):

<ul>
    @foreach (var genre in Model)
    {
        <li><a href="/Store/Browse?genre=@genre.Name">@genre.Name</a></li>
    }
</ul>

Itu berhasil, tetapi dapat menyebabkan masalah nanti karena bergantung pada string yang dikodekan secara permanen. Misalnya, jika kita ingin mengganti nama Pengontrol, kita harus mencari melalui kode kita mencari tautan yang perlu diperbarui.

Pendekatan alternatif yang dapat kita gunakan adalah memanfaatkan metode Pembantu HTML. ASP.NET MVC menyertakan metode Pembantu HTML yang tersedia dari kode templat Tampilan kami untuk melakukan berbagai tugas umum seperti ini. Metode pembantu Html.ActionLink() adalah metode yang sangat berguna, dan memudahkan untuk membuat tautan HTML <> dan mengurus detail yang mengganggu seperti memastikan jalur URL dikodekan dengan benar.

Html.ActionLink() memiliki beberapa kelebihan beban yang berbeda untuk memungkinkan menentukan informasi sebanyak yang Anda butuhkan untuk tautan Anda. Dalam kasus yang paling sederhana, Anda hanya akan menyediakan teks tautan dan metode Tindakan untuk masuk ke saat hyperlink diklik pada klien. Misalnya, kita dapat menautkan ke metode Indeks "/Store/" () di halaman Detail Toko dengan teks tautan "Buka Indeks Toko" menggunakan panggilan berikut:

@Html.ActionLink("Go
to the Store Index", "Index")

Catatan: Dalam hal ini, kami tidak perlu menentukan nama pengontrol karena kami hanya menautkan ke tindakan lain dalam pengontrol yang sama yang merender tampilan saat ini.

Tautan kami ke halaman Telusuri harus meneruskan parameter, jadi kami akan menggunakan kelebihan beban lain dari metode Html.ActionLink yang mengambil tiga parameter:

• 1. Tautkan teks, yang akan menampilkan nama Genre
• 2. Nama tindakan pengontrol (Telusuri)
• 3. Nilai parameter rute, menentukan nama (Genre) dan nilai (Nama genre)

Menyatukan semuanya, berikut cara menulis tautan tersebut ke tampilan Indeks Toko:

<ul>
    @foreach (var genre in Model)
    {
        <li>@Html.ActionLink(genre.Name,
"Browse", new { genre = genre.Name })</li>
    }
</ul>

Sekarang ketika kita menjalankan proyek lagi dan mengakses URL /Store/ kita akan melihat daftar genre. Setiap genre adalah hyperlink – ketika diklik, ini akan membawa kami ke URL /Store/Browse?genre=[genre] .

HTML untuk daftar genre terlihat seperti ini:

<ul>
    <li><a href="/Store/Browse?genre=Disco">Disco</a>
</li>
    <li><a href="/Store/Browse?genre=Jazz">Jazz</a>
</li>
    <li><a href="/Store/Browse?genre=Rock">Rock</a>
</li>
</ul>

SebelumnyaBerikutnya