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();
}
}
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
Controller post
[HttpPost]
public ActionResult Create(Item model)
{
//All the selected are available in AvailableColours
return View(model);
}
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>();
}
}
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>();
}
}