Yang Baru di ASP.NET MVC 4

Oleh Tim Perkemahan Web

Unduh Kit Pelatihan Kamp Web

ASP.NET MVC 4 adalah kerangka kerja untuk membangun aplikasi web berbasis standar yang dapat diskalakan menggunakan pola desain yang mapan dan kekuatan ASP.NET dan kerangka kerja .NET. Kerangka kerja versi baru dan keempat ini berfokus untuk membuat pengembangan aplikasi web seluler lebih mudah.

Untuk memulainya, saat Anda membuat proyek ASP.NET MVC 4 baru, sekarang ada templat proyek aplikasi seluler yang dapat Anda gunakan untuk membangun aplikasi mandiri khusus untuk perangkat seluler. Selain itu, ASP.NET MVC 4 terintegrasi dengan jQuery Mobile melalui paket jQuery.Mobile.MVC NuGet. jQuery Mobile adalah kerangka kerja berbasis HTML5 untuk mengembangkan aplikasi web yang kompatibel dengan semua platform perangkat seluler populer, termasuk Windows Phone, iPhone, Android dan sebagainya. Namun, jika Anda memerlukan spesialisasi, ASP.NET MVC 4 juga memungkinkan Anda menyajikan tampilan yang berbeda untuk perangkat yang berbeda dan menyediakan pengoptimalan khusus perangkat.

Di lab langsung ini, Anda akan mulai dengan templat proyek "Aplikasi Internet" MVC 4 ASP.NET untuk membuat aplikasi Galeri Foto. Anda akan secara progresif meningkatkan aplikasi menggunakan jQuery Mobile dan ASP.NET fitur baru MVC 4 untuk membuatnya kompatibel dengan perangkat seluler dan browser web desktop yang berbeda. Anda juga akan mempelajari tentang resep kode baru untuk pembuatan kode dan bagaimana ASP.NET MVC 4 memudahkan Anda menulis metode tindakan asinkron dengan mendukung jenis pengembalian Task<ActionResult> .

Catatan

Semua kode sampel dan cuplikan disertakan dalam Kit Pelatihan Kamp Web, tersedia di Rilis Microsoft-Web/WebCampTrainingKit. Proyek khusus untuk lab ini tersedia di Apa yang Baru dalam Formulir Web di ASP.NET 4.5.

Tujuan

Di lab langsung ini, Anda akan mempelajari cara:

• Manfaatkan penyempurnaan templat proyek MVC ASP.NET-termasuk templat proyek aplikasi seluler baru
• Gunakan atribut viewport HTML5 dan kueri media CSS untuk meningkatkan tampilan di perangkat seluler
• Gunakan jQuery Mobile untuk penyempurnaan progresif dan untuk membangun UI web yang dioptimalkan sentuhan
• Membuat tampilan khusus seluler
• Gunakan komponen pengalih tampilan untuk beralih antara tampilan seluler dan desktop dalam aplikasi
• Membuat pengontrol asinkron menggunakan dukungan tugas

Prasyarat

Anda harus memiliki item berikut untuk menyelesaikan lab ini:

• Microsoft Visual Studio Express 2012 untuk Web atau unggul (baca Lampiran B untuk petunjuk tentang cara menginstalnya).
• ASP.NET MVC 4 (termasuk dalam penginstalan Microsoft Visual Studio 2012)
• Windows Phone Emulator (termasuk dalam Windows Phone 7.1.1 SDK)
• Opsional - WebMatrix 2 dengan ekstensi Electric Plum iPhone Simulator (hanya untuk Latihan 3 yang digunakan untuk menelusuri aplikasi web dengan simulator iPhone)

Siapkan

Di seluruh dokumen lab, Anda akan diinstruksikan untuk menyisipkan blok kode. Demi kenyamanan Anda, sebagian besar kode tersebut disediakan sebagai Cuplikan Visual Studio Code, yang dapat Anda gunakan dari dalam Visual Studio untuk menghindari harus menambahkannya secara manual.

Untuk menginstal cuplikan kode:

1. Buka jendela Windows Explorer dan telusuri folder Source\Setup lab.
2. Klik dua kali file Setup.cmd di folder ini untuk menginstal cuplikan kode Visual Studio.

Jika Anda tidak terbiasa dengan Cuplikan Visual Studio Code, dan ingin mempelajari cara menggunakannya, Anda dapat merujuk ke lampiran dari dokumen ini "Lampiran A: Menggunakan Cuplikan Kode".

Latihan

Lab langsung ini mencakup latihan berikut:

1. Templat Proyek MVC 4 ASP.NET baru
2. Membuat Aplikasi Web Galeri Foto
3. Menambahkan Dukungan untuk Perangkat Seluler
4. Menggunakan Pengontrol Asinkron

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: Templat Proyek ASP.NET MVC 4 Baru

Dalam latihan ini, Anda akan menjelajahi penyempurnaan dalam templat Proyek MVC 4 ASP.NET. Selain templat Aplikasi Internet, sudah ada di MVC 3, versi ini sekarang menyertakan templat terpisah untuk aplikasi Seluler. Pertama, Anda akan melihat beberapa fitur yang relevan dari masing-masing templat. Kemudian, Anda akan bekerja merender halaman Anda dengan benar di berbagai platform dengan menggunakan pendekatan yang tepat.

Tugas 1 - Menjelajahi Templat Aplikasi Internet

1. Membuka Visual Studio.

2. Pilih File | Baru | Perintah menu proyek. Dalam dialog Proyek Baru, pilih Visual C# | Templat web di pohon panel kiri, dan pilih ASP.NET Aplikasi Web MVC 4. Beri nama proyek PhotoGallery, pilih lokasi (atau biarkan default) dan klik OK.

   Catatan

   Anda nantinya akan menyesuaikan solusi PhotoGallery ASP.NET MVC 4 yang sekarang Anda buat.

   

   Membuat proyek baru

3. Dalam dialog Proyek MVC 4 ASP.NET Baru, pilih templat proyek Aplikasi Internet dan klik OK. Pastikan Anda telah memilih Razor 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.

4. Tekan F5 untuk menjalankan solusi dan melihat templat yang diperbarui. Anda dapat melihat fitur berikut:

   Templat gaya modern

   Templat telah diperbarui, menyediakan gaya yang lebih terlihat modern.

   

   templat ASP.NET MVC 4 yang di-restyled

   

   Halaman Kontak Baru

   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

   UI yang lebih kaya dengan JavaScript

   Peningkatan lain untuk templat proyek default adalah penggunaan JavaScript untuk menyediakan JavaScript yang lebih interaktif. Tautan Masuk dan Daftar yang digunakan dalam templat mencontohkan cara menggunakan Validasi jQuery untuk memvalidasi bidang input dari sisi klien.

   

   Validasi jQuery

   Catatan

   Perhatikan dua bagian masuk, di bagian pertama Anda dapat masuk menggunakan akun terdaftar dari situs dan di bagian kedua Anda dapat masuk menggunakan layanan autentikasi lain seperti google (dinonaktifkan secara default).

5. Tutup browser untuk menghentikan debugger dan kembali ke Visual Studio.

6. Buka file AuthConfig.cs terletak di bawah folder App_Start.

7. Hapus komentar dari baris terakhir untuk mendaftarkan klien Google untuk autentikasi OAuth .

   public static class AuthConfig
   {
       public static void RegisterAuth()
       {
           // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
           // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166
   
           //OAuthWebSecurity.RegisterMicrosoftClient(
           //    clientId: "",
           //    clientSecret: "");
   
           //OAuthWebSecurity.RegisterTwitterClient(
           //    consumerKey: "",
           //    consumerSecret: "");
   
           //OAuthWebSecurity.RegisterFacebookClient(
           //    appId: "",
           //    appSecret: "");
   
           OAuthWebSecurity.RegisterGoogleClient();
       }
   }
   

   Catatan

   Perhatikan bahwa Anda dapat dengan mudah mengaktifkan autentikasi menggunakan layanan OpenID atau OAuth seperti Facebook, Twitter, Microsoft, dll.

8. Tekan F5 untuk menjalankan solusi dan menavigasi ke halaman masuk.

9. Pilih layanan Google untuk masuk.

   

   Memilih layanan masuk

10. Masuk menggunakan akun Google Anda.

11. Izinkan situs (localhost) untuk mengambil informasi dari akun Google.

12. Terakhir, Anda harus mendaftar di situs untuk mengaitkan akun Google.

Mengaitkan akun Google Anda 13. Tutup browser untuk menghentikan debugger dan kembali ke Visual Studio. 14. Sekarang jelajahi solusi untuk memeriksa beberapa fitur baru lainnya yang diperkenalkan oleh ASP.NET MVC 4 dalam templat proyek.

Templat Proyek Aplikasi Internet ASP.NET MVC 4

• HTML 5 Markup

  Telusuri tampilan templat untuk mengetahui markup tema baru.

  

  Templat baru, menggunakan markup Razor dan HTML5 (About.cshtml).

• Pustaka JavaScript yang diperbarui

  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 MVC3, 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/](http://learn.knockoutjs.com/). Selain itu, Anda dapat mempelajari tentang jQuery dan jQuery UI di [http://docs.jquery.com/](http://docs.jquery.com/).

Tugas 2 - Menjelajahi Templat Aplikasi Seluler

ASP.NET MVC 4 memfasilitasi pengembangan situs web untuk browser seluler dan tablet. Templat ini memiliki struktur aplikasi yang sama dengan templat Aplikasi Internet (perhatikan bahwa kode pengontrol praktis identik), tetapi gayanya dimodifikasi untuk dirender dengan benar di perangkat seluler berbasis sentuhan.

1. 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 PhotoGallery.Mobile, pilih lokasi (atau biarkan default), pilih "Tambahkan ke solusi" dan klik OK.

2. Dalam dialog Proyek New ASP.NET MVC 4, pilih templat proyek Aplikasi Seluler dan klik OK. Pastikan Anda telah memilih Razor sebagai mesin tampilan.

   

   Membuat Aplikasi Seluler ASP.NET MVC 4 baru

3. Sekarang Anda dapat menjelajahi solusi dan memeriksa beberapa fitur baru yang diperkenalkan oleh templat solusi ASP.NET MVC 4 untuk seluler:

   • Pustaka Seluler jQuery

     Templat proyek Aplikasi Seluler mencakup pustaka jQuery Mobile, yang merupakan pustaka sumber terbuka untuk kompatibilitas browser seluler. jQuery Mobile menerapkan peningkatan progresif untuk browser seluler yang mendukung CSS dan JavaScript. Peningkatan progresif memungkinkan semua browser menampilkan konten dasar halaman web, sementara hanya memungkinkan browser yang paling kuat untuk menampilkan konten kaya. File JavaScript dan CSS, yang disertakan dalam gaya jQuery Mobile, membantu browser seluler agar sesuai dengan konten di layar tanpa membuat perubahan apa pun dalam markup halaman.

     

     pustaka seluler jQuery yang disertakan dalam templat

   • Markup berbasis HTML5

     

     Templat aplikasi seluler menggunakan markup HTML5, (Login.cshtml dan index.cshtml)

4. Tekan F5 untuk menjalankan solusi.

5. Buka Emulator Windows Phone 7.

6. Di layar mulai telepon, buka Internet Explorer. Lihat URL tempat aplikasi desktop dimulai dan telusuri ke URL tersebut dari ponsel (misalnya http://localhost:[PortNumber]/).

7. Sekarang Anda dapat memasukkan halaman masuk atau memeriksa halaman tentang. Perhatikan bahwa gaya situs web didasarkan pada aplikasi Metro baru untuk seluler. Templat proyek ASP.NET MVC 4 ditampilkan dengan benar di perangkat seluler, memastikan semua elemen halaman terlihat dan diaktifkan. Perhatikan bahwa tautan di header cukup besar untuk diklik atau diketuk.

   

   Halaman templat proyek di perangkat seluler

8. Templat baru juga menggunakan tag Meta Viewport. Sebagian besar browser seluler menentukan lebar untuk jendela browser virtual atau "viewport", yang lebih besar dari lebar aktual perangkat seluler. Ini memungkinkan browser seluler untuk menampilkan seluruh halaman web di dalam tampilan virtual. Tag meta Viewport memungkinkan pengembang web untuk mengatur lebar, tinggi, dan skala area browser di perangkat seluler . Templat ASP.NET MVC 4 untuk Aplikasi Seluler mengatur viewport ke lebar perangkat ("width=device-width") dalam templat tata letak (Views\Shared_Layout.cshtml), sehingga semua halaman akan mengatur viewport ke lebar layar perangkat. Perhatikan bahwa tag meta Viewport tidak akan mengubah tampilan browser default.

9. Buka _Layout.cshtml, yang terletak di Tampilan | Folder bersama , dan komentari tag meta Viewport. Jalankan aplikasi, jika belum dibuka, dan lihat perbedaannya.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

Situs setelah mengomentari tag meta viewport 10. Di Visual Studio, tekan SHIFT + F5 untuk berhenti men-debug aplikasi. 11. Batalkan komentar tag meta viewport.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

Tugas 3 - Menggunakan Penyajian Adaptif

Dalam tugas ini, Anda akan mempelajari metode lain untuk merender halaman Web dengan benar di perangkat seluler dan browser Web secara bersamaan tanpa kustomisasi apa pun. Anda telah menggunakan tag meta Viewport dengan tujuan yang sama. Sekarang Anda akan memenuhi metode kuat lainnya: penyajian adaptif.

Penyajian adaptif adalah teknik yang menggunakan kueri media CSS3 untuk menyesuaikan gaya yang diterapkan ke halaman. Kueri media menentukan kondisi di dalam lembar gaya, mengelompokkan gaya CSS dalam kondisi tertentu. Hanya ketika kondisinya benar, gaya diterapkan ke objek yang dideklarasikan.

Fleksibilitas yang disediakan oleh teknik penyajian adaptif memungkinkan penyesuaian apa pun untuk menampilkan situs di perangkat yang berbeda. Anda dapat menentukan gaya sebanyak yang Anda inginkan pada satu lembar gaya tanpa menulis kode logika untuk memilih gaya. Oleh karena itu, ini adalah cara yang sangat rapi untuk menyesuaikan gaya halaman, karena mengurangi jumlah kode dan logika duplikat untuk tujuan penyajian. Di sisi lain, konsumsi bandwidth akan meningkat, karena ukuran file CSS Anda dapat tumbuh secara marginal.

Dengan menggunakan teknik penyajian adaptif, situs Anda akan ditampilkan dengan benar, terlepas dari browser. Namun, Anda harus mempertimbangkan apakah beban tambahan bandwidth menjadi perhatian.

Catatan

Format dasar kueri media adalah: @media [Cakupan: semua | genggam | cetak | proyeksi | layar] ([properti:nilai] dan ... [property:value])

Contoh kueri media: >@media semua dan (lebar maks: 1000px) dan (lebar min: 700px) {}: Untuk semua resolusi antara 700px dan 1000px.

@media layar dan (lebar min: 400px) dan (lebar maks: 700px) { ... }: Hanya untuk layar. Resolusi harus antara 400 dan 700px.

@media genggam dan (lebar min: 20em), layar dan (lebar min: 20em) { ... }: Untuk handheld (seluler dan perangkat) dan layar. Lebar minimum harus lebih besar dari 20em.

Anda dapat menemukan informasi lebih lanjut tentang ini di situs W3C.

Anda sekarang akan menjelajahi cara kerja penyajian adaptif, meningkatkan keterbacaan templat situs web default ASP.NET MVC 4.

1. Buka solusi PhotoGallery.sln yang telah Anda buat di Tugas 1 dan pilih proyek PhotoGallery. Tekan F5 untuk menjalankan solusi.

2. Mengubah ukuran lebar browser, mengatur jendela menjadi setengah atau kurang dari seperempat dari ukuran aslinya. Perhatikan apa yang terjadi dengan item di header: Beberapa elemen tidak akan muncul di area header yang terlihat.

3. Buka file Site.css dari penjelajah Solusi Visual Studio, yang terletak di folder proyek Konten . Tekan CTRL + F untuk membuka pencarian terintegrasi Visual Studio, dan tulis @media untuk menemukan kueri media CSS.

   Kondisi kueri media yang ditentukan dalam templat ini berfungsi dengan cara ini: Ketika ukuran jendela browser di bawah 850 px, aturan CSS yang diterapkan adalah yang ditentukan di dalam blok media ini.

   

   Menemukan kueri media

4. Ganti nilai atribut lebar maksimum yang ditetapkan dalam 850 px dengan 10px, untuk menonaktifkan penyajian adaptif, dan tekan CTRL + S untuk menyimpan perubahan. Kembali ke browser dan tekan CTRL + F5 untuk me-refresh halaman dengan perubahan yang telah Anda buat. Perhatikan perbedaan di kedua halaman saat menyesuaikan lebar jendela.

   @media gaya di sebelah kiri dan di sebelah kanan, gaya dihilangkan" title="Di sebelah kiri, halaman menerapkan gaya @media, di sebelah kanan, gaya dihilangkan" />

   Di sebelah kiri, halaman menerapkan @media gaya, di sebelah kanan, gaya dihilangkan

   Sekarang, mari kita lihat apa yang terjadi pada perangkat seluler:

   gaya @media, di sebelah kanan, gaya dihilangkan" title="Di sebelah kiri, halaman menerapkan gaya @media, di sebelah kanan, gaya dihilangkan" />

   Di sebelah kiri, halaman menerapkan @media gaya, di sebelah kanan, gaya dihilangkan

   Meskipun Anda akan melihat bahwa perubahan ketika halaman dirender di browser Web tidak terlalu signifikan, ketika menggunakan perangkat seluler, perbedaannya menjadi lebih jelas. Di sisi kiri gambar, kita dapat melihat bahwa gaya kustom meningkatkan keterbacaan.

   Penyajian adaptif dapat digunakan dalam lebih banyak skenario, sehingga lebih mudah untuk menerapkan gaya kondisi ke situs Web dan memecahkan masalah gaya umum dengan pendekatan yang rapi.

   Tag meta Viewport dan kueri media CSS tidak spesifik untuk ASP.NET MVC 4, sehingga Anda dapat memanfaatkan fitur-fitur ini di aplikasi web apa pun.

5. Di Visual Studio, tekan SHIFT + F5 untuk berhenti men-debug aplikasi.

Latihan 2: Membuat Aplikasi Web Galeri Foto

Dalam latihan ini, Anda akan mengerjakan aplikasi Galeri Foto untuk menampilkan foto. Anda akan mulai dengan templat proyek ASP.NET MVC 4, dan kemudian Anda akan menambahkan fitur untuk mengambil foto dari layanan dan menampilkannya di halaman beranda.

Dalam latihan berikut, Anda akan memperbarui solusi ini untuk meningkatkan cara tampilannya di perangkat seluler.

Tugas 1 - Membuat Layanan Foto Tiruan

Dalam tugas ini, Anda akan membuat tiruan layanan foto untuk mengambil konten yang akan ditampilkan di galeri. Untuk melakukan ini, Anda akan menambahkan pengontrol baru yang hanya akan mengembalikan file JSON dengan data setiap foto.

1. Buka Visual Studio jika belum dibuka.

2. Pilih File | Baru | Perintah menu proyek. Dalam dialog Proyek Baru, pilih Visual C# | Templat web di pohon panel kiri, dan pilih ASP.NET Aplikasi Web MVC 4. Beri nama proyek PhotoGallery, pilih lokasi (atau biarkan default) dan klik OK. Atau, Anda dapat terus bekerja dari solusi Aplikasi Internet ASP.NET MVC 4 yang ada dari Latihan 1 dan melewati langkah berikutnya.

3. Dalam kotak dialog Proyek MVC 4 ASP.NET baru, pilih templat proyek Aplikasi Internet dan klik OK. Pastikan Anda memilih Razor sebagai Mesin Tampilan.

4. Di Penjelajah Solusi, klik kanan folder App_Data proyek Anda, dan pilih Tambahkan | Item yang Ada. Telusuri ke folder Source\Assets\App_Data lab ini dan tambahkan file Photos.json .

5. Buat pengontrol baru dengan nama PhotoController. Untuk melakukan ini, klik kanan pada folder Pengontrol , buka Tambahkan dan pilih Pengontrol. Lengkapi nama pengontrol, biarkan templat Pengontrol MVC Kosong dan klik Tambahkan.

   

   Menambahkan PhotoController

6. Ganti metode Indeks dengan tindakan Galeri berikut, dan kembalikan konten dari file JSON yang baru saja Anda tambahkan ke proyek.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex02 - Galeri Tindakan)

   public class PhotoController : Controller
   {
      public ActionResult Gallery()
      {
         return this.File("~/App_Data/Photos.json", "application/json");
      }
   }
   

7. Tekan F5 untuk menjalankan solusi, lalu telusuri KE URL berikut untuk menguji layanan foto yang ditiru: http://localhost:[port]/photo/gallery (nilai [port] tergantung pada port saat ini tempat aplikasi diluncurkan). Permintaan ke URL ini harus mengambil konten file Photos.json .

   

   Menguji layanan foto yang ditidakan

Dalam implementasi nyata, Anda dapat menggunakan ASP.NET Web API untuk mengimplementasikan layanan Galeri Foto. API Web ASP.NET adalah kerangka kerja yang memudahkan untuk membangun layanan HTTP yang menjangkau berbagai klien, termasuk browser dan perangkat seluler. API Web ASP.NET adalah platform ideal untuk membangun aplikasi RESTful di .NET Framework.

Tugas 2 - Menampilkan Galeri Foto

Dalam tugas ini, Anda akan memperbarui halaman Beranda untuk menampilkan galeri foto dengan menggunakan layanan tiruan yang Anda buat di tugas pertama latihan ini. Anda akan menambahkan file model dan memperbarui tampilan galeri.

1. Di Visual Studio, tekan SHIFT + F5 untuk berhenti men-debug aplikasi.

2. Buat kelas Foto di folder Model. Untuk melakukan ini, klik kanan folder Model , pilih Tambahkan dan klik Kelas. Kemudian, atur nama ke Photo.cs dan klik Tambahkan.

3. Tambahkan anggota berikut ke kelas Foto .

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex02 - Model foto)

   public class Photo
   {
       public string Title { get; set; }
   
       public string FileName { get; set; }
   
       public string Description { get; set; }
   
       public DateTime UploadDate { get; set; }
   }
   

4. Buka file HomeController.cs dari folder Pengontrol.

5. Tambahkan pernyataan penggunaan berikut ini.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex02 - HomeController Usings)

   using System.Net.Http;
   using System.Web.Script.Serialization;
   using Newtonsoft.Json;
   using PhotoGallery.Models;
   

6. Perbarui tindakan Indeks untuk menggunakan HttpClient untuk mengambil data galeri, lalu gunakan JavaScriptSerializer untuk mendeserialisasikannya ke model tampilan.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex02 - Tindakan Indeks)

   public ActionResult Index()
   {
       var client = new HttpClient();
       var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
       var value = response.Content.ReadAsStringAsync().Result;
   
       var result = JsonConvert.DeserializeObject<List<Photo>>(value);
   
       return View(result);
   }
   

7. Buka file Index.cshtml yang terletak di bawah folder Views\Home dan ganti semua konten dengan kode berikut.

   Kode ini mengulangi semua foto yang diambil dari layanan dan menampilkannya ke dalam daftar yang tidak diurutkan.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex02 - Daftar Foto)

   @model List<PhotoGallery.Models.Photo>
   @{
       ViewBag.Title = "Photo Gallery";
   }
   
   <ul class="thumbnails">
       @foreach (var photo in Model)
       {
           <li class="item">
               <a href="@Url.Content("~/photos/" + photo.FileName)">
                   <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
               </a>
                   <span class="image-overlay">@photo.Title</span>
           </li>
       }
   </ul>
   

8. Di Penjelajah Solusi, klik kanan folder Konten proyek Anda, dan pilih Tambahkan | Item yang Ada. Telusuri ke folder Source\Assets\Content lab ini dan tambahkan file Site.css . Anda harus mengonfirmasi penggantinya. Jika file Site.css terbuka, Anda harus mengonfirmasi untuk memuat ulang file juga.

9. Buka File Explorer dan salin seluruh folder Foto yang terletak di bawah folder Source\Assets lab ini ke folder akar proyek Anda di Penjelajah Solusi.

10. Jalankan aplikasi lagi. Anda sekarang akan melihat halaman beranda yang menampilkan foto di galeri.

    

    Galeri Foto

11. Di Visual Studio, tekan SHIFT + F5 untuk berhenti men-debug aplikasi.

Latihan 3: Menambahkan dukungan untuk perangkat seluler

Salah satu pembaruan utama di ASP.NET MVC 4 adalah dukungan untuk pengembangan seluler. Dalam latihan ini, Anda akan menjelajahi fitur baru ASP.NET MVC 4 untuk aplikasi seluler dengan memperluas solusi PhotoGallery yang telah Anda buat di latihan sebelumnya.

Tugas 1 - Menginstal jQuery Mobile di Aplikasi MVC 4 ASP.NET

1. Buka folder Mulai solusi yang terletak di Source/Ex3-MobileSupport/Begin/. Jika tidak, Anda mungkin terus menggunakan solusi Akhir yang diperoleh dengan 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.

2. Buka Konsol Manajer Paket dengan mengklik> opsi menu Alat NuGet Package Manager>Package Manager Console.

   

   Membuka Konsol Manajer Paket NuGet

3. Di Konsol Manajer Paket, jalankan perintah berikut untuk menginstal paket jQuery.Mobile.MVC .

   jQuery Mobile adalah pustaka sumber terbuka untuk membangun antarmuka pengguna web yang dioptimalkan sentuhan. Paket jQuery.Mobile.MVC NuGet mencakup pembantu untuk menggunakan jQuery Mobile dengan aplikasi MVC 4 ASP.NET.

   Catatan

   Dengan menjalankan perintah berikut, Anda akan mengunduh pustaka jQuery.Mobile.MVC dari Nuget.

   PM

   Install-Package jQuery.Mobile.MVC
   

   Perintah ini menginstal jQuery Mobile dan beberapa file pembantu, termasuk yang berikut ini:

   • Views/Shared/_Layout.Mobile.cshtml: adalah tata letak berbasis jQuery Mobile yang dioptimalkan untuk layar yang lebih kecil. Ketika situs web menerima permintaan dari browser seluler, situs web akan mengganti tata letak asli (_Layout.cshtml) dengan yang satu ini.

   • Komponen pengalih tampilan: terdiri dari tampilan parsial Views/Shared/_ViewSwitcher.cshtml dan pengontrol ViewSwitcherController.cs . Komponen ini akan menampilkan tautan di browser seluler untuk memungkinkan pengguna beralih ke versi desktop halaman.
     

     Proyek Galeri Foto dengan dukungan seluler

4. Daftarkan bundel Mobile. Untuk melakukan ini, buka file Global.asax.cs dan tambahkan baris berikut.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex03 - Daftarkan Bundel Seluler)

   protected void Application_Start()
   {
        AreaRegistration.RegisterAllAreas();
   
        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
        AuthConfig.RegisterAuth();
   }
   

5. Jalankan aplikasi menggunakan browser web desktop.

6. Buka Emulator Windows Phone 7, yang terletak di Menu Mulai | Semua Program | Windows Phone SDK 7.1 | Emulator Windows Phone.

7. Di layar mulai telepon, buka Internet Explorer. Lihat URL tempat aplikasi dimulai dan telusuri KE URL tersebut dengan browser telepon (misalnya http://localhost:[PortNumber]/).

   Anda akan melihat bahwa aplikasi Anda akan terlihat berbeda di emulator Windows Phone, karena jQuery.Mobile.MVC telah membuat aset baru di proyek Anda yang menampilkan tampilan yang dioptimalkan untuk perangkat seluler.

   Perhatikan pesan di bagian atas telepon, memperlihatkan tautan yang beralih ke tampilan Desktop. Selain itu, tata letak _Layout.Mobile.cshtml yang dibuat oleh paket yang telah Anda instal termasuk tata letak yang berbeda dalam aplikasi.

   Catatan

   Sejauh ini, tidak ada tautan untuk kembali ke tampilan seluler. Ini akan disertakan dalam versi yang lebih baru.

   

   Tampilan seluler halaman Beranda Galeri Foto

8. Di Visual Studio, tekan SHIFT + F5 untuk berhenti men-debug aplikasi.

Tugas 2 - Membuat Tampilan Seluler

Dalam tugas ini, Anda akan membuat versi seluler tampilan indeks dengan konten yang disesuaikan untuk tampilan yang lebih baik di perangkat seluler.

1. Salin tampilan Views\Home\Index.cshtml dan tempelkan untuk membuat salinan, ganti nama file baru menjadi Index.Mobile.cshtml.

2. Buka tampilan Index.Mobile.cshtml yang baru dibuat dan ganti tag ul> yang <ada dengan kode ini. Dengan melakukan ini, Anda akan memperbarui <tag ul> dengan anotasi data jQuery Mobile untuk menggunakan tema seluler dari jQuery.

   <ul data-role="listview" data-inset="true" data-filter="true">
   

   Catatan

   Perhatikan bahwa:

   • Atribut peran data yang diatur ke listview akan merender daftar menggunakan gaya tampilan daftar.

   • Atribut inset data yang diatur ke true akan menampilkan daftar dengan batas dan margin yang dibulatkan.

   • Atribut filter data yang diatur ke true akan menghasilkan kotak pencarian.

   Anda dapat mempelajari selengkapnya tentang konvensi jQuery Mobile dalam dokumentasi proyek: [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)

3. Tekan CTRL + S untuk menyimpan perubahan.

4. Beralih ke Windows Phone Emulator dan refresh situs. Perhatikan tampilan dan nuansa baru daftar galeri, serta kotak pencarian baru yang terletak di bagian atas. Kemudian, ketik kata di kotak pencarian (misalnya, Tulips) untuk memulai pencarian di galeri foto.

   

   Galeri menggunakan gaya tampilan daftar dengan pemfilteran

   Untuk meringkas, Anda telah menggunakan resep View Mobilizer untuk membuat salinan tampilan Indeks dengan akhiran "seluler". Akhiran ini menunjukkan untuk ASP.NET MVC 4 bahwa setiap permintaan yang dihasilkan dari perangkat seluler akan menggunakan salinan indeks ini. Selain itu, Anda telah memperbarui versi seluler tampilan Indeks untuk menggunakan jQuery Mobile untuk meningkatkan tampilan dan nuansa situs di perangkat seluler.

5. Kembali ke Visual Studio dan buka Site.Mobile.css yang terletak di bawah folder Konten .

6. Perbaiki posisi judul foto untuk membuatnya ditampilkan di sisi kanan gambar. Untuk melakukan ini, tambahkan kode berikut ke file Site.Mobile.css .

   CSS

   .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
       padding: 0px !important;
   }
   
   li.item span.image-overlay
   {
       position:relative;
       left:100px;
       top:-40px;
       height:0px;
       display:block;
   }
   

7. Tekan CTRL + S untuk menyimpan perubahan.

8. Beralih kembali ke Emulator Windows Phone dan refresh situs. Perhatikan judul foto diposisikan dengan benar sekarang.

   

   Judul diposisikan di sisi kanan gambar

Tugas 3 - Tema Seluler jQuery

Setiap tata letak dan widget di jQuery Mobile dirancang di sekitar kerangka kerja CSS berorientasi objek baru yang memungkinkan untuk menerapkan tema desain visual terpadu lengkap ke situs dan aplikasi.

Tema default jQuery Mobile mencakup 5 swatch yang diberikan huruf (a, b, c, d, e) untuk referensi cepat.

Dalam tugas ini, Anda akan memperbarui tata letak seluler untuk menggunakan tema yang berbeda dari default.

1. Beralih kembali ke Visual Studio.

2. Buka file _Layout.Mobile.cshtml yang terletak di Views\Shared.

3. Temukan elemen div dengan peran data diatur ke "halaman" dan perbarui tema data ke "e".

   <div data-role="page" data-theme="e">
   

4. Tekan CTRL + S untuk menyimpan perubahan.

5. Refresh situs di Windows Phone Emulator dan perhatikan skema warna baru.

   

   Tata letak seluler dengan skema warna yang berbeda

Tugas 4 - Menggunakan Komponen Pengalih Tampilan dan Fitur Penimpaan Browser

Konvensi untuk halaman web yang dioptimalkan untuk seluler adalah menambahkan tautan yang teksnya seperti tampilan Desktop atau Mode situs penuh yang memungkinkan pengguna beralih ke versi desktop halaman. Paket jQuery.Mobile.MVC menyertakan komponen pengalih tampilan sampel untuk tujuan ini yang digunakan dalam tampilan _Layout.Mobile.cshtml.

Tautan untuk beralih ke Tampilan Desktop

Pengalih tampilan menggunakan fitur baru yang disebut Penimpaan Browser. Fitur ini memungkinkan aplikasi Anda memperlakukan permintaan seolah-olah mereka berasal dari browser yang berbeda (agen pengguna) daripada yang sebenarnya mereka berasal.

Dalam tugas ini, Anda akan menjelajahi implementasi sampel pengalih tampilan yang ditambahkan oleh jQuery.Mobile.MVC dan fitur penggantian browser baru di ASP.NET MVC 4.

1. Beralih kembali ke Visual Studio.

2. Buka tampilan _Layout.Mobile.cshtml yang terletak di bawah folder Views\Shared dan perhatikan komponen view-switcher yang dirujuk sebagai tampilan parsial.

   

   Tata letak seluler menggunakan komponen View-Switcher

3. Buka tampilan parsial _ViewSwitcher.cshtml.

   Tampilan parsial menggunakan metode baru ViewContext.HttpContext.GetOverriddenBrowser() untuk menentukan asal permintaan web dan menampilkan tautan yang sesuai untuk beralih ke tampilan Desktop atau Seluler.

   Metode GetOverriddenBrowser mengembalikan instans HttpBrowserCapabilitiesBase yang sesuai dengan agen pengguna yang saat ini ditetapkan untuk permintaan (aktual atau ditimpa). Anda dapat menggunakan nilai ini untuk mendapatkan properti seperti IsMobileDevice.

   

   Tampilan parsial ViewSwitcher

4. Buka kelas ViewSwitcherController.cs yang terletak di folder Pengontrol. Lihat bahwa tindakan SwitchView dipanggil oleh tautan di komponen ViewSwitcher, dan perhatikan metode HttpContext baru.

   • Metode HttpContext.ClearOverriddenBrowser() menghapus agen pengguna yang ditimpa untuk permintaan saat ini.

   • Metode HttpContext.SetOverriddenBrowser() mengambil alih nilai agen pengguna aktual permintaan menggunakan agen pengguna yang ditentukan.
     
     Pengontrol ViewSwitcher

     Penimpaan Browser adalah fitur inti dari ASP.NET MVC 4, yang juga tersedia bahkan jika Anda tidak menginstal paket jQuery.Mobile.MVC. Namun, fitur ini hanya memengaruhi tampilan, tata letak, dan tampilan parsial, dan tidak memengaruhi salah satu fitur yang bergantung pada objek Request.Browser.

Tugas 5 - Menambahkan Pengalih Tampilan di Tampilan Desktop

Dalam tugas ini, Anda akan memperbarui tata letak desktop untuk menyertakan pengalih tampilan. Ini akan memungkinkan pengguna seluler untuk kembali ke tampilan seluler saat menelusuri tampilan desktop.

1. Refresh situs di Emulator Windows Phone.

2. Klik tautan Tampilan desktop di bagian atas galeri. Perhatikan bahwa tidak ada pengalih tampilan dalam tampilan desktop untuk memungkinkan Anda kembali ke tampilan seluler.

3. Kembali ke Visual Studio dan buka tampilan _Layout.cshtml .

4. Temukan bagian masuk dan sisipkan panggilan untuk merender tampilan parsial _ViewSwitcher di bawah tampilan parsial _LogOnPartial . Kemudian, tekan CTRL + S untuk menyimpan perubahan.

   <div class="float-right">
       <section id="login">
           @Html.Partial("_LogOnPartial")
   
           @Html.Partial("_ViewSwitcher")
       </section>
       <nav>
   

5. Tekan CTRL + S untuk menyimpan perubahan.

6. Refresh halaman di Emulator Windows Phone dan klik dua kali layar untuk memperbesar tampilan. Perhatikan bahwa halaman beranda sekarang menampilkan tautan Tampilan seluler yang beralih dari tampilan seluler ke desktop.

   

   Tampilkan Pengalih yang dirender dalam tampilan desktop

7. Beralih ke tampilan Seluler lagi dan telusuri ke halaman Tentang (http://localhost[port]/Beranda/Tentang). Perhatikan bahwa, bahkan jika Anda belum membuat tampilan About.Mobile.cshtml, halaman Tentang ditampilkan menggunakan tata letak seluler (_Layout.Mobile.cshtml).

   

   Tentang halaman

8. Terakhir, buka situs di browser Web desktop. Perhatikan bahwa tidak ada pembaruan sebelumnya yang memengaruhi tampilan desktop.

   

   Tampilan desktop PhotoGallery

Tugas 6 - Membuat Mode Tampilan Baru

Fitur mode tampilan baru memungkinkan aplikasi memilih tampilan tergantung pada browser yang menghasilkan permintaan. Misalnya, jika browser desktop meminta halaman Beranda, aplikasi akan mengembalikan templat Views\Home\Index.cshtml . Kemudian, jika browser seluler meminta halaman Beranda, aplikasi akan mengembalikan templat Views\Home\Index.mobile.cshtml .

Dalam tugas ini, Anda akan membuat tata letak yang disesuaikan untuk perangkat iPhone, dan Anda harus mensimulasikan permintaan dari perangkat iPhone. Untuk melakukan ini, Anda dapat menggunakan emulator/simulator iPhone (seperti Electric Mobile Simulator) atau browser dengan add-on yang memodifikasi agen pengguna. Untuk petunjuk tentang cara mengatur string agen pengguna di browser Safari untuk meniru iPhone, lihat Cara membiarkan Safari berpura-pura IE di blog David Alison.

Perhatikan bahwa tugas ini bersifat opsional dan Anda dapat melanjutkan di seluruh lab tanpa mengeksekusinya.

1. Di Visual Studio, tekan SHIFT + F5 untuk berhenti men-debug aplikasi.

2. Buka Global.asax.cs dan tambahkan pernyataan penggunaan berikut.

   using System.Web.WebPages;
   

3. Tambahkan kode yang disorot berikut ke dalam metode Application_Start.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex03 - iPhone DisplayMode)

   protected void Application_Start()
   {
       // ...
   
       DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
       {
           ContextCondition = context =>
               context.Request.UserAgent != null &&
               context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
       });
   }
   

Anda telah mendaftarkan DefaultDisplayMode baru bernama "iPhone", dalam daftar statis DisplayModeProvider.Instance.Modes statis, yang akan dicocokkan dengan setiap permintaan masuk. Jika permintaan masuk berisi string "iPhone", ASP.NET MVC akan menemukan tampilan yang namanya berisi akhiran "iPhone". Parameter 0 menunjukkan seberapa spesifik mode baru; misalnya, tampilan ini lebih spesifik daripada aturan ".mobile" umum yang cocok dengan permintaan dari perangkat seluler.

Setelah kode ini berjalan, ketika browser iPhone menghasilkan permintaan, aplikasi Anda akan menggunakan tata letak Views\Shared\_Layout.iPhone.cshtml yang akan Anda buat di langkah berikutnya.

Catatan

Cara menguji permintaan untuk iPhone ini telah disederhanakan untuk tujuan demo dan mungkin tidak berfungsi seperti yang diharapkan untuk setiap string agen pengguna iPhone (misalnya pengujian peka huruf besar/kecil).

4. Buat salinan file _Layout.Mobile.cshtml di folder Views\Shared dan ganti nama salinan menjadi "_Layout.iPhone.cshtml".
5. Buka _Layout.iPhone.cshtml yang Anda buat di langkah sebelumnya.
6. Temukan elemen div dengan atribut peran data yang diatur ke halaman dan ubah atribut tema data menjadi "a".

<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

Sekarang Anda memiliki 3 tata letak di aplikasi MVC 4 ASP.NET Anda:

1. _Layout.cshtml: tata letak default yang digunakan untuk browser desktop.

2. _Layout.mobile.cshtml: tata letak default yang digunakan untuk perangkat seluler.

3. _Layout.iPhone.cshtml: tata letak khusus untuk perangkat iPhone, menggunakan skema warna yang berbeda untuk membedakan dari _Layout.mobile.cshtml.

4. Tekan F5 untuk menjalankan aplikasi dan telusuri situs di Emulator Windows Phone.

5. Buka simulator iPhone (lihat Lampiran C untuk petunjuk tentang cara menginstal dan mengonfigurasi simulator iPhone), dan telusuri ke situs juga. Perhatikan bahwa setiap ponsel menggunakan templat tertentu.

   

   Menggunakan tampilan yang berbeda untuk setiap perangkat seluler

Latihan 4: Menggunakan Pengontrol Asinkron

Microsoft .NET Framework 4.5 memperkenalkan fitur bahasa baru di C# dan Visual Basic untuk menyediakan fondasi baru untuk asinkron dalam pemrograman .NET. Fondasi baru ini membuat pemrograman asinkron mirip dengan - dan sesingkat - pemrograman sinkron. Anda sekarang dapat menulis metode tindakan asinkron di ASP.NET MVC 4 dengan menggunakan kelas AsyncController . Anda dapat menggunakan metode tindakan asinkron untuk permintaan terikat non-CPU yang berjalan lama. Ini menghindari pemblokiran server Web agar tidak melakukan pekerjaan saat permintaan sedang diproses. Kelas AsyncController biasanya digunakan untuk panggilan layanan Web yang berjalan lama.

Latihan ini menjelaskan dasar-dasar operasi asinkron dalam ASP.NET MVC 4. Jika Anda menginginkan penyelaman yang lebih dalam, Anda dapat melihat artikel berikut: [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

Tugas 1 - Menerapkan Pengontrol Asinkron

1. Buka folder Mulai solusi yang terletak di Sumber/Ex4-Async/Begin/. Jika tidak, Anda mungkin terus menggunakan solusi Akhir yang diperoleh dengan 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.

2. Buka kelas HomeController.cs dari folder Pengontrol.

3. Tambahkan pernyataan penggunaan berikut.

   using System.Threading.Tasks;
   

4. Perbarui kelas HomeController untuk diwarisi dari AsyncController. Pengontrol yang berasal dari AsyncController memungkinkan ASP.NET memproses permintaan asinkron, dan mereka masih dapat melayani metode tindakan sinkron.

   public class HomeController : AsyncController
   {
   

5. Tambahkan kata kunci asinkron ke metode Indeks dan buat kata kunci mengembalikan jenis Task<ActionResult>.

   public async Task<ActionResult> Index()
   {
       ...
   

   Catatan

   Kata kunci asinkron adalah salah satu kata kunci baru yang disediakan .NET Framework 4.5; ini memberi tahu pengompilasi bahwa metode ini berisi kode asinkron. Objek Tugas mewakili operasi asinkron yang mungkin selesai di beberapa titik di masa mendatang.

6. Ganti klien. Panggilan GetAsync() dengan versi asinkron lengkap menggunakan kata kunci tunggu seperti yang ditunjukkan di bawah ini.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex04 - GetAsync)

   public async Task<ActionResult> Index()
   {
       var client = new HttpClient();
       var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
       ...
   

   Catatan

   Di versi sebelumnya, Anda menggunakan properti Hasil dari objek Tugas untuk memblokir utas hingga hasilnya dikembalikan (versi sinkronisasi).

   Menambahkan kata kunci tunggu memberi tahu pengompilasi untuk secara asinkron menunggu tugas yang dikembalikan dari panggilan metode. Ini berarti bahwa sisa kode akan dijalankan sebagai panggilan balik hanya setelah metode yang ditunggu selesai. Hal lain yang perlu diperhatikan adalah Bahwa Anda tidak perlu mengubah blok try-catch Anda untuk membuat pekerjaan ini: pengecualian yang terjadi di latar belakang atau di latar depan masih akan tertangkap tanpa pekerjaan tambahan menggunakan handler yang disediakan oleh kerangka kerja.

7. Ubah kode untuk melanjutkan implementasi asinkron dengan mengganti baris dengan kode baru seperti yang ditunjukkan di bawah ini

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex04 - ReadAsStringAsync)

   public async Task<ActionResult> Index()
   {
       var client = new HttpClient();
       var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
       var value = await response.Content.ReadAsStringAsync();
       var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);
   
       return View(result);
   }
   

8. Jalankan aplikasi lagi. Anda tidak akan melihat perubahan besar, tetapi kode Anda tidak akan memblokir utas dari kumpulan utas yang membuat penggunaan sumber daya server yang lebih baik dan meningkatkan performa.

   Catatan

   Anda dapat mempelajari selengkapnya tentang fitur pemrograman asinkron baru di lab "Pemrograman Asinkron di .NET 4.5 dengan C# dan Visual Basic" yang disertakan dalam Visual Studio Training Kit.

Tugas 2 - Menangani Waktu Habis dengan Token Pembatalan

Metode tindakan asinkron yang mengembalikan instans Tugas juga dapat mendukung waktu habis. Dalam tugas ini, Anda akan memperbarui kode metode Indeks untuk menangani skenario waktu habis menggunakan token pembatalan.

1. Kembali ke Visual Studio dan tekan SHIFT + F5 untuk menghentikan penelusuran kesalahan.

2. Tambahkan pernyataan penggunaan berikut ke file HomeController.cs .

   using System.Threading;
   

3. Perbarui tindakan Indeks untuk menerima argumen CancellationToken .

   public async Task<ActionResult> Index(CancellationToken cancellationToken)
   {
       ...
   

4. Perbarui panggilan GetAsync untuk meneruskan token pembatalan.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex04 - SendAsync dengan CancellationToken)

   public async Task<ActionResult> Index(CancellationToken cancellationToken)
   {
       var client = new HttpClient();
       var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
       var value = await response.Content.ReadAsStringAsync();
       var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);
   
       return View(result);
   }
   

5. Hiasi metode Indeks dengan atribut AsyncTimeout yang diatur ke 500 milidetik dan atribut HandleError yang dikonfigurasi untuk menangani TaskCanceledException dengan mengalihkan ke tampilan TimedOut.

   (Cuplikan Kode - ASP.NET MVC 4 Lab - Ex04 - Atribut)

   [AsyncTimeout(500)]
   [HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
   public async Task<ActionResult> Index(CancellationToken cancellationToken)
   {
   

6. Buka kelas PhotoController dan perbarui metode Galeri untuk menunda eksekusi 1000 milidetik (1 detik) untuk mensimulasikan tugas yang berjalan lama.

   public ActionResult Gallery()
   {
       System.Threading.Thread.Sleep(1000);
   
       return this.File("~/App_Data/Photos.json", "application/json");
   }
   

7. Buka file Web.config dan aktifkan kesalahan kustom dengan menambahkan elemen berikut.

   <system.web>
     <customErrors mode="On"></customErrors>
     ...
   

8. Buat tampilan baru di Views\Shared bernama TimedOut dan gunakan tata letak default. Di Penjelajah Solusi, klik kanan folder Views\Shared dan pilih Tambahkan | Lihat.

   

   Menggunakan tampilan yang berbeda untuk setiap perangkat seluler

9. Perbarui konten tampilan TimedOut seperti yang ditunjukkan di bawah ini.

   @{
       ViewBag.Title = "TimedOut";
       Layout = "~/Views/Shared/_Layout.cshtml";
   }
   
   <h2>Timed Out!</h2>
   

10. Jalankan aplikasi dan navigasikan ke URL akar. Karena Anda telah menambahkan Thread.Sleep 1000 milidetik, Anda akan mendapatkan kesalahan waktu habis, yang dihasilkan oleh atribut AsyncTimeout dan menangkap oleh atribut HandleError.

    

    Pengecualian waktu habis ditangani

Catatan

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

Ringkasan

Di lab langsung ini, Anda telah mengamati beberapa fitur baru yang ada di ASP.NET MVC 4. Konsep berikut telah dibahas:

• Manfaatkan penyempurnaan templat proyek MVC ASP.NET-termasuk templat proyek aplikasi seluler baru
• Gunakan atribut viewport HTML5 dan kueri media CSS untuk meningkatkan tampilan di perangkat seluler
• Gunakan jQuery Mobile untuk penyempurnaan progresif dan untuk membangun UI web yang dioptimalkan sentuhan
• Membuat tampilan khusus seluler
• Gunakan komponen pengalih tampilan untuk beralih antara tampilan seluler dan desktop dalam aplikasi
• Membuat pengontrol asinkron menggunakan dukungan tugas

Lampiran A: 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.
2. Pilih Sisipkan Cuplikan diikuti dengan Cuplikan Kode Saya.
3. 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

Lampiran B: 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 [/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".

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 C: Menginstal WebMatrix 2 dan Simulator iPhone

Untuk menjalankan situs Anda di perangkat iPhone yang disimulasikan, Anda dapat menggunakan ekstensi WebMatrix "Simulator Seluler Listrik untuk iPhone". Selain itu, Anda dapat mengonfigurasi ekstensi yang sama untuk menjalankan simulator dari Visual Studio 2012.

Tugas 1 - Menginstal WebMatrix 2

1. 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 "WebMatrix 2".

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 WebMatrix 2

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.

Tugas 2 - Menginstal Ekstensi Simulator iPhone

1. Jalankan WebMatrix dan buka situs Web yang sudah ada atau buat situs web baru.

2. Klik tombol Jalankan dari pita Beranda dan pilih Tambahkan baru.

   

   Menambahkan ekstensi WebMatrix baru

3. Pilih Simulator iPhone dan klik Instal.

   

   Menelusuri ekstensi WebMatrix

4. Dalam detail paket, klik Instal untuk melanjutkan penginstalan ekstensi.

   

   Ekstensi Simulator iPhone

5. Baca dan terima ekstensi EULA.

   

   EULA ekstensi WebMatrix

6. Sekarang, Anda dapat menjalankan situs Web Anda dari WebMatrix menggunakan opsi Simulator iPhone.

   

   Jalankan menggunakan iPhone

Tugas 3 - Mengonfigurasi Visual Studio 2012 untuk menjalankan Simulator iPhone

1. Buka Visual Studio 2012 dan buka situs Web apa pun atau buat proyek baru.

2. Klik panah bawah dari tombol Jalankan dan pilih Telusuri dengan.

   

   Telusuri dengan

3. Dalam dialog "Telusuri Dengan", klik Tambahkan.

4. Dalam dialog "Tambahkan Program", gunakan nilai berikut:

   • Program: C:\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (perbarui jalur yang sesuai)

   • Argumen: "1"

   • Nama yang mudah diingat: Simulator iPhone

     

     Tambahkan program untuk dijelajahi

5. Klik OK dan tutup dialog.

6. Sekarang Anda dapat menjalankan aplikasi Web Anda di simulator iPhone dari Visual Studio 2012.

   

   Telusuri dengan Simulator iPhone

Lampiran D: 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

1. 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

2. Klik Baru pada bilah perintah.

   

   Membuat Situs Web baru

3. 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

4. Tunggu hingga Situs Web baru dibuat.

5. Setelah Situs Web dibuat, klik tautan di bawah kolom URL . Periksa apakah Situs Web baru berfungsi.

   

   Menelusuri ke situs web baru

   

   Situs web berjalan

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

   

   Membuka halaman manajemen Situs Web

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

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

1. 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

2. 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

3. 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

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

   

   Menerbitkan situs web

2. Impor profil penerbitan yang Anda simpan di tugas pertama.

   

   Mengimpor profil penerbitan

3. 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

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

   

   Konfigurasi penyebaran web

5. 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

6. Lalu klik OK. Ketika diminta untuk membuat database, klik Ya.

   

   Membuat database

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

8. Di halaman Pratinjau , klik Terbitkan.

   

   Menerbitkan aplikasi web

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

   

   Aplikasi yang diterbitkan ke Windows Azure