ASPNET MVC Projeleriniz için Material Checkbox


Projelerimiz de her ne kadar Bootstrap kullanıyor ve kendimi tatmin edecek seviye de hoş tasarımlar yaparak istediğim görsellere ulaşsam da checkbox’ların çok sıradan bir görsellikte olması gözüme bir düzensizlik olduğunu hissettiriyor ve bununla ilgili başka yazılarımda da, farklı çözümler sunmaya çalıştım.

Projelerinizde daha şık material tasarımlı checkbox kullanmak isterseniz aşağıdaki kodlardan faydalanabilirsiniz. Aşağıdaki görselde göreceğiniz şekilde bir görsellik oluşacaktır. Ayrıca biraz daha kod yazarak, klavye desteği ve farklı kontrol’e bağımlı kılarak diğer kontrolün aktifleştirilmesi/pasifleştirilmesi(disabled) sağlanabiliyor.

material-checkbox-in-mvc

kmb-udemy-reklam

Model ile kullanabileceğiniz bir EditorFor yapısına getirerek, Boolean tiplerde çalışabilmesi sağlanmıştır. Böylece AutoGenerated(otomatik ürettirdiğiniz) kodlarla da çalışacaktır.

Kodlar ile ilgili açıklamaları açıklama satırı olarak ekledim ama tabii ki kodları bir gördükten sonra açıklıyor olacağım. Her kod kutusunun altında dosya adı ve uzantısı yer almaktadır, dolayısı ile hangi dosyaya yazılacağına lütfen dikkat ediniz.

Öncelikle en önemli nokta EditorFor’un Boolean değerlerde bu checkbox’ı çıkarması için “Views/Shared/EditorTemplates/Boolean.cshtml” konumunda “Boolean.cshtml” dosyasını oluşturmalısınız. İsminin Boolean.cshtml olması bool property’lerde çalışmasını sağlayacaktır.

Razor kodunda(index.cshtml yada hangi sayfada isterseniz kullanabilirsiniz) ise, “AddtionalViewData” ile “class” attribute ekleyerek rengini alışkın olduğunuz bootstrap isimleri ile (class=”label-[success|danger|warning|default|info|primary]”) ayarlayabilirsiniz.

Ayrıca opsiyonel olarak  “dependentControlId” attribute’u tanımlayarak bu checkbox’ın başka bir kontrol e dependent(bağımlı) olması sağlanarak, bağımlı olduğu kontrolün enabled/disabled olması sağlanabilir.

Projenizde JQuery ve Bootstrap ‘in CSS ve JS dosyalarının eklenmiş olması gerektiğini hatırlatmama sanırım gerek yoktur. 🙂

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