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?
12 Answers
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="">
</head>
<body> <div> @using (Html.BeginForm("Index", "Home")) { foreach (var item in Model.AvailableFruits) { <div> <label> <input type="checkbox" name="SelectedFruits" value="@item.Value" @if(Model.SelectedFruits.Contains(item.Value)) { <text> checked </text> } /> @item.Text </label> </div> } <div> <input type="submit" 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> @Html.HiddenFor(model => model.hobbies, new { htmlAttributes = new { id = "hobbies" } }) Hobbies : <input type="checkbox" onchange="getSelected()" value="Reading" /> Reading <input 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>
