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ım.
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'imin 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 hallettiğimize 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... :)