Bagikan melalui

ASP.NET Gambaran Umum Tampilan MVC (C#)

oleh Stephen Walther

Apa itu Tampilan MVC ASP.NET dan bagaimana perbedaannya dengan halaman HTML? Dalam tutorial ini, Stephen Walther memperkenalkan Anda ke Tampilan dan menunjukkan bagaimana Anda dapat memanfaatkan Lihat Data dan Pembantu HTML dalam Tampilan.

Tujuan tutorial ini adalah untuk memberi Anda pengantar singkat tentang tampilan MVC ASP.NET, melihat data, dan Pembantu HTML. Pada akhir tutorial ini, Anda harus memahami cara membuat tampilan baru, meneruskan data dari pengontrol ke tampilan, dan menggunakan Pembantu HTML untuk menghasilkan konten dalam tampilan.

Memahami Tampilan

Untuk ASP.NET atau Halaman Server Aktif, ASP.NET MVC tidak menyertakan apa pun yang terkait langsung dengan halaman. Dalam aplikasi MVC ASP.NET, tidak ada halaman pada disk yang sesuai dengan jalur di URL yang Anda ketik ke bilah alamat browser Anda. Hal terdekat dengan halaman dalam aplikasi MVC ASP.NET adalah sesuatu yang disebut tampilan.

Dalam aplikasi MVC ASP.NET, permintaan browser masuk dipetakan ke tindakan pengontrol. Tindakan pengontrol mungkin mengembalikan tampilan. Namun, tindakan pengontrol mungkin melakukan beberapa jenis tindakan lain seperti mengarahkan Anda ke tindakan pengontrol lain.

Daftar 1 berisi pengontrol sederhana bernama HomeController. HomeController mengekspos dua tindakan pengontrol bernama Index() dan Details().

Daftar 1 - HomeController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Details()
        {
            return RedirectToAction("Index");
        }
    }
}

Anda dapat memanggil tindakan pertama, tindakan Index(), dengan mengetikKAN URL berikut ke bilah alamat browser Anda:

/Home/Index

Anda dapat memanggil tindakan kedua, tindakan Details(), dengan mengetikkan alamat ini ke browser Anda:

/Home/Details

Tindakan Index() mengembalikan tampilan. Sebagian besar tindakan yang Anda buat akan mengembalikan tampilan. Namun, tindakan dapat mengembalikan jenis hasil tindakan lainnya. Misalnya, tindakan Details() mengembalikan RedirectToActionResult yang mengalihkan permintaan masuk ke tindakan Index().

Tindakan Index() berisi satu baris kode berikut:

View();

Baris kode ini mengembalikan tampilan yang harus berada di jalur berikut di server web Anda:

\Views\Home\Index.aspx

Jalur ke tampilan disimpulkan dari nama pengontrol dan nama tindakan pengontrol.

Jika mau, Anda dapat secara eksplisit tentang tampilan. Baris kode berikut mengembalikan tampilan bernama Fred :

Lihat( Fred );

Ketika baris kode ini dijalankan, tampilan dikembalikan dari jalur berikut:

\Views\Home\Fred.aspx

Catatan

Jika Anda berencana untuk membuat pengujian unit untuk aplikasi MVC ASP.NET Anda, sebaiknya eksplisit tentang nama tampilan. Dengan demikian, Anda dapat membuat pengujian unit untuk memverifikasi bahwa tampilan yang diharapkan dikembalikan oleh tindakan pengontrol.

Menambahkan Konten ke Tampilan

Tampilan adalah dokumen HTML standar (X) yang dapat berisi skrip. Anda menggunakan skrip untuk menambahkan konten dinamis ke tampilan.

Misalnya, tampilan di Daftar 2 menampilkan tanggal dan waktu saat ini.

Daftar 2 - \Views\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <% Response.Write(DateTime.Now);%>

    </div>
</body>
</html>

Perhatikan bahwa isi halaman HTML di Daftar 2 berisi skrip berikut:

<% Response.Write(DateTime.Now);%>

Anda menggunakan pemisah <skrip % dan %> untuk menandai awal dan akhir skrip. Skrip ini ditulis dalam C#. Ini menampilkan tanggal dan waktu saat ini dengan memanggil metode Response.Write() untuk merender konten ke browser. Pemisah <skrip % dan %> dapat digunakan untuk menjalankan satu atau beberapa pernyataan.

Karena Anda sering memanggil Response.Write(), Microsoft memberi Anda pintasan untuk memanggil metode Response.Write(). Tampilan di Daftar 3 menggunakan pemisah <%= dan %> sebagai pintasan untuk memanggil Response.Write().

Daftar 3 - Views\Home\Index2.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <%=DateTime.Now %>

    </div>
</body>
</html>

Anda dapat menggunakan bahasa .NET apa pun untuk menghasilkan konten dinamis dalam tampilan. Biasanya, Anda akan menggunakan Visual Basic .NET atau C# untuk menulis pengontrol dan tampilan Anda.

Menggunakan Pembantu HTML untuk Menghasilkan Konten Tampilan

Untuk mempermudah menambahkan konten ke tampilan, Anda dapat memanfaatkan sesuatu yang disebut Pembantu HTML. Pembantu HTML, biasanya, adalah metode yang menghasilkan string. Anda dapat menggunakan Pembantu HTML untuk menghasilkan elemen HTML standar seperti kotak teks, tautan, daftar dropdown, dan kotak daftar.

Misalnya, tampilan di Daftar 4 memanfaatkan tiga Pembantu HTML -- pembantu BeginForm(), TextBox() dan Password() -- untuk menghasilkan formulir Login (lihat Gambar 1).

Daftar 4 -- \Views\Home\Login.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form</title>
</head>
<body>
    <div>
    
    <% using (Html.BeginForm())
       { %>

        <label for="UserName">User Name:</label>
        <br />
        <%= Html.TextBox("UserName") %>
        
        <br /><br />
            
        <label for="Password">Password:</label>
        <br />
        <%= Html.Password("Password") %>
        
        <br /><br />

        <input type="submit" value="Log in" />        
    
    <% } %>
    
    </div>
</body>
</html>

Kotak dialog Proyek Baru

Gambar 01: Formulir Masuk standar (Klik untuk melihat gambar ukuran penuh)

Semua metode Pembantu HTML dipanggil pada properti Html tampilan. Misalnya, Anda merender TextBox dengan memanggil metode Html.TextBox().

Perhatikan bahwa Anda menggunakan pembatas <skrip %= dan %> saat memanggil pembantu Html.TextBox() dan Html.Password(). Pembantu ini hanya mengembalikan string. Anda perlu memanggil Response.Write() untuk merender string ke browser.

Menggunakan metode Pembantu HTML bersifat opsional. Mereka membuat hidup Anda lebih mudah dengan mengurangi jumlah HTML dan skrip yang perlu Anda tulis. Tampilan di Daftar 5 merender formulir yang sama persis dengan tampilan di Daftar 4 tanpa menggunakan Pembantu HTML.

Daftar 5 -- \Views\Home\Login.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form without Help</title>
</head>
<body>
    <div>

    <form method="post" action="/Home/Login">
    
    <label for="userName">User Name:</label>
    <br />
    <input name="userName" />
    
    <br /><br />
    
    <label for="password">Password:</label>
    <br />
    <input name="password" type="password" />
    
    <br /><br />
    <input type="submit" value="Log In" />
    
    </form>
    
    </div>
</body>
</html>

Anda juga memiliki opsi untuk membuat Pembantu HTML Anda sendiri. Misalnya, Anda dapat membuat metode pembantu GridView() yang menampilkan sekumpulan rekaman database dalam tabel HTML secara otomatis. Kami menjelajahi topik ini dalam tutorial Membuat Pembantu HTML Kustom.

Menggunakan Tampilkan Data untuk Meneruskan Data ke Tampilan

Anda menggunakan data tampilan untuk meneruskan data dari pengontrol ke tampilan. Pikirkan melihat data seperti paket yang Anda kirim melalui email. Semua data yang diteruskan dari pengontrol ke tampilan harus dikirim menggunakan paket ini. Misalnya, pengontrol di Daftar 6 menambahkan pesan untuk melihat data.

Daftar 6 - ProductController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Index()
        {
            ViewData["message"] = "Hello World!";
            return View();
        }

    }
}

Properti ViewData pengontrol mewakili kumpulan pasangan nama dan nilai. Di Daftar 6, metode Index() menambahkan item ke kumpulan data tampilan bernama pesan dengan nilai Halo Dunia!. Saat tampilan dikembalikan oleh metode Index(), data tampilan diteruskan ke tampilan secara otomatis.

Tampilan di Daftar 7 mengambil pesan dari data tampilan dan merender pesan ke browser.

Daftar 7 -- \Views\Product\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Product Index</title>
</head>
<body>
    <div>
    
    <%= Html.Encode(ViewData["message"]) %>
    
    </div>
</body>
</html>

Perhatikan bahwa tampilan memanfaatkan metode Html.Encode() HTML Helper saat merender pesan. Html.Encode() HTML Helper mengodekan karakter khusus seperti < dan > ke dalam karakter yang aman untuk ditampilkan di halaman web. Setiap kali Anda merender konten yang dikirimkan pengguna ke situs web, Anda harus mengodekan konten untuk mencegah serangan injeksi JavaScript.

(Karena kami membuat pesan sendiri di ProductController, kami tidak benar-benar perlu mengodekan pesan. Namun, ini adalah kebiasaan yang baik untuk selalu memanggil metode Html.Encode() saat menampilkan konten yang diambil dari melihat data dalam tampilan.)

Di Daftar 7, kami memanfaatkan data tampilan untuk meneruskan pesan string sederhana dari pengontrol ke tampilan. Anda juga bisa menggunakan data tampilan untuk meneruskan jenis data lain, seperti kumpulan rekaman database, dari pengontrol hingga tampilan. Misalnya, jika Anda ingin menampilkan konten tabel database Produk dalam tampilan, maka Anda akan meneruskan kumpulan rekaman database dalam data tampilan.

Anda juga memiliki opsi untuk meneruskan data tampilan yang sangat diketik dari pengontrol ke tampilan. Kami mengeksplorasi topik ini dalam tutorial Memahami Data dan Tampilan Tampilan yang Sangat Ditik.

Ringkasan

Tutorial ini memberikan pengantar singkat untuk ASP.NET tampilan MVC, melihat data, dan Pembantu HTML. Di bagian pertama, Anda mempelajari cara menambahkan tampilan baru ke proyek Anda. Anda mempelajari bahwa Anda harus menambahkan tampilan ke folder yang tepat untuk memanggilnya dari pengontrol tertentu. Selanjutnya, kita membahas topik Pembantu HTML. Anda mempelajari bagaimana Pembantu HTML memungkinkan Anda membuat konten HTML standar dengan mudah. Terakhir, Anda mempelajari cara memanfaatkan data tampilan untuk meneruskan data dari pengontrol ke tampilan.

Berikutnya

  • Last updated on