Bagikan melalui

Menambahkan Tampilan - Cara menggunakan file templat Tampilan untuk merangkum dengan bersih menghasilkan respons HTML kembali ke klien

oleh Scott Hanselman

Ini adalah tutorial pemula yang memperkenalkan dasar-dasar ASP.NET MVC. Anda akan membuat aplikasi web sederhana yang membaca dan menulis dari database. Kunjungi pusat pembelajaran MVC ASP.NET untuk menemukan tutorial dan sampel MVC ASP.NET lainnya.

Di bagian ini kita akan melihat bagaimana kita dapat memiliki kelas HelloWorldController kita menggunakan file templat Tampilan untuk merangkum dengan bersih menghasilkan respons HTML kembali ke klien.

Mari kita mulai dengan menggunakan templat Tampilan dengan metode Indeks kami. Metode kami disebut Indeks dan ada di HelloWorldController. Saat ini metode Index() kami mengembalikan string dengan pesan yang dikodekan secara permanen dalam kelas Pengontrol.

public string Index()
{
    return "<html><body>This is my default action...</body></html>";
}

Sekarang mari kita ubah metode Indeks agar terlihat seperti ini:

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

Sekarang mari kita tambahkan templat Tampilan ke proyek kita yang dapat kita gunakan untuk metode Index() kita. Untuk melakukan ini, klik kanan dengan mouse Anda di suatu tempat di tengah metode Indeks dan klik Tambahkan Tampilan...

gambar

Ini akan memunculkan dialog "Tambahkan Tampilan" yang memberi kami beberapa opsi tentang bagaimana kami ingin membuat templat tampilan yang dapat digunakan oleh metode Indeks kami. Untuk saat ini, jangan ubah apa pun, dan cukup klik tombol Tambahkan.

Tambahkan Dialog Tampilan

Setelah Anda mengklik Tambahkan, folder baru dan file baru akan muncul di Folder Solusi, seperti yang terlihat di sini. Sekarang saya memiliki folder HelloWorld di bawah Tampilan, dan file Index.aspx di dalam folder tersebut.

solutionexplorerwithindex

File Indeks baru juga sudah dibuka dan siap untuk diedit. Tambahkan beberapa teks di bawah Indeks< h2>pertama</h2> seperti "Halo Dunia."

<h2>Index</h2>
Hello world!

Jalankan aplikasi Anda dan kunjungi http://localhost:xx/HelloWorld lagi di browser Anda. Metode Indeks dalam pengontrol kami dalam contoh ini tidak melakukan pekerjaan apa pun, tetapi memanggil "return View()" yang menunjukkan bahwa kami ingin menggunakan file templat tampilan untuk merender respons kembali ke klien. Karena kami tidak secara eksplisit menentukan nama file templat tampilan yang akan digunakan, ASP.NET MVC default menggunakan file tampilan Index.aspx dalam folder \Views\HelloWorld. Sekarang kita melihat string yang dikodekan secara permanen di Tampilan.

Indeks - Windows Internet Explorer

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

Mengubah Tampilan dan Halaman Master

Pertama, mari kita ubah teks "Aplikasi MVC Saya." Teks tersebut dibagikan dan muncul di setiap halaman. Ini sebenarnya hanya muncul di satu tempat dalam kode kami, meskipun ada di setiap halaman di aplikasi kami. Buka folder /Views/Shared di Penjelajah Solusi dan buka file Site.Master. File ini disebut Halaman Master dan merupakan "shell" bersama yang digunakan semua halaman kami yang lain.

Perhatikan beberapa teks yang mengatakan ContentPlaceholder "MainContent" dalam file ini.

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

Tempat penampung itu adalah tempat semua halaman yang Anda buat akan muncul, "dibungkus" di halaman master. Coba ubah judul, lalu jalankan aplikasi Anda dan kunjungi beberapa halaman. Anda akan melihat bahwa satu perubahan Anda muncul di beberapa halaman.

<div id="title">
    <h1>My MVC Movie Application</h1>
</div>

Sekarang setiap halaman akan memiliki Judul Utama - yaitu H1 - dari "Aplikasi Film MVC Saya." Yang menangani teks putih di bagian atas sana yang dibagikan di semua halaman.

Berikut adalah Site.Master secara keseluruhan dengan judul yang diubah:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Movie Application</h1>
            </div>
             
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>
           
            <div id="menucontainer">
           
                <ul id="menu">             
                    <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%: Html.ActionLink("About", "About", "Home")%></li>
                </ul>
           
            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

Sekarang, mari kita ubah judul halaman Indeks.

Buka /HelloWorld/Index.aspx. Ada dua tempat untuk berubah. Pertama, Judul yang muncul di judul browser, lalu header sekunder - yaitu H2 - juga. Saya akan membuatnya sedikit berbeda sehingga Anda dapat melihat sedikit perubahan kode mana yang menjadi bagian dari aplikasi.

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Movie List
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>My Movie List</h2>
    Hello World!

</asp:Content>

Jalankan aplikasi Anda dan kunjungi /Movies. Perhatikan bahwa judul browser, judul utama, dan judul sekunder telah berubah. Sangat mudah untuk membuat perubahan besar di aplikasi Anda dengan perubahan kecil pada tampilan Anda.

Daftar Film - Windows Internet Explorer

Sedikit "data" kami (dalam hal ini pesan "Halo Dunia!")) dikodekan secara permanen. Kami memiliki V (Tampilan) dan kami memiliki C (Pengontrol), tetapi belum ada M (Model). Kita akan segera membahas cara membuat database dan mengambil data model darinya.

Meneruskan ViewModel

Namun, sebelum kita pergi ke database dan berbicara tentang Model, mari kita bicarakan terlebih dahulu tentang "ViewModels." Ini adalah objek yang mewakili apa yang diperlukan templat Tampilan untuk merender respons HTML kembali ke klien. Templat biasanya dibuat dan diteruskan oleh kelas Pengontrol ke templat Tampilan, dan hanya boleh berisi data yang diperlukan templat Tampilan - dan tidak ada lagi.

Sebelumnya dengan sampel HelloWorld kami, metode tindakan Welcome() kami mengambil nama dan parameter numTimes dan mengeluarkannya ke browser. Daripada pengontrol terus merender respons ini secara langsung, mari kita buat kelas kecil untuk menyimpan data tersebut dan kemudian meneruskannya ke templat Tampilan untuk merender kembali respons HTML menggunakannya. Dengan cara ini Pengontrol berkaitan dengan satu hal dan templat Tampilan lain - memungkinkan kami mempertahankan "pemisahan kekhawatiran" yang bersih dalam aplikasi kami.

Kembali ke file HelloWorldController.cs dan tambahkan kelas "WelcomeViewModel" baru dan ubah metode Selamat Datang di dalam pengontrol Anda. Berikut adalah HelloWorldController.cs lengkap dengan kelas baru dalam file yang sama.

using System.Web.Mvc;

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

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            var viewModel = new WelcomeViewModel
            {
                Message = "Hello " + name,
                NumTimes = numTimes
            };

            return View(viewModel);
        }

        public class WelcomeViewModel
        {
            public string Message { get; set; }
            public int NumTimes { get; set; }
        }
    }
}

Meskipun berada di beberapa baris, metode Selamat Datang kami benar-benar hanya dua pernyataan kode. Pernyataan pertama mengemas dua parameter kami ke dalam objek ViewModel, dan yang kedua meneruskan objek yang dihasilkan ke Tampilan.

Sekarang kita memerlukan templat Tampilan Selamat Datang! Klik kanan dalam metode Selamat Datang dan pilih Tambahkan Tampilan. Kali ini, kami akan memeriksa "Buat tampilan yang sangat ditik" dan pilih kelas WelcomeViewModel kami dari daftar drop-down. Tampilan baru ini hanya akan tahu tentang WelcomeViewModels dan tidak ada jenis objek lainnya.

CATATAN: Anda harus mengkompilasi sekali setelah menambahkan WelcomeViewModel agar muncul di daftar drop-down.

Berikut tampilan dialog Tambahkan Tampilan Anda. Klik tombol Tambahkan. Tambahkan Tampilan yang dilingkari

Tambahkan kode ini di <bawah h2> di Welcome.aspx baru Anda. Kami akan membuat perulangan dan menyapa sebanyak yang dikatakan pengguna!

<% for(int i=0;i<Model.NumTimes;i++) { %>
       <%h3><%: Model.Message %></h3>
<% } %>

Selain itu, perhatikan saat Anda mengetiknya karena kami memberi tahu Tampilan ini tentang WelcomeViewModel (mereka sudah menikah, ingat?) bahwa kami mendapatkan Intellisense yang bermanfaat setiap kali kami mereferensikan objek Model kami seperti yang terlihat pada cuplikan layar di bawah ini:

Kode Sumber NumTime

Jalankan aplikasi Anda dan kunjungi http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 lagi. Sekarang kami mengambil data dari URL, data tersebut diteruskan ke Pengontrol kami secara otomatis, Pengontrol kami mengemas data menjadi ViewModel dan meneruskan objek tersebut ke Tampilan kami. Tampilan daripada menampilkan data sebagai HTML kepada pengguna.

Selamat Datang - Windows Internet Explorer

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

SebelumnyaBerikutnya

  • Last updated on