Bu yazıda Mvc ile uygulama geliştirirken oluşturup kullanabileceğimiz helper metotlardan bahsedeceğim. Bilindiği üzere Mvc üzerinde Asp.Net web formlardaki gibi hazır web kontrolleri yoktur. Bu yüzden kodları kendimiz yazmak zorunda kalıyoruz. Fakat bazı kontrolleri hazır bir şekilde oluşturmamıza yarayan extension metotlar vardır. Bunlara helper metotları denir. Örneğin bir label oluşturmak için <label></label> yazmak yerine @Html.Label metodunu kullanabiliriz. Bununla birlikte kendi helper metodumuzu da oluşturabiliriz.
Öncellikle bir Asp.Net Web Application ile bir MVC projesi oluşturalım. Oluşturduğumuz projede özel olarak oluşturulan bir css yapısı kullanalım. Bunun için https://github.com/chinchang/hint.css sitesinden hint.css ve hint.min.css dosyalarını projemizdeki "Content" klasörüne kopyalayalım.
Projemize sağ tıklayalım ve "Helpers" adında bir klasör oluşturalım. Oluşturacağımız metodu burada bir class oluşturup içerisinde tanımlayalım. Bu örnekte textbox tipinde bir input için helper oluşturacağız. Bu class'ta geri dönüş tipi HtmlString olan bir metot tanımlayacağız.
Helper metodu olduğunu belirtmek için ilk parametrede "this HtmlHelper helper" tanımlamasını yaptık. String id ile oluşturacağımız input için id değeri veriyoruz. HintClass ile uyarının oluşturduğumuz inputun sağ,sol,alt veya üstünde olmasını tanımlayacağız. HintData ile oluşturacağımız uyarı için içerik yazacağız. HintClass ile kullanacağımız yön belirtmesi için bir class tanımlaması yapalım:
Class içerisindeki tanımlamalarımız bittikten sonra Home Controller içerisindeki Index actionı için bir View oluşturalım. Hazır Mvc template kullanarak projeyi oluşturduysak bu view, Views klasörü altında zaten oluşturulmuş olacaktır. Hazır view içeriğini temizleyip aşağıdaki kodları yazalım:
Oluşturduğumuz Helpers klasörüne erişebilmemiz için using ile Index sayfasına ekliyoruz. Bu sayfada hint.css kullanmak için de Content klasörü içindeki css dosyasını sürükle bırak yöntemiyle ekliyoruz. Sayfada yer alacak input yapıları için kodlarımızı yazıyoruz. Burada @Html yazıp noktaya bastıktan sonra oluşturduğumuz InboxHint extension metodu da diğer metotlarla birlikte listede yer alır. Daha önce söylediğimiz gibi ilk olarak id, daha sonra mesajın görüntüleneceği konum ve mesaj içeriğini yazalım. Metodu oluştururken 4 parametremiz vardı. Bunlardan ilki helper olduğu için yazdığımız tanımlamaydı. O yüzden burada kullanmayız. Kodumuzu çalıştırdığımızda oluşan ekran görüntüsü şu şekilde olur:
Hiç yorum yok:
Yorum Gönder