ASP.NET Core: HTML Helper vs Tag Helper
Bagi yang telah lama bersama dengan ASP.NET MVC maka pasti sudah mengenal dan menggunakan HTML Helper. HTML Helper digunakan untuk membuat hyperlink, membuat form dan item-item input di dalamnya dan lain-lain. Secara fungsi HTML Helper memudahkan web developer untuk menampilkan “isi” model pada halaman view. Tetapi bagi web developer yang juga memiliki jika web designer, keberadaan HTML Helper adalah hal yang menyakitkan mata karena merusak “pemandangan” saat sedang bekerja pada komponen view. Kok bisa? Kenapa?
Coba bayangkan untuk membuat hyperlink maka akan ditemui baris berikut ini pada halaman web.
@Html.ActionLink("Book Categories", "Index", "Category")
HTML Helper di atas akan dirender menjadi tag HTML sebagai berikut.
<a href="/Category">Book Categories</a>
Dan jika ingin menggunakan style CSS pada link tersebut maka akan dilakukan dengan cara berikut ini.
@Html.TextBoxFor(model=>model.Name, new{@class = "form-control"})
HTML Helper di atas akan dirender menjadi tag HTML berikut ini.
<input class="form-control" id="Name" name="Name" type="text" value="" />
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. Dan ketika suatu saat jika ada perubahan atau perbaikan design maka web designer akan kesulitan memperbaiki karena HTML Helper sudah “merusak” design yang ada sehingga web designer akan susah bekerja melakukan perubahan dan perbaikan.
Nah karena hal-hal di atas akhirnya diperkenalkan Tag Helper. Bagaimana Tag Helper bekerja? Untuk HTML Helper @Html.ActionLink dapat diganti dengan Tag Helper berikut ini.
<a asp-controller="Category" asp-action="Index">Book Categories</a>
Sedangkan untuk HTML Helper @Html.TextBoxFor dapat diganti dengan Tag Helper berikut ini.
<input asp-for="Name" class="form-control" />
Bagaimana? Terlihat lebih enak dipandang mata bukan? :)
Contoh lain dapat dilihat pada kode di bawah ini. Kode berikut ini adalah form login yang dibuat dengan HTML Helper.
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { role = "form" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true, "", new { @class = "text-warning" })
<div class=”form-group”>
<div class=”row-group”>
@Html.LabelFor(m => m.UserName, new { @class = “col-md-2 control-label” })
<div class=”col-md-10″>
@Html.TextBoxFor(m => m.UserName, new { @class = “form-control” })
@Html.ValidationMessageFor(m => m.UserName, “”, new { @class = “text-danger” })
</div>
</div>
</div>
<div class=”form-group”>
<div class=”row-group”>
@Html.LabelFor(m => m.Password, new { @class = “col-md-2 control-label” })
<div class=”col-md-10″>
@Html.PasswordFor(m => m.Password, new { @class = “form-control” })
@Html.ValidationMessageFor(m => m.Password, “”, new { @class = “text-danger” })
</div>
</div>
</div>
<div class=”form-group”>
<div class=”row-group”>
<div class=”col-md-offset-2 col-md-2″>
<input type=”submit” value=”Log in” class=”btn btn-primary” />
</div>
</div>
</div>
}
Sedangkan kode di bawah ini adalah contoh form login yang dibuat dengan Tag Helper.
<form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewBag.ReturnUrl" method="post" class="form-horizontal" role="form"> <div asp-validation-summary="All" class="text-warning"></div> <div class="form-group"> <label asp-for="UserName" class="col-md-2 control-label"></label> <div class="col-md-10"> <input asp-for="UserName" class="form-control" /> <span asp-validation-for="UserName" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="Password" class="col-md-2 control-label"></label> <div class="col-md-10"> <input asp-for="Password" class="form-control" /> <span asp-validation-for="Password" class="text-danger"></span> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Log in" class="btn btn-default" /> </div> </div> </form>
Dari kedua contoh kode di atas maka dapat dilihat jika Tag Helper dapat digunakan untuk menggantikan HTML Helper untuk digunakan pada pembuatan komponen view.
Got anything to say? Go ahead and leave a comment!
Recent Posts
- Menginstall Google Chrome Extension di Microsoft Edge
- Mudah Membuat Visualisasi Data Positif dan Kematian Akibat COVID-19 dengan Power BI #StayAtHome
- Read at Home: 3 Free Ebooks
- Memulai Membangun Aplikasi Desktop dengan WinForms .NET Core 3
- Seri Belajar ASP.NET: Membangun Aplikasi Real-Time dengan ASP.NET Core SignalR
- Seri Belajar Data Science: Pengenalan Azure Machine Learning Studio
- Azure Machine Learning Studio Workshop at Lampung University
Recent Comments
- ASP.NET MVC 5: Prepare Model for Data Access Layer on
- Seri Belajar ASP.NET : ASP.NET MVC Untuk Pemula on
- Seri Belajar ASP.NET : ASP.NET MVC Untuk Pemula on
- Seri Belajar ASP.NET : ASP.NET MVC Untuk Pemula on
- Seri Belajar ASP.NET : ASP.NET MVC Untuk Pemula on
- Kyodai, cara mudah dan cepat mengirim uang dari Jepang on
- Kyodai, cara mudah dan cepat mengirim uang dari Jepang on
Fotolia
ShutterStock
Archives
- July 2020 (1)
- April 2020 (1)
- March 2020 (1)
- June 2019 (1)
- January 2019 (2)
- November 2018 (1)
- March 2018 (6)
- December 2017 (1)
- October 2017 (1)
- August 2017 (1)
- July 2017 (2)
- April 2017 (1)
- March 2017 (5)
- February 2017 (8)
- January 2017 (4)
- December 2016 (1)
- October 2016 (2)
- August 2016 (4)
- July 2016 (1)
- June 2016 (1)
- May 2016 (2)
- April 2016 (5)
- February 2016 (10)
- January 2016 (5)
- December 2015 (2)
- October 2015 (1)
- September 2015 (3)
- August 2015 (1)
- July 2015 (2)
- June 2015 (1)
- May 2015 (1)
- April 2015 (3)
- January 2015 (4)
- December 2014 (7)
- November 2014 (3)
- September 2014 (3)
- August 2014 (1)
- June 2014 (1)
- May 2014 (2)
- April 2014 (6)
- March 2014 (10)
- February 2014 (4)
- January 2014 (3)
- December 2013 (3)
- October 2013 (1)
- September 2013 (3)
- August 2013 (1)
- June 2013 (2)
- May 2013 (1)
- April 2013 (3)
- March 2013 (6)
- February 2013 (2)
- January 2013 (3)
- November 2012 (4)
- October 2012 (2)
- May 2012 (2)
- March 2012 (1)
- March 2011 (1)
- February 2011 (1)