Pada posting sebelumnya telah dibahas tentang dasar-dasar tag helper dan perbedaannya dengan HTML helper yang dapat dilihat pada dua link berikut ini:<\/p>\n
Elemen <input> pada tag HTML dapat digunakan untuk beberapa tipe input, yaitu:<\/p>\n
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.<\/p>\n
using<\/span> System;<\/pre>\n<\/p>\n
using<\/span> System.ComponentModel.DataAnnotations;<\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
namespace<\/span> EFCoreBookStore.Models<\/pre>\n<\/p>\n
{<\/pre>\n<\/p>\n
public<\/span> partial<\/span> class<\/span> ContohModel{<\/pre>\n<\/p>\n
[Display(Name =\"Contoh Text\"<\/span>)]<\/pre>\n<\/p>\n
public<\/span> String ContohText{set; get;}<\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
[Display(Name =\"Contoh Date Time\"<\/span>)]<\/pre>\n<\/p>\n
public<\/span> DateTime ContohDateTime{set; get;}<\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
[Display(Name =\"Contoh Number\"<\/span>)]<\/pre>\n<\/p>\n
public<\/span> Double ContohNumber{set; get;}<\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
[Display(Name =\"Contoh Boolean\"<\/span>)]<\/pre>\n<\/p>\n
public<\/span> Boolean ContohBoolean{set; get;}<\/pre>\n<\/p>\n
}<\/pre>\n<\/p>\n
}<\/pre>\n<\/p>\n<\/div>\n<\/div>\n
Kemudian berikut ini adalah contoh penggunaan tag helper input.<\/p>\n
\n\n@model EFCoreBookStore.Models.ContohModel<\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<<\/span>form<\/span> asp-controller<\/span>=\"Latihan\"<\/span> asp-action<\/span>=\"Template\"<\/span>><\/span><\/pre>\n<\/p>\n
<<\/span>label<\/span> asp-for<\/span>=\"ContohText\"<\/span>><\/<\/span>label<\/span>><\/span>:<\/pre>\n<\/p>\n
<<\/span>input<\/span> asp-for<\/span>=\"ContohText\"<\/span> \/><\/span><\/pre>\n<\/p>\n
<<\/span>br<\/span>\/><\/span><\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<<\/span>label<\/span> asp-for<\/span>=\"ContohDateTime\"<\/span>><\/<\/span>label<\/span>><\/span>:<\/pre>\n<\/p>\n
<<\/span>input<\/span> asp-for<\/span>=\"ContohDateTime\"<\/span> \/><\/span><\/pre>\n<\/p>\n
<<\/span>br<\/span>\/><\/span><\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<<\/span>label<\/span> asp-for<\/span>=\"ContohNumber\"<\/span>><\/<\/span>label<\/span>><\/span>:<\/pre>\n<\/p>\n
<<\/span>input<\/span> asp-for<\/span>=\"ContohNumber\"<\/span> \/><\/span><\/pre>\n<\/p>\n
<<\/span>br<\/span>\/><\/span><\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<<\/span>label<\/span> asp-for<\/span>=\"ContohBoolean\"<\/span>><\/<\/span>label<\/span>><\/span>:<\/pre>\n<\/p>\n
<<\/span>input<\/span> asp-for<\/span>=\"ContohBoolean\"<\/span> \/><\/span><\/pre>\n<\/p>\n
<<\/span>br<\/span>\/><\/span><\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<<\/span>button<\/span> type<\/span>=\"submit\"<\/span> class<\/span>=\"btn btn-success\"<\/span>><\/span>Submit<\/<\/span>button<\/span>><\/span><\/pre>\n<\/p>\n
<\/<\/span>form<\/span>><\/span><\/pre>\n<\/p>\n<\/div>\n<\/div>\n
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 \u201ctype\u201d pada tag <input> seperti umumnya ditemui pada tag HTML. Hasil dari render HTML contoh tag helper di atas adalah sebagai berikut.<\/p>\n
\n\n<<\/span>form<\/span> action<\/span>=\"\/Latihan\/Template\"<\/span> method<\/span>=\"post\"<\/span>><\/span><\/pre>\n<\/p>\n
<<\/span>label<\/span> for<\/span>=\"ContohText\"<\/span>><\/span>Contoh Text<\/<\/span>label<\/span>><\/span>:<\/pre>\n<\/p>\n
<<\/span>input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"ContohText\"<\/span> name<\/span>=\"ContohText\"<\/span> value<\/span>=\"\"<\/span> \/><\/span><\/pre>\n<\/p>\n
<<\/span>br<\/span>\/><\/span><\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<<\/span>label<\/span> for<\/span>=\"ContohDateTime\"<\/span>><\/span>Contoh Date Time<\/<\/span>label<\/span>><\/span>:<\/pre>\n<\/p>\n
<<\/span>input<\/span> type<\/span>=\"datetime\"<\/span> data-val<\/span>=\"true\"<\/span><\/pre>\n<\/p>\n
data-val-required<\/span>=\"The Contoh Date Time field is required.\"<\/span><\/pre>\n<\/p>\n
id<\/span>=\"ContohDateTime\"<\/span> name<\/span>=\"ContohDateTime\"<\/span> value<\/span>=\"\"<\/span> \/><\/span><\/pre>\n<\/p>\n
<<\/span>br<\/span>\/><\/span><\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<<\/span>label<\/span> for<\/span>=\"ContohNumber\"<\/span>><\/span>Contoh Number<\/<\/span>label<\/span>><\/span>:<\/pre>\n<\/p>\n
<<\/span>input<\/span> type<\/span>=\"text\"<\/span> data-val<\/span>=\"true\"<\/span><\/pre>\n<\/p>\n
data-val-number<\/span>=\"The field Contoh Number must be a number.\"<\/span><\/pre>\n<\/p>\n
data-val-required<\/span>=\"The Contoh Number field is required.\"<\/span><\/pre>\n<\/p>\n
id<\/span>=\"ContohNumber\"<\/span> name<\/span>=\"ContohNumber\"<\/span> value<\/span>=\"\"<\/span> \/><\/span><\/pre>\n<\/p>\n
<<\/span>br<\/span>\/><\/span><\/pre>\n<\/p>\n
<\/pre>\n<\/p>\n
<<\/span>label<\/span> for<\/span>=\"ContohBoolean\"<\/span>