Here’s an example of how to do that.
HomeModel.cs
public class HomeModel
{
public IList<string> SelectedFruits { get; set; }
public IList<SelectListItem> AvailableFruits { get; set; }
public HomeModel()
{
SelectedFruits = new List<string>();
AvailableFruits = new List<SelectListItem>();
}
}
HomeController.cs
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new HomeModel
{
AvailableFruits = GetFruits()
};
return View(model);
}
[HttpPost]
public ActionResult Index(HomeModel model)
{
if (ModelState.IsValid)
{
var fruits = string.Join(",", model.SelectedFruits);
// 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 = "Apple"},
new SelectListItem {Text = "Pear", Value = "Pear"},
new SelectListItem {Text = "Banana", Value = "Banana"},
new SelectListItem {Text = "Orange", Value = "Orange"},
};
}
}
Index.cshtml
@model DemoMvc.Models.HomeModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
@using (Html.BeginForm("Index", "Home"))
{
foreach (var item in Model.AvailableFruits)
{
<div class="checkbox">
<label>
<input type="checkbox"
name="SelectedFruits"
value="@item.Value"
@if(Model.SelectedFruits.Contains(item.Value))
{
<text> checked </text>
}
/> @item.Text
</label>
</div>
}
<div class="form-group text-center">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
}
</div>
</body>
</html>
Which should result in the following within the Post Action:
