Asp.Net Mvc Html Helpers

Html Helperlar MVC ile beraber gelen ve HTML yapısı için fonksiyonellik katan bir yapıdır. İster HTML etiketleri ister Html Helper kullanarak istenilen sonuca ulaşabiliriz. Haydi başlayalım.

1.ActionLink: Link vermek için kullanılır.

@Html.ActionLink("Test","Index","Home")
<a href="Home/Index">Test</a>

2.RouteLink: Actionlinke benzer sözdizimi biraz farklıdır.

@Html.RouteLink("Test", new {action="Index",controller="Home"})
<a href="Home/Index">Test</a>

3.Checkbox: Kontrol kutusu oluşturmak için kullanılır.

@Html.CheckBox("test", true)
<input name="test" id="test" type="checkbox" checked="checked" value="true">
@Html.CheckBoxFor(m => m.Id)-----Eğer bir Model kullanıyorsak

4.Hidden:Hidden input elemanını oluşturmak için kullanılır

@Html.Hidden("Id", "1")
<input id="Id" name="Id" type="hidden" value="1" />
@Html.HiddenFor(m => m.Id)-----Eğer bir model kullanıyorsak

5.Password: Şifre girişi için kullanılır.

@Html.Password("Sifre")
<input id="Sifre" name="Sifre" type="password" value="" />
@Html.PasswordFor(m => m.Sifre)-----Eğer bir model kullanıyorsak 

6.Form: Kullanıcıdan bilgi almak için oluşturulan etiket

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) {...}
<form action="Home/Index" method="post">...</form>
----------------------------
 @using (Html.BeginForm("Index", "Home", FormMethod.Post,new { enctype = "multipart/form-data" })){...}
<form action="Home/Index" enctype="multipart/form-data" method="post">...</form>
-------------------

6.Textarea: Uzun metinler için kullanılan etiket

@Html.TextArea("Description", null, new { @class = "form-control" })
<textarea class="form-control" cols="20" id="myTextArea" name="myTextArea" rows="2">This is value</textarea>  

@Html.TextAreaFor(m => m.Description, new { @class = "form-control" })-----Eğer model kullanıyorsak 
<textarea class="form-control" cols="20" id="Description" name="Description" rows="2"></textarea>  
7.Display: Bilgi göstermek için kullanılır.
@Html.Display("StudentName")
@Html.DisplayFor(m => m.StudentName)-----Eğer model kullanıyorsak

8.Textbox :Kullanıcıdan bilgi almak için kullanılan etiket

@Html.TextBox("AdSoyad")
<input id="AdSoyad" name="AdSoyad" type="text" value="">

@Html.TextBox("AdSoyad", null, new { @class = "form-control" })  
<input class="form-control" id="AdSoyad" name="AdSoyad" type="text" value="">

@Html.TextBox("AdSoyad","AdSoyad", new { @class = "form-control" }) 
<input class="form-control" id="AdSoyad" name="AdSoyad" type="text" value="AdSoyad">

@Html.TextBoxFor(m => m.StudentName, new { @class = "form-control" })----eğer model kullanıyorsak 
<input class="form-control" id="StudentName" name="StudentName" type="text" value="John" />
9.Label: Genellikle text kutularıyla beraber kullanılır.Bilgi vermek amaçlıdır.
@Html.Label("StudentName")
<label for="StudentName">Name</label>

@Html.Label("StudentName","Student-Name")
<label for="StudentName">Student-Name</label>

@Html.LabelFor(m => m.StudentName)-----Eğer model kullanıyorsak
<label for="StudentName">Name</label>

10.RadioButton: Tek seçenekli seçimler yapmak için kullanılır.

@Html.RadioButton("bilgi, "red")
@Html.RadioButton("bilgi", "blue", true)
@Html.RadioButton("bilgi", "green")

<input id="bilgi" name="bilgi" type="radio" value="red" />
<input checked="checked" id="bilgi" name="bilgi" type="radio" value="blue" />
<input id="bilgi" name="bilgi" type="radio" value="green" />

@Html.RadioButtonFor(m => m.KategoriId, "1") Video-----Eğer model kullanıyorsak
@Html.RadioButtonFor(m => m.KategoriId, "2") Resim-----Eğer model kullanıyorsak
@Html.RadioButtonFor(m => m.KategoriId, "3") Medya ----Eğer model kullanıyorsak

11.DropDownList: Açılır kutu için kulanılır.

@Html.DropDownList("StudentGender",new SelectList(Enum.GetValues(typeof(Gender))),"Select Gender",new { @class = "form-control" })
<select class="form-control" id="StudentGender" name="StudentGender">
    <option>Select Gender</option> 
    <option>Male</option> 
    <option>Female</option> 
</select>


@Html.DropDownListFor(m => m.StudentGender, 
                    new SelectList(Enum.GetValues(typeof(Gender))), 
                    "Select Gender")
<select class="form-control" id="StudentGender" name="StudentGender">
    <option>Select Gender</option> 
    <option>Male</option> 
    <option>Female</option> 
</select>

12.EditorFor::Bilginin türüne göre etiket oluşturur.Modelimiz şöyle olsun.

public string MyString { get; set; }
public decimal MyDecimal { get; set; }
public bool MyBool { get; set; }
public DateTime MyDateTime { get; set; }
@Html.EditorFor(o => o.MyString)
@Html.EditorFor(o => o.MyDecimal)
@Html.EditorFor(o => o.MyBool)
@Html.EditorFor(o => o.MyDateTime)

EditorFor özelliği veri tipine göre hareket edecektir.Özellikle browserda MyBoolun sonucuda dikkat ediniz.

Kolay gelsin.



Etiketler
Html Helpers Action Link Route Textarea Form EditorFor LabelFor TextBoxFor
Mesaj Yaz