无法从MVC中的Post上的ListBoxFor和MultiSelectList获取表单数据

Question

I am struggling with getting data from the post of a form where I am sorting between two group. The form looks like this. As you can see, the get action is working great and the whole page works just fine.. Here's the .cshtml view

@model InfoKeeper.Models.GroupManageVewModel
@{
    ViewBag.Title = "ManageGroup";
}

<h2>ManageGroup</h2>
@using (Html.BeginForm("ManageGroup","GroupManager", FormMethod.Post))
{
    <div class="nav-block">
        <div class="row">
            <div class="col-xs-3 col-xs-pull-1 col-xs-offset-2">
                <p>Available Groups</p>
                @Html.HiddenFor(m => m.GroupID)
                @Html.HiddenFor(m => m.CustomerID)
                @Html.ListBoxFor(m => m.ResultAvailable, Model.AvailableDepartmentsSL, new { @Name = "from[]", @id = "multiselect", @class = "form-control", @size = "8", @multiple = "multiple", @style = "min-width: 350px;margin-right:50px;" })
            </div>

            <div class="col-xs-2" style="padding-top:25px;">
                <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
                <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
                <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
                <input type="submit" value="save" class="btn btn-block btn-success">
            </div>

            <div class="col-xs-3">
                <p>Departments in Group</p>
                @Html.ListBoxFor(m => m.ResultInGroup, Model.DepartmentsInGroupSL, new { @Name = "to[]", @id = "multiselect_to", @class = "form-control", @size = "8", @multiple = "multiple", @style = "min-width: 350px" })
            </div>
        </div>
    </div>
}

Also, here is the controller...

public ActionResult ManageGroup(int GroupID, int CustomerID)
{
    GroupRepo repo = new GroupRepo();

    var model = repo.ManageGroup(GroupID, CustomerID);

    model.AvailableDepartmentsSL = new MultiSelectList(model.AvailableDepartments, "Key", "Value");
    model.DepartmentsInGroupSL = new MultiSelectList(model.DepartmentsInGroup, "Key", "Value");

    return View(model);
}

and the model...

public class GroupManageVewModel
    {
        public MultiSelectList AvailableDepartmentsSL { get; set; }
        public MultiSelectList DepartmentsInGroupSL { get; set; }
        public Dictionary<int, string> DepartmentsInGroup { get; set; }
        public Dictionary<int, string> AvailableDepartments { get; set; }
        public int GroupID { get; set; }
        public int CustomerID { get; set; }
        public string GroupName { get; set; }
        public IEnumerable<int> ResultAvailable { get; set; }
        public IEnumerable<int> ResultInGroup { get; set; }
    }

But when I submit the form... This is what I get on Post...

So, the form is posting something ... the HiddenFors. But for what ever reason my ResultAvailable and ResultInGroup are null... Please help!

Answer 1

You need to use List<int> for your ResultInGroup property. The modelbinder cannot bind to an IEnumerable , as it doesn't support indexing.

Answer 2

Okay, I am now getting the desired results. The answer lay in some thinking that Chris Pratt got me on...

Okay! So, when the form submits the option elements in each of the options do get selected. The code that does that was in the source. It has to be something else... I think it has something to do with the name of the SelectList... in order to get the plug-in to work I had to change the name of the selectlists to "from[]" and "to[]" It has to have something to do with this.... when in MVC I believe that they are typically named the prop that they are being bound to... Will report back

and I was 100% correct (I never get to say that.)

When I was putting this form together and getting the plug-in working I initially had the code from the documentation in my view which looked like...

     <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
        <option value="1">Item 1</option>
        <option value="2">Item 5</option>
        <option value="2">Item 2</option>
        <option value="2">Item 4</option>
        <option value="3">Item 3</option>
    </select>

Instead of this I decided to use the HtmlHelpers that MVC gives you so that I could submit this form and have all the data exactly where I wanted and didn't have to build a WebApi Controller and capture all of the form data with jQuery... When doing this though the functionality of the plug-in wasn't working and it was because I was trying to use the HtmlHelper Html.ListBoxFor as such

@Html.ListBoxFor(m => m.ResultAvailable, Model.AvailableDepartmentsSL, new { @name = "from[]", @id = "multiselect", @class = "form-control", @size = "8", @multiple = "multiple", @style = "min-width: 350px;margin-right:50px;" })

But when I opened the page in dev tools the name attribute wasn't set to "from[]" it was set to "ResultAvailable" After some reading I discovered that I could get the name attribute set to "from[]" by changing

@name = "from[]"

to

@Name = "from[]"

Yeah, it was case sensitive! After this the control worked but then I ran into the issue that created this question. The post was coming back with nulls... So after some thinking I thought man, I wonder what would happen if I just commented out the name attribute, meaning the control wouldn't work like in the past, and hit submit from there... To my surprise, it worked. I was right about MVC needing the name of the ListBox to not be changed since it was giving it the name it needed to do what I wanted it to do... So, naturally now the plug-in doesn't work, right? Wrong!

It works. And I have no clue why...

I should say that my solution does make me feel uneasy.. but it's a solution nonetheless. Thanks for the help SO.