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,<br /> 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
Mahmut Can Sozeri 