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.

MVC projenizin genelinde kullanılan tüm Boolean(bool) tipli model property leri için
otomatik uygulanabilecek material checkbox tasarımıdır.
@Html.EditorFor ile kullanılması gerekmektedir.

@model bool?
@* "Views/Shared/EditorTemplates/Boolean.cshtml" konumunda ve dosya isminde oluşturulması gerekiyor.
Böylece Modeliniz ile EditorFor kullandığınız yerlerde otomatik kullanılır. *@
<div class="material-switch">
@Html.CheckBox("", Model.HasValue ? Model.Value : false, new { data_dependent_control_id =
ViewData.ContainsKey("dependentControlId") ? ViewData["dependentControlId"] : "" })
@Html.LabelFor(x => x, " ", new { @class = ViewData.ContainsKey("class") ? ViewData["class"] : "label-default", tabindex = "0" })
</div>

@* Checkbox renklendirmesi için class="label-[success|danger|warning|default|info|primary]" verebilirsiniz.
"dependentControlId" attribute ile bağımlı olduğu kontrolün enabled/disabled edilmesi sağlanır.(zorunlu değildir) *@
<div class="form-group">
@Html.LabelFor(model => model.IsComparative, new { @class = "control-label col-md-4" })
<div class="col-md-8">
@Html.EditorFor(model => model.IsComparative,
new { @class = "label-success", dependentControlId = nameof(Model.ComparativeReportId) })
</div>
</div>

view raw

2. index.cshtml

hosted with ❤ by GitHub

$(function () {
$(".material-switch").keydown(function (event) {
// Klavyenizden 32 : space , 39 : right arrow , 37 : left arrow tuşlarına basıldığında
// çalışması sağlanır. Böylece klavye desteği gelir.
if (event.keyCode == 32 || event.keyCode == 39 || event.keyCode == 37) {
var checked = $(this).parent().find("input:checkbox").prop('checked');
$(this).parent().find("input:checkbox").prop('checked', !checked);
}
});
});

view raw

3. script.js

hosted with ❤ by GitHub

.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position: absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + input[type="hidden"] + label::before {
background: inherit;
opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + input[type="hidden"] + label::after {
background: inherit;
left: 20px;
}

view raw

4. style.css

hosted with ❤ by GitHub

Ö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

 

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 )

Connecting to %s