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();
}
}
The Model is the part of MVC which implements the domain logic. In simple terms, this logic is used to handle the data passed between the database and the user interface (UI). The Model is known as domain object or domain entity.
Model binding is a simplistic way to correlate C# code with an HTTP request. The model binding applies to transforming the HTTP request data in the query's form string and form collection of the action method parameters. We can consider these parameters to be primitive type or complex type.
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With