Menambahkan Tampilan (2012)

oleh Rick Anderson

Catatan

Versi terbaru dari tutorial ini tersedia di sini yang menggunakan ASP.NET MVC 5 dan Visual Studio 2013. Lebih aman, jauh lebih mudah untuk diikuti dan menunjukkan lebih banyak fitur.

Di bagian ini Anda akan memodifikasi HelloWorldController kelas untuk menggunakan file templat tampilan untuk merangkum proses pembuatan respons HTML ke klien dengan bersih.

Anda akan membuat file templat tampilan menggunakan mesin tampilan Razor yang diperkenalkan dengan ASP.NET MVC 3. Templat tampilan berbasis Razor memiliki ekstensi file .cshtml , dan menyediakan cara yang elegan untuk membuat output HTML menggunakan C#. Razor meminimalkan jumlah karakter dan penekanan tombol yang diperlukan saat menulis templat tampilan, dan memungkinkan alur kerja pengkodian yang cepat dan cairan.

Index Saat ini metode mengembalikan string dengan pesan yang dikodekan secara permanen di kelas pengontrol. Index Ubah metode untuk mengembalikan objek, seperti yang View ditunjukkan dalam kode berikut:

public ActionResult Index() 
{ 
    return View(); 
}

Metode Index di atas menggunakan templat tampilan untuk menghasilkan respons HTML ke browser. Metode pengontrol (juga dikenal sebagai metode tindakan), seperti Index metode di atas, umumnya mengembalikan ActionResult (atau kelas yang berasal dari ActionResult), bukan jenis primitif seperti string.

Dalam proyek, tambahkan templat tampilan yang dapat Anda gunakan dengan Index metode . Untuk melakukan ini, klik kanan di Index dalam metode dan klik Tambahkan Tampilan.

Kotak dialog Tambahkan Tampilan muncul. Biarkan default seperti itu dan klik tombol Tambahkan :

Folder MvcMovie\Views\HelloWorld dan file MvcMovie\Views\HelloWorld\Index.cshtml dibuat. Anda dapat melihatnya di Penjelajah Solusi:

Berikut ini memperlihatkan file Index.cshtml yang dibuat:

Tambahkan HTML berikut di <h2> bawah tag .

<p>Hello from our View Template!</p>

File MvcMovie\Views\HelloWorld\Index.cshtml lengkap ditunjukkan di bawah ini.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Jika Anda menggunakan Visual Studio 2012, di penjelajah solusi, klik kanan file Index.cshtml dan pilih Tampilkan di Pemeriksa Halaman.

Tutorial Pemeriksa Halaman memiliki informasi lebih lanjut tentang alat baru ini.

Atau, jalankan aplikasi dan telusuri ke HelloWorld pengontrol (http://localhost:xxxx/HelloWorld). Metode Index di pengontrol Anda tidak melakukan banyak pekerjaan; itu hanya menjalankan pernyataan return View(), yang menentukan bahwa metode harus menggunakan file templat tampilan untuk merender respons ke browser. Karena Anda tidak secara eksplisit menentukan nama file templat tampilan yang akan digunakan, ASP.NET MVC default menggunakan file tampilan Index.cshtml di folder \Views\HelloWorld . Gambar di bawah ini menunjukkan untai (karakter) "Halo dari Templat Tampilan kami!" yang dikodekan secara permanen dalam tampilan.

Kelihatannya bagus. Namun, perhatikan bahwa bilah judul browser menunjukkan "Index My ASP.NET A" dan tautan besar di bagian atas halaman mengatakan "logo Anda di sini." Di bawah tautan "logo Anda di sini." adalah tautan pendaftaran dan masuk, dan di bawah tautan tersebut ke halaman Beranda, Tentang, dan Kontak. Mari kita ubah beberapa dari ini.

Mengubah Tampilan dan Halaman Tata Letak

Pertama, Anda ingin mengubah judul "logo Anda di sini." di bagian atas halaman. Teks itu umum untuk setiap halaman. Ini sebenarnya hanya diimplementasikan di satu tempat dalam proyek, meskipun muncul di setiap halaman dalam aplikasi. Buka folder /Views/Shared di Penjelajah Solusi dan buka file _Layout.cshtml . File ini disebut halaman tata letak dan merupakan "shell" bersama yang digunakan semua halaman lainnya.

Templat tata letak memungkinkan Anda menentukan tata letak kontainer HTML situs Anda di satu tempat lalu menerapkannya di beberapa halaman di situs Anda. Temukan garisnya @RenderBody() . RenderBody adalah tempat penampung di mana semua halaman khusus tampilan yang Anda buat muncul, "dibungkus" di halaman tata letak. Misalnya, jika Anda memilih tautan Tentang, tampilan Views\Home\About.cshtml dirender di dalam RenderBody metode .

Ubah judul judul situs di templat tata letak dari "logo Anda di sini" menjadi "Film MVC".

<div class="float-left">
    <p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p>
</div>

Ganti konten elemen judul dengan markup berikut:

<title>@ViewBag.Title - Movie App</title>

Jalankan aplikasi dan perhatikan bahwa sekarang tertulis "Film MVC ". Klik tautan Tentang , dan Anda juga akan melihat bagaimana halaman tersebut menampilkan "Film MVC". Kami dapat membuat perubahan sekali di templat tata letak dan membuat semua halaman di situs mencerminkan judul baru.

Sekarang, mari kita ubah judul tampilan Indeks.

Buka MvcMovie\Views\HelloWorld\Index.cshtml. Ada dua tempat untuk membuat perubahan: pertama, teks yang muncul di judul browser, lalu di header sekunder ( <h2> elemen ). Anda akan membuatnya sedikit berbeda sehingga Anda dapat melihat sedikit perubahan kode mana yang menjadi bagian dari aplikasi.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

Untuk menunjukkan judul HTML yang akan ditampilkan, kode di atas mengatur Title properti ViewBag objek (yang ada di templat tampilan Index.cshtml ). Jika Anda melihat kembali kode sumber templat tata letak, Anda akan melihat bahwa templat menggunakan nilai ini dalam <title> elemen sebagai bagian <head> dari bagian HTML yang kami ubah sebelumnya. Dengan menggunakan pendekatan ini ViewBag , Anda dapat dengan mudah meneruskan parameter lain antara templat tampilan dan file tata letak Anda.

Jalankan aplikasi dan telusuri ke http://localhost:xx/HelloWorld. Perhatikan bahwa judul browser, judul utama, dan judul sekunder telah berubah. (Jika Anda tidak melihat perubahan di browser, Anda mungkin melihat konten yang di-cache. Tekan Ctrl+F5 di browser Anda untuk memaksa respons dari server dimuat.) Judul browser dibuat dengan ViewBag.Title yang kita atur dalam templat tampilan Index.cshtml dan "- Aplikasi Film" tambahan yang ditambahkan dalam file tata letak.

Perhatikan juga bagaimana konten dalam templat tampilan Index.cshtml digabungkan dengan templat tampilan _Layout.cshtml dan satu respons HTML dikirim ke browser. Templat tata letak membuatnya sangat mudah untuk membuat perubahan yang berlaku di semua halaman dalam aplikasi Anda.

Sedikit "data" kami (dalam hal ini pesan "Halo dari Templat Tampilan kami!")) dikodekan secara permanen. Aplikasi MVC memiliki "V" (tampilan) dan Anda memiliki "C" (pengontrol), tetapi belum ada "M" (model). Tak lama, kita akan membahas cara membuat database dan mengambil data model darinya.

Meneruskan Data dari Pengontrol ke Tampilan

Namun, sebelum kita pergi ke database dan berbicara tentang model, mari kita bahas terlebih dahulu tentang meneruskan informasi dari pengontrol ke tampilan. Kelas pengontrol dipanggil sebagai respons terhadap permintaan URL masuk. Kelas pengontrol adalah tempat Anda menulis kode yang menangani permintaan browser masuk, mengambil data dari database, dan akhirnya memutuskan jenis respons apa yang akan dikirim kembali ke browser. Templat tampilan kemudian dapat digunakan dari pengontrol untuk menghasilkan dan memformat respons HTML ke browser.

Pengontrol bertanggung jawab untuk menyediakan data atau objek apa pun yang diperlukan agar templat tampilan merender respons ke browser. Praktik terbaik: Templat tampilan tidak boleh melakukan logika bisnis atau berinteraksi dengan database secara langsung. Sebaliknya, templat tampilan harus hanya berfungsi dengan data yang disediakan oleh pengontrol. Mempertahankan "pemisahan kekhawatiran" ini membantu menjaga kode Anda tetap bersih, dapat diuji, dan lebih dapat dipertahankan.

Saat ini, Welcome metode tindakan di HelloWorldController kelas mengambil name parameter dan numTimes dan kemudian menghasilkan nilai langsung ke browser. Daripada meminta pengontrol merender respons ini sebagai string, mari kita ubah pengontrol untuk menggunakan templat tampilan sebagai gantinya. Templat tampilan akan menghasilkan respons dinamis, yang berarti Anda perlu meneruskan bit data yang sesuai dari pengontrol ke tampilan untuk menghasilkan respons. Anda dapat melakukan ini dengan meminta pengontrol menempatkan data dinamis (parameter) yang dibutuhkan templat tampilan dalam ViewBag objek yang kemudian dapat diakses oleh templat tampilan.

Kembali ke file HelloWorldController.cs dan ubah Welcome metode untuk menambahkan Message nilai dan NumTimes ke ViewBag objek . ViewBag adalah objek dinamis, yang berarti Anda dapat meletakkan apa pun yang Anda inginkan di dalamnya; ViewBag objek tidak memiliki properti yang ditentukan sampai Anda meletakkan sesuatu di dalamnya. Sistem pengikatan model MVC ASP.NET secara otomatis memetakan parameter bernama (name dan numTimes) dari string kueri di bilah alamat ke parameter dalam metode Anda. File HelloWorldController.cs lengkap terlihat seperti ini:

using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

ViewBag Sekarang objek berisi data yang akan diteruskan ke tampilan secara otomatis.

Selanjutnya, Anda memerlukan templat tampilan Selamat Datang! Di menu Build , pilih Build MvcMovie untuk memastikan proyek dikompilasi.

Lalu klik kanan di Welcome dalam metode dan klik Tambahkan Tampilan.

Berikut tampilan kotak dialog Tambahkan Tampilan :

Klik Tambahkan, lalu tambahkan kode berikut di bawah <h2> elemen dalam file Welcome.cshtml baru. Anda akan membuat perulangan yang bertuliskan "Halo" sebanyak yang dikatakan pengguna. File Welcome.cshtml lengkap ditunjukkan di bawah ini.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul> 
   @for (int i=0; i < ViewBag.NumTimes; i++) { 
      <li>@ViewBag.Message</li> 
   } 
</ul>

Jalankan aplikasi dan telusuri ke URL berikut:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Sekarang data diambil dari URL dan diteruskan ke pengontrol menggunakan pengikat model. Pengontrol mengemas data ke dalam ViewBag objek dan meneruskan objek tersebut ke tampilan. Tampilan kemudian menampilkan data sebagai HTML kepada pengguna.

Dalam sampel di atas, kami menggunakan ViewBag objek untuk meneruskan data dari pengontrol ke tampilan. Yang terakhir dalam tutorial, kita akan menggunakan model tampilan untuk meneruskan data dari pengontrol ke tampilan. Pendekatan model tampilan untuk meneruskan data umumnya jauh lebih disukai daripada pendekatan tas tampilan. Lihat entri blog Tampilan Dynamic V Strongly Typed untuk informasi selengkapnya.

Yah, itu semacam "M" untuk model, tapi bukan jenis database. Mari kita ambil apa yang telah kita pelajari dan buat database film.

SebelumnyaBerikutnya