Asp.Net Mvc – Html Helper’ler (Asp.Net Mvc Yazı Dizisi – 16)

Önceki Yazı : Asp.Net Mvc – Controller ve View İşlemleri 3 (Asp.Net Mvc Yazı Dizisi – 15)

Merhaba Arkadaşlar,

Önceki makalelerimizde, geliştirdiğimiz blog uygulamasının, ana sayfasını bitirmiştik. Bu sayfayı tasarlarken çeşitli Partial View'ler kullanmıştık. Ayrıca liste halinde ki verileri aktarırken, döngüler oluşturup, html tagları ile verilerimizi, ekranda göstermiştik.

Bunların yanında birde, kullanabileceğimiz Html ve Web Helper'larımız mevcuttur. 

Helper : Asp.Net Mvc sisteminde, View içerisinde ki verileri göstermede kullanabildiğimiz ve Html olarak çıktı üreten hazır metodlardır.

Microsoft'un Framework içerisinde sunduğu Helper'lerin yanında, Web Helper'leri, ayrıca Paypal gibi firmalar tarafından üretilen, çeşitli Helper'ler da mevcuttur. Ayrıca kendiniz de, isteğinize özel Helper'lar geliştirme şansına sahipsiniz.

Html Helper'leri kullanırken, @Html. ile yazmaya başlamaktayız. .'dan sonra, kullanılabilecek çeşitli metodlar, IntelliSense tarafından listelenecektir.

Bu yazımızda bloğumuza biraz ara verip, Html Helper metodlarını isim sırasına göre kısaca inceleyelim.

Html.Action

Yazım Şekli : @Html.Action("Action ismi","Controller ismi")

Açıklama : Sayfa yüklendiğinde, Controller ismi kısmında yazılı olan Controller'in içerisinde ki, Action ismi kısmında belirtilen Action'u çağırır ve dönen sonucu ekrana yansıtır.

Örnek : @Html.Action("Index","Home")

Çıktı : Çağırılan metodun sonucu oluşan View içeriği.


Html.ActionLink

Yazım Şekli : 

@Html.ActionLink("Link yazısı","Action ismi","Controller ismi")

Açıklama :

Link olarak kullanılır. Link yazısı kısmına, görünecek metin, Controller ismi kısmına gidilecek Controller'in adı, Action ismi kısmına da çağırılacak olan Action metodun ismi yazılır.

Örnek : 

@Html.ActionLink("Ana Sayfa","Index","Home")

Çıktı (Html) : 

<a href="Home/Index">Ana Sayfa</a>

Çıktı (Görsel) : 

ActionLink çıktı


Html.BeginForm

Yazım Şekli : 

@Html.BeginForm("Action ismi","Controller ismi")

Açıklama : 

Üyelik girişi, iletişim formu gibi amaçlarla kullanılabilecek formlar oluşturmamızı sağlar. İçerisine çeşitli öğeler alabilir. Controller ismi kısmına, formun gönderileceği Action'un içinde bulunduğu Controller'in adı, Action ismi kısmına da formun gönderileceği Action metodun ismi yazılır.

Örnek : 

@using (@Html.BeginForm("YeniUyelik", "Uyelik"))
{
    @Html.Label("Ad : ")
    @Html.TextBox("ad")
    <br />
    @Html.CheckBox("Onaylı", true)
}

Çıktı (Html) : 

<form action="/Uyelik/YeniUyelik" method="post"><label for="Ad_:_">Ad : </label><input id="ad" name="ad" type="text" value="" data-cip-id="ad">    <br>
<input checked="checked" id="Onayl_" name="Onaylı" type="checkbox" value="true"><input name="Onaylı" type="hidden" value="false"></form>

Çıktı (Görsel) :

BeginForm çıktı


Html.CheckBox

Yazım Şekli : 

@Html.CheckBox("İsim","İşaretli mi")

Açıklama : 

Onay işlemlerinde, bir şeyin seçili olup olmamasını belirlemek için kullanılır. İsim kısmına, CheckBox'ın adı, İşaretli mi kısmına da true ya da false yazılır.

Örnek : 

@Html.CheckBox("Adresime E-posta gelsin",true)

Çıktı (Html) : 

<input checked="checked" id="Adresime_E-posta_gelsin" name="Adresime E-posta gelsin" type="checkbox" value="true"><input name="Adresime E-posta gelsin" type="hidden" value="false">

Çıktı (Görsel) : 

CheckBox çıktı


Html.DropDownList

Yazım Şekli :

 @Html.DropDownList("İsim","Liste")

Açıklama : 

Alta açılır listeler oluşturmak için kullanılır. İsim kısmına, herhangi bir isim, Liste kısmına da, listenin içinde gösterilecek bir veri listesi yüklenir.

Örnek : 

@Html.DropDownList("sehirler", new[] { new SelectListItem { Text = "İstanbul", Value = "34" }, new SelectListItem { Text = "Ankara", Value = "10" }, new SelectListItem { Text = "İzmir", Value = "35" } })

Çıktı (Html) : 

<select id="sehirler" name="sehirler" data-cip-id="cIPJQ342845639"><option value="34">İstanbul</option>
<option value="10">Ankara</option>
<option value="35">İzmir</option>
</select>

Çıktı (Görsel) :

DropDownList çıktı


Html.EndForm

Yazım Şekli :

@Html.EndForm()

Açıklama : 

@using ifadesi içerisinde sarmalanmadan, @Html.BeginForm ifadesi ile başlangıcı açılan, form elementini kapatır. @using ifadesi kullanıldıysa, zaten bu elemena ihtiyacç yoktur. Süslü parantez bittiği zaman, otomatik olarak kapanacaktır.

Örnek : 

@Html.EndForm()

Çıktı (Html) : 

Herhangi bir çıktısı yoktur.

Çıktı (Görsel) :

Herhangi bir çıktısı yoktur.


Html.Hidden

Yazım Şekli :

@Html.Hidden("İsim","Değer")

Açıklama : 

Verilerin, gizli olarak saklanabileceği elemenlar oluşturmak için kullanılır. İsim kısmına, herhangi bir isim, Veri kısmına da, saklanacak veri girilir. Yalnız şu unutulmamalıdır, veriler tarayıcıların, geliştirici araçları ile görüntülenebilir. Bu yüzden tam bir gizlilikten söz edilemez.

Örnek : 

@Html.Hidden("hiddenId","5")

Çıktı (Html) : 

<input id="hiddenId" name="hiddenId" type="hidden" value="5">

Çıktı (Görsel) :

Herhangi bir çıktısı yoktur.


Html.Label

Yazım Şekli :

@Html.Label("Tanımlayıcı eleman","Metin")

Açıklama : 

Bir eleman ile ilgili tanımlayıcı metin eklemeye yarayan elemandır. Tanımlayıcı eleman kısmına, açıklama için kullanılacak elemanın (TextBox,TextArea,RadioButton vs.) id'si, Metin kısmına da, metinsel açıklama yazılır. 

Örnek : 

@Html.Label("textBoxIsim","İsim : ")

Çıktı (Html) : 

<label for="textBoxIsim">İsim : </label>

Çıktı (Görsel) :

Label çıktı


Html.ListBox

Yazım Şekli :

@Html.ListBox("İsim","Liste")

Açıklama : 

Listeler oluşturmak için kullanılır. İsim kısmına, herhangi bir isim, Liste kısmına da, listenin içinde gösterilecek bir veri listesi yüklenir.

Örnek : 

@Html.ListBox("sehirler", new[] { new SelectListItem { Text = "İstanbul", Value = "34" }, new SelectListItem { Text = "Ankara", Value = "10" }, new SelectListItem { Text = "İzmir", Value = "35" } })

Çıktı (Html) : 

<select id="sehirler" multiple="multiple" name="sehirler" data-cip-id="cIPJQ342845639"><option value="34">İstanbul</option>
<option value="10">Ankara</option>
<option value="35">İzmir</option>
</select>

Çıktı (Görsel) :

ListBox çıktı


Html.Password

Yazım Şekli :

@Html.Password("İsim","Şifre")

Açıklama : 

İçerisine girilen elemanları, şifreleyerek göstermeye yarayan bir elemandır. Şifre girişlerinde bu eleman kullanılır. İsim kısmına, elemanın ismi, Şifre kısmına da, şifreli eleman yazılır. Şifre kısmı kullanıcı tarafından girileceği için, çoğu zaman boş olarak gönderilir.

Örnek : 

@Html.Password("paswSifre","123465")

Çıktı (Html) : 

<input id="paswSifre" name="paswSifre" value="123465" type="password">

Çıktı (Görsel) :

Password çıktı


Html.RadioButton

Yazım Şekli :

@Html.RadioButton("İsim","Değer","İşaretli mi")

Açıklama : 

İçerisine girilen elemanı, seçenek olarak işaretleyebilmemize yarayan elemandır. İsim kısmına, elemanın ismi, Değer kısmına, elemana atanacak değer, İşaretli mi kısmına da, varsayılan olarak, elemanın işaretli olup olmamasına göre true ya da false atanır.

Örnek : 

@Html.RadioButton("rdbErkek","erkek",true)

Çıktı (Html) : 

<input checked="checked" id="rdbErkek" name="rdbErkek" type="radio" value="erkek">

Çıktı (Görsel) :

RadioButton çıktı


Html.TextArea

Yazım Şekli :

@Html.TextArea("İsim","Değer",new{cols="Sütun sayısı",rows="Satır sayısı"})

Açıklama : 

Birden fazla sütundan oluşan, metin kutuları oluşturmak için kullanılır. Genellikle adres vb. bilgi girişleri için kullanılabilir. İsim kısmına, elemanın ismi, Değer kısmına da, veri yazılır. Değer kısmı, çoğunlukla kullanıcı tarafından girileceği için, genellikle içi boş olarak gönderilir. Tercihe bağlı olarak cols ve rows kullanılabilir. cols, sütun sayısını, rows da, satır sayısını ifade eder.

Örnek : 

@Html.TextArea("txtAreaAdres", "İstanbul", new { cols=70,rows=10})

Çıktı (Html) : 

<textarea cols="70" id="txtAreaAdres" name="txtAreaAdres" rows="10">İstanbul</textarea>

Çıktı (Görsel) :

TextArea çıktı


Html.TextBox

Yazım Şekli :

@Html.TextBox("İsim","Değer")

Açıklama : 

İçerisine girilen elemanları, metin kutusu içerisinde gösteren bir elemandır. İsim kısmına, elemanın ismi, Değer kısmına da, veri yazılır. Değer kısmı, çoğunlukla kullanıcı tarafından girileceği için, genellikle içi boş olarak gönderilir.

Örnek : 

@Html.TextBox("txtIsim","Abdurrahman")

Çıktı (Html) : 

<input id="txtIsim" name="txtIsim" type="text" value="Abdurrahman" data-cip-id="txtIsim">

Çıktı (Görsel) :

TextBox çıktı


Html.ValidationMessage

Yazım Şekli :

@Html.ValidationMessage("Model","Hata mesajı")

Açıklama : 

Bağlı bulunduğu elemanın, doğrulama kriterlerini geçmemesi durumunda, kullanıcıyı bilgilendirmek için bir hata mesajı görüntüler. Model kısmına, doğrulama yapılacak model, Hata mesajı kısmına da, doğrulamanın geçmemesi durumunda ekranda gösterilecek mesaj yazılır.

Örnek : 

@Html.ValidationMessage("kullanici","İsim boş geçilemez")


Html.ValidationSummary

Yazım Şekli :

@Html.ValidationSummary("Hata Mesajı")

Açıklama : 

İçerisinde bulunduğu formda, doğrulama hataları meydana gelmesi halinde, liste halinde tüm hataları gösterir.

Bir yazımızın daha sonuna geldik. Sonraki dersimizde, Web Helper'ları kısaca inceliyor olacağız.

Hepinize kolaylıklar diliyorum.