{"id":3271,"date":"2017-03-10T14:31:12","date_gmt":"2017-03-10T14:31:12","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=3271"},"modified":"2017-03-10T14:33:04","modified_gmt":"2017-03-10T14:33:04","slug":"asp-net-core-html-helper-vs-tag-helper","status":"publish","type":"post","link":"http:\/\/www.rezafaisal.net\/?p=3271","title":{"rendered":"ASP.NET Core: HTML Helper vs Tag Helper"},"content":{"rendered":"

Bagi yang telah lama bersama dengan ASP.NET MVC maka pasti sudah mengenal dan menggunakan HTML Helper.\u00a0 HTML Helper digunakan untuk membuat hyperlink, membuat form dan item-item input di dalamnya dan lain-lain.\u00a0 Secara fungsi HTML Helper memudahkan web developer untuk menampilkan \u201cisi\u201d model pada halaman view.\u00a0 Tetapi bagi web developer yang juga memiliki jika web designer, keberadaan HTML Helper adalah hal yang menyakitkan mata karena merusak \u201cpemandangan\u201d saat sedang bekerja pada komponen view. Kok bisa? Kenapa?<\/p>\n

Coba bayangkan untuk membuat hyperlink maka akan ditemui baris berikut ini pada halaman web.<\/p>\n

\n
@Html.ActionLink(\"Book Categories\"<\/span>, \"Index\"<\/span>, \"Category\"<\/span>)<\/pre>\n
 <\/p>\n<\/div>\n
HTML Helper di atas akan dirender menjadi tag HTML sebagai berikut.<\/p>\n
\n
<<\/span>a<\/span> href<\/span>=\"\/Category\"<\/span>><\/span>Book Categories<\/<\/span>a<\/span>><\/span><\/pre>\n
 <\/p>\n<\/div>\n
Dan jika ingin menggunakan style CSS pada link tersebut maka akan dilakukan dengan cara berikut ini.<\/p>\n
\n
@Html.TextBoxFor(model=>model.Name, new<\/span>{@class<\/span> = \"form-control\"<\/span>})<\/pre>\n
 <\/p>\n<\/div>\n
HTML Helper di atas akan dirender menjadi tag HTML berikut ini.<\/p>\n
\n
<<\/span>input<\/span> class<\/span>=\"form-control\"<\/span> id<\/span>=\"Name\"<\/span> name<\/span>=\"Name\"<\/span> type<\/span>=\"text\"<\/span> value<\/span>=\"\"<\/span> \/><\/span><\/pre>\n
 <\/p>\n<\/div>\n
Dari kedua contoh di atas, dapat dibayangkan hasil halaman web yang dibuat oleh web designer akan mengalami banyak perubahan karena tag-tag HTML yang sudah dibuat harus diganti dengan HTML Helper.\u00a0 Dan ketika suatu saat jika ada perubahan atau perbaikan design maka web designer akan kesulitan memperbaiki karena HTML Helper sudah \u201cmerusak\u201d design yang ada sehingga web designer akan susah bekerja melakukan perubahan dan perbaikan.<\/p>\n
Nah karena hal-hal di atas akhirnya diperkenalkan Tag Helper.\u00a0 Bagaimana Tag Helper bekerja? Untuk HTML Helper @Html.ActionLink dapat diganti dengan Tag Helper berikut ini.<\/p>\n
\n
<<\/span>a<\/span> asp-controller<\/span>=\"Category\"<\/span> asp-action<\/span>=\"Index\"<\/span>><\/span>Book Categories<\/<\/span>a<\/span>><\/span><\/pre>\n
 <\/p>\n<\/div>\n
Sedangkan untuk HTML Helper @Html.TextBoxFor dapat diganti dengan Tag Helper berikut ini.<\/p>\n
\n
<<\/span>input<\/span> asp-for<\/span>=\"Name\"<\/span> class<\/span>=\"form-control\"<\/span> \/><\/span><\/pre>\n
 <\/p>\n<\/div>\n
Bagaimana? Terlihat lebih enak dipandang mata bukan? :)<\/p>\n
Contoh lain dapat dilihat pada kode di bawah ini.\u00a0 Kode berikut ini adalah form login yang dibuat dengan HTML Helper.<\/p>\n
\n
@using (Html.BeginForm(\"Login\", \"Account\", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { role = \"form\" }))\r\n{\r\n    @Html.AntiForgeryToken()\r\n    @Html.ValidationSummary(true, \"\", new { @class = \"text-warning\" })<\/pre>\n
<<\/span>div<\/span> class<\/span>=”form-group”<\/span>><\/span>
\n<<\/span>div<\/span> class<\/span>=”row-group”<\/span>><\/span>
\n@Html.LabelFor(m =><\/span> m.UserName, new { @class = “col-md-2 control-label” })
\n<<\/span>div<\/span> class<\/span>=”col-md-10″<\/span>><\/span>
\n@Html.TextBoxFor(m =><\/span> m.UserName, new { @class = “form-control” })
\n@Html.ValidationMessageFor(m =><\/span> m.UserName, “”, new { @class = “text-danger” })
\n<\/<\/span>div<\/span>><\/span>
\n<\/<\/span>div<\/span>><\/span>
\n<\/<\/span>div<\/span>><\/span>
\n<<\/span>div<\/span> class<\/span>=”form-group”<\/span>><\/span>
\n<<\/span>div<\/span> class<\/span>=”row-group”<\/span>><\/span>
\n@Html.LabelFor(m =><\/span> m.Password, new { @class = “col-md-2 control-label” })
\n<<\/span>div<\/span> class<\/span>=”col-md-10″<\/span>><\/span>
\n@Html.PasswordFor(m =><\/span> m.Password, new { @class = “form-control” })
\n@Html.ValidationMessageFor(m =><\/span> m.Password, “”, new { @class = “text-danger” })
\n<\/<\/span>div<\/span>><\/span>
\n<\/<\/span>div<\/span>><\/span>
\n<\/<\/span>div<\/span>><\/span><\/p>\n
<<\/span>div<\/span> class<\/span>=”form-group”<\/span>><\/span>
\n<<\/span>div<\/span> class<\/span>=”row-group”<\/span>><\/span>
\n<<\/span>div<\/span> class<\/span>=”col-md-offset-2 col-md-2″<\/span>><\/span>
\n<<\/span>input<\/span> type<\/span>=”submit”<\/span> value<\/span>=”Log in”<\/span> class<\/span>=”btn btn-primary”<\/span> \/><\/span>
\n<\/<\/span>div<\/span>><\/span>
\n<\/<\/span>div<\/span>><\/span>
\n<\/<\/span>div<\/span>><\/span>
\n}<\/p>\n
 <\/p>\n<\/div>\n
Sedangkan kode di bawah ini adalah contoh form login yang dibuat dengan Tag Helper.<\/p>\n
\n
<<\/span>form<\/span> asp-controller<\/span>=\"Account\"<\/span> asp-action<\/span>=\"Login\"<\/span> asp-route-returnurl<\/span>=\"@ViewBag.ReturnUrl\"<\/span> method<\/span>=\"post\"<\/span> class<\/span>=\"form-horizontal\"<\/span> role<\/span>=\"form\"<\/span>><\/span>\r\n    <<\/span>div<\/span> asp-validation-summary<\/span>=\"All\"<\/span> class<\/span>=\"text-warning\"<\/span>><\/<\/span>div<\/span>><\/span>\r\n    <<\/span>div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n        <<\/span>label<\/span> asp-for<\/span>=\"UserName\"<\/span> class<\/span>=\"col-md-2 control-label\"<\/span>><\/<\/span>label<\/span>><\/span>\r\n        <<\/span>div<\/span> class<\/span>=\"col-md-10\"<\/span>><\/span>\r\n            <<\/span>input<\/span> asp-for<\/span>=\"UserName\"<\/span> class<\/span>=\"form-control\"<\/span> \/><\/span>\r\n            <<\/span>span<\/span> asp-validation-for<\/span>=\"UserName\"<\/span> class<\/span>=\"text-danger\"<\/span>><\/<\/span>span<\/span>><\/span>\r\n        <\/<\/span>div<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n    <<\/span>div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n        <<\/span>label<\/span> asp-for<\/span>=\"Password\"<\/span> class<\/span>=\"col-md-2 control-label\"<\/span>><\/<\/span>label<\/span>><\/span>\r\n        <<\/span>div<\/span> class<\/span>=\"col-md-10\"<\/span>><\/span>\r\n            <<\/span>input<\/span> asp-for<\/span>=\"Password\"<\/span> class<\/span>=\"form-control\"<\/span> \/><\/span>\r\n            <<\/span>span<\/span> asp-validation-for<\/span>=\"Password\"<\/span> class<\/span>=\"text-danger\"<\/span>><\/<\/span>span<\/span>><\/span>\r\n        <\/<\/span>div<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n    <<\/span>div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n        <<\/span>div<\/span> class<\/span>=\"col-md-offset-2 col-md-10\"<\/span>><\/span>\r\n            <<\/span>input<\/span> type<\/span>=\"submit\"<\/span> value<\/span>=\"Log in\"<\/span> class<\/span>=\"btn btn-default\"<\/span> \/><\/span>\r\n        <\/<\/span>div<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n<\/<\/span>form<\/span>><\/span><\/pre>\n
 <\/p>\n<\/div>\n
Dari kedua contoh kode di atas maka dapat dilihat jika Tag Helper dapat digunakan untuk menggantikan HTML Helper untuk digunakan pada pembuatan komponen view.<\/p>\n","protected":false},"excerpt":{"rendered":"
Bagi yang telah lama bersama dengan ASP.NET MVC maka pasti sudah mengenal dan menggunakan HTML Helper.\u00a0 HTML Helper digunakan untuk membuat hyperlink, membuat form dan item-item input di dalamnya dan lain-lain.\u00a0 Secara fungsi HTML Helper memudahkan web developer untuk menampilkan…<\/p>\n","protected":false},"author":1,"featured_media":3269,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[68,160],"class_list":["post-3271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-asp-net","tag-asp-net-core"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2017\/03\/Capture.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-QL","_links":{"self":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3271"}],"version-history":[{"count":2,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3271\/revisions"}],"predecessor-version":[{"id":3273,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3271\/revisions\/3273"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/3269"}],"wp:attachment":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3271"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}