View

Pada bagian ini, kalian akan memodifikasi class controller kalian untuk menggunakan 'view'. Cara ini akan men- enkapsulasi proses generasi respons HTML ke client.

Template view dibuat menggunakan 'Razor'. Template view berbasis Razor itu:

  • Memiliki ekstensi .cshtml

  • Memberi cara yang elegan untuk menuliskan output HTML menggunakan C#.

Saat ini, method Index kalian mengembalikan nilai string dengan sebuah pesan di controller. Pada class MovieController, ganti method Index menjadi kode seperti berikut:

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

Kode diatas:

  • Memanggil method 'View' pada Controller.

  • Menggunakan template view untuk menghasilkan respons HTML

Method pada controller:

  • Disebut sebagai action method. Contohnya adalah action Index di contoh di atas.

  • Pada umumnya mengembalikan sebuah IActionResult atau class yang 'diturunkan' dari ActionResult, dan bukan tipe seperti string.

Menambah View

Untuk menambah view Index pada MovieController:

  • Buat folder baru: Views/Movie.

  • Buat file baru pada folder Views/Movie dengan nama Index.cshtml

Ganti isi dari Views/Movie/Index.cshtml dengan:

@{
    ViewData["Title"] = "Index";
}
<h2>Index Movie</h2>

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

Jalankan apliaksi, lalu buka di browser, https://localhost:{PORT}/Movie:

  • Method Index pada MovieController menjalankan statement return View();, yang menspesifikasikan bahwa method ini akan menggunakan file template view untuk me render sebuah respons ke browser.

  • Nama file dari template view tidak dituliskan, jadi MVC secara otomatis menggunakan file view default. Ketika nama file tidak dituliskan, view defaultnya akan dikembalikan. View default itu memiliki nama yang sama dengan action method, di contoh ini adalah Index. Jadi template view /Views/Movie/Index.cshtml digunakan.

Mengubah layout

Jika dilihat di halaman Home, dan juga Privacy, semuanya menggunakan layout yang sama. Layout ini disimpan pada Views/Shared/_Layout.cshtml

Pada file Views/Shared/_Layout.cshtml ubah isinya menjadi seperti berikut (lihat disini untuk melihat bedanya)

titik-titik (....) maksudnya kodenya terlalu panjang jadi tidak dicantumkan disini

....
    <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.min.css" />
....
            <div class="container">
                <a class="navbar-brand" asp-controller="Movie" 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">
....

    <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>
....
</body>
</html>

Markup diatas membuat beberapa perubahan berikut:

  • Mengganti semua MvcMovie menjadi Movie App

  • Element anchor <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> dibuah menjadi <a class="navbar-brand" asp-controller="Movie" asp-action="Index">Movie App</a>

Simpan perubahan, lalu jalankan lagi dan buka di browser, buka halaman Privacy, bisa dilihat judul halamannya berubah menjadi Privacy Policy - Movie App, yang sebelumnya Privacy Policy - MvcMovie

Jika tidak ada perubahan, kemungkinan content nya masuk ke cache di browser coba tekan Ctrl+F5 di browser untuk memaksa reload respons dari server

Jika masih tidak ada perubahan, hentikan eksekusi program dengan Ctrl+C, lalu jalankan perintah dotnet build di terminal, lalu jalankan lagi.

Mengirim data dari Controller ke View

Action pada controller di panggil sebagai respons dari request URL yang dikirim browser. Sebuah class controller adalah dimana kode ditulis untuk menangani request browser ini. Controller menerima data dari sumber data dan memutuskan jenis respons apa yang akan dikirim ke browser.

Controller bertanggung jawab untuk menyediakan data yang diperlukan untuk sebuah template view merender respons.

Template view tidak boleh:

  • Berisi logika bisnis

  • Berinteraksi dengan database.

Sebuah template view harus hanya bekerja dengan data yang diberikan oleh controller. Menjaga "Separation of concerns" membantu agar kode tetap:

  • Bersih

  • Mudah untuk di test

  • Mudah untuk di pelihara

Saat ini method Edit pada class MovieController membutuhkan parameter id, lalu langsung mengirim output nilai nya ke browser.

Daripada controller ini merender respons sebagai string, ubahlah menjadi menggunakan template view. Template viewnya akan menghasilkan respons yang dinamis, sehingga data yang benar harus dikirimkan dari controller ke view untuk menghasilkan respons. Lakukan ini dengan membuat controllernya memasukkan data dinamisnya (parameter) yang digunakan oleh view, didalam dictionary ViewData. Lalu template view nya baru dapat mengakses data dinamis tersebut.

Pada file MovieController.cs, ubahlah method Edit untuk memasukkan nilai id ke dictionary ViewData.

Dictionary ViewData adalah object yang dinamis, yang berarti, tipe apa pun dapat digunakan. Objek ViewData tidak memiliki property apapun sampai ditambahkan sendiri. MVC model binding system secara otomatis memetakan parameter id dari query string menjadi parameter pada method ini. Secara keseluruhan, class MvcMovie menjadi (punya kalian kemungkinan sedikit berbeda):

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

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

        public string Create()
        {
            return "Creata new data";
        }

        public IActionResult Edit(int id)
        {
            ViewData["id"] = id;

            return View();
        }
    }
}

object ViewData sekarang sudah memiliki semua data yang akan dikirimkan ke view.

Buatlah view baru di Views/Movie/Edit.cshtml.

Didalamnya, tampilkan data yang sudah dikirimkan oleh controller dengan mengakses ViewData:

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

<h2>Edit Movie with id: @ViewData["id"]</h2>

<p>Some information about the movie....</p>

Simpan perubahan kalian, lalu jalankan dan buka di browser url: https://localhost:{PORT}/Movie/Edit?id=5

Data diambil dari url, dikirim ke url menggunakan MVC model binder. Controller mengirimkan data itu lagi melalui dictionary ViewData dan mengirim object tersebut ke view. View nya lalu merender data menjadi HTML ke browser.

Pada contoh diatas, dictionary ViewData digunakan untuk mengirimkan data dari controller ke view. Di materi yang akan datang, sebuah 'view model' akan digunakan untuk mengirimkan data dari controller ke view. Pendekatan 'view model' untnuk mengirimkan data lebih di anjurkan dari pada menggunakan pendekatan dictionary ViewData.

PreviousModelNextAuthentication

Last updated