Pada postingan sebelumnya yaitu Controllers, Anda melihat bagaimana metode tindakan menghasilkan ActionResult. Salah satu jenis tindakan yang paling sering digunakan hasil dalam aplikasi ASP.NET MVC adalah ViewResult. Saat Anda mengembalikan ViewResult dari metode tindakan, Ini menunjukkan bahwa ASP.NET MVC harus meminta halaman tampilan untuk membuat HTML kembali ke browser klien.
Anda menyimpan halaman tampilan di direktori Views di dalam aplikasi. Tampilan sering menyertakan kode sisi server menghasilkan HTML akhir Bila Anda membuat tampilan, Anda perlu menentukan mesin tampilan yang akan digunakan untuk memproses kode sisi server Di luar kotak, ASP.NET MVC mencakup dua mesin tampilan:
- ASPX view engine: Mesin tampilan asli disertakan dalam ASP.NET MVC 1. Menggunakan sintaks mirip dengan Formulir Web.
- Mesin pandang cukur: Mesin tampilan baru yang menggunakan sintaks baru dan sederhana.
Tambahan penting dalam ASP.NET MVC 4 adalah fitur Display Mode, yang memungkinkan aplikasi ini memilih tampilan yang dibuat berdasarkan browser klien mana yang mengajukan permintaan. Ini relevan sekarang karena mobile Browser banyak digunakan.
Dalam bab ini kita akan menjelaskan beberapa fitur yang akan diimplementasikan di "Have You Seen Me?" aplikasi dalam kaitannya dengan tampilan halaman Yang sangat penting adalah konsep layout yang akan membantu menjaga konsisten melihat-dan-merasakan seluruh aplikasi.
Memahami View Engines
Tujuan akhir dari sebuah tampilan adalah membuat HTML ke browser sebagai tanggapan atas permintaan pengguna. Tampilan bisa sesederhana yang disajikan pada Listing 5-1.
Listing 5-1 Tampilan Sederhana
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
</head>
<body>
<h1>View1</h1>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
</head>
<body>
<h1>View1</h1>
</body>
</html>
Perhatikan bahwa konten view pada dasarnya hanya HTML. Ini sangat baik, tapi tidak banyak untuk aplikasi kecuali untuk menampilkan konten statis.
Untuk membuat pandangan benar-benar berguna, mereka harus membuat HTML berdasarkan informasi yang dihasilkan di server. Untuk bekerja dengan informasi ini, pandangan harus dapat mengakses dan memanipulasi informasi, dan di sanalah melihat mesin ikut bermain.
Lihat mesin menyediakan sintaks khusus untuk bekerja dengan elemen sisi server dan memproses tampilan untuk merender HTML di browser Seperti yang ditunjukkan dalam pendahuluan bab ini, ASP.NET MVC 4 mencakup dua mesin tampilan: mesin tampilan ASPX asli, yang bekerja sama dengan sintaks dalam aplikasi Formulir Web, dan Razor baru view engine, yang menggunakan sintaks sederhana dan ringkas yang sangat mudah digunakan.
Beberapa contoh sintaks di kedua mesin tampilan disediakan pada Listing 5-2, 5-3, dan 5-4. Perhatikan bahwa Razor menggunakan lebih sedikit karakter dan sintaksnya jauh lebih mudah dibaca daripada sintaks ASPX.
Listing 5-2. Cetak Tanggal Saat Ini
<%--ASPX--%>
<%=DateTime.Now %>
@*Razor*@
@DateTime.Now
<%=DateTime.Now %>
@*Razor*@
@DateTime.Now
Listing 5-3. if Statement
<%--ASPX--%>
<% if (DateTime.Today.Year == 2013) { %>
<span> Current year </span>
<% }
else { %>
<span> Past year </span>
<% } %>
@*Razor*@
@if (DateTime.Today.Year == 2013) {
<span> Current year </span>
}
else {
<span> Past year </span>
}
Listing 5-4. foreach Loop
<%--ASPX--%>
<ul>
<% foreach (var t in tweets) { %>
<li><%= t.content %></li>
<% } %>
</ul>
@*Razor*@
<ul>
@foreach (var t in tweets) {
<li>@t.content</li>
}
</ul>
@foreach (var t in tweets) {
<li>@t.content</li>
}
</ul>
Anda juga bisa memiliki blok kode. Blok kode adalah bagian dari tampilan yang berisi kode secara ketat daripada sebuah kombinasi markup dan kode. Contoh ditunjukkan pada Listing 5-5.
Listing 5-5. Blok kode
<%--ASPX--%>
<%
var name = "Jose";
var message = "Welcome " + name;
%>
<p>Hello! <%= message %> </p>
@*Razor*@
@{
var name = "Jose";
var message = "Welcome " + name;
}
<p>Hello! @message </p>
Bekerja dengan Views
Membuat pandangan adalah proses yang sangat mudah. Misalnya, kita ambil kelas pengontrol Pet yang dibuat di Bab 4. Ini memiliki metode tindakan yang disebut NotFound yang disebut jika kita memiliki permintaan untuk menampilkan informasi tentang hewan peliharaan itu tidak di sistem Pandangan pada dasarnya hanya perlu mengatakan bahwa hewan peliharaan belum ditemukan. Metode tindakan ditampilkan di Daftar 5-6.
Daftar 5-6 Metode Tindakan NotFound di Kelas PetController
public ActionResult NotFound ()
{
return View ();
}
Salah satu cara termudah untuk membuat tampilan untuk metode tindakan adalah klik kanan di manapun di dalam metode tindakan dan pilih opsi "Add View", seperti yang ditunjukkan pada Gambar 5-1.
 |
| Gambar 5-1. Klik kanan di manapun dalam metode tindakan untuk membuat tampilan |
Melakukan hal ini akan membuka dialog Add View, yang ditunjukkan pada Gambar 5-2. Dalam dialog, Anda dapat mengatur properti tampilan, yang akan saya gambarkan sebentar lagi.
 |
| Gambar 5-2. Form menambahkan View |
Di kotak teks "Lihat nama", masukkan nama tampilan. Umumnya, Anda ingin memberi tampilan nama yang sama dengan metode tindakan yang memicunya. Terkadang, Anda ingin agar memiliki nama yang berbeda dengan nama metode tindakan Dalam kasus ini, metode tindakan harus menentukan nama tampilan sebagai berikut:
return View (nama-view);
Daftar drop-down "View engine" dari dialog Add View memungkinkan Anda memilih tampilan mesin tampilan yang akan Anda lihat gunakan untuk memproses kode sisi server. Seperti dijelaskan di awal bab ini, Anda dapat memilih antara mesin tampilan ASPX dan mesin melihat Razor yang lebih modern.
Kotak centang berikut di dialog Add View menawarkan tiga karakteristik tampilan tambahan yang dapat Anda tentukan:
- Create a strongly-typed view: Centang kotak ini jika Anda ingin membuat pandangan Anda diketik dengan kuat view, yang merupakan view yang menerima tipe objek "model" yang dikenal sebagai parameter dari metode tindakan pengontrol. Menggunakan tampilan yang sangat diketik memiliki beberapa keunggulan, seperti:
- IntelliSense: Visual Studio akan mampu menampilkan IntelliSense menggunakan Model properti berdasarkan kelas model tampilan. Hal ini memungkinkan tampilan halaman untuk mengakses properti objek model, metode panggilan, dan sebagainya.
- Automatic Scaffolding: Memilih opsi ini menginstruksikan Visual Studio untuk membuat tampilan dengan tag <form> yang mencakup semua field dan opsi validasi berdasarkan properti didefinisikan dalam kelas model tampilan.
- Compile-time type checking: Kompilator mampu mendeteksi masalah dengan tipe data Penanganan dalam tampilan karena mengetahui kelas model tampilan dan propertinya. Untuk Misalnya, jika halaman tampilan mencoba mengakses properti yang tidak ada pada objek model, Anda akan mendapatkan kesalahan kompilator daripada kesalahan runtime. Ini adalah hal yang baik, karena itu membantu Anda memperbaiki masalah dalam kode Anda dengan lebih mudah.
- Create as a partial view: Centang kotak ini untuk menentukan tampilan sebagai tampilan sebagian, yang merupakan potongan dari HTML yang dapat digunakan kembali dalam tampilan lain. Misalnya, sebagian tampilan bisa berisi logika tampilkan grafik berdasarkan kumpulan data. Bagan ini kemudian bisa ditempatkan dalam tampilan yang berbeda, namun logika tetap terpusat dalam satu tampilan parsial. Ini berarti bahwa jika Anda memodifikasi jenis grafik, misalnya, dari grafik batang ke diagram lingkaran, semua tampilan memiliki grafik yang sama akan ditampilkan sebagai diagram lingkaran.
- Use a layout or master page: Memeriksa kotak ini memungkinkan Anda menentukan tampilan yang berfungsi sebagai sebuah Tata letak umum dengan elemen seperti logo, menu atas, dan footer yang akan sama di semua tampilan yang menggunakannya Ini adalah cara yang baik untuk memberi tampilan dan nuansa situs web Anda. Selain itu, perubahan yang Anda buat dalam tampilan bersama ini berlaku untuk semua tampilan yang menggunakannya, yaitu banyak lebih mudah daripada harus membuat perubahan pada setiap tampilan individu. Di Razor, ada defaultnya tampilan tata letak yang disebut _ViewStart.cshtml (atau _ViewStart.vbhtml jika bahasa sisi server Anda berada VB.NET). Tampilan _ViewStart.cshtml digunakan jika Anda memilih kotak centang "Use a layout or master page "dan biarkan kotak input layout kosong (seperti yang ditunjukkan pada Gambar 5-2).
Bidang terakhir dalam dialog Add View adalah ContentPlaceHolder ID, yang Anda gunakan saat memilih ASPX sebagai lihat mesin Ini adalah ID dari elemen ContentPlaceHolder di halaman utama yang mendefinisikan di mana konten tampilan akan diberikan untuk membuat keseluruhan dokumen HTML yang akan dikirim ke browser klien. Jika Anda menggunakan tampilan Razor mesin, maka bidang ini tidak tersedia (seperti yang ditunjukkan pada Gambar 5-2). Menggunakan mesin pandang ASPX adalah cara lama, dan
Saya sangat menyarankan Anda menggunakan Razor sebagai gantinya. Cara terbaik untuk melihat bagaimana pengaturan ID ContentPlaceHolder bekerja adalah dengan contoh. Listing 5-7 mencakup halaman utama yang mendefinisikan tata letak umum untuk tampilan lain. Perhatikan bahwa kode HTML termasuk dua elemen sisi server, satu di bagian <head> dan yang lainnya di bagian <body>. Unsur-unsur ini adalah didefinisikan oleh <asp: ContentPlaceHolder>.
Saya sangat menyarankan Anda menggunakan Razor sebagai gantinya. Cara terbaik untuk melihat bagaimana pengaturan ID ContentPlaceHolder bekerja adalah dengan contoh. Listing 5-7 mencakup halaman utama yang mendefinisikan tata letak umum untuk tampilan lain. Perhatikan bahwa kode HTML termasuk dua elemen sisi server, satu di bagian <head> dan yang lainnya di bagian <body>. Unsur-unsur ini adalah didefinisikan oleh <asp: ContentPlaceHolder>.
Listing 5-7 Contoh halaman master yang menggunakan ASPX View Engine
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Elemen ContentPlaceHolder dimaksudkan untuk diganti pada saat runtime oleh HTML yang dihasilkan dari spesifik tampilan yang menggunakan halaman utama Misalnya, tampilan pada Listing 5-8 memiliki dua elemen <asp: Content>, masing-masing memiliki properti ContentPlaceHolderID yang mengacu pada ID elemen ContentPlaceHolder di halaman utama.
Listing 5-8 Lihat Menerapkan Halaman Master dari Listing 5-7
<%@ Page Title="" Language="C#"
MasterPageFile="~/Views/Shared/ViewMasterPage1.Master"
Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
MasterPageFile="~/Views/Shared/ViewMasterPage1.Master"
Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
</asp:Content>
Saat runtime, panggilan ke tampilan akan menyebabkan HTML di halaman utama dirender sebagai bagian dari HTML di dalam lihat, seperti ditunjukkan pada Listing 5-9; area dimana tampilan HTML disisipkan di master page muncul dalam huruf tebal.
Listing 5-9 HTML yang dihasilkan Dikirim ke Browser Berdasarkan Master Page and the View
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h2>Index</h2>
</div>
</body>
</html>
Proses Rendering
Setelah Anda membuat tampilan untuk metode tindakan pada Listing 5-6, semua yang perlu Anda lakukan adalah mengkompilasi aplikasi jadi dapat mulai menerima permintaan untuk memberikan tampilan. Mari kita lihat apa yang terjadi saat Anda membuat tampilan dan menamainya, misalnya, not-found.cshtml bukan NotFound.cshtml, yang merupakan nama tampilan yang diharapkan untuk metode tindakan NotFound ().
Jika Anda menjalankan aplikasi dan mengajukan permintaan ke Pet/NotFound, permintaan akan ditangani oleh NotFound action di kelas PetController. Metode tindakan NotFound() mengembalikan ViewResult dengan memanggil kembali View(). Karena tampilan tertentu tidak diminta, framework tersebut akan mencoba membuat tampilan bernama NotFound.cshtml dan Anda akan mendapatkan respon seperti yang ditunjukkan pada Gambar 5-3.
 |
| Gambar 5-3. Kesalahan ditampilkan saat merender tampilan yang tidak ada atau memiliki nama yang berbeda dari pada action method |
Gambar 5-3 menampilkan banyak informasi yang penting untuk diteliti. Pertama, perhatikan bahwa kerangka kerja mencari lihat dengan nama NotFound di dua direktori yang berbeda: Views/Pet dan Views/Shared. Direktori Pet di dalam Direktori tampilan mewakili tempat untuk semua tampilan yang dibuat berdasarkan kelas PetController; Ini adalah konvensi lain dari ASP.NET MVC, secara default akan mencari folder dengan nama kelas controller untuk tampilan yang akan ditampilkan dengan metode tindakan yang didefinisikan dalam controller. Direktori kedua, Views/Shared, adalah direktori untuk tampilan yang tidak memiliki hubungan langsung dengan metode aksi di kelas kontroler namun dapat digunakan oleh banyak metode tindakan di pengendali yang berbeda (halaman tata letak dan pandangan parsial adalah contoh bagus dari pandangan bersama).
Kedua, perhatikan pada Gambar 5-3 bahwa kerangka kerja mencari file dengan ekstensi yang berbeda, karena setiap tampilan mesin menggunakan ekstensi file yang berbeda. Ekstensi .aspx dan .ascx digunakan oleh mesin tampilan ASPX, sedangkan Ekstensi file .cshtml dan .vbhtml digunakan oleh mesin penampil Razor. Di dunia ASPX view engine, .aspx file untuk tampilan dan file .ascx untuk sebagian dilihat. Bila Anda menggunakan mesin penampil Razor, Anda hanya memiliki satu file ekstensi untuk tampilan Anda: .cshtml didefinisikan untuk tampilan (dan sebagian penayangan) saat proyek Anda menggunakan bahasa C #, dan .vbhtml didefinisikan untuk dilihat saat proyek Anda menggunakan VB.NET.
Ketiga, pesan tersebut menyatakan bahwa satu kemungkinan penyebab kesalahannya adalah tidak dapat menemukan halaman master tampilan menggunakan. Ini bisa terjadi jika Anda mengganti nama master page atau memindahkannya ke lokasi yang berbeda.
Jika tampilan dibuat mengikuti konvensi dan memiliki konten di Listing 5-10, Anda akan melihat hasilnya ditunjukkan pada Gambar 5-4.
Listing 5-10 Konten Views/Pet/NotFound.cshtml View
@{
ViewBag.Title = "NotFound";
}
h1>The information you are looking could not be found</h1>
 |
| Gambar 5-4. Hasil tampilan NotFound yang diberikan di browser |
Memahami Razor View Engine
Kami sekarang akan bekerja dengan Razor dan mengeksplorasi fungsionalitas yang disediakannya. Template proyek ASP.NET MVC 4 buat tampilan _ViewStart.cshtml default (ditunjukkan pada Listing 5-11). Tampilan sebenarnya menggunakan tampilan lain untuk membuat konten. Ini adalah fitur Razor yang disebut layout dimana properti Layout dari tampilan mendefinisikan pandangan bersama yang akan digunakan sebagai sebuah template untuk konten dalam tampilan yang menerapkannya (mirip dengan halaman master pada mesin pandang ASPX).
Menggunakan tata letak membantu Anda menjaga konsistensi tampilan dan nuansa di seluruh keseluruhan situs web Anda. Anda juga mendapatkan keuntungan dari memiliki tempat yang terpusat untuk melakukan perubahan.
Listing 5-11. Konten _ViewStart.cshtml
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Tampilan bernama _Layout.cshtml (terletak di direktori Views/Shared) berisi konten HTML untuk "Layout" (atau "master"). Saat membuat tampilan dengan dialog Add View (ditunjukkan sebelumnya, pada Gambar 5-2), Anda bisa merujuk secara langsung ke _Layout.cshtml dengan menentukannya di kotak input layout. Isi _Layout.cshtml disajikan pada Listing 5-12.
Listing 5-12. Isi dari _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
@Html.ActionLink("your logo here", "Index", "Home")
</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact Us", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
Listing 5-12 memiliki dua perintah di bagian <head> halaman: @Scripts.Render() dan @Styles.Render(). Mereka digunakan untuk membuat referensi skrip dan gaya ke file eksternal. Kode di halaman akan menghasilkan berikut HTML
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
Seperti mesin tampilan ASPX, Anda dapat menyertakan bagian HTML tempat konten dari tampilan akan "dimasukkan ke dalam" ke halaman tata letak-dalam kasus Razor mereka disebut section, berlawanan dengan ContentPlaceHolders di mesin pandang ASPX. Sintaks untuk membuat section adalah @RenderSection("name of section"). Perhatikan pada Listing 5-12 bagian yang dinamai "Fitur" yang akan diberikan tepat di atas konten tubuh. Halaman berkewajiban menyediakan konten untuk sebuah bagian kecuali bagian tersebut didefinisikan sebagai tidak diperlukan dengan parameter tambahan. Untuk menentukan bagian yang tidak diperlukan, gunakan @RenderSection("name of section", required:false).
Bagian dalam tampilan Razor yang dibuat dengan @RenderSection() adalah konsep yang sama sekali berbeda dari semantik HTML5 tag <section> Bila Anda menggunakan @RenderSection(), jangan berharap mendapatkan tag <section> di HTML yang diberikan.
@RenderBody() membuat konten utama untuk halaman tampilan - yaitu, konten apa pun yang bukan bagian dari sebuah nama. Tampilan yang disajikan pada Listing 5-13 memiliki satu bagian bernama (featured), dilambangkan dengan @section yang ditampilkan {...}. Itu bagian fitur diikuti oleh HTML yang tidak dilampirkan di blok @section{...}. Razor secara otomatis memperlakukan ini sebagai bagian "tubuh" dan menggabungkannya ke halaman tata letak yang ditandai dengan @RenderBody().
Listing 5-13 Lihat dengan Sisi Bernama (Unggulan) dan Bagian Tanpa Teks (Body)
@{
ViewBag.Title = "Home Page";
}
@section featured {
<div class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
<a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC. If you have any questions about ASP.NET MVC visit
<a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
</p>
</div>
</div>
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, TDD-friendly development for creating sophisticated applications that use the latest web standards.
<a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more...</a>
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
<a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more...</a>
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
<a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more...</a>
</li>
</ol>
