KMRT BSRN

"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO

ASP.NET MVC ile Bootstrap Checkbox ve Radio Kullanımı

Yorum bırakın


Evet.. Uzun bir aradan sonra tekrar makale yazmaya başlamalıyım diye düşünüyordum. Sonunda yavaştan yavaştan başlamak gerektiği için hadi bakalım dedim ve kolları sıvadım. Aslında bunun sebeplerinden biri artık çoğu kişinin video içeriklere yönelmesi ve video ile bazı şeyleri göstererek daha hızlı ve 1 dakikalık bir zaman dilimine daha çok şey sığdırabildiğimizden dolayıdır sanırım. Fakat açıkçası ben hala makalelerden ve kitaplardan yanayım. Video içerikler daha kolay uçuyor akıllardan ve özümsemesi zor. Anlatılan bir noktayı bulması da daha zor. Henüz video içi arama pek gelişmedi. Sanırım bu gelince bende ona daha fazla yönelebilirim. Tabii ki izlemek, anlatılanı yapılırken görmek ayrı, olmazsa olmaz. Ama nedense benim gözlerim metin arıyor, ne diyebilirim.

Peki konumuza dönelim. Bu yazımızda sizlere asp.net mvc içinde radio ve checkbox kullanımı ile ilgili bir yöntem göstereceğim. Bende herkes gibi projelerimde veya örneklerimde bootstrap kullanıyorum. Dolayısı ile en çok sıkıntı duyduğum nokta checkbox ve radio kontrollerinin tasarımının bootstrap’te eksik olması! Aslında eksik değil ama bizim alıştığımızdan farklı olması. Bizim bildiğimiz bu şekilde..

 

image

Bootstrap kullanılsa bile ortaya çıkan radio ve checkbox görünümü.

 

Fakat bootstrap ‘in yaklaşımı ile olması gereken budur.

 

image

Bootstrap in checkbox ve radio yaklaşımı bu şekilde

 

Kullanımı kolay ve özellikle mobil cihazlar için bu tasarım aslında harika oluyor.. Fakat bunu elde etmek için gereken HTML kodu şu şekilde(Bu arada ikonlar tamamen benim uydurmamdır ki onu da nasıl yaptığımı göstereceğim). Örneğin HTML, CSS ve JS kodlarına buradan ulaşabilirsiniz.

Kısaca açıklamak gerekirse;

Bootstrap diyor ki; sen bir ButtonGroup yap ve içerisine label etiketleri arasına input’larını yerleştir ve onların türlerini(radio, checkbox) de belirle ben onları seçilebilir yaparım. Bunu da “active” class’ını label’a atayarak yapacağım. Yani görünümünü değişik göstereceğim(seçileni daha koyu olarak) demektedir. Eklenmiş olan label altındaki glyphicon’lu span’lar benim “check” işareti çıkarmak için yaptığım bir şeydir, zorunlu değildir. Checkbox olsun ya da radio olsun, gösterilen metinler input elementi dışında, tutulan değerler ise input’un value attribute’undadır.

image

Buraya kadar her şey tamamdır. Fakat biz bu işi MVC seviyesinde düşünelim. MVC ‘de bunu yapmak istiyoruz ama biliyorsunuz ki MVC de HTML Helper metot’larımız var. Bunlar kullanıldığında, pek bu şekilde bir html çıktı vermiyorlar. Yani onları kullanmamız bize normal checkbox ya da radio yapmaktan öte bir fayda sağlamayacaktır. HTML helper kullanımı ve oluşan sayfa çıktısı şu şekildedir.

image

image

Görüldüğü gibi mvc bizim için 2 tane input ekliyor. Birisi checkbox için diğeri hidden bir input’tur. Bu iki input ‘un değerini OR (ya da) işlemi ile işleyerek size POST işlemleriniz de sonucu döndürüyor. Fakat biz bootstrap ‘i kullanmak istediğimiz de istediğimiz çıktı bu değil. Yani yukardaki kod bizi ilgilendirmiyor. Bende bunun için kendi Custom Helper metodumu yazarak yukarıdaki html’i oluşturan bir metot oluşturdum. Biliyorsunuz ki asp.net mvc de App_Code isimli klasör’e ekleyeceğiniz bir cshtml ya da vbhtml dosya içine custom helper metot yazabiliyoruz. Bunlarıd view’larımızda çağırabiliriz.

image

@helper SelectionList(string name, string[] values,
    IEnumerable<System.Web.Mvc.SelectListItem> items,
    string typeName = "checkbox"bool showCheckIcon = true,
    string labelClassNames = "btn btn-default",
    string iconClassName = "glyphicon glyphicon-ok")
{
    <div class="btn-group" data-toggle="buttons">
        @foreach (System.Web.Mvc.SelectListItem item in items)
        {
            bool check = values.Contains(item.Value);
            string active = (check) ? "active" : string.Empty;
            string tick = (check) ? "checked" : string.Empty;
            string type = (typeName == "checkbox" ||
                typeName == "radio"? typeName : "checkbox";
 
            <label class="@labelClassNames selection @active">
                <input type="@type" name="@name" value="@item.Value" @tick>
 
                @if (showCheckIcon)
                {
                    string sign = (check) ? iconClassName : string.Empty;
                    <span class="@sign"></span> @item.Text
                }
            </label>
        }
    </div>
}
 
@helper SelectionList(string name, string value,
    IEnumerable<System.Web.Mvc.SelectListItem> items,
    string typeName = "checkbox"bool showCheckIcon = true,
    string labelClassNames = "btn btn-default",
    string iconClassName = "glyphicon glyphicon-ok")
{
    @MyToolbox.SelectionList(name,
        new string[] { value }, items, typeName,
        showCheckIcon, labelClassNames, iconClassName);
}

Kullanırken de index3.cshtml gibi bir sayfanın içinde şu şekilde kullanılıyor.

<div class="row">
    <div class="col-md-12">
        @MyToolbox.SelectionList(nameof(Model.Siniflari), Model.Siniflari, ViewBag.SinifListesi,
            "checkbox"true"btn btn-success""glyphicon glyphicon-ok")
 
        @MyToolbox.SelectionList(nameof(Model.Cinsiyeti), Model.Cinsiyeti, ViewBag.CinsiyetListesi,
            "radio"true"btn btn-default""glyphicon glyphicon-ok")
    </div>
</div>

Tabii ki ben örnekleme de sayfaya model gönderdiğim bir örnek yaparak, gönderdiğim model’deki verilerin sayfa açılınca seçili gelmesini ve seçilen checkbox ve radio değerlerinin POST işleminde controller tarafına aktarılmasını sağlamalı ki bir iş’e yarasın dimi! Controller tarafındaki model class ile GET ve POST kodları aşağıdadır. Sayfaya ViewBag ile iki adet liste gönderiyorum. Sınıfları tutan bir liste(ViewBag.SinifListesi) bunları checkbox işleminde kullanıyorum. Yani sınıflardan istenilen adette seçilmeli.. Bir de cinsiyet için ayrı bir liste(ViewBag.CinsiyetListesi) gönderiyorum, bu liste de radio olarak ekranda görünecek ve kullanıcı birini seçebilecek. Sırası ile sayfanın GET action kodları, POST action kodları ve Model olarak kullandığım Kisi class’ı.

public ActionResult Index3()
{
    Kisi kisi = new Kisi();
    kisi.Cinsiyeti = "E";
    kisi.Siniflari = new string[] { "1","4","8" };
 
    List<SelectListItem> sinifListesi = new List<SelectListItem>();
    List<SelectListItem> cinsiyetListesi = new List<SelectListItem>();
 
    for (int i = 0; i < 12; i++)
    {
        sinifListesi.Add(new SelectListItem() { Text = "Sınıf-" + (i + 1), Value = (i+1).ToString() });
    }
 
    cinsiyetListesi.Add(new SelectListItem() { Text = "Erkek", Value = "E" });
    cinsiyetListesi.Add(new SelectListItem() { Text = "Kadın", Value = "K" });
 
    ViewBag.SinifListesi = sinifListesi;
    ViewBag.CinsiyetListesi = cinsiyetListesi;
 
    return View(kisi);
}
[HttpPost]
public ActionResult Index3(Kisi model)
{
    List<SelectListItem> sinifListesi = new List<SelectListItem>();
    List<SelectListItem> cinsiyetListesi = new List<SelectListItem>();
 
    for (int i = 0; i < 12; i++)
    {
        sinifListesi.Add(new SelectListItem() { Text = "Sınıf-" + (i + 1), Value = i.ToString() });
    }
 
    cinsiyetListesi.Add(new SelectListItem() { Text = "Erkek", Value = "E" });
    cinsiyetListesi.Add(new SelectListItem() { Text = "Kadın", Value = "K" });
 
    ViewBag.SinifListesi = sinifListesi;
    ViewBag.CinsiyetListesi = cinsiyetListesi;
 
    return View(model);
}
public class Kisi
{
    public string Cinsiyeti { getset; }
    public string[] Siniflari { getset; }
}

Bu kodlar ile sizler de checkbox ve radio değerlerini ve bunlarla işlemler yapabilir bir yapıyı artık bootstrap tarzında yapabilirsiniz. Son olarak unutmadan eğer checkbox ve radio da yukarıda ki görsel deki gibi sizlerde bootstrap’daki check işaretini göstermek ve gizlemek isterseniz. Aşağıdaki JS kodu da onu yapıyor(JQuery kullanıyor), sayfanıza eklemeyi unutmayınız..

<script>
    $(function () {
 
        $("label.selection").click(function () {
            setTimeout(function () {
                $("label.selection:not(.active) > span").removeClass("glyphicon glyphicon-ok");
                $("label.selection.active > span").addClass("glyphicon glyphicon-ok");
                $("label.selection.focus").removeClass("focus");
            }, 50)
        });
 
    });
</script>

image

Reklamlar

Yazar: K. Murat BAŞEREN, MBA, MCP

I am a senior software developer, MCP, consultant, blogger, former chemist and software trainer. My interests range from software developer to technology. I am also interested in web development, education, and coffee.

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 )

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 )

Google+ fotoğrafı

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

Connecting to %s