title: Asp.Net Mvc Selectpicker
body: <p>I am trying to implement a DropDownList Multi Select using Bootstrap Selectpicker for selecting Schools in my application.</p>
  
  <p>I am not very familiar with MVC and JQuery since i have been using webforms for a long time, so i am learning from internet to accomplish.</p>
  
  <p>Here is the scenario:</p>
  
  <p>on my layout, there is a DropDownList:</p>
  
  <pre><code>@*DropDownList Select School*@                                            
  @Html.DropDownList("Schools", null, null, new { id = "MultiSelect", @class = "selectpicker form-control", multiple = "", title = "School" })
  </code></pre>
  
  <p>The code to fill the DropDownList:</p>
  
  <pre><code>public ActionResult Class()
  {
      IEnumerable&lt;SelectListItem&gt; ListClasses = db.scasy_class
          .OrderBy(a =&gt; a.class_name)
          .Select(c =&gt; new SelectListItem
          {
              Value = c.id.ToString(),
              Text = c.class_name,
              Selected = false
          });
      ViewBag.Class = ListClasses.ToList();
  
      ClassViewModel classViewModel = new ClassViewModel()
      {
          SelectOptions = ListClasses
      };
  
      return View(classViewModel);
  }
  </code></pre>
  
  <p>On layout, when the user selects some schools, using the dropdownlist,</p>
  
  <pre><code>$('#MultiSelect').on('change', function () {
      $.each($("#MultiSelect option"), function () {
          $.post("/Setup/Student/SetSchool/", { school: $(this).val(), selected: $(this).prop('selected') });
      });
  });
  </code></pre>
  
  <p>and the controller;</p>
  
  <pre><code>public ActionResult SetSchool(int school, bool selected)
  {
      ArrayList school_nos = Session["Schools"] as ArrayList;
  
      if (selected)
      {
          if (!school_nos.Contains(school))
          {
              school_nos.Add(school);
          }
      }
      else
      {
          if (school_nos.Contains(school))
          {
              school_nos.Remove(school);
          }
      }
  
      Session["Schools"] = school_nos;
  
      return new HttpStatusCodeResult(HttpStatusCode.OK);
  }
  </code></pre>
  
  <p>it is working as it is expected until here.
  For the next reload, i am trying to fill the dropdownlist with the same data but show previously selected schools with tick, using Session values, since i will need this information on many other pages.</p>
  
  <pre><code>$(document).ready(function () {
      $.getJSON("/Setup/Student/GetSchool/",
          function (data) {                     
              var myData = [];
              $.each(data, function (index, item) {
                  if (item.Selected == true) {
                      myData.push(item.Value);
                  }
              });
              //alert(myData);
              $('#MultiSelect').selectpicker('val', myData);                      
          });
  });
  </code></pre>
  
  <p>and the controller;</p>
  
  <pre><code>public JsonResult GetSchool()
  {
      IEnumerable&lt;SelectListItem&gt; ListSchools = db.scasy_school
          .OrderBy(a =&gt; a.name)
          .Select(a =&gt; new SelectListItem { Value = a.id.ToString(), Text = a.name});
  
      ArrayList school_nos = Session["Schools"] as ArrayList;
  
      List&lt;SelectListItem&gt; ListSchoolsUpdated = new List&lt;SelectListItem&gt;();
  
      foreach (var item in ListSchools)
      {
          SelectListItem selListItem;
  
          if (school_nos.Contains(item.Value.ToString()))
          {
              selListItem = new SelectListItem() { Value = item.Value.ToString(), Text = item.Text, Selected = true };
          }
          else
          {
              selListItem = new SelectListItem() { Value = item.Value.ToString(), Text = item.Text, Selected = false };
          }
  
          ListSchoolsUpdated.Add(selListItem);
      }
      return Json(ListSchoolsUpdated, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>Code throws no error, but i cannot have the dropdownlist with selected items shown.</p>
  
  <p><a href="https://i.stack.imgur.com/gHDOb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gHDOb.png" alt="enter image description here"></a></p>