WikiTurk
Editor Login | Register
Ekle

> Bilgisayar > Web Programlama

Huzur-uKalb
(Date : 21.11.2016 16:21:10)


Asp.Net Mvc Html Helpers





Html Helpers
Asp.Net Mvc de bazı Html kodlarını Html Helper metodlarıyla ekleyebiliriz.Bu metodları kullanmak zorunda değiliz fakat bilmemiz iyi olur diye düşünmekteyim.Kendimiz kullanmasak bile bir başkasının yazdığı kodu incelememiz gerektiğinde bunlarla karşılaşabiliriz.Konuda anlattığım bazı metodlar daha fazla parametreler içermektedir.Ben belli parametreleri konuya dahil ettim.Birde konuda hazır helper metodlarını inceledik fakat istersek kendi metodlarımızı da oluşturabilmekteyiz.

ActionLink
Link oluşturma işlemleri için kullanılır.Html de <a> etiketinin karşılığıdır
Örnek Kullanım
@Html.ActionLink("Telefonları İncele", "Telefon", "Urunler")

Burada ilk parametreye kullanıcının görmesini istediğimiz mesajı yazdık.İkinci parametreye çalışacak action adını yazık.Üçüncü parametreye ise gidilecek controllerin adını yazdık.Sitenin kaynak kodlarına baktığımızda ise şu şekilde gözükecektir
<a href= "/Urunler/Telefon">Telefonları İncele</a>

BeginForm
Form oluşturma işlemleri için kullanılır.Html de <form> etiketini BeginForm ile oluşturabiliriz.
Örnek Kullanım
@using (Html.BeginForm("Giris", "Uye", FormMethod.Post))
{
}

Uye controllerinin Giris actionına post metodunu kullanarak göndermesini söyledik.Örnekte using kullanarak yaptım fakat using ile kullanılması zorunlu değildir.Kaynak kodlarına baktığımızda şu şekilde görünecektir.
<form action="/Uye/Giris" method="post"></form>

Label
Genellikle form elemanlarının önüne bilgi vermek amacı ile kullanılır.Html de <label> etiketinin karşılığıdır
Örnek Kullanım
@Html.Label("TextEmail", "Email Adresiniz:")

Kaynak kodlarda çıktısı
<label for="TextEmail"> Email Adresiniz:</label>

TextBox
Metin kutusu eklemek için kullanılır.Html de <input type=”text”> etiketini bu helper ile oluşturabiliriz
Örnek kullanım
@Html.TextBox("KullaniciAdi", "Kullanıcı Adınızı Giriniz")

İlk parametreye name ikinci parametreye ise value değerlerini yazdık
Kaynak kodlarda çıktısı
<input id="KullaniciAdi" name="KullaniciAdi" type="text" value="Kullanıcı Adınızı Giriniz">

Textarea
Çok satırlı metin kutusu eklemek için kullanılır.Html de <textarea> etiketini bu helper ile oluşturabiliriz.
Örnek Kullanım
@Html.Textarea("Mesaj", "Mesajınızı Buraya Yazınız", new { cols=100,rows=10})

İlk parametreye name değerini ikinci parametreye value değerini yazdık.Cols ve rows diyerekte genişliğini ve uzunluğunu belirledik.
Kaynak kodlarda çıktısı
<textarea cols="100" id="Mesaj" name="Mesaj" rows="10">Mesajınızı Buraya Yazınız</textarea>

Hidden
Gizli veri eklemek için kullanılır.Html de <input type=”hidden”> etiketini bu helper ile oluşturabiliriz.
Örnek Kullanım
@Html.Hidden("Deger",1)

İlk parametreye name değerini ikinci parametreye ise value kısmında görünmesini istediğimiz değeri yazdık
Kaynak kodlarda çıktısı
<input id="Deger" name="Deger" type="hidden" value="1" />

CheckBox
Seçim kutusu eklemek için kullanılır.Html de <input type=”checkbox”> etiketini bu helper ile oluşturabiliriz.
Örnek Kullanım
@Html.CheckBox("Secenek1") Seçenek1
@Html.CheckBox("Secenek2",true) Seçenek2

İlk parametreye name değerini yazdık.İkinci parametreye ise true yazarsak kutumuz seçili olarak ekrana gelecektir.

RadioButton
Tek elemanı seçebildiğimiz seçim kutusu eklemek için kullanılır.Html de <input type=”radio”> etiketini bu helper ile ekleyebiliriz.
Örnek Kullanım
@Html.RadioButton("Cinsiyet","Bay") Bay
@Html.RadioButton("Cinsiyet","Bayan") Bayan

İlk parametreye name değerini yazdık.İkinci parametreye ise value kısmında gözükmesini istediğimizi yazdık.Checkboxta olduğu gibi virgül koyup true yazarsak o değer seçili olarak gelir.
Kaynak kodlarda çıktısı
<input id="Cinsiyet" name="Cinsiyet" type="radio" value="Bay" /> Bay
<input id="Cinsiyet" name="Cinsiyet" type="radio" value="Bayan" /> Bayan


Password
Şifre giriş kutusu eklemek için kullanılır.Html de <input type=”password”> etiketini bu helper ile ekleyebiliriz.
Örnek Kullanım
@Html.Password("Sifre")

Name kısmında görünmesini istediğimiz değeri yazdık.İkinci değer olarak textboxta olduğu gibi varsayılan metinde yazabiliriz.
Kaynak kodlarda çıktısı
<input id="Sifre" name="Sifre" type="password">

DropDownList
Açılır liste eklemek için kullanılır.Html de <select>…</select> etiketini bu helper ile oluşturabiliriz.

Örnek Kullanım
@Html.DropDownList("Sehir", new[] {
    new SelectListItem{
    Text="Isparta",
    Value="32"
    },
    new SelectListItem{
        Text="İstanbul",
        Value="34"
    }
    },"Şehir Seçiniz")

İlk parametreye name değerini yazdık.İkinci parametrede Text kısmına ekranda gözükmesini istediğimiz metni Value kısmına ise değer olarak görünmesini istediğimiz metni yazdık.Üçüncü parametreye ise ilk görünmesini istediğimiz metni yazdık

Kaynak kodlarda çıktısı
<select id="Sehir" name="Sehir"><option value="">Şehir Seçiniz</option>
<option value="32">Isparta</option>
<option value="34">İstanbul</option>
</select>


ListBox
Liste kutusu eklemek için kullanılır.Html de <select size=”2”>…</select> etiketini bu helper ile oluşturabiliriz.

Örnek Kullanım
@Html.ListBox("Ürün", new[] {
    new SelectListItem{
    Text="Telefon",
    Value="1"
    },
    new SelectListItem{
        Text="Tablet",
        Value="2"
    }
    })

Kaynak kodlarda çıktısı
<select multiple="multiple" name="Ürün">
<option value="1">Telefon</option>
<option value="2">Tablet</option>
</select>


Html Helper Css İşlemleri
Bu helperleri kullanırken etiketlere class atamak veya direk style tanımlamak isteyebiliriz.Bunun içinde aşağıdaki yöntemleri kullanabiliriz.

Class atama örnek
@Html.TextBox("KullaniciAdi", "Kullanıcı Adınızı Giriniz", new { @class ="text"})

Text isminde sınıfı atamış olduk.
Çıktısı
<input class="text" id="KullaniciAdi" name="KullaniciAdi" type="text" value="Kullanıcı Adınızı Giriniz">


Style tanımlama örnek
@Html.ActionLink("Telefonları İncele", "Telefon", "Urunler", new { Id = 1 }, new { @style = "color:blue;" }) <br />

Yazı rengini mavi yapmış olduk.
Çıktısı
<a href= "/Urunler/Telefon/1" style="color:blue;">Telefonları İncele</a>



Konuda yapmış olduğumuz işlemlerin görüntüsü













Derecelendir
Kaynak https://www.cyber-warrior.org/Forum/aspnet-mvc-html-helpers_591367,0.cwx
İçerik İhbarı



Open Source Document Project AUP&TOS