ASP.NET MVC DERSLERİ ( 5.2 ) HTML HELPERS

HTML helper lar sayfanın html özelliklerini inşa etmeye yarayan metotlardır. Ayrıca URL ve AJAX için de helper lar vardır. Tüm bu html helper metotlarının amacı yazılımcı için kolaylık sağlamaktır.

Helper elementlerinin birçoğu Html helper dır. HTML anahtar kelimesi ile başlarlar ve Html çıktısı üretirler. Önceki makalede arama formunu html kodları ile yazmıştık, şimdi aynısını helper kullanarak yazalım:

@using (Html.BeginForm("Ara", "Home", FormMethod.Get)) {
    <input type="text" name="q" />
    <input type="submit" value="Ara" />
}

Html.BeginForm elementi Disposable özellik taşıdığından(IDisposable sınıfını implement etmesi), using ile birlikte kullanılınca form elemanı oluşturulur ve sonunda kapatılır. Yani <form> etiketi oluşturulur ve </form> etiketi ile bitirilir.

Aynı örneği using kelimesi kullanmadan yaparsak aşağıdaki gibi bir kod bloğu gereklidir.

@{Html.BeginForm("Ara", "Home", FormMethod.Get);}
    <input type="text" name="q" />
    <input type="submit" value="Ara" />
@{Html.EndForm();}

Tabi bu kadar detaya takılmaya da gerek yok, kolay olanı ve genel kullanımı olan ilk örnektir. Mvc projelerinde helper elemanları en büyük yardımcıdır.

Otomatik Şifreleme

Html helper elemanlarının otomatik şifreleme (encoding) özelliği vardır. Otomatik şifreleme XSS saldırılarına karşı alınmış bir önlemdir. Örneğin textarea helper için

@Html.TextArea("text", "hello <br/> world")

yukarıdaki kod içerisinde ikinci parametre, textarea için value niteliğini ifade eder. Form elemanı için kendimiz gömülü olarak html kodları yazmıştık, ama textarea elemanına parametre olarak gönderdik. Textarea için oluşan html çıktısı aşağıdaki gibidir.

<textarea cols="20" id="text" name="text" rows="2">
    hello &lt;br /&gt; world
</textarea>

gördüğünüz gibi parametre olarak gönderdiğimiz html kodları şifrelenmiştir.

Html Helper Elemanlarını İsteğe Göre Şekillendirmek

Html etiketleri içerisinde birçok nitelik var. Örneğin, target, href, class, id, name, ... gibi ve daha fazlası. Html hleper kullanırkende bunlar üzerinde tam kontrol sağlayabiliriz. Örneğin;

@using (Html.BeginForm("Ara", "Home", FormMethod.Get,
new { target = "_blank" }))
{
    <input type="text" name="q" />
    <input type="submit" value="Ara" />
}

gibi bir bir tanımlama yaparak formun yeni sayfada açılması gibi bir html niteliği kazandırmış oluruz. Kodun html çıktısı:

<form action="/Home/Ara" method="get" target="_blank">

Html helper elemanlarının darklı overloaded metodları vardır. Bu yazdığımız, htmlAttributes parametreleri içerisinde tanımlı olan metottur. msdn library sitesinden diğer overloaded metodları da görebilirsiniz.

Burada dikkat edilmesi gereken iki nokta var.

Birincisi, C# için anahtar kelime olan bazı html nitelikleri vardır. Örneğin class gibi. Bunu html helper elemanları içerisinde kullanırken başına @ işareti koymalıyız.

@using (Html.BeginForm("Ara", "Home", FormMethod.Get,
new { target = "_blank", @class="editForm" }))

İkincisi, tire (-) içeren isimler; bunlar C# için tanımlı değiller, fakat html helper elemanlarının çevrimi sırasında bunlar problem oluşturur.

@using (Html.BeginForm("Ara", "Home", FormMethod.Get,
new { target = "_blank", @class="editForm", data-validatable=true }))

yukarıdaki kodun çıktısı:

<form action="/Home/Ara" class="editForm" data-validatable="true"
method="get" target="_blank">

data niteliği ajax özellikeri için bir anahtar kelimedir. Şimdilik burayı anlatmıyoruz. Bu konuyu ileride anlatacağımız, ajax özellikleri başlığı altında anlatmaya çalışacağız.