52

How can I create a checkboxList in asp.net MVC and then to handle the event with the checkboxList

user
  • 623
  • 1
  • 8
  • 9
  • Try this [Checkbox And Radio Button Editor Templates In Mvc 4](http://www.jquery2dotnet.com/2013/06/checkbox-and-radio-button-editor.html) – Sender Feb 24 '14 at 09:20

2 Answers2

63

You could have a view model:

public class MyViewModel
{
    public int Id { get; set; }
    public bool IsChecked { get; set; }
}

A controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new[] 
        {
            new MyViewModel { Id = 1, IsChecked = false },
            new MyViewModel { Id = 2, IsChecked = true },
            new MyViewModel { Id = 3, IsChecked = false },
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(IEnumerable<MyViewModel> model)
    {
        // TODO: Handle the user selection here
        ...
    }
}

A View (~/Views/Home/Index.cshtml):

@model IEnumerable<AppName.Models.MyViewModel>
@{
    ViewBag.Title = "Home Page";
}
@using (Html.BeginForm())
{
    @Html.EditorForModel()
    <input type="submit" value="OK" />
}

and the corresponding Editor template (~/Views/Home/EditorTemplates/MyViewModel.cshtml):

@model AppName.Models.MyViewModel
@Html.HiddenFor(x => x.Id)           
@Html.CheckBoxFor(x => x.IsChecked)

Now when you submit the form you would get a list of values and for each value whether it is checked or not.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • Awesome this is definitely the way to go! – superlogical Apr 11 '11 at 14:42
  • Hi Darin Dimitrov - I have a question. I was trying this out and was able to get it working. I do have an HTML helper working for this. But I wanted to try this approach too. In my case the label's for the checkboxes are dynamic and so I am looking for a way to bind them to the editor template. Can you please recommend a way of doing that? Thank you! – k25 Jul 14 '11 at 14:46
  • 1
    I also posted a question regarding this, just now. Please refer to it in case you have a few minutes - http://stackoverflow.com/questions/6695022/asp-net-mvc-3-checkboxlist-need-some-suggestions and a +1 for such an elegant solution! – k25 Jul 14 '11 at 14:47
  • Look at this http://stackoverflow.com/questions/13192502/pass-selected-checkbox-value-in-mvc – bala3569 Nov 02 '12 at 10:41
19

There is even simpler way - use custom @Html.CheckBoxList() extension from here: http://www.codeproject.com/KB/user-controls/MvcCheckBoxList_Extension.aspx

Usage example (MVC3 view with Razor view engine):

@Html.CheckBoxList("NAME",                  // NAME of checkbox list
                   x => x.DataList,         // data source (list of 'DataList' in this case)
                   x => x.Id,               // field from data source to be used for checkbox VALUE
                   x => x.Name,             // field from data source to be used for checkbox TEXT
                   x => x.DataListChecked   // selected data (list of selected 'DataList' in thiscase),
                                            // must be of same data type as source data or set to 'NULL'
                  )
mikhail-t
  • 4,103
  • 7
  • 36
  • 56
  • I tried using that with VERSION 3.0. Above link by @mik-t will work with only .NET 4.0 or 4.5 and MVC4 – Sandeep Sep 02 '14 at 20:43
  • The solution above was posted for older version of extension, it did work with MVC3 back then, try this older version from NuGet, it should work: http://www.nuget.org/packages/MvcCheckBoxList/1.4.3 – mikhail-t Oct 06 '14 at 19:38