ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 7 – HTML.Form ve Html.Helper’larının Kullanımı 2 (HTML Helpers)


asp-net-MVC3

Merhaba MVC Severler,

Önceki yazımda Html.Form’un ne olduğunu ve TextBox kontrolünü inceledik. Bu yazımda bir kaç tane daha kontrol görüp, bu kontrolleri nasıl kullanabiliriz onu inceleyeceğiz.

Sıkça Kullanılan Kontroller:

Kullanacağımız kontroller, HTML Helper’lardır ve HTML. dedikten sonra kullanabileceğiniz Helper lar gelmektedir. Ayrıca kendiniz de ekleyebilir, yeni bir Helper geliştirebilirsiniz.

Html.TextBox ve Html.TextArea

TextBox helper’i type’i text olan input render eder. Kullanıcıdan veri girişi almak için sıkça kullanılan helper’dır.

@Html.TextBox(string name, object value)

Kullanımı:

          @Html.TextBox("txtEmail", "Email Giriniz...")

Html Çıktısı:

         <input id="txtEmail" name="txtEmail" type="text"  value="Email Giriniz" />

TextArea helper’i, <textarea> tag’ine sahip ve multi-line text girişine izin veren bir element oluşturur.

Kullanımı:

         @Html.TextArea("txtMesaj", "Lütfen mesajınızı <b>yazınız.</b>")

Html Çıktısı:

        <textarea cols="20" id="txtMesaj" name="txtMesaj" rows="2"> Lütfen,&lt;br /&gt; mesajınızı yazınız.</textarea>

Html.CheckBox

CheckBox Helper’i, 2 input element render ettiği için benzersizdir.

@Html.CheckBox(string name, bool isChecked)

Kullanımı:

        @Html.CheckBox("cbEhliyetVarmi",false)

Html Çıktısı:

        <input id="cbEhliyetVarmi" name="cbEhliyetVarmi" type="checkbox" value="true" /><input name="cbEhliyetVarmi" type="hidden" value="false" />

Muhtemelen neden checkbox kontrole ek olarak birde hidden input render edildiğini merak ediyorsunuzdur.  Tarayıcının checkbox’ın sadece selected olma durumunda değeri submit etmesini sağlamak için iki input element render eder.

Html.RadioButton

Html.RadioButton‘lar, Genellikle tek bir sonuç için muhtemel seçenekleri sağlayan gruplanmış kontrollerdir. Örneğin kullanıcının spesifik bir evcil hayvan listesinden bir evcil hayvan seçmesi isterseniz, kullanıcının seçmesi için birden fazla radio kontrol kullanabilirsiniz. Radiobutton’ları gruplamak için, her birisine aynı ismi(name) vermelisiniz.

Kullanımı:

        @Html.RadioButton("pet", "Köpek",true)
        @Html.RadioButton("pet", "Kedi")
        @Html.RadioButton("pet", "Kaplumbağ")

Html Çıktısı:

        <input checked="checked" id="pet" name="pet" type="radio" value="Köpek" />
        <input id="pet" name="pet" type="radio" value="Kedi" />
        <input id="pet" name="pet" type="radio" value="Kaplumbağ" />

Html.DropDownList ve Html.ListBox

DropDownList Helper ve ListBox Helper ları,  ikiside <select> elementi render eder fakat DropDownList tekli seçime izin verirken, ListBox çoklu seçime izin vermektedir. ListBox’in multiple adında bir attribute’u vardır ve multiple diye set edilir bu yüzden çoklu seçim yapabilirsiniz.

@Html.DropDownList(string name, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes)

Kullanımı:

        @Html.DropDownList("ddlSehirler", (new List<SelectListItem>() { new SelectListItem { Text = "Ankara", Selected = false, Value = "06" }, new SelectListItem { Text = "İstanbul", Selected = true, Value = "34" }, new SelectListItem { Text = "İzmir", Selected = false, Value = "35" } }))
        @Html.ListBox("lbSehirler", (new List<SelectListItem>() { new SelectListItem { Text = "Ankara", Selected = false, Value = "06" }, new SelectListItem { Text = "İstanbul", Selected = true, Value = "34" }, new SelectListItem { Text = "İzmir", Selected = false, Value = "35" } }))

Html Çıktısı:

<select id=”ddlSehirler” name=”ddlSehirler”>
<option value=”06″>Ankara</option>
<option selected=”selected” value=”34″>İstanbul</option>
<option value=”35″>İzmir</option>
</select>

<select id=”lbSehirler” multiple=”multiple” name=”lbSehirler”><option value=”06″>Ankara</option>
<option selected=”selected” value=”34″>İstanbul</option>
<option value=”35″>İzmir</option>

Html.Label

Label Helper‘ı, geriye <label> elementi render eder. İlk parametre olarak  For Attribute’une atacağız değerdir. Bir radiobutton’a For diyerek expression verebilir ve kullanabilirsiniz.

@Html.Label(string expression,string text)

Kullanımı:

    @Html.Label("cbEhliyetVarmi", "Ehliyetiniz Varmı?") @Html.CheckBox("cbEhliyetVarmi")

Html Çıktısı:

<label for=”cbEhliyetVarmi”>Ehliyetiniz Varmı?</label>
<input id=”cbEhliyetVarmi” name=”cbEhliyetVarmi” type=”checkbox” value=”true” /><input name=”cbEhliyetVarmi” type=”hidden” value=”false” />

Html.Password

Password helper‘i, password alanı render eder. TextBox helper’ina benzer fakat post edilen değeri içerisinde tutmaz ve isminde anlaşıldığı gibi password maskeli olarak giriş yapılır.

Kullanımı:

@Html.Password("txtSifre")

Html Çıktısı:

<input id="txtSifre" name="txtSifre" type="password" value="" />

Karşınıza çıkan senaryolara göre diğer Helper’larıda kullanabilirsiniz.

Bir sonraki yazımda bu Helper’a Css ve Javascript nasıl eklenir? Attribute’lerine nasıl erişebiliriz ona bakacağız.

MVC ile kalın

, , , , , , , , , ,

  1. ASP.NET MVC Archived Buzz, Page 1
  2. ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 8 – Html Helper’larıyla Css, Javascript Kullanmak ve Html Helper’ların Attribute’lerini Kullanmak (Video Demo)) « Mahmut Can Sözeri
  3. ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 8 – Html Helper’larıyla Css, Javascript Kullanmak ve Html Helper’ların Attribute’lerini Kullanmak (Video Demo) « Mahmut Can Sözeri
  4. ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 15 – HTML Form İçerisindeki Öğelere Erişim, FormCollection, HTML.BeginForm « Mahmut Can Sözeri
  5. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) « Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s