Menambahkan Tampilan ke Aplikasi MVC

oleh Rick Anderson

Catatan

Versi terbaru dari tutorial ini tersedia di sini menggunakan versi terbaru Visual Studio. Tutorial baru menggunakan ASP.NET Core MVC, yang memberikan banyak peningkatan atas tutorial ini.

Tutorial ini mengajarkan ASP.NET Core MVC dengan pengontrol dan tampilan. Razor Pages adalah alternatif baru dalam ASP.NET Core, model pemrograman berbasis halaman yang membuat membangun UI web lebih mudah dan lebih produktif. Kami sarankan Anda mencoba tutorial Razor Pages sebelum versi MVC. Tutorial Halaman Razor:

• Lebih mudah diikuti.
• Mencakup lebih banyak fitur.
• Adalah pendekatan yang disukai untuk pengembangan aplikasi baru.

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. 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 memanggil metode Tampilan pengontrol, seperti yang 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.

Klik kanan folder Views\HelloWorld dan klik Tambahkan, lalu klik Halaman Tampilan MVC 5 dengan Tata Letak (Razor).

Dalam kotak dialog Tentukan Nama untuk Item , masukkan Indeks, lalu klik OK.

Dalam dialog Pilih Halaman Tata Letak , terima _Layout.cshtml default dan klik OK.

Dalam dialog di atas, folder Views\Shared dipilih di panel kiri. Jika Anda memiliki file tata letak kustom di folder lain, Anda bisa memilihnya. Kita akan berbicara tentang file tata letak nanti dalam tutorial

File MvcMovie\Views\HelloWorld\Index.cshtml dibuat.

Tambahkan markup yang disorot berikut ini.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Klik kanan file Index.cshtml dan pilih Tampilkan di Browser.

Anda juga dapat mengklik kanan file Index.cshtml dan memilih Tampilkan di Pemeriksa Halaman. Lihat tutorial Pemeriksa Halaman untuk informasi selengkapnya.

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 "Indeks - Aplikasi ASP.NET Saya," dan tautan besar di bagian atas halaman bertuliskan "Nama aplikasi." Bergantung pada seberapa kecil Anda membuat jendela browser, Anda mungkin perlu mengklik tiga bilah di kanan atas untuk melihat tautan Ke Beranda, Tentang, Kontak, Daftar, dan Masuk .

Mengubah Tampilan dan Halaman Tata Letak

Pertama, Anda ingin mengubah tautan "Nama aplikasi" 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 berada di folder 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 konten elemen judul. Ubah ActionLink dalam templat tata letak dari "Nama aplikasi" menjadi "Film MVC" dan pengontrol dari Home ke Movies. File tata letak lengkap ditunjukkan di bawah ini:

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

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

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

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.

Ketika pertama kali membuat file Views\HelloWorld\Index.cshtml , file tersebut berisi kode berikut:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Kode Razor di atas secara eksplisit mengatur halaman tata letak. Periksa file Views\_ViewStart.cshtml , file tersebut berisi markup Razor yang sama persis. File Views\_ViewStart.cshtml menentukan tata letak umum yang akan digunakan semua tampilan, oleh karena itu Anda dapat mengomentari atau menghapus kode tersebut dari file Views\HelloWorld\Index.cshtml .

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Anda dapat menggunakan Layout properti untuk mengatur tampilan tata letak yang berbeda, atau mengaturnya ke null sehingga tidak ada file tata letak yang akan digunakan.

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 ). Perhatikan bahwa templat tata letak ( Views\Shared\_Layout.cshtml ) menggunakan nilai ini dalam <title> elemen sebagai bagian <head> dari bagian HTML yang kami ubah sebelumnya.

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

Dengan menggunakan pendekatan ini ViewBag , Anda dapat dengan mudah meneruskan parameter lain antara templat tampilan dan file tata letak Anda.

Jalankan aplikasi. 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 Solution (atau Ctrl+Shift+B) untuk memastikan proyek dikompilasi. Klik kanan folder Views\HelloWorld dan klik Tambahkan, lalu klik Halaman Tampilan MVC 5 dengan Tata Letak (Razor).

Dalam kotak dialog Tentukan Nama untuk Item , masukkan Selamat Datang, lalu klik OK.

Dalam dialog Pilih Halaman Tata Letak , terima _Layout.cshtml default dan klik OK.

File MvcMovie\Views\HelloWorld\Welcome.cshtml dibuat.

Ganti markup dalam file Welcome.cshtml . 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 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. Nantinya 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