Mvc3 and Jquery Multiselect, sending values to server not working?

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();

Sridhar Mallipudi · Accepted Answer · 2013-11-29 13:29:29Z

1

I had the same issue, although your provided solution still works. There is another way of doing it with less effort.

Actually defaultModelbinder does bind to multiple selected values if you can change your input parameter to List<inputparameter> and change the line @Html.DropDownListFor to @Html.ListBoxFor.

The key difference between these 2 controls is, First one being a single selection box and second one being a multiple selector.

Hope this helps some one having the same issue.

answered Nov 29, 2013 at 13:29

Sridhar Mallipudi

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Davor Zubak · Accepted Answer · 2012-03-13 13:52:35Z

0

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!

answered Mar 13, 2012 at 13:52

Davor Zubak

4,74614 gold badges62 silver badges96 bronze badges

Collectives™ on Stack Overflow

Mvc3 and Jquery Multiselect, sending values to server not working?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related