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?

Answers:

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.

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" rel="nofollow noreferrer noopener">
</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:

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" />
        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>


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

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x