ASPNET MVC ile Bootstrap ve HintCSS Kullanarak Button & Link Helper Metotlar


ASPNET MVC projelerinizde sürekli olarak kullandığımız hyperlink ve button elementleri için kullanabileceğiniz helper metotları sizlerle paylaşmak istiyorum. Bootstrap ve HintCSSHintCSS kullanan overload versiyonları ile az kodla sayfalarınız da güzel link’ler ve button’lar oluşturabilirsiniz. Kodları paylaşmadan önce açıklamakta fayda var.

Proje içerisinde 4 adet dosyadan helper metotlar gelmektedir.

helper-methods-cshtml

  • HtmlButton.cshtml : Button elementi eklemede kullanılan helper metotları içerir.
  • HtmlLink.cshtml : HyperLink elementi eklemede kullanılan helper metotları içerir.
  • HtmlHint.cshtml : HintCSS kullanan element eklemede kullanılan helper metotları içerir.
  • MyHtml.cshtml : Yukarıdaki dosyalarda yer alan button, link, hint helper metotları projenizde kullanarak düğmeler oluşturacaksınız. Dolayısı ile bu kodlarda zamanla sayfalarınız da tekrar etmeye başlayacaktır. İşte o kodları da tek bir helper metot haline getirecek şekilde kendi projem için oluşturduğum helper metotları içerir. Yani kısaca helper metodun, helper metodu diyebiliriz. Hepsi kod tekrarını azaltmak içindir.

 

button-link-helper-methods-in-mvc

Yukarıdaki görsel de gördüğünüz gibi küçük link/button, büyük link/button oluşturmada kullanabileceğiniz helper metotlar, zaten bunları 2-3 html satırı ile oluşturabiliyoruz. Burada ki amaç, proje genelinde bu kodların merkezi helper metotlarda toplanmasının sağlanması ve buradan yönetilmesi ile bir değişiklikte hepsinin etkilenmesinin sağlanması, kod tekrarlarının azaltılmasıdır. Aynı zaman da başta da dediğim gibi kodların tek bir metot seviyesine kadar azaltılmasıdır.

kmb-udemy-reklam

Örneğin;

Normalde aşağıdaki şekilde yazdığımız bootstrap sınıfları içeren link kodlarının..

bootstrap-mvc-link

Aşağıdaki şekilde tek bir helper metot ile kullanımının sağlanması ki HintCSS ‘in css class ları ile daha da uzun kodlar yazmamız gerekiyor. Amaç bunları kısaltmak ve css class isimlerinin de sürekli hatırlanması gerekliliğini ortadan kaldırmak.

bootstrap-mvc-helper-method-link

Peki gelelim kodlara, kodları hem incelemeniz hem de yazmanız gereken sırada oluşturdum. Daha kolay anlaşılacağını düşünüyorum. Kodların içine önemli notları açıklama satırı olarak ekledim mutlaka onlara dikkat ediniz.

7.Index.cshtml ‘den itibaren örnek kullanım olması açısından Index, Create, Edit, Details, Delete sayfalarında örnek kullanım şeklini göstermek istedim. Ayrıca Index sayfasında Grid.MVC kullanarak tablo içinde mini link’lerin yapımını göstermek istedim.

Helper metotları istediğiniz gibi arttırabilir ve düzenleyebilirsiniz ki zaten amaç zamanla bu dosyaların içeriğinin sizin ihtiyaçlarınız doğrultusunda büyümesi/genişlemesi ‘dir. Helper metotlarda MVC standardında olan parametreleri de(htmlAttributes gibi) ekledim. Böylece gerekli custom element yapılarını da oluşturabilirsiniz.

 

kmb-udemy-reklam

 

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

w

Connecting to %s