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-13 10:45:53Z

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, 2015 at 10:45

answered Jul 10, 2015 at 15:07

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

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

11 Comments

LoveFortyDown Over a year ago

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.

hutchonoid Over a year ago

@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.

LoveFortyDown Over a year ago

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?

hutchonoid Over a year ago

@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.

LoveFortyDown Over a year ago

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<Item>?

|

Mohit S · Accepted Answer · 2020-09-07 09:45:50Z

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 7, 2020 at 9:45

Mohit S

14.1k6 gold badges36 silver badges73 bronze badges

answered May 4, 2020 at 9:56

Howard Ricketts

414 bronze badges

Comments

Liam · Accepted Answer · 2019-02-21 13:25:09Z

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, 2019 at 13:25

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Feb 21, 2019 at 12:03

Priyanka Arora

4675 silver badges10 bronze badges

Collectives™ on Stack Overflow

MVC Model with a list of objects as property

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related