Bagikan melalui

Membuat Pembantu HTML Kustom (C#)

  • Artikel

oleh Microsoft

Unduh PDF

Tujuan dari tutorial ini adalah untuk menunjukkan bagaimana Anda dapat membuat Pembantu HTML kustom yang dapat Anda gunakan dalam tampilan MVC Anda. Dengan memanfaatkan Pembantu HTML, Anda dapat mengurangi jumlah pengetikan membosankan tag HTML yang harus Anda lakukan untuk membuat halaman HTML standar.

Tujuan dari tutorial ini adalah untuk menunjukkan bagaimana Anda dapat membuat Pembantu HTML kustom yang dapat Anda gunakan dalam tampilan MVC Anda. Dengan memanfaatkan Pembantu HTML, Anda dapat mengurangi jumlah pengetikan membosankan tag HTML yang harus Anda lakukan untuk membuat halaman HTML standar.

Di bagian pertama tutorial ini, saya menjelaskan beberapa Pembantu HTML yang ada yang disertakan dengan kerangka kerja MVC ASP.NET. Selanjutnya, saya menjelaskan dua metode untuk membuat Pembantu HTML kustom: Saya menjelaskan cara membuat Pembantu HTML kustom dengan membuat metode statis dan dengan membuat metode ekstensi.

Memahami Pembantu HTML

Pembantu HTML hanyalah metode yang mengembalikan string. String dapat mewakili semua jenis konten yang Anda inginkan. Misalnya, Anda dapat menggunakan Pembantu HTML untuk merender tag HTML standar seperti HTML <input> dan <img> tag. Anda juga dapat menggunakan Pembantu HTML untuk merender konten yang lebih kompleks seperti strip tab atau tabel data database HTML.

Kerangka kerja MVC ASP.NET mencakup set Pembantu HTML standar berikut (ini bukan daftar lengkap):

  • Html.ActionLink()
  • Html.BeginForm()
  • Html.CheckBox()
  • Html.DropDownList()
  • Html.EndForm()
  • Html.Hidden()
  • Html.ListBox()
  • Html.Password()
  • Html.RadioButton()
  • Html.TextArea()
  • Html.TextBox()

Misalnya, pertimbangkan formulir dalam Daftar 1. Formulir ini dirender dengan bantuan dua Pembantu HTML standar (lihat Gambar 1). Formulir ini menggunakan Html.BeginForm() metode dan Html.TextBox() Helper untuk merender formulir HTML sederhana.

Halaman dirender dengan Pembantu HTML

Gambar 01: Halaman dirender dengan Pembantu HTML (Klik untuk melihat gambar ukuran penuh)

Daftar 1 – Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>
<!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>
          <% using (Html.BeginForm())
          { %>

               <label for="firstName">First Name:</label>
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />

               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />    
          <% } %>
     1     </div>
</body>
</html>

Metode Pembantu Html.BeginForm() digunakan untuk membuat tag HTML <form> pembuka dan penutup. Perhatikan bahwa metode dipanggil Html.BeginForm() dalam pernyataan penggunaan. Pernyataan penggunaan memastikan bahwa <form> tag ditutup di akhir blok penggunaan.

Jika mau, alih-alih membuat blok penggunaan, Anda dapat memanggil metode Pembantu Html.EndForm() untuk menutup <form> tag. Gunakan pendekatan apa pun untuk membuat tag pembuka dan penutup <form> yang tampaknya paling intuitif bagi Anda.

Metode Html.TextBox() Pembantu digunakan dalam Daftar 1 untuk merender tag HTML <input> . Jika Anda memilih tampilkan sumber di browser Anda, maka Anda akan melihat sumber HTML di Daftar 2. Perhatikan bahwa sumber berisi tag HTML standar.

Penting

perhatikan bahwa Html.TextBox()-HTML Helper dirender dengan <%= %> tag alih-alih <% %> tag. Jika Anda tidak menyertakan tanda sama dengan, maka tidak ada yang akan dirender ke browser.

Kerangka kerja MVC ASP.NET berisi sekumpulan kecil pembantu. Kemungkinan besar, Anda harus memperluas kerangka kerja MVC dengan Pembantu HTML kustom. Di sisa tutorial ini, Anda mempelajari dua metode untuk membuat Pembantu HTML kustom.

Daftar 2 – Index.aspx Source

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
<!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>
     <title>Index</title>
</head>
<body>
     <div>
          <form action="http://localhost:33102/" method="post">
               <label for="firstName">First Name:</label>

               <br />
               <input id="firstName" name="firstName" type="text" value="" />
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />
               <input id="lastName" name="lastName" type="text" value="" />
               <br /><br />

               <input id="btnRegister" name="btnRegister" type="submit" value="Register" />
          </form>
     </div>
</body>
</html>

Membuat Pembantu HTML dengan Metode Statis

Cara termampu untuk membuat Pembantu HTML baru adalah dengan membuat metode statis yang mengembalikan string. Bayangkan, misalnya, Anda memutuskan untuk membuat Pembantu HTML baru yang merender tag HTML <label> . Anda dapat menggunakan kelas di Daftar 2 untuk merender <label> .

Daftar 2 – Helpers\LabelHelper.cs

using System;
namespace MvcApplication1.Helpers
{
    public class LabelHelper
    {
        public static string Label(string target, string text)
        {
            return String.Format("<label for='{0}'>{1}</label>", target, text);
        }
    }
}

Tidak ada yang istimewa tentang kelas di Listing 2. Metode Label() ini hanya mengembalikan string.

Tampilan Indeks yang dimodifikasi di Daftar 3 menggunakan LabelHelper untuk merender tag HTML <label> . Perhatikan bahwa tampilan menyertakan <%@ imports %> direktif yang mengimpor Application1.Helpers namespace.

Daftar 2 – Views\Home\Index2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!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>Index2</title>
</head>
<body>
     <div>
          <% using (Html.BeginForm())
          { %>
               <%= LabelHelper.Label("firstName", "First Name:") %>
               <br />

               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= LabelHelper.Label("lastName", "Last Name:") %>
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />
          <% } %>

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

Membuat Pembantu HTML dengan Metode Ekstensi

Jika Anda ingin membuat Pembantu HTML yang berfungsi seperti Pembantu HTML standar yang disertakan dalam kerangka kerja MVC ASP.NET maka Anda perlu membuat metode ekstensi. Metode ekstensi memungkinkan Anda menambahkan metode baru ke kelas yang sudah ada. Saat membuat metode Html Helper, Anda menambahkan metode baru ke kelas HtmlHelper yang diwakili oleh properti Html tampilan.

Kelas di Listing 3 menambahkan metode ekstensi ke HtmlHelper kelas bernama Label(). Ada beberapa hal yang harus Anda perhatikan tentang kelas ini. Pertama, perhatikan bahwa kelas adalah kelas statis. Anda harus menentukan metode ekstensi dengan kelas statis.

Kedua, perhatikan bahwa parameter Label() pertama metode didahului oleh kata kunci this. Parameter pertama metode ekstensi menunjukkan kelas yang diperluas oleh metode ekstensi.

Daftar 3 – Helpers\LabelExtensions.cs

using System;
using System.Web.Mvc;

namespace MvcApplication1.Helpers
{
     public static class LabelExtensions
     {
          public static string Label(this IHtmlHelper helper, string target, string text)
          {
               return String.Format("<label for='{0}'>{1}</label>", target, text);
          }
     }
}

Setelah Anda membuat metode ekstensi, dan berhasil membangun aplikasi Anda, metode ekstensi muncul di Visual Studio Intellisense seperti semua metode kelas lainnya (lihat Gambar 2). Satu-satunya perbedaan adalah bahwa metode ekstensi muncul dengan simbol khusus di sampingnya (ikon panah ke bawah).

Menggunakan metode ekstensi Html.Label()

Gambar 02: Menggunakan metode ekstensi Html.Label() (Klik untuk melihat gambar ukuran penuh)

Tampilan Indeks yang dimodifikasi di Daftar 4 menggunakan metode ekstensi Html.Label() untuk merender semua tagnya <label> .

Daftar 4 – Views\Home\Index3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %>

<%@ Import Namespace="MvcApplication1.Helpers" %>
<!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>Index3</title>
</head>
<body>
     <div>

          <% using (Html.BeginForm())
          { %>
               <%= Html.Label("firstName", "First Name:") %>    
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= Html.Label("lastName", "Last Name:") %>    
               <br />
               <%= Html.TextBox("lastName")%>

               <br /><br />
               <input type="submit" value="Register" />
          <% } %>
     </div>
</body>
</html>

Ringkasan

Dalam tutorial ini, Anda mempelajari dua metode untuk membuat Pembantu HTML kustom. Pertama, Anda mempelajari cara membuat Pembantu HTML kustom Label() dengan membuat metode statis yang mengembalikan string. Selanjutnya, Anda mempelajari cara membuat metode Pembantu HTML kustom Label() dengan membuat metode ekstensi pada HtmlHelper kelas .

Dalam tutorial ini, saya berfokus pada membangun metode Pembantu HTML yang sangat sederhana. Sadarilah bahwa Pembantu HTML bisa sesulit yang Anda inginkan. Anda dapat membuat Pembantu HTML yang merender konten kaya seperti tampilan pohon, menu, atau tabel data database.

SebelumnyaBerikutnya