CheckBox List ?

Question

User-13689440 posted

I have the following code behind

public List<string> Reason { get; set; }

public ReasonDecode reasonDecode = new ReasonDecode();

Which list I am displaying as a listbox 

@Html.LabelFor(m => m.Reason)

@(Html.ListBoxFor(m => m.Reason, Model.ReasonDecode.GetSelectList()))

How do I convert this ListBox to a CheckBox List in MVC ? So that when user checks multiple options they are now in List<string> Reason

Answer 1

User1520731567 posted

Hi SSpost,

According to your description,do you mean you want to implement multiple selection in listbox with model？

I make a demo,you could refer to:

  public class OpsViewModel
        {
            ...
            public IList<SelectListItem> Carrier { get; set; }//define data source of listbox 
            public List<string> SelectedCarrierId { get; set; }

        }

public ActionResult SendEmailView(OpsViewModel model)
{
                ...
                var model = new OpsViewModel();
                model.Carrier  = new List<SelectListItem>
                {
                    new SelectListItem {Text = "Apple1", Value = "1"},
                    new SelectListItem {Text = "Pear1", Value = "2"},
                    new SelectListItem {Text = "Banana1", Value = "3"},
                    new SelectListItem {Text = "Orange1", Value = "4"},
                };
               return View(model);
}

View:

@model xxx.OpsViewModel

...

@Html.ListBoxFor(model => model.SelectedCarrierId, Model.Carrier, new { @class = "col-md-2" })
...
<button type="submit" class="btn btn-primary">Send</button>
...

       [HttpPost]
        public ActionResult SendEmailView(OpsViewModel model)
        {
           ...
        }

How my demo works:

More details,you could refer to:

https://stackoverflow.com/questions/1255472/how-does-a-multiple-select-list-work-with-model-binding-in-asp-net-mvc

https://stackoverflow.com/questions/42126367/listboxfor-multiselectlist-does-not-select-values

Best Regards.

Yuki Tao

Answer 2

User-271186128 posted

Hi SSpost,

How do I convert this ListBox to a CheckBox List in MVC ? So that when user checks multiple options they are now in List<string> Reason

From your description, it seems that you want to use check box list to display the select options, and you want to set the default selected options when page load. If that is the case, please refer to the following code:

        public ActionResult Create()
        {
            ProductList_VM pvm = new ProductList_VM()
            {
                ProductList = new List<Product>() {
                    new Product(){ ProName="P1", ProId=1001},
                    new Product() { ProName = "P2" , ProId=1002},
                    new Product() { ProName = "P3" , ProId=1003},
                    new Product() { ProName = "P4" , ProId=1004},
                    new Product() { ProName = "P5" , ProId=1005} },
                SelectItems = new List<string>() { "1001", "1002", "1005" }

            };

            return View(pvm);
        }
        [HttpPost]
        public ActionResult Create(ProductList_VM productList_VM, string[] SelectedProducts)
        {
            productList_VM.SelectItems = SelectedProducts.ToList();
            return View();
        }

Code in view:

@model webapps.Controllers.ProductList_VM

@{
    ViewBag.Title = "Create";
}

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
<div class="form-horizontal">
    <h4>ProductList_VM</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            @foreach (var item in Model.ProductList)
            {
            <div class="checkbox">
                <label>
                    <input type="checkbox"
                           name="SelectedProducts"
                           value="@item.ProId"  @if (Model.SelectItems.Contains(item.ProId.ToString())) { @Html.Raw("checked = 'checked'")} /> @item.ProName
                    </label>
                </div>
                }
            </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

the screenshot as below:

page load:

after select the P4 option and click the create button, we could get the selected value:

Best regards,
Dillion

Answer 3

User-1171043462 posted

Refer

Implement CheckBoxList in ASP.Net MVC

Also you can convert ListBox to a CheckBoxList using a jQuery plugin

Multiple Select (Multi-Select) DropDownList with CheckBoxes in ASP.Net MVC Razor