Herkese merhabalar. Bu haftaki yazımda ASP.NET MVC'deki HTML helper metotlarından ve nasıl kendi özel HTML helper metodumuzu oluşturacağımızdan bahsedeceğim.
HTML helper bir view içinde HTML içeriği oluşturmak için kullanılan yardımcı metotlardır. Bu metotlar çoğu zaman bir string döndürür.
Bütün bir ASP.NET MVC uygulamasını HTML helper metotlarını kullanmadan yazmak mümkündür, ancak bu metotlar bir geliştirici olarak işinizi kolaylaştıracaktır. Helper metotlarından yararlanarak view'larınızı daha kısa sürede oluşturabilirsiniz.
Bu yazımda ASP.NET MVC Framework'ündeki standart HTML yardımcılarından bahsedeceğim. HTML linkleri ve HTML form elementlerini oluşturmak için bu standart yardımcıların nasıl kullanıldığını anlatacağım. Daha sonra kendi helper metotlarımızı nasıl oluşturacağımıza değineceğim.
ASP.NET MVC dünyasında HTML helper'ları ASP.NET Web Forms'daki kontrollere karşılık gelmektedir. Bir Web Form kontrolü gibi bir HTML yardımcısı da HTML'in oluşturulmasını sağlayan yapıyı sizden gizlemiş olur. Ama bir Web Form kontrolüyle karşılaştırıldığında daha hafif bir yapıdadır; bu yardımcılar bir event modeline sahip değildirler veya view state kullanmazlar.
Standart HTML Helper'ları
ASP.NET MVC Framework'ü en yaygın HTML elementlerini oluşturmak için kullanabileceğiniz standart helper'lar içermektedir. Mesela bu helper'ları HTML linkleri veya HTML yazı kutuları oluşturmak için kullanabilirsiniz. Aşağıda en çok kullanılan HTML elementleri için kullanılabilecek HTML Helper'larını ve oluşturdukları HTML çıktılarını görebilirsiniz:
HTML Elementi | Örnek HTML Helper |
---|---|
ActionLink | HTML Helper: @Html.ActionLink("ActionLink1", "Index") Çıktı: <a href="/">ActionLink1</a> |
TextBox | HTML Helper: @Html.TextBox("Textbox1", "val") Çıktı: <input id="Textbox1" name="Textbox1" type="text" value="val" /> |
TextArea | HTML Helper: @Html.TextArea("Textarea1", "val", 5, 15, null) Çıktı: <textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea> |
Password | HTML Helper: @Html.Password("Password1", "val") Çıktı: <input id="Password1" name="Password1" type="password" value="val" /> |
CheckBox | HTML Helper: @Html.CheckBox("Checkbox1", false) Çıktı: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="Checkbox1" type="hidden" value="false" /> |
RadioButton | HTML Helper: @Html.RadioButton("Radiobutton1", "val", true) Çıktı: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" /> |
Drop-down list | HTML Helper: @Html.DropDownList("DropDownList1", new SelectList(new [] {"Male", "Female"})) Çıktı: <select id="DropDownList1" name="DropDownList1"><option>Male</option> <option>Female</option> </select> |
Özel HTML Helper Oluşturmak
ASP.NET MVC sınırlı sayıda helper içermektedir. Neyse ki yeni bir HTML helper'ı oluşturmak çok kolay bir süreçtir. Yeni bir HTML helper oluşturmak için HTMLHelper sınıfında bir uzantı metodu oluşturmak yeterlidir. Mesela bir submit düğmesi için helper olmadığından bu düğme için bir helper oluşturabiliriz. Aşağıda HTML form submit düğmesi oluşturan bir Html.SubmitButton() metoduna ait kodu görebilirsiniz.
namespace MerhabaMVC.Helpers { public static class SubmitButtonHelper { public static string SubmitButton(this HtmlHelper helper, string buttonText) { return String.Format("<input type=\"submit\" value=\"{0}\" />", buttonText); } } }
Bu yazımda sizlere ASP.NET MVC'nin içindeki standart HTML helper'larından bahsettim ve nasıl kendi helper'ınızı oluşturabileceğinize dair bir örnek verdim. İlerleyen haftalarda görüşmek üzere hoşça kalın.
Kaynaklar:
- http://www.dotnet-tricks.com/Tutorial/mvc/N50P050314-Understanding-HTML-Helpers-in-ASP.NET-MVC.html
- ASP.NET MVC Framework Unleashed
Özel HTML Helper eklemek için kullanılan yöntem aslında bir Extension oluşturmak... Konu içerisinde verdiğin kod, HtmlHelper isimli class'a SubmitButton(string buttonText) isimli bir metot ekliyor. Extension metotları hakkında detaylı bilgi için http://msdn.microsoft.com/en-us/library/bb383977.aspx adresine bakılabilir.
YanıtlaSil