Kerangka MVC - Tampilan

Seperti yang terlihat di bab pengantar awal, View adalah komponen yang terlibat dengan Antarmuka Pengguna aplikasi. Tampilan ini umumnya terikat dari data model dan memiliki ekstensi seperti html, aspx, cshtml, vbhtml, dll. Dalam Aplikasi MVC Pertama kami, kami telah menggunakan Tampilan dengan Pengontrol untuk menampilkan data ke pengguna akhir. Untuk merender konten statis dan dinamis ini ke browser, MVC Framework menggunakan View Engines. View Engines pada dasarnya adalah implementasi sintaksis markup, yang bertanggung jawab untuk menampilkan HTML final ke browser.

MVC Framework hadir dengan dua mesin tampilan built-in -

Razor Engine- Razor adalah sintaks markup yang memungkinkan sisi server C # atau kode VB masuk ke halaman web. Kode sisi server ini dapat digunakan untuk membuat konten dinamis saat halaman web sedang dimuat. Razor adalah mesin canggih dibandingkan dengan mesin ASPX dan diluncurkan di versi MVC yang lebih baru.

ASPX Engine- ASPX atau mesin Formulir Web adalah mesin tampilan default yang disertakan dalam MVC Framework sejak awal. Menulis kode dengan mesin ini mirip dengan menulis kode di Formulir Web ASP.NET.

Berikut adalah cuplikan kode kecil yang membandingkan mesin Razor dan ASPX.

Pisau cukur

@Html.ActionLink("Create New", "UserAdd")

ASPX

<% Html.ActionLink("SignUp", "SignUp") %>

Dari keduanya, Razor adalah View Engine yang canggih karena dilengkapi dengan sintaksis yang ringkas, pendekatan pengembangan yang digerakkan oleh pengujian, dan fitur keamanan yang lebih baik. Kami akan menggunakan mesin Razor di semua contoh kami karena ini adalah mesin View yang paling dominan digunakan.

Mesin Tampilan ini dapat dikodekan dan diterapkan dalam dua jenis berikut -

  • Diketik dengan kuat
  • Diketik dinamis

Pendekatan ini serupa dengan pengikatan awal dan pengikatan akhir di mana model akan diikat ke View secara kuat atau dinamis.

Tampilan Sangat Diketik

Untuk memahami konsep ini, mari kita buat contoh aplikasi MVC (ikuti langkah-langkah di bab sebelumnya) dan tambahkan file kelas Controller bernama ViewDemoController.

Sekarang, salin kode berikut di file pengontrol -

using System.Collections.Generic; 
using System.Web.Mvc;  

namespace ViewsInMVC.Controllers { 
   
   public class ViewDemoController : Controller { 
      
      public class Blog { 
         public string Name; 
         public string URL; 
      }  
      
      private readonly List topBlogs = new List { 
         new Blog { Name = "Joe Delage", URL = "http://tutorialspoint/joe/"}, 
         new Blog {Name = "Mark Dsouza", URL = "http://tutorialspoint/mark"}, 
         new Blog {Name = "Michael Shawn", URL = "http://tutorialspoint/michael"} 
      };  
      
      public ActionResult StonglyTypedIndex() { 
         return View(topBlogs); 
      }  
      
      public ActionResult IndexNotStonglyTyped() { 
         return View(topBlogs); 
      }   
   } 
}

Dalam kode di atas, kami memiliki dua metode tindakan yang ditentukan: StronglyTypedIndex dan IndexNotStonglyTyped. Kami sekarang akan menambahkan Tampilan untuk metode tindakan ini.

Klik kanan pada metode tindakan StonglyTypedIndex dan klik Add View. Di jendela berikutnya, centang kotak 'Buat tampilan yang diketik dengan kuat'. Ini juga akan mengaktifkan opsi templat Kelas Model dan Perancah. Pilih Daftar dari opsi Template Perancah. Klik Add.

File View yang mirip dengan screenshot berikut akan dibuat. Seperti yang dapat Anda catat, ini telah menyertakan kelas model Blog ViewDemoController di bagian atas. Anda juga akan dapat menggunakan IntelliSense dalam kode Anda dengan pendekatan ini.

Tampilan Jenis Dinamis

Untuk membuat tampilan jenis dinamis, klik kanan tindakan IndexNotStonglyTyped dan klik Tambahkan Tampilan.

Kali ini, jangan pilih kotak centang 'Buat tampilan yang diketik dengan kuat'.

Tampilan yang dihasilkan akan memiliki kode berikut -

@model dynamic 
            
@{ 
   ViewBag.Title = "IndexNotStonglyTyped"; 
}

<h2>Index Not Stongly Typed</h2>  
<p> 
   <ul> 
      
      @foreach (var blog in Model) { 
         <li> 
            <a href = "@blog.URL">@blog.Name</a> 
         </li>    
      } 
   
   </ul> 
</p>

Seperti yang Anda lihat pada kode di atas, kali ini tidak menambahkan model Blog ke Tampilan seperti pada kasus sebelumnya. Selain itu, Anda tidak akan dapat menggunakan IntelliSense kali ini karena kali ini pengikatan akan dilakukan pada waktu proses.

Tampilan yang diketik dengan kuat dianggap sebagai pendekatan yang lebih baik karena kita sudah tahu data apa yang diteruskan sebagai Model, tidak seperti Tampilan yang diketik dinamis di mana data terikat pada waktu proses dan dapat menyebabkan kesalahan waktu proses, jika ada perubahan dalam model yang ditautkan.