MVC checkbox list

 Although it appears to be rather simple taks to add a checkbox list for multiselect items in MVC, in reality it takes a bit of time to get around the concepts and limitations of the framework. So here is a step-by-step list to save the exploration time.

Disclaimer: This article uses techniques mentioned in the last answer at https://stackoverflow.com/questions/40160998/checkboxlist-using-asp-net-mvc-5

 

1. I had two lists in the controller, one list of all possible values and another of the selected items. To be able to display all values from one list and pre-select only  those which were present in the second list, it is very convenient to use a CheckboxViewModel class as explained in the last answer of above post.
2. I also added one more property to the CheckboxViewModel class which stores id of the object to which it belongs, thus this simplifies the process of generating entities for database update.
3. I found out that IEnumerable<CheckboxViewModel> for checkbox binding in view fails to bind values properly in postback methods, so I changed the property type to CheckboxViewModel[].
4. Need to add hidden fields for each of the property of  CheckboxViewModel class.

 

 

Thus CheckboxViewModel class becomes 

      

public class CheckboxViewModel

    {

        public int Id { get; set; }

 

        public string Name { get; set; }

 

        public bool Checked { get; set; }

 

        public int ParentId { get; set; }

    }

 

 And final extension method looks like

 

public static CheckboxViewModel[] CreateCheckboxList<T>(this IEnumerable<T> entities, Func<T, int> value, Func<T, object> text, Func<T, bool> isChecked, Func<T, int> parentId)

        {

            return entities.Select(x => new CheckboxViewModel

            {

                Id = (int)value(x),

                Name = text(x).ToString(),

                Checked = isChecked(x),

                ParentId = parentId(x)

            }).ToArray();

        }

 
   View looks like

<div class="form-group">

    <div class="checkbox checkbox-primary">

        @Html.HiddenFor(model => model.MyCheckboxList[i].Id)

        @Html.CheckBoxFor(model => model.MyCheckboxList[i].Checked)

        @Html.HiddenFor(model => model.MyCheckboxList[i].Checked)

        @Html.LabelFor(model => model.MyCheckboxList[i].Checked, Model.MyCheckboxList[i].Name)

        @Html.HiddenFor(model => model.MyCheckboxList[i].Name)

        @Html.HiddenFor(model => model.MyCheckboxList[i].ParentId)

    </div>

</div>