Menambahkan Tampilan (C#)

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.

Tutorial ini akan mengajari Anda dasar-dasar membangun aplikasi Web MVC ASP.NET menggunakan Microsoft Visual Web Developer 2010 Express Service Pack 1, yang merupakan versi gratis dari Microsoft Visual Studio. Sebelum memulai, pastikan Anda telah menginstal prasyarat yang tercantum di bawah ini. Anda dapat menginstal semuanya dengan mengklik tautan berikut: Penginstal Platform Web. Atau, Anda dapat menginstal prasyarat secara individual menggunakan tautan berikut:

• Prasyarat Visual Studio Web Developer Express SP1
• ASP.NET Pembaruan Alat MVC 3
• SQL Server Compact 4.0(runtime + dukungan alat)

Jika Anda menggunakan Visual Studio 2010 alih-alih Visual Web Developer 2010, instal prasyarat dengan mengklik tautan berikut: Prasyarat Visual Studio 2010.

Proyek Visual Web Developer dengan kode sumber C# tersedia untuk menyertai topik ini. Unduh versi C#. Jika Anda lebih suka Visual Basic, beralihlah ke versi Visual Basic dari tutorial ini.

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 baru yang diperkenalkan dengan ASP.NET MVC 3. Templat tampilan berbasis razor memiliki ekstensi file .cshtml , dan menyediakan cara elegan untuk membuat output HTML menggunakan C#. Razor meminimalkan jumlah karakter dan penekanan tombol yang diperlukan saat menulis templat tampilan, dan memungkinkan alur kerja pengkodan cairan yang cepat.

Mulailah dengan menggunakan templat tampilan dengan Index metode di HelloWorldController kelas . 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 hal berikut:

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

Kode ini menggunakan templat tampilan untuk menghasilkan respons HTML ke browser. Dalam proyek, tambahkan templat tampilan yang dapat Anda gunakan dengan metode .Index 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 beberapa HTML di <h2> bawah tag. File MvcMovie\Views\HelloWorld\Index.cshtml yang dimodifikasi ditunjukkan di bawah ini.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Jalankan aplikasi dan telusuri ke HelloWorld pengontrol (http://localhost:xxxx/HelloWorld). Metode Index dalam 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 string yang dikodekan secara permanen dalam tampilan.

Kelihatannya bagus. Namun, perhatikan bahwa bilah judul browser mengatakan "Indeks" dan judul besar di halaman mengatakan "Aplikasi MVC Saya." Ayo kita ubah.

Mengubah Tampilan dan Halaman Tata Letak

Pertama, Anda ingin mengubah judul "Aplikasi MVC Saya" di bagian atas halaman. Teks tersebut 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. @RenderBody() Perhatikan baris di dekat bagian bawah file. RenderBody adalah tempat penampung di mana semua halaman khusus tampilan yang Anda buat muncul, "dibungkus" di halaman tata letak. Ubah judul judul di templat tata letak dari "Aplikasi MVC Saya" menjadi "Aplikasi Film MVC".

<div id="title">
      <h1>MVC Movie App</h1>
  </div>

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

File _Layout.cshtml lengkap ditunjukkan di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Sekarang, mari kita ubah judul halaman Indeks (tampilan).

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 dalam 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. Dengan menggunakan pendekatan ini, 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.)

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 di aplikasi Anda.

Sedikit "data" kami (dalam hal ini pesan "Hello from our View Template!") 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 dari database tersebut.

Meneruskan Data dari Pengontrol ke Tampilan

Namun, sebelum kita pergi ke database dan berbicara tentang model, mari kita bicarakan 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 parameter masuk, mengambil data dari database, dan pada 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. Templat tampilan tidak boleh melakukan logika bisnis atau berinteraksi dengan database secara langsung. Sebaliknya, itu harus bekerja hanya dengan data yang disediakan oleh pengontrol. Mempertahankan "pemisahan kekhawatiran" ini membantu menjaga kode Anda tetap bersih dan lebih dapat dipertahankan.

Saat ini, Welcome metode tindakan di HelloWorldController kelas mengambil name parameter dan numTimes kemudian menghasilkan nilai langsung ke browser. Daripada memiliki pengontrol yang 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 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. 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 Debug , pilih Bangun MvcMovie untuk memastikan proyek dikompilasi.

Kemudian klik kanan di Welcome dalam metode dan klik Tambahkan Tampilan. Berikut tampilan kotak dialog Tambahkan Tampilan :

Klik Tambahkan, lalu tambahkan kode berikut di <h2> bawah elemen dalam file Welcome.cshtml baru. Anda akan membuat perulangan yang mengatakan "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 secara otomatis. Pengontrol mengemas data ke dalam ViewBag objek dan meneruskan objek tersebut ke tampilan. Tampilan kemudian menampilkan data sebagai HTML kepada pengguna.

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

SebelumnyaBerikutnya