Membuat Pembantu HTML Kustom (VB)

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 bersama 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.

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

Daftar 1 – Views\Home\Index.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" 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 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" />    
     <% End Using %>
     </div>
</body>
</html>

Metode Html.BeginForm() Helper digunakan untuk membuat tag HTML <form> pembuka dan penutupan. 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="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" 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 Bersama

Cara termampu untuk membuat Pembantu HTML baru adalah dengan membuat metode bersama 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.vb

Public Class LabelHelper
Public Shared Function Label(ByVal target As String, ByVal text As String) As String
     Return String.Format("<label for='{0}'>{1}</label>", target, text)
End Function
End Class

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 %> arahan yang mengimpor namespace Application1.Helpers.

Daftar 2 – Views\Home\Index2.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index2.aspx.vb" Inherits="MvcApplication1.Index2"%>
<%@ Import Namespace="MvcApplication1" %>
<!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" />
     <% End Using %>
     </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 yang HtmlHelper diwakili oleh properti Html tampilan.

Modul Visual Basic di Listing 3 menambahkan metode ekstensi bernama Label() ke HtmlHelper kelas . Ada beberapa hal yang harus Anda perhatikan tentang modul ini. Pertama, perhatikan bahwa modul dihiasi dengan <Extension()> atribut . Untuk menggunakan atribut ini, Anda harus mengimpor System.Runtime.CompilerServices namespace

Kedua, perhatikan bahwa parameter Label() pertama metode mewakili HtmlHelper kelas . Parameter pertama metode ekstensi menunjukkan kelas yang diperluas oleh metode ekstensi.

Daftar 3 – Helpers\LabelExtensions.vb

Imports System.Runtime.CompilerServices

Public Module LabelExtensions
     <Extension()> _
     Public Function Label(ByVal helper As HtmlHelper, ByVal target As String, ByVal text As String) As String
          Return String.Format("<label for='{0}'> {1}</label>", target, text)

     End Function
End Module

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).

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 tag labelnya<>.

Daftar 4 – Views\Home\Index3.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index3.aspx.vb" Inherits="MvcApplication1.Index3" %>

<%@ Import Namespace="MvcApplication1" %>
<!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" />    
     <% End Using%>
     </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 bersama 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.

Sebelumnya Berikutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-07-13