ASP.NET Dasar-Dasar MVC 4

Lab Langsung ini didasarkan pada MVC (Model View Controller) Music Store, aplikasi tutorial yang memperkenalkan dan menjelaskan langkah demi langkah cara menggunakan ASP.NET MVC dan Visual Studio. Di seluruh lab Anda akan mempelajari kesederhanaan, namun kekuatan menggunakan teknologi ini bersama-sama. Anda akan mulai dengan aplikasi sederhana dan akan membangunnya sampai Anda memiliki Aplikasi Web ASP.NET MVC 4 yang berfungsi penuh.

Lab ini berfungsi dengan ASP.NET MVC 4.

Jika Anda ingin menjelajahi versi ASP.NET MVC 3 dari aplikasi tutorial, Anda dapat menemukannya di MVC-Music-Store.

Lab Langsung ini mengasumsikan bahwa pengembang memiliki pengalaman dalam teknologi pengembangan Web, seperti HTML dan JavaScript.

Catatan

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

Aplikasi Music Store

Aplikasi web Music Store yang akan dibangun di seluruh Lab ini terdiri dari tiga bagian utama: belanja, checkout, dan administrasi. Pengunjung akan dapat menelusuri album berdasarkan genre, menambahkan album ke kelir mereka, meninjau pilihan mereka dan akhirnya melanjutkan ke checkout untuk masuk dan menyelesaikan pesanan. Selain itu, administrator toko akan dapat mengelola album yang tersedia serta properti utamanya.

Layar Penyimpanan Musik

Layar Penyimpanan Musik

ASP.NET MVC 4 Essentials

Aplikasi Music Store akan dibangun menggunakan Model View Controller (MVC), pola arsitektur yang memisahkan aplikasi menjadi tiga komponen utama:

Model: Objek model adalah bagian dari aplikasi yang mengimplementasikan logika domain. Seringkali, objek model juga mengambil dan menyimpan status model dalam database.
Tampilan: Tampilan adalah komponen yang menampilkan antarmuka pengguna (UI) aplikasi. Biasanya, UI ini dibuat dari data model. Contohnya adalah tampilan edit Album yang menampilkan kotak teks dan daftar drop-down berdasarkan status objek Album saat ini.
Pengontrol: Pengontrol adalah komponen yang menangani interaksi pengguna, memanipulasi model, dan pada akhirnya memilih tampilan untuk merender UI. Dalam aplikasi MVC, tampilan hanya menampilkan informasi; pengontrol menangani dan merespons input dan interaksi pengguna.

Pola MVC membantu Anda membuat aplikasi yang memisahkan berbagai aspek aplikasi (logika input, logika bisnis, dan logika UI), sambil menyediakan konektivasi yang longgar di antara elemen-elemen ini. Pemisahan ini membantu Anda mengelola kompleksitas saat membuat aplikasi, karena memungkinkan Anda untuk fokus pada satu aspek implementasi pada satu waktu. Selain itu, pola MVC memudahkan pengujian aplikasi, juga mendorong penggunaan pengembangan berbasis pengujian (TDD) untuk membuat aplikasi.

Kerangka kerja MVC ASP.NET menyediakan alternatif untuk pola ASP.NET Web Forms untuk membuat aplikasi Web berbasis MVC ASP.NET. Kerangka kerja MVC ASP.NET adalah kerangka kerja presentasi yang ringan dan sangat dapat diuji yang (seperti halnya aplikasi berbasis formulir Web) terintegrasi dengan fitur ASP.NET yang ada, seperti halaman master dan autentikasi berbasis keanggotaan sehingga Anda mendapatkan semua kekuatan kerangka kerja .NET inti. Ini berguna jika Anda sudah terbiasa dengan ASP.NET Web Forms karena semua pustaka yang sudah Anda gunakan juga tersedia di ASP.NET MVC 4.

Selain itu, konektor longgar antara tiga komponen utama aplikasi MVC juga mempromosikan pengembangan paralel. Misalnya, satu pengembang dapat mengerjakan tampilan, pengembang kedua dapat mengerjakan logika pengontrol, dan pengembang ketiga dapat fokus pada logika bisnis dalam model.

Tujuan

Di Lab Langsung ini, Anda akan mempelajari cara:

Membuat aplikasi MVC ASP.NET dari awal berdasarkan tutorial Aplikasi Music Store
Tambahkan Pengontrol untuk menangani URL ke halaman Beranda situs dan untuk menelusuri fungsionalitas utamanya
Menambahkan Tampilan untuk mengkustomisasi konten yang ditampilkan bersama dengan gayanya
Menambahkan kelas Model untuk berisi dan mengelola logika data dan domain
Gunakan pola Tampilkan Model untuk meneruskan informasi dari tindakan pengontrol ke templat tampilan
Menjelajahi templat baru MVC 4 ASP.NET untuk aplikasi internet

Prasyarat

Anda harus memiliki item berikut untuk menyelesaikan lab ini:

Visual Studio 2012 Express for Web (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 C: Menggunakan Cuplikan Kode".

Latihan

Lab Langsung ini terdiri dari latihan berikut:

Latihan 1: Membuat MusicStore ASP.NET Proyek Aplikasi Web MVC
Latihan 2: Membuat Pengontrol
Latihan 3: Meneruskan parameter ke Pengontrol
Latihan 4: Membuat Tampilan
Latihan 5: Membuat Model Tampilan
Latihan 6: Menggunakan parameter dalam Tampilan
Latihan 7: Putaran di sekitar templat baru ASP.NET MVC 4

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 MusicStore ASP.NET Proyek Aplikasi Web MVC

Dalam latihan ini, Anda akan mempelajari cara membuat aplikasi MVC ASP.NET di Visual Studio 2012 Express for Web serta organisasi folder utamanya. Selain itu, Anda akan mempelajari cara menambahkan Pengontrol baru dan membuatnya menampilkan string sederhana di beranda aplikasi.

Tugas 1 - Membuat Proyek Aplikasi Web MVC ASP.NET

Dalam tugas ini, Anda akan membuat proyek aplikasi MVC ASP.NET kosong menggunakan templat MVC Visual Studio. Mulai VS Express untuk Web.
Pada menu File, klik Proyek Baru.
Dalam kotak dialog Proyek Baru pilih jenis proyek Aplikasi Web ASP.NET MVC 4, yang terletak di bawah Visual C#, daftar templat web .
Ubah Nama menjadi MvcMusicStore.
Atur lokasi solusi di dalam folder Mulai baru di folder Sumber Latihan ini, misalnya [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Klik OK.

Kotak Dialog Buat Proyek Baru
Dalam kotak dialog Proyek New ASP.NET MVC 4 pilih templat Dasar dan pastikan bahwa Mesin tampilan yang dipilih adalah Razor. Klik OK.

Kotak Dialog Proyek ASP.NET MVC 4 Baru

Tugas 2 - Menjelajahi Struktur Solusi

Kerangka kerja MVC ASP.NET menyertakan templat proyek Visual Studio yang membantu Anda membuat aplikasi Web yang mendukung pola MVC. Templat ini membuat aplikasi Web MVC ASP.NET baru dengan folder, templat item, dan entri file konfigurasi yang diperlukan.

Dalam tugas ini, Anda akan memeriksa struktur solusi untuk memahami elemen yang terlibat dan hubungannya. Folder berikut disertakan dalam semua aplikasi MVC ASP.NET karena kerangka kerja MVC ASP.NET secara default menggunakan pendekatan "konvensi atas konfigurasi", dan membuat beberapa asumsi default berdasarkan konvensi penamaan folder.

Setelah proyek dibuat, tinjau struktur folder yang telah dibuat di Penjelajah Solusi di sisi kanan:

ASP.NET struktur Folder MVC di Penjelajah Solusi
1. Pengontrol. Folder ini akan berisi kelas pengontrol. Dalam aplikasi berbasis MVC, pengontrol bertanggung jawab untuk menangani interaksi pengguna akhir, memanipulasi model, dan pada akhirnya memilih tampilan untuk merender UI.
  
  Catatan
  
  Kerangka kerja MVC mengharuskan nama semua pengontrol diakhir dengan "Pengontrol"-misalnya, HomeController, LoginController, atau ProductController.
2. Model. Folder ini disediakan untuk kelas yang mewakili model aplikasi untuk aplikasi Web MVC. Ini biasanya mencakup kode yang menentukan objek dan logika untuk berinteraksi dengan penyimpanan data. Biasanya, objek model aktual akan berada di pustaka kelas terpisah. Namun, saat membuat aplikasi baru, Anda mungkin menyertakan kelas lalu memindahkannya ke pustaka kelas terpisah di titik selanjutnya dalam siklus pengembangan.
3. Tampilan. Folder ini adalah lokasi yang direkomendasikan untuk tampilan, komponen yang bertanggung jawab untuk menampilkan antarmuka pengguna aplikasi. Tampilan menggunakan file .aspx, .ascx, .cshtml, dan .master, selain file lain yang terkait dengan tampilan penyajian. Folder tampilan berisi folder untuk setiap pengontrol; folder diberi nama dengan awalan nama pengontrol. Misalnya, jika Anda memiliki pengontrol bernama HomeController, folder Tampilan akan berisi folder bernama Beranda. Secara default, ketika kerangka kerja MVC ASP.NET memuat tampilan, ia mencari file .aspx dengan nama tampilan yang diminta di folder Views\controllerName (Views[ControllerName][Action].aspx) atau (Views[ControllerName][Action].cshtml) untuk Tampilan Razor.
  
  Catatan
  
  Selain folder yang tercantum sebelumnya, aplikasi Web MVC menggunakan file Global.asax untuk mengatur default perutean URL global, dan menggunakan file Web.config untuk mengonfigurasi aplikasi.

Tugas 3 - Menambahkan HomeController

Dalam ASP.NET aplikasi yang tidak menggunakan kerangka kerja MVC, interaksi pengguna diatur di sekitar halaman, dan sekeliling menaikkan dan menangani peristiwa dari halaman tersebut. Sebaliknya, interaksi pengguna dengan aplikasi MVC ASP.NET diatur di sekitar pengontrol dan metode tindakan mereka.

Di sisi lain, kerangka kerja MVC ASP.NET memetakan URL ke kelas yang disebut sebagai pengontrol. Pengontrol memproses permintaan masuk, menangani input dan interaksi pengguna, menjalankan logika aplikasi yang sesuai dan menentukan respons untuk mengirim kembali ke klien (menampilkan HTML, mengunduh file, mengalihkan ke URL yang berbeda, dll.). Dalam kasus menampilkan HTML, kelas pengontrol biasanya memanggil komponen tampilan terpisah untuk menghasilkan markup HTML untuk permintaan. Dalam aplikasi MVC, tampilan hanya menampilkan informasi; pengontrol menangani dan merespons input dan interaksi pengguna.

Dalam tugas ini, Anda akan menambahkan kelas Pengontrol yang akan menangani URL ke halaman Beranda situs Penyimpanan Musik.

Klik kanan folder Pengontrol dalam Penjelajah Solusi, pilih Tambahkan lalu perintah Pengontrol:

Tambahkan Perintah Pengontrol
Dialog Tambahkan Pengontrol muncul. Beri nama pengontrol HomeController dan tekan Tambahkan.

Tambahkan Dialog Pengontrol
File HomeController.cs dibuat di folder Pengontrol. Agar HomeController mengembalikan string pada tindakan Indeksnya, ganti metode Indeks dengan kode berikut:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex1 HomeController Index)
```
public string Index()
{
    return "Hello from Home";
}
```

Tugas 4 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan mencoba Aplikasi di browser web.

Tekan F5 untuk menjalankan Aplikasi. Proyek dikompilasi dan Server Web IIS lokal dimulai. Server Web IIS lokal akan secara otomatis membuka browser web yang menunjuk ke URL server Web.

Aplikasi yang berjalan di browser web

Catatan

Server Web IIS lokal akan menjalankan situs web pada nomor port gratis acak. Pada gambar di atas, situs berjalan di http://localhost:50103/, sehingga menggunakan port 50103. Nomor port Anda dapat bervariasi.
Tutup browser.

Latihan 2: Membuat Pengontrol

Dalam latihan ini, Anda akan mempelajari cara memperbarui pengontrol untuk menerapkan fungsionalitas sederhana aplikasi Music Store. Pengontrol tersebut akan menentukan metode tindakan untuk menangani setiap permintaan tertentu berikut:

Halaman daftar genre musik di Music Store
Halaman telusuri yang mencantumkan semua album musik untuk genre tertentu
Halaman detail yang menampilkan informasi tentang album musik tertentu

Untuk cakupan latihan ini, tindakan tersebut hanya akan mengembalikan string sekarang.

Tugas 1 - Menambahkan Kelas StoreController Baru

Dalam tugas ini, Anda akan menambahkan Pengontrol baru.

Jika belum dibuka, mulai VS Express untuk Web 2012.
Di menu File , pilih Buka Proyek. Dalam dialog Buka Proyek, telusuri ke Source\Ex02-CreatingAController\Begin, pilih Begin.sln dan klik Buka. Atau, Anda dapat melanjutkan dengan solusi yang Anda peroleh setelah 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.
Tambahkan pengontrol baru. Untuk melakukan ini, klik kanan folder Pengontrol dalam Penjelajah Solusi, pilih Tambahkan lalu perintah Pengontrol. Ubah Nama Pengontrol ke StoreController, dan klik Tambahkan.

Tambahkan Dialog Pengontrol

Tugas 2 - Memodifikasi Tindakan StoreController

Dalam tugas ini, Anda akan mengubah metode Pengontrol yang disebut tindakan. Tindakan bertanggung jawab untuk menangani permintaan URL dan menentukan konten yang harus dikirim kembali ke browser atau pengguna yang memanggil URL.

Kelas StoreController sudah memiliki metode Indeks . Anda akan menggunakannya nanti di Lab ini untuk mengimplementasikan halaman yang mencantumkan semua genre toko musik. Untuk saat ini, cukup ganti metode Indeks dengan kode berikut yang mengembalikan string "Hello from Store.Index()":

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex2 StoreController Index)
```
public string Index()
{
  return "Hello from Store.Index()";
}
```

Tambahkan metode Telusuri dan Detail . Untuk melakukan ini, tambahkan kode berikut ke StoreController:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex2 StoreController BrowseAndDetails)

// GET: /Store/Browse
public string Browse()
{
  return "Hello from Store.Browse()";
}

// GET: /Store/Details  
public string Details()
{
  return "Hello from Store.Details()";
}

Tugas 3 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan mencoba Aplikasi di browser web.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda . Ubah URL untuk memverifikasi implementasi setiap tindakan.
1. /Store. Anda akan melihat "Halo dari Store.Index()".
2. /Store/Browse. Anda akan melihat "Halo dari Store.Browse()".
3. /Store/Details. Anda akan melihat "Halo dari Store.Details()".
  
  Menelusuri /Store/Browse
Tutup browser.

Latihan 3: Meneruskan parameter ke Pengontrol

Hingga saat ini, Anda telah mengembalikan string konstanta dari Pengontrol. Dalam latihan ini Anda akan mempelajari cara meneruskan parameter ke Pengontrol menggunakan URL dan querystring, lalu membuat tindakan metode merespons dengan teks ke browser.

Tugas 1 - Menambahkan Parameter Genre ke StoreController

Dalam tugas ini, Anda akan menggunakan querystring untuk mengirim parameter ke metode tindakan Telusuri di StoreController.

Jika belum terbuka, mulai VS Express untuk Web.
Di menu File , pilih Buka Proyek. Dalam dialog Buka Proyek, telusuri ke Source\Ex03-PassingParametersToAController\Begin, pilih Begin.sln dan klik Buka. Atau, Anda dapat melanjutkan dengan solusi yang Anda peroleh setelah 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 StoreController . Untuk melakukan ini, di Penjelajah Solusi, perluas folder Pengontrol dan klik dua kali StoreController.cs.
Ubah metode Telusuri, tambahkan parameter string untuk meminta genre tertentu. ASP.NET MVC akan secara otomatis meneruskan parameter querystring atau form post bernama genre ke metode tindakan ini saat dipanggil. Untuk melakukan ini, ganti metode Telusuri dengan kode berikut:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex3 StoreController BrowseMethod)
```
// GET: /Store/Browse?genre=Disco   
public string Browse(string genre)
{
  string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

  return message;
}
```

Catatan

Anda menggunakan metode utilitas HttpUtility.HtmlEncode untuk mencegah pengguna menyuntikkan Javascript ke tampilan dengan tautan seperti /Store/Browse? Genre=<script window.location='http://hackersite.com'</script>.>

Untuk penjelasan lebih lanjut, silakan kunjungi artikel msdn ini.

Tugas 2 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan mencoba Aplikasi di browser web dan menggunakan parameter genre .

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda . Ubah URL menjadi /Store/Browse? Genre=Disco untuk memverifikasi bahwa tindakan menerima parameter genre.

Menelusuri /Store/Browse? Genre=Disko
Tutup browser.

Tugas 3 - Menambahkan Parameter Id yang Disematkan di URL

Dalam tugas ini, Anda akan menggunakan URL untuk meneruskan parameter Id ke metode tindakan Detail StoreController. ASP.NET konvensi perutean default MVC adalah memperlakukan segmen URL setelah nama metode tindakan sebagai parameter bernama Id. Jika metode tindakan Anda memiliki parameter bernama Id, maka ASP.NET MVC akan secara otomatis meneruskan segmen URL kepada Anda sebagai parameter. Di URL Store/Details/5, Id akan ditafsirkan sebagai 5.

Ubah metode Detail StoreController, menambahkan parameter int yang disebut id. Untuk melakukan ini, ganti metode Detail dengan kode berikut:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex3 StoreController DetailsMethod)
```
// GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}
```

Tugas 4 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan mencoba Aplikasi di browser web dan menggunakan parameter Id .

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda . Ubah URL menjadi /Store/Details/5 untuk memverifikasi bahwa tindakan menerima parameter id.

Menelusuri /Store/Details/5

Latihan 4: Membuat Tampilan

Sejauh ini Anda telah mengembalikan string dari tindakan pengontrol. Meskipun itu adalah cara yang berguna untuk memahami cara kerja pengontrol, itu bukan cara aplikasi Web nyata Anda dibangun. Tampilan adalah komponen yang memberikan pendekatan yang lebih baik untuk menghasilkan HTML kembali ke browser dengan penggunaan file templat.

Dalam latihan ini Anda akan mempelajari cara menambahkan halaman master tata letak untuk menyiapkan templat untuk konten HTML umum, Lembar Gaya untuk meningkatkan tampilan dan nuansa situs dan akhirnya templat Tampilan untuk memungkinkan HomeController mengembalikan HTML.

Tugas 1 - Memodifikasi file _layout.cshtml

File ~/Views/Shared/_layout.cshtml memungkinkan Anda menyiapkan templat untuk DIGUNAKAN HTML umum di seluruh situs web. Dalam tugas ini Anda akan menambahkan halaman master tata letak dengan header umum dengan tautan ke halaman Beranda dan area Toko.

Jika belum terbuka, mulai VS Express untuk Web.
Di menu File , pilih Buka Proyek. Dalam dialog Buka Proyek, telusuri ke Source\Ex04-CreatingAView\Begin, pilih Begin.sln dan klik Buka. Atau, Anda dapat melanjutkan dengan solusi yang Anda peroleh setelah 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.

File _layout.cshtml berisi tata letak kontainer HTML untuk semua halaman di situs. Ini termasuk elemen html> untuk respons HTML, serta <elemen kepala> dan< tubuh>.< @RenderBody() dalam isi HTML mengidentifikasi wilayah yang melihat templat akan dapat diisi dengan konten dinamis. (C#)

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

Tambahkan header umum dengan tautan ke halaman Beranda dan area Simpan pada semua halaman di situs. Untuk melakukannya, tambahkan kode berikut di bawah <pernyataan isi> . (C#)

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

Sertakan div untuk merender bagian isi setiap halaman. Ganti @RenderBody() dengan kode yang disorot berikut: (C#)

...
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     <div id="body">
          @RenderSection("featured", required: false)
          <section class="content-wrapper main-content clear-fix">
                @RenderBody()
          </section>
     </div>
     ...
</body>
</html>

Catatan

Tahukah Anda? Visual Studio 2012 memiliki cuplikan yang memudahkan untuk menambahkan kode yang umum digunakan dalam HTML, file kode, dan banyak lagi! Cobalah dengan mengetik <div> dan menekan TAB dua kali untuk menyisipkan tag div lengkap.

Tugas 2 - Menambahkan Lembar Gaya CSS

Templat proyek kosong mencakup file CSS yang sangat efisien yang hanya menyertakan gaya yang digunakan untuk menampilkan formulir dasar dan pesan validasi. Anda akan menggunakan CSS dan gambar tambahan (berpotensi disediakan oleh perancang) untuk meningkatkan tampilan dan nuansa situs.

Dalam tugas ini, Anda akan menambahkan lembar gaya CSS untuk menentukan gaya situs.

File dan gambar CSS disertakan dalam folder Source\Assets\Content lab ini. Untuk menambahkannya ke aplikasi, seret kontennya dari jendela Windows Explorer ke Penjelajah Solusi di Visual Studio Express untuk Web, seperti yang ditunjukkan di bawah ini:

Menyeret konten gaya
Dialog peringatan akan muncul, meminta konfirmasi untuk mengganti file Site.css dan beberapa gambar yang ada. Centang Terapkan ke semua item dan klik Ya.

Tugas 3 - Menambahkan Templat Tampilan

Dalam tugas ini, Anda akan menambahkan templat Tampilan untuk menghasilkan respons HTML yang akan menggunakan halaman master tata letak dan CSS yang ditambahkan dalam latihan ini.

Untuk menggunakan templat Tampilan saat menelusuri beranda situs, Anda harus terlebih dahulu menunjukkan bahwa alih-alih mengembalikan string, metode Indeks HomeController akan mengembalikan Tampilan. Buka kelas HomeController dan ubah metode Indeksnya untuk mengembalikan ActionResult, dan mengembalikan View().

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex4 HomeController Index)
```
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return this.View();
    }
}
```
Sekarang, Anda perlu menambahkan templat Tampilan yang sesuai. Untuk melakukan ini, klik kanan di dalam metode tindakan Indeks dan pilih Tambahkan Tampilan. Ini akan memunculkan dialog Tambahkan Tampilan .

Menambahkan Tampilan dari dalam metode Indeks
Dialog Tambahkan Tampilan akan muncul untuk menghasilkan file templat Tampilan. Secara default, dialog ini telah mengisi nama templat Tampilan sehingga cocok dengan metode tindakan yang akan menggunakannya. Karena Anda menggunakan menu tambahkan konteks Tampilan dalam metode tindakan Indeks dalam HomeController, dialog Tambahkan Tampilan memiliki Indeks sebagai nama tampilan default. Klik Tambahkan.

Tambahkan Dialog Tampilan
Visual Studio menghasilkan templat tampilan Index.cshtml di dalam folder Views\Home lalu membukanya.

Tampilan Indeks Beranda dibuat

Catatan

nama dan lokasi file Index.cshtml relevan dan mengikuti konvensi penamaan MVC ASP.NET default.

Folder \Views*Home* cocok dengan nama pengontrol (Home Controller). Nama templat Tampilan (Indeks), cocok dengan metode tindakan pengontrol yang akan menampilkan Tampilan.

Dengan cara ini, ASP.NET MVC menghindari harus secara eksplisit menentukan nama atau lokasi templat Tampilan saat menggunakan konvensi penamaan ini untuk mengembalikan Tampilan.
Templat Tampilan yang dihasilkan didasarkan pada templat _layout.cshtml yang ditentukan sebelumnya. Perbarui properti ViewBag.Title ke Beranda, dan ubah konten utama ke Ini adalah Halaman Beranda, seperti yang ditunjukkan pada kode di bawah ini:
```
@{
    ViewBag.Title = "Home";
}

<h2>This is the Home Page</h2>
```
Pilih proyek MvcMusicStore di Penjelajah Solusi dan Tekan F5 untuk menjalankan Aplikasi.

Tugas 4: Verifikasi

Untuk memverifikasi bahwa Anda telah melakukan semua langkah dengan benar dalam latihan sebelumnya, lanjutkan sebagai berikut:

Dengan aplikasi yang dibuka di browser, Anda harus mencatat bahwa:

Metode tindakan Indeks HomeController menemukan dan menampilkan templat Tampilan \Views\Home\Index.cshtml , meskipun kode yang disebut return View(), karena templat Tampilan mengikuti konvensi penamaan standar.
Halaman Beranda menampilkan pesan selamat datang yang ditentukan dalam templat tampilan \Views\Home\Index.cshtml .
Halaman Beranda menggunakan templat _layout.cshtml , sehingga pesan selamat datang terkandung dalam tata letak HTML situs standar.

Tampilan Indeks Beranda menggunakan LayoutPage dan gaya yang ditentukan

Latihan 5: Membuat Model Tampilan

Sejauh ini, Anda membuat Tampilan menampilkan HTML yang dikodekan secara permanen, tetapi, untuk membuat aplikasi web dinamis, templat Tampilan harus menerima informasi dari Pengontrol. Salah satu teknik umum yang akan digunakan untuk tujuan tersebut adalah pola ViewModel , yang memungkinkan Pengontrol untuk mengemas semua informasi yang diperlukan untuk menghasilkan respons HTML yang sesuai.

Dalam latihan ini, Anda akan mempelajari cara membuat kelas ViewModel dan menambahkan properti yang diperlukan: jumlah genre di toko dan daftar genre tersebut. Anda juga akan memperbarui StoreController untuk menggunakan ViewModel yang dibuat, dan akhirnya, Anda akan membuat templat Tampilan baru yang akan menampilkan properti yang disebutkan di halaman.

Tugas 1 - Membuat Kelas ViewModel

Dalam tugas ini, Anda akan membuat kelas ViewModel yang akan menerapkan skenario daftar genre Store.

Jika belum terbuka, mulai VS Express untuk Web.
Di menu File , pilih Buka Proyek. Dalam dialog Buka Proyek, telusuri ke Source\Ex05-CreatingAViewModel\Begin, pilih Begin.sln dan klik Buka. Atau, Anda dapat melanjutkan dengan solusi yang Anda peroleh setelah 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.
Buat folder ViewModels untuk menahan ViewModel. Untuk melakukan ini, klik kanan proyek MvcMusicStore tingkat atas, pilih Tambahkan lalu Folder Baru.

Menambahkan folder baru
Beri nama folder ViewModels.

Folder ViewModels di Penjelajah Solusi
Buat kelas ViewModel . Untuk melakukan ini, klik kanan folder ViewModels yang baru saja dibuat, pilih Tambahkan lalu Item Baru. Di bawah Kode, pilih item Kelas dan beri nama file StoreIndexViewModel.cs, lalu klik Tambahkan.

Menambahkan Kelas baru

Membuat kelas StoreIndexViewModel

Tugas 2 - Menambahkan Properti ke kelas ViewModel

Ada dua parameter yang akan diteruskan dari StoreController ke templat Tampilan untuk menghasilkan respons HTML yang diharapkan: jumlah genre di toko dan daftar genre tersebut.

Dalam tugas ini, Anda akan menambahkan 2 properti tersebut ke kelas StoreIndexViewModel : NumberOfGenres (bilangan bulat) dan Genre (daftar string).

Tambahkan properti NumberOfGenres dan Genres ke kelas StoreIndexViewModel . Untuk melakukan ini, tambahkan 2 baris berikut ke definisi kelas:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Properti Ex5 StoreIndexViewModel)
```
public class StoreIndexViewModel
{
    public int NumberOfGenres { get; set; }

    public List<string> Genres { get; set; }
}
```

Catatan

Notasi { get; set; } menggunakan fitur properti C#yang diimplementasikan secara otomatis. Ini memberikan manfaat properti tanpa mengharuskan kami untuk mendeklarasikan bidang dukungan.

Tugas 3 - Memperbarui StoreController untuk menggunakan StoreIndexViewModel

Kelas StoreIndexViewModel merangkum informasi yang diperlukan untuk meneruskan dari metode Indeks StoreController ke templat Tampilan untuk menghasilkan respons.

Dalam tugas ini, Anda akan memperbarui StoreController untuk menggunakan StoreIndexViewModel.

Buka kelas StoreController .

Membuka kelas StoreController
Untuk menggunakan kelas StoreIndexViewModel dari StoreController, tambahkan namespace berikut di bagian atas kode StoreController :

(Cuplikan Kode - ASP.NET Dasar-Dasar MVC 4 - Ex5 StoreIndexViewModel menggunakan ViewModels)
```
using MvcMusicStore.ViewModels;
```
Ubah metode tindakan Indeks StoreController sehingga membuat dan mengisi objek StoreIndexViewModel lalu meneruskannya ke templat Tampilan untuk menghasilkan respons HTML dengannya.

Catatan

Di Lab "ASP.NET Model MVC dan Akses Data" Anda akan menulis kode yang mengambil daftar genre penyimpanan dari database. Dalam kode berikut, Anda akan membuat Daftar genre data dummy yang akan mengisi StoreIndexViewModel.

Setelah membuat dan menyiapkan objek StoreIndexViewModel , objek tersebut akan diteruskan sebagai argumen ke metode Tampilan . Ini menunjukkan bahwa templat Tampilan akan menggunakan objek tersebut untuk menghasilkan respons HTML dengannya.

Ganti metode Indeks dengan kode berikut:

(Cuplikan Kode - ASP.NET Dasar-Dasar MVC 4 - Metode Indeks Ex5 StoreController)

public ActionResult Index()
{
    // Create a list of genres
    var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};

    // Create our view model
    var viewModel = new StoreIndexViewModel { 
        NumberOfGenres = genres.Count(),
        Genres = genres
    };

    return this.View(viewModel);
}

Catatan

Jika Anda tidak terbiasa dengan C#, Anda mungkin berasumsi bahwa menggunakan var berarti bahwa variabel viewModel terikat terlambat. Itu tidak benar - pengkompilasi C# menggunakan inferensi tipe berdasarkan apa yang Anda tetapkan ke variabel untuk menentukan bahwa viewModel berjenis StoreIndexViewModel. Selain itu, dengan mengkompilasi variabel viewModel lokal sebagai jenis StoreIndexViewModel, Anda mendapatkan pemeriksaan waktu kompilasi dan dukungan editor kode Visual Studio.

Tugas 4 - Membuat Templat Tampilan yang Menggunakan StoreIndexViewModel

Dalam tugas ini, Anda akan membuat templat Tampilan yang akan menggunakan objek StoreIndexViewModel yang diteruskan dari Pengontrol untuk menampilkan daftar genre.

Sebelum membuat templat Tampilan baru, mari kita buat proyek sehingga Dialog Tambahkan Tampilan tahu tentang kelas StoreIndexViewModel . Buat proyek dengan memilih item menu Build lalu Bangun MvcMusicStore.

Membangun proyek
Buat templat Tampilan baru. Untuk melakukannya, klik kanan di dalam metode Indeks dan pilih Tambahkan Tampilan.

Menambahkan Tampilan
Karena Dialog Tambahkan Tampilan dipanggil dari StoreController, dialog tersebut akan menambahkan templat Tampilan secara default dalam file \Views\Store\Index.cshtml. Centang kotak Centang Buat tampilan yang sangat ditik, lalu pilih StoreIndexViewModel sebagai kelas Model. Selain itu, pastikan bahwa mesin Tampilan yang dipilih adalah Razor. Klik Tambahkan.

Tambahkan Dialog Tampilan

File templat Tampilan \Views\Store\Index.cshtml dibuat dan dibuka. Berdasarkan informasi yang diberikan ke dialog Tambahkan Tampilan di langkah terakhir, templat Tampilan akan mengharapkan instans StoreIndexViewModel sebagai data yang akan digunakan untuk menghasilkan respons HTML. Anda akan melihat bahwa templat mewarisi ViewPage<musicstore.viewmodels.storeindexviewmodel> dalam C#.

Tugas 5 - Memperbarui Templat Tampilan

Dalam tugas ini, Anda akan memperbarui templat Tampilan yang dibuat di tugas terakhir untuk mengambil jumlah genre dan namanya dalam halaman.

Catatan

Anda akan menggunakan sintaks @ (sering disebut sebagai "nugget kode") untuk menjalankan kode dalam templat Tampilan.

Dalam file Index.cshtml, di dalam folder Store, ganti kodenya dengan yang berikut ini:

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

Ulangi daftar genre di StoreIndexViewModel dan buat daftar ul> HTML <menggunakan perulangan foreach. (C#)

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
@foreach (string genreName in Model.Genres)
{
    <li>
        @genreName
    </li>
}
</ul>

Tekan F5 untuk menjalankan Aplikasi dan telusuri /Store. Anda akan melihat daftar genre yang diteruskan di objek StoreIndexViewModel dari StoreController ke templat Tampilan.

Menampilkan daftar genre

Menampilkan daftar genre

Tutup browser.

Latihan 6: Menggunakan Parameter dalam Tampilan

Di Latihan 3 Anda mempelajari cara meneruskan parameter ke Pengontrol. Dalam latihan ini, Anda akan mempelajari cara menggunakan parameter tersebut di templat Tampilan. Untuk tujuan itu, Anda akan diperkenalkan terlebih dahulu ke kelas Model yang akan membantu Anda mengelola data dan logika domain Anda. Selain itu, Anda akan mempelajari cara membuat tautan ke halaman di dalam aplikasi MVC ASP.NET tanpa mengkhawatirkan hal-hal seperti pengodean jalur URL.

Tugas 1 - Menambahkan Kelas Model

Tidak seperti ViewModels, yang dibuat hanya untuk meneruskan informasi dari Pengontrol ke Tampilan, kelas Model dibuat untuk berisi dan mengelola data dan logika domain. Dalam tugas ini Anda akan menambahkan dua kelas model untuk mewakili konsep ini: Genre dan Album.

Jika belum terbuka, mulai VS Express untuk Web
Di menu File , pilih Buka Proyek. Dalam dialog Buka Proyek, telusuri ke Source\Ex06-UsingParametersInView\Begin, pilih Begin.sln dan klik Buka. Atau, Anda dapat melanjutkan dengan solusi yang Anda peroleh setelah 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.
Tambahkan kelas Model Genre. Untuk melakukan ini, klik kanan folder Model di Penjelajah Solusi, pilih Tambahkan lalu opsi Item Baru. Di bawah Kode, pilih item Kelas dan beri nama file Genre.cs, lalu klik Tambahkan.

Menambahkan item baru

Tambahkan Kelas Model Genre

Tambahkan properti Nama ke kelas Genre. Untuk melakukan ini, tambahkan kode berikut:

(Cuplikan Kode - ASP.NET Dasar-Dasar MVC 4 - Genre Ex6)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Genre
    {
        public string Name { get; set; }
    }
}

Mengikuti prosedur yang sama seperti sebelumnya, tambahkan kelas Album . Untuk melakukan ini, klik kanan folder Model di Penjelajah Solusi, pilih Tambahkan lalu opsi Item Baru. Di bawah Kode, pilih item Kelas dan beri nama file Album.cs, lalu klik Tambahkan.

Tambahkan dua properti ke kelas Album: Genre dan Judul. Untuk melakukan ini, tambahkan kode berikut:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Album Ex6)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Album
    {
        public string Title { get; set; }

        public Genre Genre { get; set; }
    }
}

Tugas 2 - Menambahkan StoreBrowseViewModel

StoreBrowseViewModel akan digunakan dalam tugas ini untuk menampilkan Album yang cocok dengan Genre yang dipilih. Dalam tugas ini, Anda akan membuat kelas ini lalu menambahkan dua properti untuk menangani Genre dan Daftar Albumnya.

Tambahkan kelas StoreBrowseViewModel. Untuk melakukan ini, klik kanan folder ViewModels di Penjelajah Solusi, pilih Tambahkan lalu opsi Item Baru. Di bawah Kode, pilih item Kelas dan beri nama file StoreBrowseViewModel.cs, lalu klik Tambahkan.

Tambahkan referensi ke Model di kelas StoreBrowseViewModel . Untuk melakukan ini, tambahkan yang berikut ini menggunakan namespace layanan:

(Cuplikan Kode - ASP.NET Dasar-Dasar MVC 4 - Ex6 UsingModel)

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

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
    }
}

Tambahkan dua properti ke kelas StoreBrowseViewModel : Genre dan Album. Untuk melakukan ini, tambahkan kode berikut:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex6 ModelProperties)

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

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
        public Genre Genre { get; set; }

        public List<Album> Albums { get; set; }
    }
}

Catatan

Apa itu Album> Daftar<?: Definisi ini menggunakan tipe Daftar<T>, di mana T membatasi jenis elemen mana dari Daftar ini berada, dalam hal ini Album (atau salah satu turunannya).

Kemampuan untuk merancang kelas dan metode yang menuguhkan spesifikasi satu atau beberapa jenis sampai kelas atau metode dideklarasikan dan dibuat oleh kode klien adalah fitur bahasa C# yang disebut Generik.

Daftar<T> setara dengan jenis ArrayList dan tersedia di namespace System.Collections.Generic . Salah satu manfaat menggunakan generik adalah bahwa karena jenis ditentukan, Anda tidak perlu mengurus operasi pemeriksaan jenis seperti mentransmisikan elemen ke dalam Album seperti yang akan Anda lakukan dengan ArrayList.

Tugas 3 - Menggunakan ViewModel Baru di StoreController

Dalam tugas ini, Anda akan memodifikasi metode tindakan Telusuri dan Detail StoreController untuk menggunakan StoreBrowseViewModel baru.

Tambahkan referensi ke folder Model di kelas StoreController . Untuk melakukan ini, perluas folder Pengontrol di Penjelajah Solusi dan buka kelas StoreController. Tambahkan kode berikut:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex6 UsingModelInController)
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.ViewModels;
using MvcMusicStore.Models;
```

Ganti metode tindakan Telusuri untuk menggunakan kelas StoreViewBrowseController. Anda akan membuat Genre dan dua objek Album baru dengan data dummy (di Lab Hands-on berikutnya, Anda akan menggunakan data nyata dari database). Untuk melakukan ini, ganti metode Telusuri dengan kode berikut:

(Cuplikan Kode - ASP.NET Dasar-Dasar MVC 4 - Ex6 BrowseMethod)

//
// GET: /Store/Browse?genre=Disco

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

    var albums = new List<Album>()
    {
        new Album() { Title = genre + " Album 1" },
        new Album() { Title = genre + " Album 2" }
    };

    var viewModel = new StoreBrowseViewModel()
    {
        Genre = genreModel,
        Albums = albums
    };

    return this.View(viewModel);
}

Ganti metode tindakan Detail untuk menggunakan kelas StoreViewBrowseController. Anda akan membuat objek Album baru untuk dikembalikan ke Tampilan. Untuk melakukan ini, ganti metode Detail dengan kode berikut:

(Cuplikan Kode - ASP.NET MVC 4 Fundamentals - Ex6 DetailsMethod)
```
//
// GET: /Store/Details/5

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

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

Tugas 4 - Menambahkan Templat Tampilan Telusur

Dalam tugas ini, Anda akan menambahkan Tampilan Telusuri untuk menampilkan Album yang ditemukan untuk Genre tertentu.

Sebelum membuat templat Tampilan baru, Anda harus membuat proyek sehingga Dialog Tambahkan Tampilan tahu tentang kelas ViewModel yang akan digunakan. Buat proyek dengan memilih item menu Build lalu Bangun MvcMusicStore.
Tambahkan Tampilan Telusuri. Untuk melakukan ini, klik kanan di metode tindakan Telusuri StoreController dan klik Tambahkan Tampilan.
Dalam kotak dialog Tambahkan Tampilan , verifikasi bahwa Nama Tampilan adalah Telusuri. Centang kotak centang Buat tampilan yang diketik dengan kuat dan pilih StoreBrowseViewModel dari menu dropdown kelas Model. Biarkan bidang lain dengan nilai defaultnya. Kemudian klik Tambahkan

Menambahkan Tampilan Telusuri

Ubah Browse.cshtml untuk menampilkan informasi Genre, mengakses objek StoreBrowseViewModel yang diteruskan ke templat tampilan. Untuk melakukan ini, ganti konten dengan yang berikut ini: (C#)

@model MvcMusicStore.ViewModels.StoreBrowseViewModel

@{
    ViewBag.Title = "Browse Albums";
}

<h2>Browsing Genre: @Model.Genre.Name</h2>

<ul>
    @foreach (var album in Model.Albums)
    {
        <li>@album.Title</li>
    }
</ul>

Tugas 5 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa metode Telusuri mengambil Album dari tindakan Telusuri metode.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL menjadi /Store/Browse? Genre=Disco untuk memverifikasi bahwa tindakan mengembalikan dua Album.

Menelusuri Album Disko Toko

Tugas 6 - Menampilkan informasi Tentang Album Tertentu

Dalam tugas ini, Anda akan menerapkan tampilan Simpan/Detail untuk menampilkan informasi tentang album tertentu. Di Lab Langsung ini, semua yang akan Anda tampilkan tentang album sudah terkandung dalam templat Tampilan . Jadi, alih-alih membuat kelas StoreDetailsViewModel, Anda akan menggunakan templat StoreBrowseViewModel saat ini yang meneruskan Album ke dalamnya.

Tutup browser jika diperlukan, untuk kembali ke jendela Visual Studio. Tambahkan tampilan Detail baru untuk metode tindakan Detail StoreController. Untuk melakukan ini, klik kanan metode Detail di kelas StoreController dan klik Tambahkan Tampilan.
Dalam dialog Tambahkan Tampilan, verifikasi bahwa Nama Tampilan adalah Detail. Centang kotak centang Buat tampilan yang ditik dengan kuat dan pilih Album dari menu drop-down kelas Model. Biarkan bidang lain dengan nilai defaultnya. Kemudian klik Tambahkan Ini akan membuat dan membuka file \Views\Store\Details.cshtml .

Menambahkan Tampilan Detail
Ubah file Details.cshtml untuk menampilkan informasi Album, mengakses objek Album yang diteruskan ke templat tampilan. Untuk melakukan ini, ganti konten dengan yang berikut ini: (C#)
```
@model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

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

Tugas 7 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa Tampilan Detail mengambil informasi Album dari metode tindakan Detail.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda . Ubah URL menjadi /Store/Details/5 untuk memverifikasi informasi album.

Detail Album Penjelajahan

Tugas 8 - Menambahkan Tautan Antar Halaman

Dalam tugas ini, Anda akan menambahkan tautan di Tampilan Toko untuk memiliki tautan di setiap Nama genre ke URL /Store/Browse yang sesuai. Dengan cara ini, ketika Anda mengklik Genre, misalnya Disko, itu akan menavigasi ke /Store/Browse?genre=Disco URL.

Tutup browser jika diperlukan, untuk kembali ke jendela Visual Studio. Perbarui halaman Indeks untuk menambahkan tautan ke halaman Telusuri . Untuk melakukan ini, di Penjelajah Solusi perluas folder Tampilan, lalu folder Simpan dan klik dua kali halaman Index.cshtml.
Tambahkan tautan ke tampilan Telusuri yang menunjukkan genre yang dipilih. Untuk melakukan ini, ganti kode yang disorot berikut dalam <tag li> : (C#)
```
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p> Select from @Model.NumberOfGenres genres</p>

<ul>
    @foreach (string genreName in Model.Genres) {
        <li>
            @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
        </li>
        }
</ul>
```
Catatan

pendekatan lain akan menautkan langsung ke halaman, dengan kode seperti berikut:

<a href="/Store/Browse?genre=@genreName">@genreName</a>

Meskipun pendekatan ini berfungsi, itu tergantung pada string yang dikodekan secara permanen. Jika nanti Anda mengganti nama Pengontrol, Anda harus mengubah instruksi ini secara manual. Alternatif yang lebih baik adalah menggunakan metode Pembantu HTML. ASP.NET MVC menyertakan metode HTML Helper yang tersedia untuk tugas tersebut. Metode pembantu Html.ActionLink() memudahkan untuk membuat HTML <tautan> , memastikan jalur URL dikodekan dengan benar URL.

Html.ActionLink memiliki beberapa kelebihan beban. Dalam latihan ini Anda akan menggunakan salah satu yang mengambil tiga parameter:
1. Teks tautan, yang akan menampilkan nama Genre
2. Nama tindakan pengontrol (Telusuri)
3. Nilai parameter rute, menentukan nama (Genre) dan nilai (Nama genre)

Tugas 9 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa setiap Genre ditampilkan dengan tautan ke URL /Store/Browse yang sesuai.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda. Ubah URL ke /Store untuk memverifikasi bahwa setiap Genre ditautkan ke URL /Store/Browse yang sesuai.

Menelusuri Genre dengan tautan ke halaman Telusuri

Tugas 10 - Menggunakan Koleksi ViewModel Dinamis untuk Meneruskan Nilai

Dalam tugas ini, Anda akan mempelajari metode sederhana dan kuat untuk meneruskan nilai antara Pengontrol dan Tampilan tanpa membuat perubahan apa pun dalam Model. ASP.NET MVC 4 menyediakan koleksi "ViewModel", yang dapat ditetapkan ke nilai dinamis apa pun dan diakses di dalam pengontrol dan tampilan juga.

Anda sekarang akan menggunakan koleksi dinamis ViewBag untuk meneruskan daftar "Genre berbintang" dari pengontrol ke tampilan. Tampilan Indeks Penyimpanan akan mengakses ViewModel dan menampilkan informasi.

Tutup browser jika diperlukan, untuk kembali ke jendela Visual Studio. Buka StoreController.cs dan ubah metode Indeks untuk membuat daftar genre berbintang ke dalam koleksi ViewModel :

public ActionResult Index()
{
    // Create list of genres
    var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };

    // Create your view model
    var viewModel = new StoreIndexViewModel
    {
        NumberOfGenres = genres.Count,
        Genres = genres
    };

    ViewBag.Starred = new List<string> { "Rock", "Jazz" };

    return this.View(viewModel);
}

Catatan

Anda juga dapat menggunakan sintaks ViewBag["Starred"] untuk mengakses properti.

Ikon bintang "starred.png" disertakan dalam folder Source\Assets\Images lab ini. Untuk menambahkannya ke aplikasi, seret kontennya dari jendela Windows Explorer ke Penjelajah Solusi di Visual Web Developer Express, seperti yang ditunjukkan di bawah ini:

Menambahkan gambar bintang ke solusi

Buka tampilan Store/Index.cshtml dan ubah konten. Anda akan membaca properti "berbintang" di koleksi ViewBag , dan bertanya apakah nama genre saat ini ada dalam daftar. Dalam hal ini Anda akan menampilkan ikon bintang langsung ke tautan genre. (C#)

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
     ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
     @foreach (string genreName in Model.Genres)
     {
          <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)

                @if (ViewBag.Starred.Contains(genreName))
                { 
                     <img src="../../Content/Images/starred.png" alt="Starred element" />
                }
          </li>
     }
</ul>
<br />
<h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>

Tugas 11 - Menjalankan Aplikasi

Dalam tugas ini, Anda akan menguji bahwa genre berbintang menampilkan ikon bintang.

Tekan F5 untuk menjalankan Aplikasi.
Proyek dimulai di halaman Beranda . Ubah URL ke /Store untuk memverifikasi bahwa setiap genre unggulan memiliki label yang menghormati:

Menelusuri Genre dengan elemen berbintang

Latihan 7: Putaran di sekitar templat baru ASP.NET MVC 4

Dalam latihan ini, Anda akan menjelajahi penyempurnaan dalam templat proyek ASP.NET MVC 4, melihat fitur yang paling relevan dari templat baru.

Tugas 1: Menjelajahi Templat Aplikasi Internet MVC 4 ASP.NET

Jika belum terbuka, mulai VS Express untuk Web
Pilih File | Baru | Perintah menu proyek. Dalam dialog Proyek Baru, pilih Visual C#|Templat web di pohon panel kiri, dan pilih Aplikasi Web ASP.NET MVC 4. Beri nama proyek MusicStore dan perbarui nama solusi ke Mulai, lalu pilih lokasi (atau biarkan default) dan klik OK.

Membuat Proyek MVC 4 ASP.NET baru
Dalam dialog Proyek MVC 4 ASP.NET Baru, pilih templat proyek Aplikasi Internet dan klik OK. Perhatikan bahwa Anda dapat memilih Razor atau ASPX sebagai mesin tampilan.

Membuat Aplikasi Internet MVC 4 ASP.NET baru

Catatan

Sintaks razor telah diperkenalkan dalam ASP.NET MVC 3. Tujuannya adalah untuk meminimalkan jumlah karakter dan penekanan kunci yang diperlukan dalam file, memungkinkan alur kerja pengodean yang cepat dan cairan. Razor memanfaatkan keterampilan bahasa C#/VB (atau lainnya) yang ada dan memberikan sintaks markup templat yang memungkinkan alur kerja konstruksi HTML yang mengagumkan.
Tekan F5 untuk menjalankan solusi dan melihat templat yang diperbarui. Anda dapat melihat fitur berikut:
1. Templat gaya modern
  
  Templat telah diperbarui, menyediakan gaya yang lebih terlihat modern.
  
  templat ASP.NET MVC 4 yang di-restyled
2. Penyajian Adaptif
  
  Lihat mengubah ukuran jendela browser dan perhatikan bagaimana tata letak halaman secara dinamis beradaptasi dengan ukuran jendela baru. Templat ini menggunakan teknik penyajian adaptif untuk dirender dengan benar di platform desktop dan seluler tanpa kustomisasi apa pun.
  
  ASP.NET templat proyek MVC 4 dalam ukuran browser yang berbeda
Tutup browser untuk menghentikan debugger dan kembali ke Visual Studio.
Sekarang Anda dapat menjelajahi solusi dan memeriksa beberapa fitur baru yang diperkenalkan oleh ASP.NET MVC 4 dalam templat proyek.

Templat Proyek Aplikasi Internet ASP.NET MVC 4
1. Markup HTML5
  
  Telusuri tampilan templat untuk mengetahui markup tema baru, misalnya buka tampilan About.cshtml di dalam folder Beranda .
  
  Templat baru, menggunakan markup Razor dan HTML5
2. Pustaka JavaScript disertakan
  1. jQuery: jQuery menyederhanakan traversing dokumen HTML, penanganan peristiwa, animasi, dan interaksi Ajax.
  2. ui jQuery: Pustaka ini menyediakan abstraksi untuk interaksi dan animasi tingkat rendah, efek lanjutan, dan widget yang dapat di temakan, yang dibangun di atas jQuery JavaScript Library.
    
    Catatan
    
    Anda dapat mempelajari tentang jQuery dan jQuery UI di [http://docs.jquery.com/](http://docs.jquery.com/).
  3. KnockoutJS: Templat default ASP.NET MVC 4 sekarang mencakup KnockoutJS, kerangka kerja JavaScript MVVM yang memungkinkan Anda membuat aplikasi web yang kaya dan sangat responsif menggunakan JavaScript dan HTML. Seperti di ASP.NET MVC 3, pustaka UI jQuery dan jQuery juga disertakan dalam ASP.NET MVC 4.
    
    Catatan
    
    Anda bisa mendapatkan informasi selengkapnya tentang pustaka KnockOutJS di tautan ini: http://learn.knockoutjs.com/.
  4. Modernizr: Pustaka ini berjalan secara otomatis, membuat situs Anda kompatibel dengan browser lama saat menggunakan teknologi HTML5 dan CSS3.
    
    Catatan
    
    Anda bisa mendapatkan informasi selengkapnya tentang pustaka Modernizr di tautan ini: http://www.modernizr.com/.
3. SimpleMembership termasuk dalam solusi
  
  SimpleMembership telah dirancang sebagai pengganti sistem penyedia Peran dan Keanggotaan ASP.NET sebelumnya. Ini memiliki banyak fitur baru yang memudahkan pengembang untuk mengamankan halaman web dengan cara yang lebih fleksibel.
  
  Templat Internet sudah menyiapkan beberapa hal untuk mengintegrasikan SimpleMembership, misalnya, AccountController disiapkan untuk menggunakan OAuthWebSecurity (untuk pendaftaran akun OAuth, login, manajemen, dll.) dan Keamanan Web.
  
  SimpleMembership Disertakan dalam solusi
  
  Catatan
  
  Temukan informasi selengkapnya tentang OAuthWebSecurity di MSDN.

Catatan

Selain itu, Anda dapat menyebarkan aplikasi ini ke Windows Azure Web Sites setelah Lampiran B: Menerbitkan aplikasi MVC 4 ASP.NET menggunakan Web Deploy.

Ringkasan

Dengan menyelesaikan Lab Langsung ini, Anda telah mempelajari dasar-dasar ASP.NET MVC:

Elemen inti aplikasi MVC dan bagaimana mereka berinteraksi
Cara membuat Aplikasi MVC ASP.NET
Cara menambahkan dan mengonfigurasi Pengontrol untuk menangani parameter yang diteruskan melalui URL dan querystring
Cara menambahkan halaman master tata letak untuk menyiapkan templat untuk konten HTML umum, Lembar Gaya untuk meningkatkan tampilan dan nuansa dan templat Tampilan untuk menampilkan konten HTML
Cara menggunakan pola ViewModel untuk meneruskan properti ke templat Tampilan untuk menampilkan informasi dinamis
Cara menggunakan parameter yang diteruskan ke Pengontrol di templat Tampilan
Cara menambahkan tautan ke halaman di dalam aplikasi MVC ASP.NET
Cara menambahkan dan menggunakan properti dinamis dalam Tampilan
Penyempurnaan dalam templat proyek MVC 4 ASP.NET

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: Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy

Lampiran ini akan menunjukkan kepada Anda cara membuat situs web baru dari Portal Manajemen Windows Azure dan menerbitkan aplikasi yang Anda peroleh dengan mengikuti lab, memanfaatkan fitur penerbitan Web Deploy yang disediakan oleh Windows Azure.

Tugas 1 - Membuat Situs Web Baru dari Portal Windows Azure

Buka Portal Manajemen Windows Azure dan masuk menggunakan kredensial Microsoft yang terkait dengan langganan Anda.

Catatan

Dengan Windows Azure, Anda dapat menghosting 10 ASP.NET Situs Web secara gratis lalu menskalakan seiring pertumbuhan lalu lintas Anda. Anda dapat mendaftar di sini.

Masuk ke Portal Manajemen Windows Azure
Klik Baru pada bilah perintah.

Membuat Situs Web baru
Klik Situs Web Komputasi. | Lalu pilih opsi Buat Cepat. Sediakan URL yang tersedia untuk situs web baru dan klik Buat Situs Web.

Catatan

Situs Web Windows Azure adalah host untuk aplikasi web yang berjalan di cloud yang dapat Anda kontrol dan kelola. Opsi Buat Cepat memungkinkan Anda menyebarkan aplikasi web yang telah selesai ke Situs Web Windows Azure dari luar portal. Ini tidak termasuk langkah-langkah untuk menyiapkan database.

Membuat Situs Web baru menggunakan Buat Cepat
Tunggu hingga Situs Web baru dibuat.
Setelah Situs Web dibuat, klik tautan di bawah kolom URL . Periksa apakah Situs Web baru berfungsi.

Menelusuri ke situs web baru

Situs web berjalan
Kembali ke portal dan klik nama situs web di bawah kolom Nama untuk menampilkan halaman manajemen.

Membuka halaman manajemen Situs Web
Di halaman Dasbor , di bawah bagian sekilas , klik tautan Unduh profil terbitkan.

Catatan

Profil penerbitan berisi semua informasi yang diperlukan untuk menerbitkan aplikasi web ke situs web Windows Azure untuk setiap metode publikasi yang diaktifkan. Profil penerbitan berisi URL, kredensial pengguna, dan string database yang diperlukan untuk menyambungkan dan mengautentikasi terhadap setiap titik akhir tempat metode publikasi diaktifkan. Microsoft WebMatrix 2, Microsoft Visual Studio Express untuk Web dan Dukungan Microsoft Visual Studio 2012 membaca profil penerbitan untuk mengotomatiskan konfigurasi program ini untuk menerbitkan aplikasi web ke situs web Windows Azure.

Mengunduh profil penerbitan Situs Web
Unduh file profil publikasi ke lokasi yang diketahui. Selanjutnya dalam latihan ini Anda akan melihat cara menggunakan file ini untuk menerbitkan aplikasi web ke Windows Azure Web Sites dari Visual Studio.

Menyimpan file profil publikasi

Tugas 2 - Mengonfigurasi Server Database

Jika aplikasi Anda menggunakan database SQL Server, Anda harus membuat server SQL Database. Jika Anda ingin menyebarkan aplikasi sederhana yang tidak menggunakan SQL Server, Anda mungkin melewati tugas ini.

Anda akan memerlukan server SQL Database untuk menyimpan database aplikasi. Anda dapat melihat server SQL Database dari langganan Anda di portal Manajemen Windows Azure di Dasbor | | Server Server Sql Database. Jika Anda tidak memiliki server yang dibuat, Anda dapat membuatnya menggunakan tombol Tambahkan pada bilah perintah. Perhatikan nama server dan URL, nama masuk administrator dan kata sandi, karena Anda akan menggunakannya dalam tugas berikutnya. Jangan membuat database, karena akan dibuat di tahap selanjutnya.

Dasbor SQL Database Server
Dalam tugas berikutnya Anda akan menguji koneksi database dari Visual Studio, karena alasan itu Anda perlu menyertakan alamat IP lokal Anda dalam daftar Alamat IP yang Diizinkan di server. Untuk melakukannya, klik Konfigurasikan, pilih alamat IP dari Alamat IP Klien Saat Ini dan tempelkan pada kotak teks Alamat IP Mulai dan Alamat IP Akhir dan klik tombol .

Menambahkan Alamat IP Klien
Setelah Alamat IP Klien ditambahkan ke daftar alamat IP yang diizinkan, klik Simpan untuk mengonfirmasi perubahan.

Konfirmasi Perubahan

Tugas 3 - Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy

Kembali ke solusi MVC 4 ASP.NET. Di Penjelajah Solusi, klik kanan proyek situs web dan pilih Terbitkan.

Menerbitkan situs web
Impor profil penerbitan yang Anda simpan di tugas pertama.

Mengimpor profil penerbitan
Klik Validasi Koneksi. Setelah Validasi selesai, klik Berikutnya.

Catatan

Validasi selesai setelah Anda melihat tanda centang hijau muncul di samping tombol Validasi Koneksi.

Memvalidasi koneksi
Di halaman Pengaturan , di bawah bagian Database , klik tombol di samping kotak teks koneksi database Anda (yaitu DefaultConnection).

Konfigurasi penyebaran web
Konfigurasikan koneksi database sebagai berikut:
- Di nama Server ketik URL server SQL Database Anda menggunakan awalan tcp: .
- Di Nama pengguna ketik nama masuk administrator server Anda.
- Di Kata Sandi ketik kata sandi masuk administrator server Anda.
- Ketik nama database baru, misalnya: MVC4SampleDB.
  
  Mengonfigurasi string koneksi tujuan
Lalu klik OK. Ketika diminta untuk membuat database, klik Ya.

Membuat database
string koneksi yang akan Anda gunakan untuk menyambungkan ke SQL Database di Windows Azure ditampilkan dalam kotak teks Koneksi Default. Lalu, klik Berikutnya.

String koneksi menunjuk ke SQL Database
Di halaman Pratinjau , klik Terbitkan.

Menerbitkan aplikasi web
Setelah proses penerbitan selesai, browser default Anda akan membuka situs web yang diterbitkan.

Aplikasi yang diterbitkan ke Windows Azure

Lampiran C: 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 Dasar-Dasar MVC 4

Aplikasi Music Store

ASP.NET MVC 4 Essentials

Tujuan

Prasyarat

Siapkan

Latihan

Latihan 1: Membuat MusicStore ASP.NET Proyek Aplikasi Web MVC

Tugas 1 - Membuat Proyek Aplikasi Web MVC ASP.NET

Tugas 2 - Menjelajahi Struktur Solusi

Tugas 3 - Menambahkan HomeController

Tugas 4 - Menjalankan Aplikasi

Latihan 2: Membuat Pengontrol

Tugas 1 - Menambahkan Kelas StoreController Baru

Tugas 2 - Memodifikasi Tindakan StoreController

Tugas 3 - Menjalankan Aplikasi

Latihan 3: Meneruskan parameter ke Pengontrol

Tugas 1 - Menambahkan Parameter Genre ke StoreController

Tugas 2 - Menjalankan Aplikasi

Tugas 3 - Menambahkan Parameter Id yang Disematkan di URL

Tugas 4 - Menjalankan Aplikasi

Latihan 4: Membuat Tampilan

Tugas 1 - Memodifikasi file _layout.cshtml

Tugas 2 - Menambahkan Lembar Gaya CSS

Tugas 3 - Menambahkan Templat Tampilan

Tugas 4: Verifikasi

Latihan 5: Membuat Model Tampilan

Tugas 1 - Membuat Kelas ViewModel

Tugas 2 - Menambahkan Properti ke kelas ViewModel

Tugas 3 - Memperbarui StoreController untuk menggunakan StoreIndexViewModel

Tugas 4 - Membuat Templat Tampilan yang Menggunakan StoreIndexViewModel

Tugas 5 - Memperbarui Templat Tampilan

Latihan 6: Menggunakan Parameter dalam Tampilan

Tugas 1 - Menambahkan Kelas Model

Tugas 2 - Menambahkan StoreBrowseViewModel

Tugas 3 - Menggunakan ViewModel Baru di StoreController

Tugas 4 - Menambahkan Templat Tampilan Telusur

Tugas 5 - Menjalankan Aplikasi

Tugas 6 - Menampilkan informasi Tentang Album Tertentu

Tugas 7 - Menjalankan Aplikasi

Tugas 8 - Menambahkan Tautan Antar Halaman

Tugas 9 - Menjalankan Aplikasi

Tugas 10 - Menggunakan Koleksi ViewModel Dinamis untuk Meneruskan Nilai

Tugas 11 - Menjalankan Aplikasi

Latihan 7: Putaran di sekitar templat baru ASP.NET MVC 4

Tugas 1: Menjelajahi Templat Aplikasi Internet MVC 4 ASP.NET

Ringkasan

Lampiran A: Menginstal Visual Studio Express 2012 untuk Web

Lampiran B: Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy

Tugas 1 - Membuat Situs Web Baru dari Portal Windows Azure

Tugas 2 - Mengonfigurasi Server Database

Tugas 3 - Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy

Lampiran C: Menggunakan Cuplikan Kode

Saran dan Komentar

Sumber Daya Tambahan: