ASP NET Core Dropdownlist Multiple Select

Daha öncelerden Asp.Net MVC DropdownList konusunu bildiğim kadarıyla anlatmaya çalışmıştım. Şimdi ise dropdownlist ile (multiple select)çoklu seçim yapmayı anlatmaya çalışacağım.

Bunun için select2 jQuery eklentisini kullanacağım. Uygulamama select2 dosyalarını dahil ediyorum. select2.css, select2.full.js vb...

Örnek olarak çalışanları tuttuğum bir listem mevcut bu listemi dropdownlist üzerinde gösterip kullanıcın bu liste üzeriden çalışanlarımı seçmesini sağlayacağım. Bir tane veya birden fazla seçebilir.

Controllerımızdan başlayalım.. Dropdownlistimizi dolduracak olan kodlarımızı yazalım.

public IActionResult Index()
{
    var Employees = new List<SelectListItem>();
    //Çalışanlarımızı listemize aktarıyorum
    foreach (var item in Employee.GetEmployeList())
    {
        Employees.Add(new SelectListItem
        {
        Text = item.Name,
        Value = item.Id.ToString()
        });
    }
    ViewBag.Employees = Employees;
    return View();
}

Çalışanlarımızı ViewBag'e attım. Ve şimdi Viewmızdaki kodlarımızı yazalım.

<form action="/" method="post">
    <div class="form-group">
        <label>DropdownList Multiple Select</label>
        <label id="employees">
            <span style="padding-right: 10px">Hepsini Seç / Temizle </span>
            <input type="checkbox" id="hepsiniSec"><i></i>
        </label>
        <select name="Employee[]"
        id="select2"
        multiple="multiple"
        class="form-control"
        asp-items="ViewBag.Employees"></select>
    </div>
    <div class="form-group">
        <button class="btn btn-primary">Summit</button>
    </div>
</form>

Evet formuzuda yazdık.

Burada dikkat etmemiz gerekenler: Select tag'imizin id'sini select2 verdim burada ben bu select tag'imin select2 eklentisini kullanacağını belirtmiş oldum (Siz farklı bir isimde verebilirsiniz ya da id kullanmayıp class olarak da belirtebilirsiniz).

Select tag'imizin name özelliğini birden fazla seçim olabileceğinden [ ] köşeli parantezler ekledim.

Son olarak da multiple özelliğini(attribute) ekledim.

Şimdi birazda CSS yazalım..(Hepsini seç işlemi için olan css kodlarımız)

#employees {
    padding: 0 20px
}

#employees:last-child {
    border-bottom: 1px solid #BBB;
}

#employees > input {
    display: none;
}

#employees i {
    display: inline-block;
    float: right;
    padding: 2px;
    width: 40px;
    height: 20px;
    border-radius: 13px;
    vertical-align: middle;
    -webkit-transition: .25s .09s;
    transition: .25s .09s;
    position: relative;
    background: #d8d9db;
    box-sizing: initial;
}

#employees i:after {
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: 2px;
    -webkit-transition: .25s;
    transition: .25s;
}

#employees > input:checked + i {
    background: #4bd865;
}

#employees > input:checked + i:after {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

#employees:hover {
    cursor: pointer;
}

CSS kodlarımızı da yazdığımıza göre. Son haline bi bakalım..

Javascript kodlarımız:

 $(function () {
       //select2 eklentimizin tanımı
       $('#select2').select2();
       //hepsiniSec kodlarımız
       $("#hepsiniSec").on("click", function () {
           if ($(this).is(':checked')) {
               $("#select2 > option").prop("selected", "selected");
               $("#select2").trigger("change");
           }
           else {
               $("#select2 > option").removeAttr("selected");
               $("#select2").trigger("change");
           }
       });
});

DropdownListimiz..

Birden fazla seçme..

Ve son olarak da Hepsini Seç işlemimiz;

Formumuzu gönderelim ve seçilen çalışanlarımızın geldiğinide görelim.

Bildiğim kadarıyla anlatmaya çalıştım. İnşallah birilerinin faydalanması dileğiyle... :)