Asp.Net 5.0 TagHelpers
Selamlar;
TagHelpers ASP.NET 5 ile gelen, halen de geliştirilmekte olan güzel bir Razor View Engine yardımcısıdır. Esas amaç Html içine @ ile başlıyan C# kodları ile standard Html5 kodlarının bir süre sonra hem okunması zorluğunun hem de @{ } içine yazılan kod karmaşasının biraz olsun önüne geçmektir. Kısaca TagHelpers .cshtml tarafında @ kullanmadan C# kodlarını sanki Html kodu gibi yazılmasını sağlar.
Aşağıda görüldüğü gibi Asp.Net 5 Web uygulaması oluşturulur.
Nuget’den aşağıdaki TagHelpers paketi indirilir.
Index.cshtml sayfasının başına aşağıdaki kod konarak sayfa içinde TagHelpers’ın kullanılması sağalanabilir.
@addtaghelper “Microsoft.AspNet.Mvc.TagHelpers”
Önceden aşağıdaki gibi kullanılan link kodlar:
|
1 2 3 |
<li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> |
TagHelpers ile @ olmadan aşağıdaki gibi kullanılabilir.
|
1 2 3 |
<li><a controller="Home" action="Index">Index</a></li> <li><a controller="Home" action="About">About</a></li> <li><a controller="Home" action="Contact">Contact</a></li> |
Form Post işlemleri için aşağıdaki kod yerine:
|
1 2 3 |
@using (Html.BeginForm("SaveUser", "Home", FormMethod.Post, null)) { } |
Form Post TagHelpers ile @ olmadan aşağıdaki gibi kullanılabilir:
|
1 2 |
<form asp-controller="Home" asp-action="SaveUser" method="post"> </form> |
Şimdi aşağıdaki gibi basit bir Model oluşturalım.
|
1 2 3 4 5 6 7 8 |
namespace TagHelpers.Controllers { public class Model { public int Age { get; set; } public string Name { get; set; } } } |
Label ve Input elementleri için aşağıdaki kodlar yerine:
|
1 2 3 4 5 6 7 8 9 |
@model TagHelpers.Controllers.Model @using (Html.BeginForm("SaveUser", "Home", FormMethod.Post, null)) { @Html.LabelFor(model => model.Name) @Html.TextBoxFor( m => m.Name ) @Html.LabelFor(model => model.Age) @Html.TextBoxFor( m => m.Age ) <input type="submit" value="Save" /> } |
Label ve Input elementler TagHelpers ile @ olmadan aşağıdaki gibi kullanılabilir:
|
1 2 3 4 5 6 7 8 9 10 |
@model TagHelpers.Controllers.Model <form asp-controller="Home" asp-action="SaveUser" method="post"> <div> <label asp-for="Name">Name:</label> <input asp-for="Name" /> <label asp-for="Age">Age:</label> <input asp-for="Age" /> </div> <input type="submit" value="Save" /> </form> |
HomeController.cs(SaveUser()):
|
1 2 3 4 5 |
public void SaveUser(Model mod) { //Do Something... int i = 0; } |
Ayrıca ASP.NET Community Standup – Mar 17th, 2015 – TagHelpers youtube videosun’da Damian Edwards’ın bahsettiği ama benim test edemediğim yine de sizle paylaşmak istediğim bir konu var. Ben “Microsoft.AspNet.Mvc.TagHelpers”: “6.0.0.0-beta3” versiyonu ile geliştirme yaptım. Burdaki örnek-beta4 ile geliştirilmiştir. Büyük ihtimalle bu durumdan dolayı ilgili prefix bende tanınmadı. Konuya gelirsek sayfanın başına aşağıdaki prefix tanımlanır ise, burda “th:” yerine istenilen bir tanımlama yada hiçbir tanımlama da yapılmayabilir.
@tagHelperPrefix “th:”
Bu durumda C# kodları aşağıdaki gibi kullanılabilir. Böylece ilgili kodlar daha rahat şekilde ayırt edilmiş olunur.
<th:input asp-for=”Name”/>
Damian Edwards’dan örnek ekran görüntüsü:
Yukarıda bahsedilen TagHelpers halen geliştirilme aşamasında olan bir tooldur. Bundan dolayı anlatılan özellikler bir sonraki versiyonda olmayabilir. Yada yeni özellikler eklenebilir.
Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.
Selamlar Hocam;
Elinize sağlık. Yine çok güzel bir konu. TagHelpers’ları çok beyendim.
En son gelişmeleri sizden takip etme bir başka hocam.
İyi çalışmalar.
Teşekkürler Vural.
Elinize saglik hocam.
Gayet anlasilir cok guzel bir yazi olmus.
Iyi calismalar.
ne kadar yalın ve guzel bir kaleminiz var. tasarim desenleride anlatirmisiniz?
Selamlar Mehmet;
Teşekkür ederim. Anlatırım tabiki..