Seperti disebutkan di atas keberadaan tag helper dapat menjadi cara alternatif untuk membuat halaman view. Untuk aplikasi EFCoreBookStore akan menggunakan menggunakan tag helper pada setiap halaman view.
Secara umum fungsi HTML helper dan tag helper adalah sama, yaitu digunakan untuk membuat link, label, display, form dan lain-lain. Namun dengan cara yang berbeda. Berikut ini adalah penjelasan cara menggunaan tag helper dan contoh-contohnya terkait dengan pembangunan aplikasi EFCoreBookStore.
Persiapan
Untuk menggunakan tag helper pada halaman view, maka harus ditambahkan baris berikut ini di baris awal halaman tersebut.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Jika ingin secara otomatis seluruh halaman view menggunakan ini maka perlu dibuat file _ViewImports.cshtml yang disimpan pada folder Views. Dan isi dari file ini adalah baris deklarasi di atas.
Link
Berikut ini adalah tag HTML yang digunakan untuk membuat link.
<a href="~/Category/Create" class="style1"> Add Data
</a>
Atau untuk link image digunakan tag HTML seperti berikut.
<a href="~/Category/Create" class="style1"> <img src="~/images/button.jpg">
</a>
Dengan menggunakan tag helper maka kedua tag HTML di atas dapat ditulis dengan sintaks berikut ini.
<a asp-controller="controller_name" asp-action="action_name" >text</a>
Dari sintaks di atas dapat dilihat bahwa tag helper tetap menggunakan tag HTML sebagai dasar. Yang membedakan dengan tag HTML biasa adalah pada atribut-atribut yang hanya dimiliki oleh tag helper yaitu:
- asp-controller, atribut yang bernilai nama controller. - asp-action, atribut yang bernilai nama action.
131 Sehingga kedua tag HTML di atas dapat dengan mudah diubah menjadi tag helper dengan cara di bawah ini.
<a asp-controller="Category" asp-action="Create" class="style1">Test</a> <a href="~/Category/Create" class="style1">
<img src="~/images/button.jpg"> </a>
Dengan menggunakan tag helper, elemen HTML dapat memiliki gabungan atribut-atribut HTML dan atribut-atribut tag helper.
Label
Sintaks Tag Helper untuk label adalah sebagai berikut.
<label asp-for="property_name"></label>
Keterangan:
- property_name, nama property dari class model yang akan ditampilkan oleh elemen label.
Berikut adalah contoh penggunaan tag helper label.
@model EFCoreBookStore.Models.Author <label asp-for="Name"></label>
Tag helper di atas akan dirender menjadi tag HTML lengkap di bawah ini.
<label for="Name">Author’s Name</label>
Form
Untuk membuat elemen <form> menjadi tag helper dengan menggunakan sintaks berikut ini.
<form asp-controller="controller_name" asp-action="action_name" asp-anti-forgery="false/true" asp-route-returnurl="url"> . . . </form> Keterangan:
- controller_name, nama class controller. - action_name, nama method action.
- asp-anti-forgery, opsi penggunaan anti forgery. - url, adalah url redirect untuk kembali.
Atribut-atribut di atas tidak seluruhnya harus digunakan. Implementasinya dapat dilihat pada contoh di bawah ini.
<form asp-controller="Category" asp-action="Create"> </form>
Hasilnya render adalah sebagai berikut.
<form action="/Category/Create" method="post"> </form>
132
Input
Elemen <input> pada tag HTML dapat digunakan untuk beberapa tipe input, yaitu: - Text untuk input teks.
- Radio button, tipe ini digunakan untuk memilih sebuah nilai dari beberapa pilihan pilihan nilai yang tersedia.
- Check box bentuk ini digunakan digunakan untuk memilih lebih dari satu nilai dari beberapa pilihan nilai yang tersedia.
- File, tipe ini digunakan untuk memilih file yang akan diupload.
Tag helper <input> memiliki kemampuan untuk menentukan tipe input secara otomatis berdasarkan tipe data dari property pada class model. Sebagai contoh dimiliki class model berikut ini. ContohModel.cs using System; using System.ComponentModel.DataAnnotations; namespace EFCoreBookStore.Models {
public partial class ContohModel{ [Display(Name ="Contoh Text")] public String ContohText{set; get;} [Display(Name ="Contoh Date Time")] public DateTime ContohDateTime{set; get;} [Display(Name ="Contoh Number")]
public Double ContohNumber{set; get;} [Display(Name ="Contoh Boolean")] public Boolean ContohBoolean{set; get;} }
}
Kemudian berikut ini adalah contoh penggunaan tag helper input.
@model EFCoreBookStore.Models.ContohModel
<form asp-controller="Latihan" asp-action="Template"> <label asp-for="ContohText"></label>: <input asp-for="ContohText" /> <br/> <label asp-for="ContohDateTime"></label>: <input asp-for="ContohDateTime" /> <br/> <label asp-for="ContohNumber"></label>: <input asp-for="ContohNumber" /> <br/> <label asp-for="ContohBoolean"></label>: <input asp-for="ContohBoolean" /> <br/>
<button type="submit" class="btn btn-success">Submit</button> </form>
Pada tag helper input digunakan atribut asp-for untuk menentukan property class model yang ditangani oleh tag helper. Dari contoh di atas dapat dilihat tidak ada penentuan nilai untuk atribut “type” pada tag <input> seperti umumnya ditemui pada tag HTML. Hasil dari render HTML contoh tag helper di atas adalah sebagai berikut.
133
<form action="/Latihan/Template" method="post"> <label for="ContohText">Contoh Text</label>:
<input type="text" id="ContohText" name="ContohText" value="" /> <br/>
<label for="ContohDateTime">Contoh Date Time</label>: <input type="datetime" data-val="true"
data-val-required="The Contoh Date Time field is required." id="ContohDateTime" name="ContohDateTime" value="" />
<br/>
<label for="ContohNumber">Contoh Number</label>: <input type="text" data-val="true"
data-val-number="The field Contoh Number must be a number." data-val-required="The Contoh Number field is required." id="ContohNumber" name="ContohNumber" value="" />
<br/>
<label for="ContohBoolean">Contoh Boolean</label>: <input data-val="true"
data-val-required="The Contoh Boolean field is required." id="ContohBoolean" name="ContohBoolean" type="checkbox" value="true" />
<br/>
<button type="submit" class="btn btn-success">Submit</button> </form>
Dari hasil render di atas dapat dilihat secara otomatis telah ditambahkan atribut-atribut pada setiap elemen input sesuai dengan tipe datanya.
Tag helper input juga dapat membaca atribut pada setiap property pada class model untuk menentukan tipe input yang akan digunakan. Berikut ini adalah contoh model yang menggunakan atribut untuk menentukan tipe data untuk property.
ContohAtributModel.cs using System;
using System.ComponentModel.DataAnnotations; namespace EFCoreBookStore.Models
{
public partial class ContohAtributModel{ [Display(Name ="Contoh Email")] [EmailAddressAttribute]
public String ContohEmail{set; get;} [Display(Name ="Contoh URL")]
[UrlAttribute]
public String ContohUrl{set; get;} [Display(Name ="Contoh Phone")] [PhoneAttribute]
public String ContohPhone{set; get;} [Display(Name ="Contoh Password")] [DataType(DataType.Password)]
public String ContohPassword{set; get;} [Display(Name ="Contoh Date")]
[DataType(DataType.Date)]
public DateTime ContohDate{set; get;} [Display(Name ="Contoh Time")]
[DataType(DataType.Time)]
public DateTime ContohTime{set; get;} }
134
}
Dan berikut ini adalah contoh penggunaan tag helper input untuk class model di atas.
@model EFCoreBookStore.Models.ContohAtributModel <form asp-controller="Latihan" asp-action="Template"> <label asp-for="ContohEmail"></label>: <input asp-for="ContohEmail" /> <br/> <label asp-for="ContohUrl"></label>: <input asp-for="ContohUrl" /> <br/> <label asp-for="ContohPhone"></label>: <input asp-for="ContohPhone" /> <br/> <label asp-for="ContohPassword"></label>: <input asp-for="ContohPassword" /> <br/> <label asp-for="ContohDate"></label>: <input asp-for="ContohDate" /> <br/> <label asp-for="ContohTime"></label>: <input asp-for="ContohTime" /> <br/>
<button type="submit" class="btn btn-success">Submit</button> </form>
Kode di atas akan menghasilkan antarmuka seperti pada gambar di bawah ini.