locked
CheckBox List ? RRS feed

  • 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

    Thursday, September 6, 2018 10:23 PM

All replies

  • 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

    Friday, September 7, 2018 5:42 AM
  • 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

    Tuesday, September 18, 2018 8:36 AM
  • 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

    Tuesday, September 18, 2018 11:25 AM