Checkboxlist MVC Partial

Question

I have the following view model code:

public class TestCheckboxlistParentModel
{
    public TestCheckboxlistParentModel()
    {
        CBL = new TestCheckboxlistModel();
    }
    public TestCheckboxlistModel CBL { get; set; }
}

public class TestCheckboxlistModel
{
    public string TextField { get; set; }
    public IList<string> SelectedFruits { get; set; }
    public IList<SelectListItem> AvailableFruits { get; set; }

    public TestCheckboxlistModel()
    {
        SelectedFruits = new List<string>();
        AvailableFruits = new List<SelectListItem>();
    }
}

controller:

    public ActionResult TestCheckboxlist()
    {
        var model = new TestCheckboxlistParentModel
        {
            CBL = new TestCheckboxlistModel()
            {
                AvailableFruits = GetFruits()
            }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult TestCheckboxlist(TestCheckboxlistParentModel model)
    {
        if (ModelState.IsValid)
        {
            // Save data to database, and redirect to Success page.

            return RedirectToAction("Success");
        }
        //model.AvailableFruits = GetFruits();
        return View(model);
    }

    public ActionResult Success()
    {
        return View();
    }

    private IList<SelectListItem> GetFruits()
    {
        return new List<SelectListItem>
    {
        new SelectListItem {Text = "Apple", Value = "1"},
        new SelectListItem {Text = "Pear", Value = "2"},
        new SelectListItem {Text = "Banana", Value = "3"},
        new SelectListItem {Text = "Orange", Value = "4"},
        };
    }

partial view:

@model Web.ViewModels.TestCheckboxlistModel

<div class="form-group">
    @Html.LabelFor(model => model.TextField)
    <div class="col-md-10">
        @Html.EditorFor(model => model.TextField)
    </div>
</div>

    @foreach (var item in Model.AvailableFruits)
    {
<div class="checkbox">
    <label>
        <input type="checkbox"
               name="@Html.IdFor(p=>p.SelectedFruits)"
               value="@item.Value" /> @item.Text
        </label>
    </div>
    }

view:

@model Web.ViewModels.TestCheckboxlistParentModel

@{
    ViewBag.Title = "TestCheckboxlist";
    Layout = "~/Views/Shared/_LayoutApplicationDriver.cshtml";
}

@using (Html.BeginForm())
{

    @Html.Partial("TestPartialCheckboxlist", Model.CBL, new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "CBL" } })
    <div class="form-group text-center">
        <input type="submit" class="btn btn-primary" value="Submit" />
    </div>
}

Problem is SelectedFruits always does not have any elements in post method. The same code work correctly, if I don't use nested Partial view. Property TextField works fine with Partial

PS. It's not a dublicate of How to make Check Box List in ASP.Net MVC question. That question is a base of my answer. In my case, I need to have checkboxlist in partial view, where it does not work!

Answer 1

You use of name="@Html.IdFor(p => p.SelectedFruits)" generates name="CBL_SelectedFruits", but in order to bind to your model, you would need name="CBL.SelectedFruits" (note the . dot, not _ underscore) which you could generate using

name="@Html.NameFor(p => p.SelectedFruits)"

However there are other issues with your code. Your not strongly binding to your model, you get no validation, your generating a IList<SelectListItem> for property AvailableFruits when you don't need it (it could be just IList<string> AvailableFruits, and most importantly, if you return the view, all the checkboxes the user checked are lost (all checkboxes will be unchecked).

Change your view models so that you can strongly bind to your properties

public class FruitVM
{
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}
public class ParentVM
{
    public string TextField { get; set; }
    public List<FruitVM> Fruits { get; set; }
}

and in the GET method

ParentVM model = new ParentVM
{
    Fruits = new List<FruitVM>{ 
        new FruitVM{ Name = "Apple" },
        new FruitVM{ Name = "Pear" }, 
        ....       
    }
};
return View(model);

and create an EditorTemplate for FruitVM - in /Views/Shared/EditorTemplates/FruitVM.cshtml

@model FruitVM
@Html.CheckBoxFor(m => m.IsSelected)
@Html.LabelFor(m => m.IsSelected, Model.Name)

and in the view

@Html.ParentVM
....
@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.TextField)
    @Html.EditorFor(m => m.TextField)

    @Html.EditorFor(m => m.Fruits)

    <input type="Submit" value="Save" />
}

The EditorFor() method will generate the correct html for each item in your collection.

Then in the POST method, you can get the selected items with

[HttpPost]
public ActionResult TestCheckboxlist(ParentVM model)
{
    ....
    List<string> selectedFruits = model.Fruits.Where(x => x.IsSelected);