Question

I am trying to use Jquery Multiselect plugin from Beautiful site and MVC3 together to send values to server. As shown in example from Darin the key is to create MultiSelectModelBinder class that will, I guess, recognize values send from client, because the multiselect plugin uses the [] notation to send the selected values to the server. My aproach is a little diferent, i fill dropDownList from my controller and not the model, keeping the model clean, and also been able to fill the list from Database. I used Darins example to create MultiSelectModelBinder and register it,in the model binder in Application_Start(). My problem is that I always keep getting empty Model back to my controller, here is the code:

MODEL:

public class PersonsSearchModel
{
    public string Person { get; set; }
    public string Company { get; set; }

    //here is my Cities collection
    public IEnumerable<string> Cities { get; set; }
} 

VIEW:

@model MyNamespace.Model.PersonsSearchModel
@using (Ajax.BeginForm("Search", "Persons", new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "results",
    LoadingElementId = "progress"
},
    new { @id = "searchFormPerson" }
))
{    
  <span>
      @Html.TextBoxFor(x => Model.Person, new { @class = "halfWidth"})
  </span> 
  <span>
      @Html.TextBoxFor(x => Model.Company, new { @class = "halfWidth"})
  </span> 
  <span>
      @Html.ListBoxFor(x => x.Cities, Model.Items, new { @id="combobox1"})
  </span>
  <input name="Search" type="submit" class="searchSubmit" value="submit" />
}

CONTROLLER:

public ActionResult Index()
{

    var listCities = new List<SelectListItem>();
    listCities.Add(new SelectListItem() { Text = "Select one...", Value = "" });
    listCities.Add(new SelectListItem() { Text = "New York", Value = "New York" });
    listCities.Add(new SelectListItem() { Text = "Boston", Value = "Boston" });
    listCities.Add(new SelectListItem() { Text = "Miami", Value = "Miami" });
    listCities.Add(new SelectListItem() { Text = "London", Value = "London" });

    ViewBag.Cities = listCities;

    return View();

}

public class MultiSelectModelBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var model = (PersonsSearchModel)base.BindModel(controllerContext, bindingContext);
        var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "[]");
        if (value != null)
        {
            return value.RawValue;
        }
        return model;

    }
}

Here the data from client sholud arive, butt is always null?

public PartialViewResult Search(PersonsSearchModel psm)
{
     var person = psm.Person;
     var company = psm.Company;
     var city =  psm.Cities.ElementAt(0);

     return GetResultPartialView(city);

}

GLOBAL.asax.cs

 protected void Application_Start()
 {
     //...
    //model binder

     ModelBinders.Binders.Add(typeof(IEnumerable<string>), new
     FinessenceWeb.Controllers.PersonsController.MultiSelectModelBinder());
 }

JQUERY

$("#combobox1").multiSelect();

Answer 1

Well… After looking into DOM, and Jquery plugin, turns out the plugin gives the select element, atribute name, current id, so they are the same, and the form, well.. look’s at the name attr. So solution wolud be:

$("#Cities").multiSelect();

Cheers!