How to Create CheckboxList in Asp.Net MVC

CheckboxList is used to provide some options to be select by the user. In this article we will create a list of items and then pass it to view to create a checkbox list.

Create two classes with the following format

public class CollectionVM
{
    public List<ChoiceViewModel> ChoicesVM { get; set; }
    public List<Int64> SelectedChoices { get; set; }
}

public class ChoiceViewModel
{
    public Int64 SNo { get; set; }
    public string Text { get; set; }
}

In controller’s action method write following code in which we will create a new list having some items created below. When we return this ViewModel in the view, we first set the SelectedChoices object to a new blank list of same type.

CollectionVM collectionVM = new CollectionVM();
List<ChoiceViewModel> choiceList = new List<ChoiceViewModel>();
choiceList.Add(new ChoiceViewModel() { SNo = 1, Text = "Objective Choice 1" });
choiceList.Add(new ChoiceViewModel() { SNo = 2, Text = "Objective Choice 2" });
choiceList.Add(new ChoiceViewModel() { SNo = 3, Text = "Objective Choice 3" });
choiceList.Add(new ChoiceViewModel() { SNo = 4, Text = "Objective Choice 4" });

collectionVM.ChoicesVM = choiceList;
collectionVM.SelectedChoices = new List<long>();
return View(collectionVM);

In View page start a loop to create individual checkbox and label for each item added above.

@using (Html.BeginForm())
{
    <div>
        <ul>
            @foreach (var choice in Model.ChoicesVM)
            {
                <li>
                    <input 
                                id="choice@(choice.SNo)"
                                type="checkbox" 
                                name="SelectedChoices"
                                value="@choice.SNo"
                                @(Model.SelectedChoices.Contains(choice.SNo) ? "checked" : "")/>
                    <label for="operator@(choice.SNo)">@choice.Text</label>
                </li>
            
            }
        </ul>
        <input type="submit" value="Submit" name="submitBtn" id="submitBtn" />
    </div>
}

Check out above very simple code through which we will set all the checked item's sNo in the object SelectedChoices we have sent by viewmodel. And in the second line, particular label have been designed for each checkbox.

Now what happen when we submit this form. Write the HttpPost method of same action having this Viewmodel as parameter like:

[HttpPost]
        public ActionResult Index(CollectionVM collectionVM)
        {

This collectionVM object have all the SNo's of checked items by user. So we have created a checkbox list and then access all the checked items in our controller's action.

Use Multiple models in single view