MVC Model with a list of objects as property

Question

I am working on an MVC application where the Model class Item has a List<Colour> named AvailableColours as a property.

AvailableColours is a user defined subset of Colour classes. I would like to display all Colour instances in a check box list, and when submitted, AvailableColours is a List<Colour> containing the checked Colour classes.

What is the best way to do this in MVC?

Edit: My code so far, although I feel this is not the most MVC-ish way to do it!

Model

public class Item
{
    public int ID { get; set; }
    public List<Colour> AvailableColours { get; set; }
}

View

@model MyNamespace.Models.Item
@using MyNamespace.Models;
@{
    ViewBag.Title = "Create";

    var allColours = new List<Colour>(); //retrieved from database, but omitted for simplicity
}

<h2>Create New Item</h2>

@using (Html.BeginForm("Create", "Item", FormMethod.Post)) 
{
    <div>
        @Html.LabelFor(model => model.AvailableColours)

        @foreach (var colour in allColours)
        {

           <input type="checkbox" name="colours" value="@colour.Description" />
        }
    </div>

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

Controller

[HttpPost]
public ActionResult Create(Item item, string[] colours)
{
    try
    {
        foreach (var colour in colours)
        {
            item.AvailableColours.Add(GetColour(colour));//retrieves from database

            return RedirectToAction("Index");
        }
    }
    catch
    {
       return View();
    }
}

hutchonoid · Accepted Answer · 2015-07-13T10:45:53.147

35

Models

public class Item
{
   public List<Colour> AvailableColours { get;set; }
}

public class Colour
{
    public int ID { get; set; }
    public string Description { get; set; }
    public bool Checked { get; set; }

}

Note the Checked property

View for loop

@using (Html.BeginForm("Create", "Item", FormMethod.Post)) 
{
   <div>
    @Html.LabelFor(model => model.AvailableColours)
    @for(var i = 0; i < Model.AvailableColours.Count; i++)
    {    

        @Html.HiddenFor(m => Model.AvailableColours[i].ID)
        @Html.HiddenFor(m => Model.AvailableColours[i].Description)
        @Html.CheckBoxFor(m => Model.AvailableColours[i].Checked)
        @Model.AvailableColours[i].Description<br/>
     }
    </div>
<input type="submit" value="Submit" />
}

Note the for loop insted of foreach to enable model binding and the hidden fields to allow the values to be posted back to the controller

Model Binding To A List

Controller post

[HttpPost]
public ActionResult Create(Item model)
{
    //All the selected are available in AvailableColours

    return View(model);
}

edited Jul 13 '15 at 10:45

answered Jul 10 '15 at 15:07

hutchonoid

32,982
15
99
104

What is the value of `Model.Items`? Please see my edit - I am extracting the full list of colours from the database, and allowing the user to choose a subset, which is stored in the `AvailableColours` property. – LoveFortyDown Jul 13 '15 at 07:41
@PTuckley Sorry, that was a minor typo. The Property is `AvailableColours`. I also adapted it to fit with further details that you had not included in the question originally. – hutchonoid Jul 13 '15 at 08:16
I'm afraid this still isn't making much sense to me - what type is the model in your answer? There is a reference to `Model.AvailableColours` in the `for` loop declaration, but a reference to `Model[i].ID` in the hidden field? – LoveFortyDown Jul 13 '15 at 08:22
@PTuckley Usually you would have an item tied back to a database with an `ID`, if you do not need that you can simply leave that out. – hutchonoid Jul 13 '15 at 08:28
I understand that my `Colour` classes have ID fields, but how can you be accessing `Model.AvailableColours` and `Model[i]`? Is the Model an instance of `Item` or `IEnumerable`? – LoveFortyDown Jul 13 '15 at 08:34
Also, if the model was an `Item`, then `Model.AvailableColours` would initially be empty - the purpose of the form is to populate the property. – LoveFortyDown Jul 13 '15 at 08:35
@PTuckley Sorry I made a few typos with this, it should be `Model.AvailableColours[i].ID`. The 'AvailableColours' should be populated from the controller. – hutchonoid Jul 13 '15 at 08:40
Thank you - FYI, I have fixed a couple of other small typos. – LoveFortyDown Jul 13 '15 at 08:43
No problem - my edit was rejected for editing the intent of your post, but: `@Html.CheckBoxFor(m = Model.AvailableColours[i].Checked)` should be `@Html.CheckBoxFor(m => Model.AvailableColours[i].Checked)`, and `@Model.AvailableColours[i].Name` should be `@Model.AvailableColours[i].Description` if you want to edit it yourself. – LoveFortyDown Jul 13 '15 at 10:41
@PTuckley Many thanks I changed that. I need to be more careful in future. :( – hutchonoid Jul 13 '15 at 10:47
Wont Model always be null initially? – KidBilly Dec 06 '18 at 21:02

score 2 · Answer 2 · edited Sep 07 '20 at 09:45

2

Thank you for all of the advice - invaluable but there was one more change I needed to make before my program would bind to the model and that was to add a getter and a setter to the List as in:

public class CartViewModel
{
    public List<CartRowViewModel> cartRows {get; set; }

    public CartViewModel()
    {
        this.cartRows = new List<CartRowViewModel>();
    }
}

edited Sep 07 '20 at 09:45

Mohit S

13,723
6
34
69

answered May 04 '20 at 09:56

Howard Ricketts

31
4

score 0 · Answer 3 · edited Feb 21 '19 at 13:25

0

Make sure to add the constructor in the the class and declare list inside it. Other wise it would declared take null value which you won't be able to set for later.

public class Item
{
  public Item(){

    AvailableColours =new List<Color>();
}

}

edited Feb 21 '19 at 13:25

Liam

27,717
28
128
190

answered Feb 21 '19 at 12:03

Priyanka Arora

409
4
10

MVC Model with a list of objects as property

3 Answers3

Linked