I have a form with a list of checkboxes. A user can select all values, no values, or any in between. Example:
I would like to write the result to the database as a comma separated list. In the example above, "Apple, Banana". I'm a bit confused how to create the model for this and how to get the results from the View to the Controller into a comma separated list?
Here's an example of how to do that.
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>();
}
}
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"},
};
}
}
@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:
You can also do Using jquery.No need to change any controller or action.It will simply add the selected checkboxes value in the database table's column as a coma separated.Just add the code in the View Page.
<div class="editor-field">
@Html.HiddenFor(model => model.hobbies, new { htmlAttributes = new { id = "hobbies" } })
Hobbies :
<input type="checkbox" id="r" onchange="getSelected()" value="Reading" />
Reading
<input id="w" type="checkbox" value="Writing" onchange="getSelected()" />
Writing
<script>
function getSelected() {
var sList = "";
$('input[type=checkbox]').each(function () {
if (this.checked) {
sList += this.value + ",";
}
});
$("#hobbies").val(sList);
}
</script>
@Html.ValidationMessageFor(model => model.hobbies)
</div>
So I hit my head against the wall on a rather foolish issue with this... Be sure that everything you work with is a Property instead of a Variable. For example...
Model.Variable.VariableList<string> may render when loading the page... However when you submit the page, you won't have your values return.
Model.Property.PropertyList<string> will work however.
To be a bit more clear...
public class MyListClass
{
public string MyListName { get; set; } = "My List Name";
//next line will show your items, but will not have changes to the items
//returned because it's not a property aka with getter and setter.
public List<CheckBoxItem> Items = new List<CheckBoxItem>;
}
public class MyModel
{
//next line will show your items, but will not have changes to the items
//returned because it's not a property aka with getter and setter.
public MyListClass MyList = new MyListClass();
}
Correct way would be...
public class MyListClass
{
public string MyListName { get; set; } = "My List Name";
public List<CheckBoxItem> Items { get; set; } = new List<CheckBoxItem>;
}
public class MyModel
{
public MyListClass MyList { get; set; } = new MyListClass();
}
I do realize here that my... intelligence is showing... but to those also banging your head on every example in the world not working, I hope this helps you.
