Bagikan melalui

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

  • Artikel

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 8 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 HelloWorldController kelas untuk menggunakan Razor file tampilan. Ini dengan bersih merangkum proses menghasilkan respons HTML ke klien.

Lihat templat dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

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

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

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

Kode sebelumnya:

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

Metode pengontrol:

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

Menambahkan 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" />
    <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; 2024 - 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 Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml membawa file ke Views/Shared/_Layout.cshtml 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.

Views/HelloWorld/Index.cshtml Buka file tampilan.

Ubah judul dan <h2> elemen seperti yang disorot dalam hal berikut:

@{
    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 ViewData kamus Title 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 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"] kami mengatur dalam Index.cshtml templat tampilan dan "- Aplikasi Film" tambahan yang ditambahkan dalam file tata letak.

Konten dalam Index.cshtml templat tampilan digabungkan Views/Shared/_Layout.cshtml dengan templat tampilan. 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!", dikodekan secara permanen. 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.

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

Lihat templat tidak boleh:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

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

  • Bersih.
  • Bisa diuji.
  • Maintainable.

Saat ini, Welcome metode di HelloWorldController kelas mengambil name parameter dan ID kemudian menghasilkan nilai 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 Welcome metode untuk menambahkan Message nilai dan NumTimes ke ViewData kamus.

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 . Yang lengkap 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 di 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 daripada ViewData pendekatan kamus.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah HelloWorldController kelas untuk menggunakan Razor file tampilan. Ini dengan bersih merangkum proses menghasilkan respons HTML ke klien.

Lihat templat dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

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

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

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

Kode sebelumnya:

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

Metode pengontrol:

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

Menambahkan 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 Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml membawa file ke Views/Shared/_Layout.cshtml 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.

Views/HelloWorld/Index.cshtml Buka file tampilan.

Ubah judul dan <h2> elemen seperti yang disorot dalam hal berikut:

@{
    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 ViewData kamus Title 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 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"] kami mengatur dalam Index.cshtml templat tampilan dan "- Aplikasi Film" tambahan yang ditambahkan dalam file tata letak.

Konten dalam Index.cshtml templat tampilan digabungkan Views/Shared/_Layout.cshtml dengan templat tampilan. 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!", dikodekan secara permanen. 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.

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

Lihat templat tidak boleh:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

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

  • Bersih.
  • Bisa diuji.
  • Maintainable.

Saat ini, Welcome metode di HelloWorldController kelas mengambil name parameter dan ID kemudian menghasilkan nilai 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 Welcome metode untuk menambahkan Message nilai dan NumTimes ke ViewData kamus.

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 . Yang lengkap 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 di 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 daripada ViewData pendekatan kamus.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah HelloWorldController kelas untuk menggunakan Razor file tampilan. Ini dengan bersih merangkum proses menghasilkan respons HTML ke klien.

Lihat templat dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

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

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

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

Kode sebelumnya:

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

Metode pengontrol:

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

Menambahkan 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 Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml membawa file ke Views/Shared/_Layout.cshtml 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.

Views/HelloWorld/Index.cshtml Buka file tampilan.

Ubah judul dan <h2> elemen seperti yang disorot dalam hal berikut:

@{
    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 ViewData kamus Title 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 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"] kami mengatur dalam Index.cshtml templat tampilan dan "- Aplikasi Film" tambahan yang ditambahkan dalam file tata letak.

Konten dalam Index.cshtml templat tampilan digabungkan Views/Shared/_Layout.cshtml dengan templat tampilan. 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!", dikodekan secara permanen. 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.

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

Lihat templat tidak boleh:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

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

  • Bersih.
  • Bisa diuji.
  • Maintainable.

Saat ini, Welcome metode di HelloWorldController kelas mengambil name parameter dan ID kemudian menghasilkan nilai 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 Welcome metode untuk menambahkan Message nilai dan NumTimes ke ViewData kamus.

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 . Yang lengkap 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 di 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 daripada ViewData pendekatan kamus.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah HelloWorldController kelas untuk menggunakan Razor file tampilan. Ini dengan bersih merangkum proses menghasilkan respons HTML ke klien.

Lihat templat dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

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

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

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

Kode sebelumnya:

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

Metode pengontrol:

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

Menambahkan 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 Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml membawa file ke Views/Shared/_Layout.cshtml 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.

Views/HelloWorld/Index.cshtml Buka file tampilan.

Ubah judul dan <h2> elemen seperti yang disorot dalam hal berikut:

@{
    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 ViewData kamus Title 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 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"] kami mengatur dalam Index.cshtml templat tampilan dan "- Aplikasi Film" tambahan yang ditambahkan dalam file tata letak.

Konten dalam Index.cshtml templat tampilan digabungkan Views/Shared/_Layout.cshtml dengan templat tampilan. 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!", dikodekan secara permanen. 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.

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

Lihat templat tidak boleh:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

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

  • Bersih.
  • Bisa diuji.
  • Maintainable.

Saat ini, Welcome metode di HelloWorldController kelas mengambil name parameter dan ID kemudian menghasilkan nilai 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 Welcome metode untuk menambahkan Message nilai dan NumTimes ke ViewData kamus.

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 . Yang lengkap 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 di 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 daripada ViewData pendekatan kamus.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah HelloWorldController kelas untuk menggunakan Razor file tampilan. Ini dengan bersih merangkum proses menghasilkan respons HTML ke klien.

Lihat templat dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

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

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

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

Kode sebelumnya:

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

Metode pengontrol:

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

Menambahkan 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 Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml membawa file ke Views/Shared/_Layout.cshtml 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.

Views/HelloWorld/Index.cshtml Buka file tampilan.

Ubah judul dan <h2> elemen seperti yang disorot dalam hal berikut:

@{
    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 ViewData kamus Title 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 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"] kami mengatur dalam Index.cshtml templat tampilan dan "- Aplikasi Film" tambahan yang ditambahkan dalam file tata letak.

Konten dalam Index.cshtml templat tampilan digabungkan Views/Shared/_Layout.cshtml dengan templat tampilan. 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!", dikodekan secara permanen. 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.

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

Lihat templat tidak boleh:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

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

  • Bersih.
  • Bisa diuji.
  • Maintainable.

Saat ini, Welcome metode di HelloWorldController kelas mengambil name parameter dan ID kemudian menghasilkan nilai 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 Welcome metode untuk menambahkan Message nilai dan NumTimes ke ViewData kamus.

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 . Yang lengkap 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 di 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 daripada ViewData pendekatan kamus.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model

Di bagian ini, Anda mengubah HelloWorldController kelas untuk menggunakan Razor file tampilan. Ini dengan bersih merangkum proses menghasilkan respons HTML ke klien.

Lihat templat dibuat menggunakan Razor. RazorTemplat tampilan berbasis-:

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

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

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

Kode sebelumnya:

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

Metode pengontrol:

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

Menambahkan 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 Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

File Views/_ViewStart.cshtml membawa file ke Views/Shared/_Layout.cshtml 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.

Views/HelloWorld/Index.cshtml Buka file tampilan.

Ubah judul dan <h2> elemen seperti yang disorot dalam hal berikut:

@{
    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 ViewData kamus Title 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 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"] kami mengatur dalam Index.cshtml templat tampilan dan "- Aplikasi Film" tambahan yang ditambahkan dalam file tata letak.

Konten dalam Index.cshtml templat tampilan digabungkan Views/Shared/_Layout.cshtml dengan templat tampilan. 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!", dikodekan secara permanen. 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.

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

Lihat templat tidak boleh:

  • Melakukan logika bisnis
  • Berinteraksi dengan database secara langsung.

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

  • Bersih.
  • Bisa diuji.
  • Maintainable.

Saat ini, Welcome metode di HelloWorldController kelas mengambil name parameter dan ID kemudian menghasilkan nilai 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 Welcome metode untuk menambahkan Message nilai dan NumTimes ke ViewData kamus.

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 . Yang lengkap 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 di 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 daripada ViewData pendekatan kamus.

Dalam tutorial berikutnya, database film dibuat.

Sebelumnya: Tambahkan PengontrolBerikutnya: Tambahkan Model