ASP.NET Perancah dan Migrasi Kerangka Kerja Entitas MVC 4

Oleh Tim Perkemahan Web

Unduh Kit Pelatihan Kamp Web

Jika Anda terbiasa dengan metode pengontrol MVC 4 ASP.NET, atau telah menyelesaikan lab Hands-On "Helpers, Forms and Validation", Anda harus menyadari bahwa banyak logika untuk membuat, memperbarui, mencantumkan, dan menghapus entitas data apa pun diulang di seluruh aplikasi. Belum lagi, jika model Anda memiliki beberapa kelas untuk dimanipulasi, Anda mungkin akan menghabiskan banyak waktu untuk menulis metode tindakan POST dan GET untuk setiap operasi entitas, serta setiap tampilan.

Di lab ini Anda akan mempelajari cara menggunakan perancah ASP.NET MVC 4 untuk secara otomatis menghasilkan garis besar CRUD aplikasi Anda (Buat, Baca, Perbarui, dan Hapus). Mulai dari kelas model sederhana, dan, tanpa menulis satu baris kode pun, Anda akan membuat pengontrol yang akan berisi semua operasi CRUD, serta semua tampilan yang diperlukan. Setelah membangun dan menjalankan solusi sederhana, Anda akan membuat database aplikasi, bersama dengan logika MVC dan tampilan untuk manipulasi data.

Selain itu, Anda akan mempelajari betapa mudahnya menggunakan Migrasi Kerangka Kerja Entitas untuk melakukan pembaruan model di seluruh aplikasi Anda. Migrasi Kerangka Kerja Entitas akan memungkinkan Anda mengubah database setelah model berubah dengan langkah-langkah sederhana. Dengan mengingat semua ini, Anda akan dapat membangun dan memelihara aplikasi web secara lebih efisien, memanfaatkan fitur terbaru ASP.NET MVC 4.

Catatan

Semua kode sampel dan cuplikan disertakan dalam Kit Pelatihan Kamp Web, tersedia dari di Rilis Microsoft-Web/WebCampTrainingKit. Proyek khusus untuk lab ini tersedia di ASP.NET Perancah dan Migrasi Kerangka Kerja Entitas MVC 4.

Tujuan

Di Lab Langsung ini, Anda akan mempelajari cara:

• Gunakan perancah ASP.NET untuk operasi CRUD di pengontrol.
• Ubah model database menggunakan Migrasi Kerangka Kerja Entitas.

Prasyarat

Anda harus memiliki item berikut untuk menyelesaikan lab ini:

• Microsoft Visual Studio Express 2012 untuk Web atau superior (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 B: Menggunakan Cuplikan Kode".

---

Latihan

Latihan berikut membentuk Lab Langsung ini:

1. Menggunakan perancah MVC 4 ASP.NET dengan Migrasi Kerangka Kerja Entitas

Catatan

Latihan ini 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 bekerja melalui latihan.

Perkiraan waktu untuk menyelesaikan lab ini: 30 menit

Latihan 1: Menggunakan perancah MVC 4 ASP.NET dengan Migrasi Kerangka Kerja Entitas

ASP.NET perancah MVC menyediakan cara cepat untuk menghasilkan operasi CRUD dengan cara yang standar, menciptakan logika yang diperlukan yang memungkinkan aplikasi Anda berinteraksi dengan lapisan database.

Dalam latihan ini, Anda akan mempelajari cara menggunakan perancah ASP.NET MVC 4 dengan kode terlebih dahulu untuk membuat metode CRUD. Kemudian, Anda akan mempelajari cara memperbarui model Anda yang menerapkan perubahan dalam database dengan menggunakan Migrasi Kerangka Kerja Entitas.

Tugas 1- Membuat proyek MVC 4 ASP.NET baru menggunakan Perancah

1. Jika belum terbuka, mulai Visual Studio 2012.

2. Pilih File | Proyek Baru. Dalam dialog Proyek Baru, di bawah Visual C# | Bagian web , pilih ASP.NET Aplikasi Web MVC 4. Beri nama proyek ke MVC4andEFMigrations dan atur lokasi ke folder Source\Ex1-UsingMVC4ScaffoldingEFMigrations dari lab ini. Atur Nama solusi ke Mulai dan pastikan Buat direktori untuk solusi dicentang. Klik OK.

   

   Kotak Dialog Proyek ASP.NET MVC 4 Baru

3. Dalam kotak dialog Proyek New ASP.NET MVC 4 pilih templat Aplikasi Internet, dan pastikan razor adalah mesin Tampilan yang dipilih. Pilih OK untuk membuat proyek.

   

   Aplikasi Internet ASP.NET MVC 4 baru

4. Di Penjelajah Solusi, klik kanan Model dan pilih Tambahkan | Kelas untuk membuat orang kelas sederhana (POCO). Beri nama Orang dan klik OK.

5. Buka kelas Orang dan sisipkan properti berikut ini.

   (Cuplikan Kode - ASP.NET MVC 4 dan Migrasi Kerangka Kerja Entitas - Properti Orang Ex1)

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   
   namespace MVC4EF.Models
   {
       public class Person
       {
           public int PersonID { get; set; }
   
           public string FirstName { get; set; }
   
           public string LastName { get; set; }        
       }
   }
   

6. Klik Bangun | Bangun Solusi untuk menyimpan perubahan dan membangun proyek.

   

   Membangun Aplikasi

7. Di Penjelajah Solusi, klik kanan folder pengontrol dan pilih Tambahkan | Pengontrol.

8. Beri nama pengontrol PersonController dan selesaikan opsi Perancah dengan nilai berikut.

   1. Di daftar drop-down Templat, pilih pengontrol MVC dengan tindakan dan tampilan baca/tulis, menggunakan opsi Kerangka Kerja Entitas.

   2. Di daftar drop-down Kelas model, pilih kelas Orang.

   3. Di daftar kelas Konteks Data, pilih <Konteks data baru...>. Pilih nama apa pun dan klik OK.

   4. Di daftar drop-down Tampilan, pastikan Razor dipilih.

      

      Menambahkan pengontrol Orang dengan perancah

9. Klik Tambahkan untuk membuat pengontrol baru untuk Orang dengan perancah. Anda sekarang telah menghasilkan tindakan pengontrol serta tampilan.

   

   Setelah membuat pengontrol Orang dengan perancah

10. Buka kelas PersonController . Perhatikan bahwa metode tindakan CRUD lengkap telah dibuat secara otomatis.

Di dalam pengontrol Orang

Tugas 2- Menjalankan aplikasi

Pada titik ini, database belum dibuat. Dalam tugas ini, Anda akan menjalankan aplikasi untuk pertama kalinya dan menguji operasi CRUD. Database akan dibuat dengan cepat dengan Kode Pertama.

1. Tekan F5 untuk menjalankan aplikasi.

2. Di browser, tambahkan /Person ke URL untuk membuka halaman Orang.

   

   Aplikasi: eksekusi pertama

3. Anda sekarang akan menjelajahi halaman Orang dan menguji operasi CRUD.

   1. Klik Buat Baru untuk menambahkan orang baru. Masukkan nama depan dan nama belakang dan klik Buat.

      

      Menambahkan orang baru

   2. Dalam daftar orang tersebut, Anda bisa menghapus, mengedit, atau menambahkan item.

      

      Daftar orang

   3. Klik Detail untuk membuka detail orang tersebut.

      

      Detail orang

4. Tutup browser dan kembali ke Visual Studio. Perhatikan bahwa Anda telah membuat seluruh CRUD untuk entitas orang di seluruh aplikasi Anda - dari model ke tampilan - tanpa harus menulis satu baris kode!

Tugas 3- Memperbarui database menggunakan Migrasi Kerangka Kerja Entitas

Dalam tugas ini Anda akan memperbarui database menggunakan Migrasi Kerangka Kerja Entitas. Anda akan menemukan betapa mudahnya mengubah model dan mencerminkan perubahan dalam database Anda dengan menggunakan fitur Migrasi Kerangka Kerja Entitas.

1. Buka Konsol Manajer Paket. Pilih Alat>NuGet Package Manager>Packet Manager Console.

2. Di Package Manager Console, masukkan perintah berikut:

   PMC

   Enable-Migrations -ContextTypeName [ContextClassName]
   

   

   Mengaktifkan migrasi

   Perintah Enable-Migration membuat folder Migrasi , yang berisi skrip untuk menginisialisasi database.

   

   Folder migrasi

3. Buka file Configuration.cs di folder Migrasi. Temukan konstruktor kelas dan ubah nilai AutomaticMigrationsEnabled menjadi true.

   public Configuration()
   {
       AutomaticMigrationsEnabled = true;
   }
   

4. Buka kelas Orang dan tambahkan atribut untuk nama tengah orang tersebut. Dengan atribut baru ini, Anda mengubah model.

   public class Person
   {
       public int PersonID { get; set; }
       public string FirstName { get; set; }
       public string LastName { get; set; }
       public string MiddleName { get; set; }
   }
   

5. Pilih Build | Bangun Solusi pada menu untuk membangun aplikasi.

   

   Membangun aplikasi

6. Di Package Manager Console, masukkan perintah berikut:

   PMC

   Add-Migration AddMiddleName
   

   Perintah ini akan mencari perubahan dalam objek data, lalu, perintah tersebut akan menambahkan perintah yang diperlukan untuk mengubah database yang sesuai.

   

   Menambahkan nama tengah

7. (Opsional) Anda dapat menjalankan perintah berikut untuk menghasilkan skrip SQL dengan pembaruan diferensial. Ini akan memungkinkan Anda memperbarui database secara manual (Dalam hal ini tidak diperlukan), atau menerapkan perubahan dalam database lain:

   PMC

   Update-Database -Script -SourceMigration:
   
   $InitialDatabase
   

   

   Membuat skrip SQL

   

   Pembaruan Skrip SQL

8. Di Konsol Manajer Paket, masukkan perintah berikut untuk memperbarui database:

   PMC

   Update-Database -Verbose
   

   

   Memperbarui Database

   Ini akan menambahkan kolom MiddleName di tabel Orang agar sesuai dengan definisi kelas Orang saat ini.

9. Setelah database diperbarui, klik kanan folder Pengontrol dan pilih Tambahkan | Pengontrol untuk menambahkan pengontrol Orang lagi (Selesaikan dengan nilai yang sama). Ini akan memperbarui metode dan tampilan yang ada yang menambahkan atribut baru.

   

   Memperbarui pengontrol

10. Klik Tambahkan. Kemudian, pilih nilai Timpa PersonController.cs dan Timpa tampilan terkait dan klik OK.

Memperbarui pengontrol

Task4- Menjalankan aplikasi

1. Tekan F5 untuk menjalankan aplikasi.

2. Buka /Person. Perhatikan bahwa data dipertahankan, saat kolom nama tengah ditambahkan.

   

   Nama Tengah ditambahkan

3. Jika Anda mengklik Edit, Anda akan dapat menambahkan nama tengah ke orang saat ini.

   

---

Ringkasan

Di lab Hands-On ini, Anda telah mempelajari langkah-langkah sederhana untuk membuat operasi CRUD dengan perancah ASP.NET MVC 4 menggunakan kelas model apa pun. Kemudian, Anda telah mempelajari cara melakukan pembaruan menyeluruh di aplikasi Anda -dari database ke tampilan- dengan menggunakan Migrasi Kerangka Kerja Entitas.

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.

1. Buka https://learn.microsoft.com/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".

2. Klik Instal Sekarang. Jika Anda tidak memiliki Penginstal Platform Web, Anda akan diarahkan untuk mengunduh dan menginstalnya terlebih dahulu.

3. Setelah Penginstal Platform Web terbuka, klik Instal untuk memulai penyiapan.

   

   Menginstal Visual Studio Express

4. Baca semua lisensi dan ketentuan produk dan klik Saya Terima untuk melanjutkan.

   

   Menerima persyaratan lisensi

5. Tunggu hingga proses pengunduhan dan penginstalan selesai.

   

   Kemajuan penginstalan

6. Setelah penginstalan selesai, klik Selesai.

   

   Penginstalan selesai

7. Klik Keluar untuk menutup Penginstal Platform Web.

8. 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: 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

Untuk menambahkan cuplikan kode menggunakan keyboard (hanya C#)

1. Tempatkan kursor tempat Anda ingin menyisipkan kode.
2. Mulai ketik nama cuplikan (tanpa spasi atau tanda hubung).
3. Tonton saat IntelliSense menampilkan nama cuplikan yang cocok.
4. Pilih cuplikan yang benar (atau terus ketik hingga seluruh nama cuplikan dipilih).
5. Tekan tombol Tab dua kali untuk menyisipkan cuplikan di lokasi kursor.

Mulai ketik nama cuplikan

Tekan Tab untuk memilih cuplikan yang disorot

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.

1. Pilih Sisipkan Cuplikan diikuti dengan Cuplikan Kode Saya.
2. Pilih cuplikan yang relevan dari daftar, dengan mengkliknya.

Klik kanan tempat Anda ingin menyisipkan cuplikan kode dan pilih Sisipkan Cuplikan

Pilih cuplikan yang relevan dari daftar, dengan mengkliknya