reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

ASP.NET Core: HTML Helper vs Tag Helper

Mar 10, 2017 by     No Comments    Posted under: I am Software Developer

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.

Tags: ,

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts

Recent Comments

Fotolia

Fotolia

ShutterStock

Archives


Fotolia
© 2013 eSevens
%d bloggers like this: