Menu
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?
764
ASP.NET CheckBoxList is a web control that can be used to collate the items that can be checked, thus giving the user the ability to select multiple items simultaneously. This list of items in the CheckBoxList can be dynamically generated using the Data Binding functions.
The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices!
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:
146
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> 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
