How to make Check Box List in ASP.Net MVC

I have a form with a list of checkboxes. A user can select all values, no values, or any in between. Example:

screenshot of Goal

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?


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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);

    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>

    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="" rel="nofollow noreferrer noopener">
    <div class="container">
        @using (Html.BeginForm("Index", "Home"))
            foreach (var item in Model.AvailableFruits)
                <div class="checkbox">
                        <input type="checkbox"
                                   <text> checked </text> 
                               /> @item.Text
            <div class="form-group text-center">
                <input type="submit" class="btn btn-primary" value="Submit" />

Which should result in the following within the Post Action:

Post Action

Method 2

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" />
        <input id="w" type="checkbox" value="Writing" onchange="getSelected()" />

            function getSelected() {
                var sList = "";
                $('input[type=checkbox]').each(function () {
                    if (this.checked) {
                        sList += this.value + ",";

        @Html.ValidationMessageFor(model => model.hobbies)

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x