Multi Select dropdownlistfor not populating for jquery chosen

Question

I am using jquery chosen and i am facing issue to populate dropdownlistfor in case of multi select. When my controller returns to view named "CreateService", dropdownlistfor not populating anything just blank.

View

@{
    List<SelectListItem> listofControls = new List<SelectListItem>();
    listofControls.Add(new SelectListItem
    {
     Text = "Contact Selector",
     Value = "1"
    });
   listofControls.Add(new SelectListItem
   {
    Text = "Value Selector",
    Value = "2"
   });
   listofControls.Add(new SelectListItem
   {
    Text = "Text Box",
    Value = "3"
   });    
}

<div>

@Html.DropDownListFor(m => m.Mechanism.Controls, listofControls, new { @class = "chosen-select", @style = "width:350px", multiple = "multiple" })
</div>


<script>

// A $( document ).ready() block.
$(document).ready(function () {
    $(".chosen-select").chosen();
});
</script>

Controller

    public ActionResult EditService(int Id)
    {
        WCMSDataContext wcmsContext = new WCMSDataContext();
        ServiceVM serviceVM = new ServiceVM();
        serviceVM.Mode = new Mode();
        serviceVM.Mechanism = new Mechanism();

        var xService = from p in wcmsContext.Services where p.Id == Id select p;

        if (xService.Count() > 0)
        {
            XmlDocument xdoc = new XmlDocument();
            XmlNodeList xmlnode;
            // if xml coming via string
            string myXml = xService.First().XML;
            xdoc.LoadXml(myXml);
            //XmlNodeList address = xdoc.GetElementsByTagName("Service");
            xmlnode = xdoc.GetElementsByTagName("Service");

            xmlnode[0].ChildNodes.Item(0).InnerText.Trim(); //get all child nodes

            for (int j = 0; j < xmlnode[0].ChildNodes.Count; j++)
            {
                string nodeTitle = xmlnode[0].ChildNodes.Item(j).Name.Trim();
                string nodeValuestr = xmlnode[0].ChildNodes.Item(j).InnerText.Trim();

                if (nodeTitle == "TITLE")
                {
                    serviceVM.Title = nodeValuestr;
                }
                else if (nodeTitle == "DETAIL")
                {
                    serviceVM.Detail = nodeValuestr;
                }
                else if (nodeTitle == "EQUIPID")
                {
                    serviceVM.EquipId = nodeValuestr;

                    if (nodeValuestr == "0")
                    {
                        serviceVM.ServiceType = "One Shot";
                    }
                    else
                    {
                        serviceVM.ServiceType = "Subscription";
                    }
                }
                else if (nodeTitle == "MODE")
                {
                    serviceVM.Mode.ModeType = nodeValuestr;
                }
                else if (nodeTitle == "SMSCOMMAND")
                {
                    serviceVM.Mode.SMSCommand = nodeValuestr;
                }
                else if (nodeTitle == "DEACTIVATIONCOMMAND")
                {
                    serviceVM.Mode.DeactivationCommand = nodeValuestr;
                }
                else if (nodeTitle == "DIALCOMMAND")
                {
                    serviceVM.Mode.DialCommand = nodeValuestr;
                }
                else if (nodeTitle == "Mechanism")
                {
                    for (int k = 0; k < xmlnode[0].ChildNodes[j].ChildNodes.Count; k++)
                    {
                        nodeTitle = xmlnode[0].ChildNodes[j].ChildNodes.Item(k).Name.Trim();
                        nodeValuestr = xmlnode[0].ChildNodes[j].ChildNodes.Item(k).InnerText.Trim();

                        if (nodeTitle == "Title")
                        {
                            serviceVM.Mechanism.Title = nodeValuestr;
                        }
                        else if (nodeTitle == "Description")
                        {
                            serviceVM.Mechanism.Description = nodeValuestr;
                        }
                        else if (nodeTitle == "Trigger")
                        {
                            serviceVM.Mechanism.Triger = nodeValuestr;
                        }
                        else if (nodeTitle == "Controls")
                        {
                            nodeValuestr = xmlnode[0].ChildNodes[j].ChildNodes.Item(k).InnerText.Trim();
                            string[] s = nodeValuestr.Split(',');

                            int i = 0;
                            serviceVM.Mechanism.Controls = new int[s.Length];

                            foreach (var item in s)
                            {
                                string name = string.Empty;
                                string value = string.Empty;

                                if (item == "1")
                                {
                                    name = "Contact Selector";
                                    value = "1";
                                }
                                else if (item == "2")
                                {
                                    name = "Value Selector";
                                    value = "2";
                                }
                                else if (item == "3")
                                {
                                    name = "Text Box";
                                    value = "3";
                                }


                                serviceVM.Mechanism.Controls[i] = Convert.ToInt32(value);

                                i++;
                            }
                        }
                    }
                }
            }
        }

        return View("CreateService", serviceVM);
    }

ServiceVM

public class Mechanism
{        
    public string Title { get; set; }
    public string Description { get; set; }
    public string Triger { get; set; }
    public int[] Controls { get; set; }
}

Home.cshtml

    var grid = new WebGrid(Model);

        @grid.GetHtml(tableStyle: "webgrid-table",           
            headerStyle: "webgrid-header",
            footerStyle: "webgrid-footer",
            alternatingRowStyle: "webgrid-alternating-row",
            selectedRowStyle: "webgrid-selected-row",
            rowStyle: "webgrid-row-style",
            mode: WebGridPagerModes.All,
            columns: new [] {              
                grid.Column("Id", "Id", canSort: true, style: "id"),
                grid.Column("Title", "Title", canSort: true, style: "title"),
                grid.Column(format: item =>                             
                         Html.ActionLink("Edit", "EditService","Home", new {Id = item.Id}, null))
                })      

Generated HTML Snippet

<tr>
  <td>
    Controls:
  </td>
  <td>    
    <select class="chosen-select" id="Mechanism_Controls"  multiple="multiple" name="Mechanism.Controls" style="width:350px">
      <option value="1">Contact  Selector</option>
      <option value="2">Value Selector</option>
      <option value="3">Text Box</option>
    </select>
  </td>                                        
</tr>

Answer 1

Change

public List<SelectListItem> Controls { get; set; }

to

public int[] Controls { get; set; }

and use

@Html.ListBoxFor(m => m.Mechanism.Controls, ...

The property will then post back with an array of the selected values

Note DropDownListFor() is for single selects and ListBoxFor() is for multiple selects