Bagikan melalui

Bagian 3, tambahkan tampilan ke aplikasi ASP.NET Core MVC

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Peringatan

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Oleh Rick Anderson

Di bagian ini, Anda mengubah kelas HelloWorldController untuk menggunakan berkas tampilan Razor. Ini secara rapi merangkum proses menghasilkan respons HTML kepada klien.

Templat tampilan dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

  • Memiliki ekstensi berkas .cshtml.
  • Berikan cara elegan untuk membuat output HTML dengan C#.

Saat ini metode Index mengembalikan string dengan pesan dalam kelas controller. Di kelas HelloWorldController, ganti metode Index dengan kode berikut:

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

Kode sebelumnya:

  • Memanggil metode pengontrol View .
  • Menggunakan templat tampilan untuk menghasilkan respons HTML.

Metode pengontrol:

  • Disebut metode tindakan. Misalnya, metode aksi Index dalam kode sebelumnya.
  • Umumnya mengembalikan IActionResult atau kelas yang berasal dari ActionResult, bukan tipe seperti string.

Tambah tampilan

Klik kanan pada folder Tampilan , lalu Tambahkan > Folder Baru dan beri nama folder HelloWorld.

Klik kanan pada folder Views/HelloWorld , lalu Tambahkan > Item Baru.

Dalam dialog Tambahkan Item Baru , jika opsi untuk Menampilkan Semua Templat tersedia, pilihlah.

Dalam dialog Tambahkan Item Baru - MvcMovie:

  • Dalam kotak pencarian di kanan atas, masukkan tampilan
  • Pilih Razor Tampilan - Kosong
  • Pertahankan nilai kotak Nama, Index.cshtml.
  • Pilih Tambahkan

Dialog Tambahkan Item Baru

Ganti konten Views/HelloWorld/Index.cshtmlRazor file tampilan dengan yang berikut ini:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

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

Navigasikan ke https://localhost:{PORT}/HelloWorld:

  • Metode Index dalam HelloWorldController menjalankan pernyataan return View();, yang menentukan bahwa metode harus menggunakan file templat tampilan untuk merender respons ke browser.

  • Nama file templat tampilan tidak ditentukan, sehingga MVC default menggunakan file tampilan default. Saat nama file tampilan tidak ditentukan, tampilan default dikembalikan. Tampilan default memiliki nama yang sama dengan metode tindakan, Index dalam contoh ini. Templat /Views/HelloWorld/Index.cshtml tampilan digunakan.

  • Gambar berikut menunjukkan string "Halo dari Templat Tampilan kami!" yang dikodekan secara permanen dalam tampilan:

    Jendela browser

Mengubah tampilan dan halaman tata letak

Pilih tautan menu MvcMovie, Home, dan Privacy. Setiap halaman memperlihatkan tata letak menu yang sama. Tata letak menu diimplementasikan dalam Views/Shared/_Layout.cshtml file.

Buka file Views/Shared/_Layout.cshtml.

Templat tata letak memungkinkan:

  • Menentukan tata letak kontainer HTML situs di satu tempat.
  • Menerapkan tata letak kontainer HTML di beberapa halaman di situs.

Temukan garisnya @RenderBody() . RenderBody adalah tempat penampung tempat semua halaman khusus tampilan yang Anda buat muncul, dibungkus di halaman tata letak. Misalnya, jika Anda memilih Privacy tautan, Views/Home/Privacy.cshtml tampilan dirender di RenderBody dalam metode .

Ganti konten Views/Shared/_Layout.cshtml file dengan markup berikut. Perubahan disorot:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/MvcMovie.styles.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2025 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Markup sebelumnya membuat perubahan berikut:

  • Tiga kemunculan dari MvcMovie ke Movie App.
  • Elemen jangkar <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> ke <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

Dalam markup sebelumnya, asp-area=""atribut Tag Helper jangkar dan nilai atribut dihilangkan karena aplikasi ini tidak menggunakan Area.

Catatan: Movies Pengontrol belum diimplementasikan. Pada titik ini, Movie App tautan tidak berfungsi.

Simpan perubahan dan pilih Privacy tautan. Perhatikan bagaimana judul pada tab browser menampilkan Privacy Kebijakan - Aplikasi Film alih-alih Privacy Kebijakan - MvcMovie

Privacy Tab

Pilih tautan Home.

Perhatikan bahwa judul dan teks jangkar menampilkan Aplikasi Film. Perubahan dilakukan sekali di templat tata letak dan semua halaman di situs mencerminkan teks tautan baru dan judul baru.

Periksa file Views/_ViewStart.cshtml.

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml memasukkan file Views/Shared/_Layout.cshtml ke dalam setiap tampilan. Properti Layout dapat digunakan untuk mengatur tampilan tata letak yang berbeda, atau mengaturnya ke null sehingga tidak ada file tata letak yang akan digunakan.

Buka file tampilan Views/HelloWorld/Index.cshtml.

Ubah judul dan elemen <h2> seperti yang disorot di bawah ini.

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

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

Judul dan <h2> elemen sedikit berbeda sehingga jelas bagian kode mana yang mengubah tampilan.

ViewData["Title"] = "Movie List";dalam kode di atas mengatur properti Title kamus ViewData ke "Daftar Film". Properti Title digunakan dalam <title> elemen HTML di halaman tata letak:

<title>@ViewData["Title"] - Movie App</title>

Simpan perubahan dan navigasikan ke https://localhost:{PORT}/HelloWorld.

Perhatikan bahwa berikut ini telah berubah:

  • Judul jendela browser.
  • Judul utama.
  • Judul sekunder.

Jika tidak ada perubahan di browser, itu bisa menjadi konten cache yang sedang dilihat. Tekan Ctrl+F5 di browser untuk memaksa respons dari server dimuat. Judul browser dibuat dengan ViewData["Title"] yang kita tentukan dalam Index.cshtml templat tampilan dan tambahan "- Aplikasi Film" yang ditambahkan dalam file tata letak.

Konten dalam templat tampilan Index.cshtml digabungkan dengan templat tampilan Views/Shared/_Layout.cshtml. Satu respons HTML dikirim ke browser. Templat tata letak memudahkan untuk membuat perubahan yang berlaku di semua halaman dalam aplikasi. Untuk mempelajari selengkapnya, lihat Tata Letak.

Tampilan Daftar Film

Sedikit "data", pesan "Halo dari Templat Tampilan kami!", tertulis langsung di dalam kode. Aplikasi MVC memiliki "V" (tampilan), "C" (pengontrol), tetapi belum ada "M" (model).

Meneruskan Data dari Pengontrol ke Tampilan

Tindakan pengontrol dipanggil sebagai respons terhadap permintaan URL masuk. Kelas pengontrol adalah tempat kode ditulis yang menangani permintaan browser masuk. Pengontrol mengambil data dari sumber data dan memutuskan jenis respons apa yang akan dikirim kembali ke browser. Templat tampilan dapat digunakan dari pengontrol untuk menghasilkan dan memformat respons HTML ke browser.

Pengendali bertanggung jawab untuk menyediakan data yang diperlukan agar templat tampilan dapat merender respons.

Tampilan templat tidak seharusnya:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

Templat tampilan harus hanya berfungsi dengan data yang disediakan oleh pengontrol. Mempertahankan "pemisahan tanggung jawab" ini membantu menjaga kode:

  • Bersih.
  • Bisa diuji.
  • ** Dapat Dipelihara.

Saat ini, metode Welcome di kelas HelloWorldController memproses parameter name dan ID, kemudian menampilkan nilainya langsung ke browser.

Daripada meminta pengontrol merender respons ini sebagai string, ubah pengontrol untuk menggunakan templat tampilan sebagai gantinya. Templat tampilan menghasilkan respons dinamis, yang berarti bahwa data yang sesuai harus diteruskan dari pengontrol ke tampilan untuk menghasilkan respons. Lakukan ini dengan meminta pengontrol menempatkan data dinamis (parameter) yang dibutuhkan templat tampilan dalam ViewData kamus. Templat tampilan kemudian dapat mengakses data dinamis.

Di HelloWorldController.cs, ubah metode Welcome untuk menambahkan nilai Message dan NumTimes ke kamus ViewData.

ViewData Kamus adalah objek dinamis, yang berarti jenis apa pun dapat digunakan. Objek ViewData tidak memiliki properti yang ditentukan sampai sesuatu ditambahkan. Sistem pengikatan model MVC secara otomatis memetakan parameter name bernama dan numTimes dari string kueri ke parameter dalam metode . Lengkapnya HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    public IActionResult Welcome(string name, int numTimes = 1)
    {
        ViewData["Message"] = "Hello " + name;
        ViewData["NumTimes"] = numTimes;
        return View();
    }
}

Objek ViewData kamus berisi data yang akan diteruskan ke tampilan.

Buat templat tampilan Selamat Datang bernama Views/HelloWorld/Welcome.cshtml.

Anda akan membuat perulangan dalam Welcome.cshtml templat tampilan yang menampilkan "Halo" NumTimes. Ganti konten Views/HelloWorld/Welcome.cshtml dengan yang berikut ini:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]!; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Simpan perubahan Anda dan telusuri ke URL berikut:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Data diambil dari URL dan diteruskan ke pengontrol menggunakan pengikat model MVC. Pengontrol mengemas data ke dalam ViewData kamus dan meneruskan objek tersebut ke tampilan. Tampilan kemudian merender data sebagai HTML ke browser.

Privacy tampilan memperlihatkan label Selamat Datang dan frasa Halo Rick ditampilkan empat kali

Dalam sampel sebelumnya, ViewData kamus digunakan untuk meneruskan data dari pengontrol ke tampilan. Kemudian dalam tutorial, model tampilan digunakan untuk meneruskan data dari pengontrol ke tampilan. Pendekatan model tampilan untuk meneruskan data lebih disukai dibandingkan pendekatan kamus ViewData.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah kelas HelloWorldController untuk menggunakan berkas tampilan Razor. Ini secara rapi merangkum proses menghasilkan respons HTML kepada klien.

Templat tampilan dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

  • Memiliki ekstensi berkas .cshtml.
  • Berikan cara elegan untuk membuat output HTML dengan C#.

Saat ini metode Index mengembalikan string dengan pesan dalam kelas controller. Di kelas HelloWorldController, ganti metode Index dengan kode berikut:

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

Kode sebelumnya:

  • Memanggil metode pengontrol View .
  • Menggunakan templat tampilan untuk menghasilkan respons HTML.

Metode pengontrol:

  • Disebut metode tindakan. Misalnya, metode aksi Index dalam kode sebelumnya.
  • Umumnya mengembalikan IActionResult atau kelas yang berasal dari ActionResult, bukan tipe seperti string.

Tambah tampilan

Klik kanan pada folder Tampilan , lalu Tambahkan > Folder Baru dan beri nama folder HelloWorld.

Klik kanan pada folder Views/HelloWorld , lalu Tambahkan > Item Baru.

Dalam dialog Tambahkan Item Baru pilih Perlihatkan Semua Templat.

Dalam dialog Tambahkan Item Baru - MvcMovie:

  • Dalam kotak pencarian di kanan atas, masukkan tampilan
  • Pilih Razor Tampilan - Kosong
  • Pertahankan nilai kotak Nama, Index.cshtml.
  • Pilih Tambahkan

Dialog Tambahkan Item Baru

Ganti konten Views/HelloWorld/Index.cshtmlRazor file tampilan dengan yang berikut ini:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

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

Navigasikan ke https://localhost:{PORT}/HelloWorld:

  • Metode Index dalam HelloWorldController menjalankan pernyataan return View();, yang menentukan bahwa metode harus menggunakan file templat tampilan untuk merender respons ke browser.

  • Nama file templat tampilan tidak ditentukan, sehingga MVC default menggunakan file tampilan default. Saat nama file tampilan tidak ditentukan, tampilan default dikembalikan. Tampilan default memiliki nama yang sama dengan metode tindakan, Index dalam contoh ini. Templat /Views/HelloWorld/Index.cshtml tampilan digunakan.

  • Gambar berikut menunjukkan string "Halo dari Templat Tampilan kami!" yang dikodekan secara permanen dalam tampilan:

    Jendela browser

Mengubah tampilan dan halaman tata letak

Pilih tautan menu MvcMovie, Home, dan Privacy. Setiap halaman memperlihatkan tata letak menu yang sama. Tata letak menu diimplementasikan dalam Views/Shared/_Layout.cshtml file.

Buka file Views/Shared/_Layout.cshtml.

Templat tata letak memungkinkan:

  • Menentukan tata letak kontainer HTML situs di satu tempat.
  • Menerapkan tata letak kontainer HTML di beberapa halaman di situs.

Temukan garisnya @RenderBody() . RenderBody adalah tempat penampung tempat semua halaman khusus tampilan yang Anda buat muncul, dibungkus di halaman tata letak. Misalnya, jika Anda memilih Privacy tautan, Views/Home/Privacy.cshtml tampilan dirender di RenderBody dalam metode .

Ganti konten Views/Shared/_Layout.cshtml file dengan markup berikut. Perubahan disorot:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Markup sebelumnya membuat perubahan berikut:

  • Tiga kemunculan dari MvcMovie ke Movie App.
  • Elemen jangkar <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> ke <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

Dalam markup sebelumnya, asp-area=""atribut Tag Helper jangkar dan nilai atribut dihilangkan karena aplikasi ini tidak menggunakan Area.

Catatan: Movies Pengontrol belum diimplementasikan. Pada titik ini, Movie App tautan tidak berfungsi.

Simpan perubahan dan pilih Privacy tautan. Perhatikan bagaimana judul pada tab browser menampilkan Privacy Kebijakan - Aplikasi Film alih-alih Privacy Kebijakan - MvcMovie

Privacy Tab

Pilih tautan Home.

Perhatikan bahwa judul dan teks jangkar menampilkan Aplikasi Film. Perubahan dilakukan sekali di templat tata letak dan semua halaman di situs mencerminkan teks tautan baru dan judul baru.

Periksa file Views/_ViewStart.cshtml.

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml memasukkan file Views/Shared/_Layout.cshtml ke dalam setiap tampilan. Properti Layout dapat digunakan untuk mengatur tampilan tata letak yang berbeda, atau mengaturnya ke null sehingga tidak ada file tata letak yang akan digunakan.

Buka file tampilan Views/HelloWorld/Index.cshtml.

Ubah judul dan elemen <h2> seperti yang disorot di bawah ini.

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

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

Judul dan <h2> elemen sedikit berbeda sehingga jelas bagian kode mana yang mengubah tampilan.

ViewData["Title"] = "Movie List";dalam kode di atas mengatur properti Title kamus ViewData ke "Daftar Film". Properti Title digunakan dalam <title> elemen HTML di halaman tata letak:

<title>@ViewData["Title"] - Movie App</title>

Simpan perubahan dan navigasikan ke https://localhost:{PORT}/HelloWorld.

Perhatikan bahwa berikut ini telah berubah:

  • Judul jendela browser.
  • Judul utama.
  • Judul sekunder.

Jika tidak ada perubahan di browser, itu bisa menjadi konten cache yang sedang dilihat. Tekan Ctrl+F5 di browser untuk memaksa respons dari server dimuat. Judul browser dibuat dengan ViewData["Title"] yang kita tentukan dalam Index.cshtml templat tampilan dan tambahan "- Aplikasi Film" yang ditambahkan dalam file tata letak.

Konten dalam templat tampilan Index.cshtml digabungkan dengan templat tampilan Views/Shared/_Layout.cshtml. Satu respons HTML dikirim ke browser. Templat tata letak memudahkan untuk membuat perubahan yang berlaku di semua halaman dalam aplikasi. Untuk mempelajari selengkapnya, lihat Tata Letak.

Tampilan Daftar Film

Sedikit "data", pesan "Halo dari Templat Tampilan kami!", tertulis langsung di dalam kode. Aplikasi MVC memiliki "V" (tampilan), "C" (pengontrol), tetapi belum ada "M" (model).

Meneruskan Data dari Pengontrol ke Tampilan

Tindakan pengontrol dipanggil sebagai respons terhadap permintaan URL masuk. Kelas pengontrol adalah tempat kode ditulis yang menangani permintaan browser masuk. Pengontrol mengambil data dari sumber data dan memutuskan jenis respons apa yang akan dikirim kembali ke browser. Templat tampilan dapat digunakan dari pengontrol untuk menghasilkan dan memformat respons HTML ke browser.

Pengendali bertanggung jawab untuk menyediakan data yang diperlukan agar templat tampilan dapat merender respons.

Tampilan templat tidak seharusnya:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

Templat tampilan harus hanya berfungsi dengan data yang disediakan oleh pengontrol. Mempertahankan "pemisahan tanggung jawab" ini membantu menjaga kode:

  • Bersih.
  • Bisa diuji.
  • ** Dapat Dipelihara.

Saat ini, metode Welcome di kelas HelloWorldController memproses parameter name dan ID, kemudian menampilkan nilainya langsung ke browser.

Daripada meminta pengontrol merender respons ini sebagai string, ubah pengontrol untuk menggunakan templat tampilan sebagai gantinya. Templat tampilan menghasilkan respons dinamis, yang berarti bahwa data yang sesuai harus diteruskan dari pengontrol ke tampilan untuk menghasilkan respons. Lakukan ini dengan meminta pengontrol menempatkan data dinamis (parameter) yang dibutuhkan templat tampilan dalam ViewData kamus. Templat tampilan kemudian dapat mengakses data dinamis.

Di HelloWorldController.cs, ubah metode Welcome untuk menambahkan nilai Message dan NumTimes ke kamus ViewData.

ViewData Kamus adalah objek dinamis, yang berarti jenis apa pun dapat digunakan. Objek ViewData tidak memiliki properti yang ditentukan sampai sesuatu ditambahkan. Sistem pengikatan model MVC secara otomatis memetakan parameter name bernama dan numTimes dari string kueri ke parameter dalam metode . Lengkapnya HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    public IActionResult Welcome(string name, int numTimes = 1)
    {
        ViewData["Message"] = "Hello " + name;
        ViewData["NumTimes"] = numTimes;
        return View();
    }
}

Objek ViewData kamus berisi data yang akan diteruskan ke tampilan.

Buat templat tampilan Selamat Datang bernama Views/HelloWorld/Welcome.cshtml.

Anda akan membuat perulangan dalam Welcome.cshtml templat tampilan yang menampilkan "Halo" NumTimes. Ganti konten Views/HelloWorld/Welcome.cshtml dengan yang berikut ini:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]!; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Simpan perubahan Anda dan telusuri ke URL berikut:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Data diambil dari URL dan diteruskan ke pengontrol menggunakan pengikat model MVC. Pengontrol mengemas data ke dalam ViewData kamus dan meneruskan objek tersebut ke tampilan. Tampilan kemudian merender data sebagai HTML ke browser.

Privacy tampilan memperlihatkan label Selamat Datang dan frasa Halo Rick ditampilkan empat kali

Dalam sampel sebelumnya, ViewData kamus digunakan untuk meneruskan data dari pengontrol ke tampilan. Kemudian dalam tutorial, model tampilan digunakan untuk meneruskan data dari pengontrol ke tampilan. Pendekatan model tampilan untuk meneruskan data lebih disukai dibandingkan pendekatan kamus ViewData.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah kelas HelloWorldController untuk menggunakan berkas tampilan Razor. Ini secara rapi merangkum proses menghasilkan respons HTML kepada klien.

Templat tampilan dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

  • Memiliki ekstensi berkas .cshtml.
  • Berikan cara elegan untuk membuat output HTML dengan C#.

Saat ini metode Index mengembalikan string dengan pesan dalam kelas controller. Di kelas HelloWorldController, ganti metode Index dengan kode berikut:

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

Kode sebelumnya:

  • Memanggil metode pengontrol View .
  • Menggunakan templat tampilan untuk menghasilkan respons HTML.

Metode pengontrol:

  • Disebut metode tindakan. Misalnya, metode aksi Index dalam kode sebelumnya.
  • Umumnya mengembalikan IActionResult atau kelas yang berasal dari ActionResult, bukan tipe seperti string.

Tambah tampilan

Klik kanan pada folder Tampilan , lalu Tambahkan > Folder Baru dan beri nama folder HelloWorld.

Klik kanan pada folder Views/HelloWorld , lalu Tambahkan > Item Baru.

Dalam dialog Tambahkan Item Baru - MvcMovie:

  • Dalam kotak pencarian di kanan atas, masukkan tampilan
  • Pilih Razor Tampilan - Kosong
  • Pertahankan nilai kotak Nama, Index.cshtml.
  • Pilih Tambahkan

Dialog Tambahkan Item Baru

Ganti konten Views/HelloWorld/Index.cshtmlRazor file tampilan dengan yang berikut ini:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

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

Navigasikan ke https://localhost:{PORT}/HelloWorld:

  • Metode Index dalam HelloWorldController menjalankan pernyataan return View();, yang menentukan bahwa metode harus menggunakan file templat tampilan untuk merender respons ke browser.

  • Nama file templat tampilan tidak ditentukan, sehingga MVC default menggunakan file tampilan default. Saat nama file tampilan tidak ditentukan, tampilan default dikembalikan. Tampilan default memiliki nama yang sama dengan metode tindakan, Index dalam contoh ini. Templat /Views/HelloWorld/Index.cshtml tampilan digunakan.

  • Gambar berikut menunjukkan string "Halo dari Templat Tampilan kami!" yang dikodekan secara permanen dalam tampilan:

    Jendela browser

Mengubah tampilan dan halaman tata letak

Pilih tautan menu MvcMovie, Home, dan Privacy. Setiap halaman memperlihatkan tata letak menu yang sama. Tata letak menu diimplementasikan dalam Views/Shared/_Layout.cshtml file.

Buka file Views/Shared/_Layout.cshtml.

Templat tata letak memungkinkan:

  • Menentukan tata letak kontainer HTML situs di satu tempat.
  • Menerapkan tata letak kontainer HTML di beberapa halaman di situs.

Temukan garisnya @RenderBody() . RenderBody adalah tempat penampung tempat semua halaman khusus tampilan yang Anda buat muncul, dibungkus di halaman tata letak. Misalnya, jika Anda memilih Privacy tautan, Views/Home/Privacy.cshtml tampilan dirender di RenderBody dalam metode .

Ganti konten Views/Shared/_Layout.cshtml file dengan markup berikut. Perubahan disorot:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2022 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Markup sebelumnya membuat perubahan berikut:

  • Tiga kemunculan dari MvcMovie ke Movie App.
  • Elemen jangkar <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> ke <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

Dalam markup sebelumnya, asp-area=""atribut Tag Helper jangkar dan nilai atribut dihilangkan karena aplikasi ini tidak menggunakan Area.

Catatan: Movies Pengontrol belum diimplementasikan. Pada titik ini, Movie App tautan tidak berfungsi.

Simpan perubahan dan pilih Privacy tautan. Perhatikan bagaimana judul pada tab browser menampilkan Privacy Kebijakan - Aplikasi Film alih-alih Privacy Kebijakan - MvcMovie

Privacy Tab

Pilih tautan Home.

Perhatikan bahwa judul dan teks jangkar menampilkan Aplikasi Film. Perubahan dilakukan sekali di templat tata letak dan semua halaman di situs mencerminkan teks tautan baru dan judul baru.

Periksa file Views/_ViewStart.cshtml.

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml memasukkan file Views/Shared/_Layout.cshtml ke dalam setiap tampilan. Properti Layout dapat digunakan untuk mengatur tampilan tata letak yang berbeda, atau mengaturnya ke null sehingga tidak ada file tata letak yang akan digunakan.

Buka file tampilan Views/HelloWorld/Index.cshtml.

Ubah judul dan elemen <h2> seperti yang disorot di bawah ini.

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

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

Judul dan <h2> elemen sedikit berbeda sehingga jelas bagian kode mana yang mengubah tampilan.

ViewData["Title"] = "Movie List";dalam kode di atas mengatur properti Title kamus ViewData ke "Daftar Film". Properti Title digunakan dalam <title> elemen HTML di halaman tata letak:

<title>@ViewData["Title"] - Movie App</title>

Simpan perubahan dan navigasikan ke https://localhost:{PORT}/HelloWorld.

Perhatikan bahwa berikut ini telah berubah:

  • Judul jendela browser.
  • Judul utama.
  • Judul sekunder.

Jika tidak ada perubahan di browser, itu bisa menjadi konten cache yang sedang dilihat. Tekan Ctrl+F5 di browser untuk memaksa respons dari server dimuat. Judul browser dibuat dengan ViewData["Title"] yang kita tentukan dalam Index.cshtml templat tampilan dan tambahan "- Aplikasi Film" yang ditambahkan dalam file tata letak.

Konten dalam templat tampilan Index.cshtml digabungkan dengan templat tampilan Views/Shared/_Layout.cshtml. Satu respons HTML dikirim ke browser. Templat tata letak memudahkan untuk membuat perubahan yang berlaku di semua halaman dalam aplikasi. Untuk mempelajari selengkapnya, lihat Tata Letak.

Tampilan Daftar Film

Sedikit "data", pesan "Halo dari Templat Tampilan kami!", tertulis langsung di dalam kode. Aplikasi MVC memiliki "V" (tampilan), "C" (pengontrol), tetapi belum ada "M" (model).

Meneruskan Data dari Pengontrol ke Tampilan

Tindakan pengontrol dipanggil sebagai respons terhadap permintaan URL masuk. Kelas pengontrol adalah tempat kode ditulis yang menangani permintaan browser masuk. Pengontrol mengambil data dari sumber data dan memutuskan jenis respons apa yang akan dikirim kembali ke browser. Templat tampilan dapat digunakan dari pengontrol untuk menghasilkan dan memformat respons HTML ke browser.

Pengendali bertanggung jawab untuk menyediakan data yang diperlukan agar templat tampilan dapat merender respons.

Tampilan templat tidak seharusnya:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

Templat tampilan harus hanya berfungsi dengan data yang disediakan oleh pengontrol. Mempertahankan "pemisahan tanggung jawab" ini membantu menjaga kode:

  • Bersih.
  • Bisa diuji.
  • ** Dapat Dipelihara.

Saat ini, metode Welcome di kelas HelloWorldController memproses parameter name dan ID, kemudian menampilkan nilainya langsung ke browser.

Daripada meminta pengontrol merender respons ini sebagai string, ubah pengontrol untuk menggunakan templat tampilan sebagai gantinya. Templat tampilan menghasilkan respons dinamis, yang berarti bahwa data yang sesuai harus diteruskan dari pengontrol ke tampilan untuk menghasilkan respons. Lakukan ini dengan meminta pengontrol menempatkan data dinamis (parameter) yang dibutuhkan templat tampilan dalam ViewData kamus. Templat tampilan kemudian dapat mengakses data dinamis.

Di HelloWorldController.cs, ubah metode Welcome untuk menambahkan nilai Message dan NumTimes ke kamus ViewData.

ViewData Kamus adalah objek dinamis, yang berarti jenis apa pun dapat digunakan. Objek ViewData tidak memiliki properti yang ditentukan sampai sesuatu ditambahkan. Sistem pengikatan model MVC secara otomatis memetakan parameter name bernama dan numTimes dari string kueri ke parameter dalam metode . Lengkapnya HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    public IActionResult Welcome(string name, int numTimes = 1)
    {
        ViewData["Message"] = "Hello " + name;
        ViewData["NumTimes"] = numTimes;
        return View();
    }
}

Objek ViewData kamus berisi data yang akan diteruskan ke tampilan.

Buat templat tampilan Selamat Datang bernama Views/HelloWorld/Welcome.cshtml.

Anda akan membuat perulangan dalam Welcome.cshtml templat tampilan yang menampilkan "Halo" NumTimes. Ganti konten Views/HelloWorld/Welcome.cshtml dengan yang berikut ini:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]!; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Simpan perubahan Anda dan telusuri ke URL berikut:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Data diambil dari URL dan diteruskan ke pengontrol menggunakan pengikat model MVC. Pengontrol mengemas data ke dalam ViewData kamus dan meneruskan objek tersebut ke tampilan. Tampilan kemudian merender data sebagai HTML ke browser.

Privacy tampilan memperlihatkan label Selamat Datang dan frasa Halo Rick ditampilkan empat kali

Dalam sampel sebelumnya, ViewData kamus digunakan untuk meneruskan data dari pengontrol ke tampilan. Kemudian dalam tutorial, model tampilan digunakan untuk meneruskan data dari pengontrol ke tampilan. Pendekatan model tampilan untuk meneruskan data lebih disukai dibandingkan pendekatan kamus ViewData.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah kelas HelloWorldController untuk menggunakan berkas tampilan Razor. Ini secara rapi merangkum proses menghasilkan respons HTML kepada klien.

Templat tampilan dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

  • Memiliki ekstensi berkas .cshtml.
  • Berikan cara elegan untuk membuat output HTML dengan C#.

Saat ini metode Index mengembalikan string dengan pesan dalam kelas controller. Di kelas HelloWorldController, ganti metode Index dengan kode berikut:

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

Kode sebelumnya:

  • Memanggil metode pengontrol View .
  • Menggunakan templat tampilan untuk menghasilkan respons HTML.

Metode pengontrol:

  • Disebut metode tindakan. Misalnya, metode aksi Index dalam kode sebelumnya.
  • Umumnya mengembalikan IActionResult atau kelas yang berasal dari ActionResult, bukan tipe seperti string.

Tambah tampilan

Klik kanan pada folder Tampilan , lalu Tambahkan > Folder Baru dan beri nama folder HelloWorld.

Klik kanan pada folder Views/HelloWorld , lalu Tambahkan > Item Baru.

Dalam dialog Tambahkan Item Baru - MvcMovie:

  • Dalam kotak pencarian di kanan atas, masukkan tampilan
  • Pilih Razor Tampilan - Kosong
  • Pertahankan nilai kotak Nama, Index.cshtml.
  • Pilih Tambahkan

Dialog Tambahkan Item Baru

Ganti konten Views/HelloWorld/Index.cshtmlRazor file tampilan dengan yang berikut ini:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

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

Navigasikan ke https://localhost:{PORT}/HelloWorld:

  • Metode Index dalam HelloWorldController menjalankan pernyataan return View();, yang menentukan bahwa metode harus menggunakan file templat tampilan untuk merender respons ke browser.

  • Nama file templat tampilan tidak ditentukan, sehingga MVC default menggunakan file tampilan default. Saat nama file tampilan tidak ditentukan, tampilan default dikembalikan. Tampilan default memiliki nama yang sama dengan metode tindakan, Index dalam contoh ini. Templat /Views/HelloWorld/Index.cshtml tampilan digunakan.

  • Gambar berikut menunjukkan string "Halo dari Templat Tampilan kami!" yang dikodekan secara permanen dalam tampilan:

    Jendela browser

Mengubah tampilan dan halaman tata letak

Pilih tautan menu MvcMovie, Home, dan Privacy. Setiap halaman memperlihatkan tata letak menu yang sama. Tata letak menu diimplementasikan dalam Views/Shared/_Layout.cshtml file.

Buka file Views/Shared/_Layout.cshtml.

Templat tata letak memungkinkan:

  • Menentukan tata letak kontainer HTML situs di satu tempat.
  • Menerapkan tata letak kontainer HTML di beberapa halaman di situs.

Temukan garisnya @RenderBody() . RenderBody adalah tempat penampung tempat semua halaman khusus tampilan yang Anda buat muncul, dibungkus di halaman tata letak. Misalnya, jika Anda memilih Privacy tautan, Views/Home/Privacy.cshtml tampilan dirender di RenderBody dalam metode .

Ganti konten Views/Shared/_Layout.cshtml file dengan markup berikut. Perubahan disorot:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Markup sebelumnya membuat perubahan berikut:

  • Tiga kemunculan dari MvcMovie ke Movie App.
  • Elemen jangkar <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> ke <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

Dalam markup sebelumnya, asp-area=""atribut Tag Helper jangkar dan nilai atribut dihilangkan karena aplikasi ini tidak menggunakan Area.

Catatan: Movies Pengontrol belum diimplementasikan. Pada titik ini, Movie App tautan tidak berfungsi.

Simpan perubahan dan pilih Privacy tautan. Perhatikan bagaimana judul pada tab browser menampilkan Privacy Kebijakan - Aplikasi Film alih-alih Privacy Kebijakan - MvcMovie

Privacy Tab

Pilih tautan Home.

Perhatikan bahwa judul dan teks jangkar menampilkan Aplikasi Film. Perubahan dilakukan sekali di templat tata letak dan semua halaman di situs mencerminkan teks tautan baru dan judul baru.

Periksa file Views/_ViewStart.cshtml.

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml memasukkan file Views/Shared/_Layout.cshtml ke dalam setiap tampilan. Properti Layout dapat digunakan untuk mengatur tampilan tata letak yang berbeda, atau mengaturnya ke null sehingga tidak ada file tata letak yang akan digunakan.

Buka file tampilan Views/HelloWorld/Index.cshtml.

Ubah judul dan elemen <h2> seperti yang disorot di bawah ini.

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

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

Judul dan <h2> elemen sedikit berbeda sehingga jelas bagian kode mana yang mengubah tampilan.

ViewData["Title"] = "Movie List";dalam kode di atas mengatur properti Title kamus ViewData ke "Daftar Film". Properti Title digunakan dalam <title> elemen HTML di halaman tata letak:

<title>@ViewData["Title"] - Movie App</title>

Simpan perubahan dan navigasikan ke https://localhost:{PORT}/HelloWorld.

Perhatikan bahwa berikut ini telah berubah:

  • Judul jendela browser.
  • Judul utama.
  • Judul sekunder.

Jika tidak ada perubahan di browser, itu bisa menjadi konten cache yang sedang dilihat. Tekan Ctrl+F5 di browser untuk memaksa respons dari server dimuat. Judul browser dibuat dengan ViewData["Title"] yang kita tentukan dalam Index.cshtml templat tampilan dan tambahan "- Aplikasi Film" yang ditambahkan dalam file tata letak.

Konten dalam templat tampilan Index.cshtml digabungkan dengan templat tampilan Views/Shared/_Layout.cshtml. Satu respons HTML dikirim ke browser. Templat tata letak memudahkan untuk membuat perubahan yang berlaku di semua halaman dalam aplikasi. Untuk mempelajari selengkapnya, lihat Tata Letak.

Tampilan Daftar Film

Sedikit "data", pesan "Halo dari Templat Tampilan kami!", tertulis langsung di dalam kode. Aplikasi MVC memiliki "V" (tampilan), "C" (pengontrol), tetapi belum ada "M" (model).

Meneruskan Data dari Pengontrol ke Tampilan

Tindakan pengontrol dipanggil sebagai respons terhadap permintaan URL masuk. Kelas pengontrol adalah tempat kode ditulis yang menangani permintaan browser masuk. Pengontrol mengambil data dari sumber data dan memutuskan jenis respons apa yang akan dikirim kembali ke browser. Templat tampilan dapat digunakan dari pengontrol untuk menghasilkan dan memformat respons HTML ke browser.

Pengendali bertanggung jawab untuk menyediakan data yang diperlukan agar templat tampilan dapat merender respons.

Tampilan templat tidak seharusnya:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

Templat tampilan harus hanya berfungsi dengan data yang disediakan oleh pengontrol. Mempertahankan "pemisahan tanggung jawab" ini membantu menjaga kode:

  • Bersih.
  • Bisa diuji.
  • ** Dapat Dipelihara.

Saat ini, metode Welcome di kelas HelloWorldController memproses parameter name dan ID, kemudian menampilkan nilainya langsung ke browser.

Daripada meminta pengontrol merender respons ini sebagai string, ubah pengontrol untuk menggunakan templat tampilan sebagai gantinya. Templat tampilan menghasilkan respons dinamis, yang berarti bahwa data yang sesuai harus diteruskan dari pengontrol ke tampilan untuk menghasilkan respons. Lakukan ini dengan meminta pengontrol menempatkan data dinamis (parameter) yang dibutuhkan templat tampilan dalam ViewData kamus. Templat tampilan kemudian dapat mengakses data dinamis.

Di HelloWorldController.cs, ubah metode Welcome untuk menambahkan nilai Message dan NumTimes ke kamus ViewData.

ViewData Kamus adalah objek dinamis, yang berarti jenis apa pun dapat digunakan. Objek ViewData tidak memiliki properti yang ditentukan sampai sesuatu ditambahkan. Sistem pengikatan model MVC secara otomatis memetakan parameter name bernama dan numTimes dari string kueri ke parameter dalam metode . Lengkapnya HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

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

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

Objek ViewData kamus berisi data yang akan diteruskan ke tampilan.

Buat templat tampilan Selamat Datang bernama Views/HelloWorld/Welcome.cshtml.

Anda akan membuat perulangan dalam Welcome.cshtml templat tampilan yang menampilkan "Halo" NumTimes. Ganti konten Views/HelloWorld/Welcome.cshtml dengan yang berikut ini:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]!; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Simpan perubahan Anda dan telusuri ke URL berikut:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Data diambil dari URL dan diteruskan ke pengontrol menggunakan pengikat model MVC. Pengontrol mengemas data ke dalam ViewData kamus dan meneruskan objek tersebut ke tampilan. Tampilan kemudian merender data sebagai HTML ke browser.

Privacy tampilan memperlihatkan label Selamat Datang dan frasa Halo Rick ditampilkan empat kali

Dalam sampel sebelumnya, ViewData kamus digunakan untuk meneruskan data dari pengontrol ke tampilan. Kemudian dalam tutorial, model tampilan digunakan untuk meneruskan data dari pengontrol ke tampilan. Pendekatan model tampilan untuk meneruskan data lebih disukai dibandingkan pendekatan kamus ViewData.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah kelas HelloWorldController untuk menggunakan berkas tampilan Razor. Ini secara rapi merangkum proses menghasilkan respons HTML kepada klien.

Templat tampilan dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

  • Memiliki ekstensi berkas .cshtml.
  • Berikan cara elegan untuk membuat output HTML dengan C#.

Saat ini metode Index mengembalikan string dengan pesan dalam kelas controller. Di kelas HelloWorldController, ganti metode Index dengan kode berikut:

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

Kode sebelumnya:

  • Memanggil metode pengontrol View .
  • Menggunakan templat tampilan untuk menghasilkan respons HTML.

Metode pengontrol:

  • Disebut metode tindakan. Misalnya, metode aksi Index dalam kode sebelumnya.
  • Umumnya mengembalikan IActionResult atau kelas yang berasal dari ActionResult, bukan tipe seperti string.

Tambah tampilan

Klik kanan pada folder Tampilan , lalu Tambahkan > Folder Baru dan beri nama folder HelloWorld.

Klik kanan pada folder Views/HelloWorld , lalu Tambahkan > Item Baru.

Dalam dialog Tambahkan Item Baru - MvcMovie:

  • Dalam kotak pencarian di kanan atas, masukkan tampilan
  • Pilih Razor Tampilan - Kosong
  • Pertahankan nilai kotak Nama, Index.cshtml.
  • Pilih Tambahkan

Dialog Tambahkan Item Baru

Ganti konten Views/HelloWorld/Index.cshtmlRazor file tampilan dengan yang berikut ini:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

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

Navigasikan ke https://localhost:{PORT}/HelloWorld:

  • Metode Index dalam HelloWorldController menjalankan pernyataan return View();, yang menentukan bahwa metode harus menggunakan file templat tampilan untuk merender respons ke browser.

  • Nama file templat tampilan tidak ditentukan, sehingga MVC default menggunakan file tampilan default. Saat nama file tampilan tidak ditentukan, tampilan default dikembalikan. Tampilan default memiliki nama yang sama dengan metode tindakan, Index dalam contoh ini. Templat /Views/HelloWorld/Index.cshtml tampilan digunakan.

  • Gambar berikut menunjukkan string "Halo dari Templat Tampilan kami!" yang dikodekan secara permanen dalam tampilan:

    Jendela browser

Mengubah tampilan dan halaman tata letak

Pilih tautan menu MvcMovie, Home, dan Privacy. Setiap halaman memperlihatkan tata letak menu yang sama. Tata letak menu diimplementasikan dalam Views/Shared/_Layout.cshtml file.

Buka file Views/Shared/_Layout.cshtml.

Templat tata letak memungkinkan:

  • Menentukan tata letak kontainer HTML situs di satu tempat.
  • Menerapkan tata letak kontainer HTML di beberapa halaman di situs.

Temukan garisnya @RenderBody() . RenderBody adalah tempat penampung tempat semua halaman khusus tampilan yang Anda buat muncul, dibungkus di halaman tata letak. Misalnya, jika Anda memilih Privacy tautan, Views/Home/Privacy.cshtml tampilan dirender di RenderBody dalam metode .

Ganti konten Views/Shared/_Layout.cshtml file dengan markup berikut. Perubahan disorot:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Markup sebelumnya membuat perubahan berikut:

  • Tiga kemunculan dari MvcMovie ke Movie App.
  • Elemen jangkar <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> ke <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

Dalam markup sebelumnya, asp-area=""atribut Tag Helper jangkar dan nilai atribut dihilangkan karena aplikasi ini tidak menggunakan Area.

Catatan: Movies Pengontrol belum diimplementasikan. Pada titik ini, Movie App tautan tidak berfungsi.

Simpan perubahan dan pilih Privacy tautan. Perhatikan bagaimana judul pada tab browser menampilkan Privacy Kebijakan - Aplikasi Film alih-alih Privacy Kebijakan - MvcMovie

Privacy Tab

Pilih tautan Home.

Perhatikan bahwa judul dan teks jangkar menampilkan Aplikasi Film. Perubahan dilakukan sekali di templat tata letak dan semua halaman di situs mencerminkan teks tautan baru dan judul baru.

Periksa file Views/_ViewStart.cshtml.

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml memasukkan file Views/Shared/_Layout.cshtml ke dalam setiap tampilan. Properti Layout dapat digunakan untuk mengatur tampilan tata letak yang berbeda, atau mengaturnya ke null sehingga tidak ada file tata letak yang akan digunakan.

Buka file tampilan Views/HelloWorld/Index.cshtml.

Ubah judul dan elemen <h2> seperti yang disorot di bawah ini.

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

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

Judul dan <h2> elemen sedikit berbeda sehingga jelas bagian kode mana yang mengubah tampilan.

ViewData["Title"] = "Movie List";dalam kode di atas mengatur properti Title kamus ViewData ke "Daftar Film". Properti Title digunakan dalam <title> elemen HTML di halaman tata letak:

<title>@ViewData["Title"] - Movie App</title>

Simpan perubahan dan navigasikan ke https://localhost:{PORT}/HelloWorld.

Perhatikan bahwa berikut ini telah berubah:

  • Judul jendela browser.
  • Judul utama.
  • Judul sekunder.

Jika tidak ada perubahan di browser, itu bisa menjadi konten cache yang sedang dilihat. Tekan Ctrl+F5 di browser untuk memaksa respons dari server dimuat. Judul browser dibuat dengan ViewData["Title"] yang kita tentukan dalam Index.cshtml templat tampilan dan tambahan "- Aplikasi Film" yang ditambahkan dalam file tata letak.

Konten dalam templat tampilan Index.cshtml digabungkan dengan templat tampilan Views/Shared/_Layout.cshtml. Satu respons HTML dikirim ke browser. Templat tata letak memudahkan untuk membuat perubahan yang berlaku di semua halaman dalam aplikasi. Untuk mempelajari selengkapnya, lihat Tata Letak.

Tampilan Daftar Film

Sedikit "data", pesan "Halo dari Templat Tampilan kami!", tertulis langsung di dalam kode. Aplikasi MVC memiliki "V" (tampilan), "C" (pengontrol), tetapi belum ada "M" (model).

Meneruskan Data dari Pengontrol ke Tampilan

Tindakan pengontrol dipanggil sebagai respons terhadap permintaan URL masuk. Kelas pengontrol adalah tempat kode ditulis yang menangani permintaan browser masuk. Pengontrol mengambil data dari sumber data dan memutuskan jenis respons apa yang akan dikirim kembali ke browser. Templat tampilan dapat digunakan dari pengontrol untuk menghasilkan dan memformat respons HTML ke browser.

Pengendali bertanggung jawab untuk menyediakan data yang diperlukan agar templat tampilan dapat merender respons.

Tampilan templat tidak seharusnya:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

Templat tampilan harus hanya berfungsi dengan data yang disediakan oleh pengontrol. Mempertahankan "pemisahan tanggung jawab" ini membantu menjaga kode:

  • Bersih.
  • Bisa diuji.
  • ** Dapat Dipelihara.

Saat ini, metode Welcome di kelas HelloWorldController memproses parameter name dan ID, kemudian menampilkan nilainya langsung ke browser.

Daripada meminta pengontrol merender respons ini sebagai string, ubah pengontrol untuk menggunakan templat tampilan sebagai gantinya. Templat tampilan menghasilkan respons dinamis, yang berarti bahwa data yang sesuai harus diteruskan dari pengontrol ke tampilan untuk menghasilkan respons. Lakukan ini dengan meminta pengontrol menempatkan data dinamis (parameter) yang dibutuhkan templat tampilan dalam ViewData kamus. Templat tampilan kemudian dapat mengakses data dinamis.

Di HelloWorldController.cs, ubah metode Welcome untuk menambahkan nilai Message dan NumTimes ke kamus ViewData.

ViewData Kamus adalah objek dinamis, yang berarti jenis apa pun dapat digunakan. Objek ViewData tidak memiliki properti yang ditentukan sampai sesuatu ditambahkan. Sistem pengikatan model MVC secara otomatis memetakan parameter name bernama dan numTimes dari string kueri ke parameter dalam metode . Lengkapnya HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

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

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

Objek ViewData kamus berisi data yang akan diteruskan ke tampilan.

Buat templat tampilan Selamat Datang bernama Views/HelloWorld/Welcome.cshtml.

Anda akan membuat perulangan dalam Welcome.cshtml templat tampilan yang menampilkan "Halo" NumTimes. Ganti konten Views/HelloWorld/Welcome.cshtml dengan yang berikut ini:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Simpan perubahan Anda dan telusuri ke URL berikut:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Data diambil dari URL dan diteruskan ke pengontrol menggunakan pengikat model MVC. Pengontrol mengemas data ke dalam ViewData kamus dan meneruskan objek tersebut ke tampilan. Tampilan kemudian merender data sebagai HTML ke browser.

Privacy tampilan memperlihatkan label Selamat Datang dan frasa Halo Rick ditampilkan empat kali

Dalam sampel sebelumnya, ViewData kamus digunakan untuk meneruskan data dari pengontrol ke tampilan. Kemudian dalam tutorial, model tampilan digunakan untuk meneruskan data dari pengontrol ke tampilan. Pendekatan model tampilan untuk meneruskan data lebih disukai dibandingkan pendekatan kamus ViewData.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah kelas HelloWorldController untuk menggunakan berkas tampilan Razor. Ini secara rapi merangkum proses menghasilkan respons HTML kepada klien.

Templat tampilan dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

  • Memiliki ekstensi berkas .cshtml.
  • Berikan cara elegan untuk membuat output HTML dengan C#.

Saat ini metode Index mengembalikan string dengan pesan dalam kelas controller. Di kelas HelloWorldController, ganti metode Index dengan kode berikut:

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

Kode sebelumnya:

  • Memanggil metode pengontrol View .
  • Menggunakan templat tampilan untuk menghasilkan respons HTML.

Metode pengontrol:

  • Disebut metode tindakan. Misalnya, metode aksi Index dalam kode sebelumnya.
  • Umumnya mengembalikan IActionResult atau kelas yang berasal dari ActionResult, bukan tipe seperti string.

Tambah tampilan

Klik kanan pada folder Tampilan , lalu Tambahkan > Folder Baru dan beri nama folder HelloWorld.

Klik kanan pada folder Views/HelloWorld , lalu Tambahkan > Item Baru.

Dalam dialog Tambahkan Item Baru - MvcMovie:

  • Dalam kotak pencarian di kanan atas, masukkan tampilan
  • Pilih Razor Tampilan - Kosong
  • Pertahankan nilai kotak Nama, Index.cshtml.
  • Pilih Tambahkan

Dialog Tambahkan Item Baru

Ganti konten Views/HelloWorld/Index.cshtmlRazor file tampilan dengan yang berikut ini:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

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

Navigasikan ke https://localhost:{PORT}/HelloWorld:

  • Metode Index dalam HelloWorldController menjalankan pernyataan return View();, yang menentukan bahwa metode harus menggunakan file templat tampilan untuk merender respons ke browser.

  • Nama file templat tampilan tidak ditentukan, sehingga MVC default menggunakan file tampilan default. Saat nama file tampilan tidak ditentukan, tampilan default dikembalikan. Tampilan default memiliki nama yang sama dengan metode tindakan, Index dalam contoh ini. Templat /Views/HelloWorld/Index.cshtml tampilan digunakan.

  • Gambar berikut menunjukkan string "Halo dari Templat Tampilan kami!" yang dikodekan secara permanen dalam tampilan:

    Jendela browser

Mengubah tampilan dan halaman tata letak

Pilih tautan menu MvcMovie, Home, dan Privacy. Setiap halaman memperlihatkan tata letak menu yang sama. Tata letak menu diimplementasikan dalam Views/Shared/_Layout.cshtml file.

Buka file Views/Shared/_Layout.cshtml.

Templat tata letak memungkinkan:

  • Menentukan tata letak kontainer HTML situs di satu tempat.
  • Menerapkan tata letak kontainer HTML di beberapa halaman di situs.

Temukan garisnya @RenderBody() . RenderBody adalah tempat penampung tempat semua halaman khusus tampilan yang Anda buat muncul, dibungkus di halaman tata letak. Misalnya, jika Anda memilih Privacy tautan, Views/Home/Privacy.cshtml tampilan dirender di RenderBody dalam metode .

Ganti konten Views/Shared/_Layout.cshtml file dengan markup berikut. Perubahan disorot:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

Markup sebelumnya membuat perubahan berikut:

  • Tiga kemunculan dari MvcMovie ke Movie App.
  • Elemen jangkar <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> ke <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

Dalam markup sebelumnya, asp-area=""atribut Tag Helper jangkar dan nilai atribut dihilangkan karena aplikasi ini tidak menggunakan Area.

Catatan: Movies Pengontrol belum diimplementasikan. Pada titik ini, Movie App tautan tidak berfungsi.

Simpan perubahan dan pilih Privacy tautan. Perhatikan bagaimana judul pada tab browser menampilkan Privacy Kebijakan - Aplikasi Film alih-alih Privacy Kebijakan - MvcMovie

Privacy Tab

Pilih tautan Home.

Perhatikan bahwa judul dan teks jangkar menampilkan Aplikasi Film. Perubahan dilakukan sekali di templat tata letak dan semua halaman di situs mencerminkan teks tautan baru dan judul baru.

Periksa file Views/_ViewStart.cshtml.

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml memasukkan file Views/Shared/_Layout.cshtml ke dalam setiap tampilan. Properti Layout dapat digunakan untuk mengatur tampilan tata letak yang berbeda, atau mengaturnya ke null sehingga tidak ada file tata letak yang akan digunakan.

Buka file tampilan Views/HelloWorld/Index.cshtml.

Ubah judul dan elemen <h2> seperti yang disorot di bawah ini.

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

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

Judul dan <h2> elemen sedikit berbeda sehingga jelas bagian kode mana yang mengubah tampilan.

ViewData["Title"] = "Movie List";dalam kode di atas mengatur properti Title kamus ViewData ke "Daftar Film". Properti Title digunakan dalam <title> elemen HTML di halaman tata letak:

<title>@ViewData["Title"] - Movie App</title>

Simpan perubahan dan navigasikan ke https://localhost:{PORT}/HelloWorld.

Perhatikan bahwa berikut ini telah berubah:

  • Judul jendela browser.
  • Judul utama.
  • Judul sekunder.

Jika tidak ada perubahan di browser, itu bisa menjadi konten cache yang sedang dilihat. Tekan Ctrl+F5 di browser untuk memaksa respons dari server dimuat. Judul browser dibuat dengan ViewData["Title"] yang kita tentukan dalam Index.cshtml templat tampilan dan tambahan "- Aplikasi Film" yang ditambahkan dalam file tata letak.

Konten dalam templat tampilan Index.cshtml digabungkan dengan templat tampilan Views/Shared/_Layout.cshtml. Satu respons HTML dikirim ke browser. Templat tata letak memudahkan untuk membuat perubahan yang berlaku di semua halaman dalam aplikasi. Untuk mempelajari selengkapnya, lihat Tata Letak.

Tampilan Daftar Film

Sedikit "data", pesan "Halo dari Templat Tampilan kami!", tertulis langsung di dalam kode. Aplikasi MVC memiliki "V" (tampilan), "C" (pengontrol), tetapi belum ada "M" (model).

Meneruskan Data dari Pengontrol ke Tampilan

Tindakan pengontrol dipanggil sebagai respons terhadap permintaan URL masuk. Kelas pengontrol adalah tempat kode ditulis yang menangani permintaan browser masuk. Pengontrol mengambil data dari sumber data dan memutuskan jenis respons apa yang akan dikirim kembali ke browser. Templat tampilan dapat digunakan dari pengontrol untuk menghasilkan dan memformat respons HTML ke browser.

Pengendali bertanggung jawab untuk menyediakan data yang diperlukan agar templat tampilan dapat merender respons.

Tampilan templat tidak seharusnya:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

Templat tampilan harus hanya berfungsi dengan data yang disediakan oleh pengontrol. Mempertahankan "pemisahan tanggung jawab" ini membantu menjaga kode:

  • Bersih.
  • Bisa diuji.
  • ** Dapat Dipelihara.

Saat ini, metode Welcome di kelas HelloWorldController memproses parameter name dan ID, kemudian menampilkan nilainya langsung ke browser.

Daripada meminta pengontrol merender respons ini sebagai string, ubah pengontrol untuk menggunakan templat tampilan sebagai gantinya. Templat tampilan menghasilkan respons dinamis, yang berarti bahwa data yang sesuai harus diteruskan dari pengontrol ke tampilan untuk menghasilkan respons. Lakukan ini dengan meminta pengontrol menempatkan data dinamis (parameter) yang dibutuhkan templat tampilan dalam ViewData kamus. Templat tampilan kemudian dapat mengakses data dinamis.

Di HelloWorldController.cs, ubah metode Welcome untuk menambahkan nilai Message dan NumTimes ke kamus ViewData.

ViewData Kamus adalah objek dinamis, yang berarti jenis apa pun dapat digunakan. Objek ViewData tidak memiliki properti yang ditentukan sampai sesuatu ditambahkan. Sistem pengikatan model MVC secara otomatis memetakan parameter name bernama dan numTimes dari string kueri ke parameter dalam metode . Lengkapnya HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

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

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

Objek ViewData kamus berisi data yang akan diteruskan ke tampilan.

Buat templat tampilan Selamat Datang bernama Views/HelloWorld/Welcome.cshtml.

Anda akan membuat perulangan dalam Welcome.cshtml templat tampilan yang menampilkan "Halo" NumTimes. Ganti konten Views/HelloWorld/Welcome.cshtml dengan yang berikut ini:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Simpan perubahan Anda dan telusuri ke URL berikut:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Data diambil dari URL dan diteruskan ke pengontrol menggunakan pengikat model MVC. Pengontrol mengemas data ke dalam ViewData kamus dan meneruskan objek tersebut ke tampilan. Tampilan kemudian merender data sebagai HTML ke browser.

Privacy tampilan memperlihatkan label Selamat Datang dan frasa Halo Rick ditampilkan empat kali

Dalam sampel sebelumnya, ViewData kamus digunakan untuk meneruskan data dari pengontrol ke tampilan. Kemudian dalam tutorial, model tampilan digunakan untuk meneruskan data dari pengontrol ke tampilan. Pendekatan model tampilan untuk meneruskan data lebih disukai dibandingkan pendekatan kamus ViewData.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model