How to create a dynamic checkboxlist group in C# MVC?

Question

How do I create a dynamic checkboxlist groups in C# MVC Razor View as shown in the picture below.

Let say the group category is CO2 and there are sub-items below it which example shown test and test2.

looks ok with my current code but how do i do the sub-items in it?

This is my Current Code for Model

public class Sites
{
    public int SiteId { get; set; }

    public string SiteName { get; set; }

    public bool IsCheck { get; set; }
}

public class SiteList
{
    public List<Sites> sites { get; set; }
}

Controller

public ActionResult sitechecklist()
    {
        List<Sites> site = new List<Sites>();
        site.Add(new Sites() { SiteId = 1, SiteName = "CO2", IsCheck = false });
        site.Add(new Sites() { SiteId = 2, SiteName = "CO3", IsCheck = false });
        site.Add(new Sites() { SiteId = 3, SiteName = "IO", IsCheck = false });
        site.Add(new Sites() { SiteId = 4, SiteName = "NCC01", IsCheck = false });
        SiteList sList = new SiteList();
        sList.sites = site;
        return View(sList);
    }

my View

<ul>
            @for (int i = 0; i < Model.sites.Count; i++)
            {
                <li>
                    @Html.CheckBoxFor(m=>Model.sites[i].IsCheck)
                    @Model.sites[i].SiteName
                    @Html.HiddenFor(m=>Model.sites[i].SiteId)
                    @Html.HiddenFor(m=>Model.sites[i].SiteName)
                </li>
            }
        </ul>

Show what you have tried - and you cannot use `foreach` loops - you need nested `for` loops or custom `EditorTemplates` (refer [this answer](http://stackoverflow.com/questions/29542107/pass-list-of-checkboxes-into-view-and-pull-out-ienumerable/29554416#29554416) for an example — , Nov 08 '16 at 02:29
@StephenMuecke Hi i have update my current code. now the problem is how to do the sub-items? — xSea, Nov 08 '16 at 03:08
You need a nested `for` loop. Are the sub-items also typeof `Sites` (or do you refer to them as something different - say `Tests`)? — , Nov 08 '16 at 03:10
@StephenMuecke sub-items are actually rooms belong to the site itself. for example in Site CO2 there are room 1 - 10. so i want to display it out such that it is like how the example picture shown above. — xSea, Nov 08 '16 at 03:13

score 4 · Accepted Answer · 2016-11-08T03:46:21.140

Firstly, you model requires an additional collection property for the sub-items. It could be public List<Sites> Rooms { get; set; } or you might have another class (say) Rooms with similar properties

public class Room
{
    public int RoomId { get; set; }
    public string RoomName { get; set; }
    public bool IsCheck { get; set; }
}

and the Sites model will be

public class Site // should be singular, not plural - its describes one object
{
    public int SiteId { get; set; }
    public string SiteName { get; set; }
    public bool IsCheck { get; set; }
    public List<Room> Rooms { get; set; }
}

which would then be populated in the GET method using, for example

site.Add(new Site()
{
    SiteId = 1,
    SiteName = "CO2",
    Rooms = new List<Room>()
    {
        new Room() { RoomId = 1, RoomName = "Test" },
        new Room() { RoomId = 2, RoomName = "Test 2"},
    }
});

Then in the view, you need to use nested for loops

@for (int i = 0; i < Model.sites.Count; i++)
{
    // Generate the sites
    @Html.CheckBoxFor(m => m.sites[i].IsCheck)
    // @Model.sites[i].SiteName
    @Html.LabelFor(m => m.sites[i].IsCheck, Model.sites[i].SiteName)
    @Html.HiddenFor(m => m.sites[i].SiteId)
    @Html.HiddenFor(m => m.sites[i].SiteName)
    // Generate the rooms for each site
    @for(int j = 0; j < Model.sites[i].Rooms.Count; j++)
    {
        @Html.CheckBoxFor(m => m.sites[i].Rooms[j].IsCheck)
        @Html.LabelFor(m => m.sites[i].Rooms[j].IsCheck, Model.sites[i].Rooms[j].RoomName)
        @Html.HiddenFor(m => m.sites[i].Rooms[j].RoomId)
        @Html.HiddenFor(m => m.sites[i].Rooms[j].RoomName)
    }
}

Side note: I suspect you will also want some javascript to handle the outer checkboxes (if a Site is checked, then all its associated Room's should also be checked and vice versa).

Hi, i have added a new requirement i need you help once more :( im bad at loops http://stackoverflow.com/questions/40606581/how-to-add-in-a-new-loop-level-in-c-sharp-mvc — xSea, Nov 15 '16 at 09:45

score 0 · Answer 2 · answered Nov 08 '16 at 12:18

0

You can get the sub-items and control onclick event with javascript.

<td><input type="checkbox" name="MySubCheckBox" /></td>

And on script side:

$('input:checkbox[name=MySubCheckBox]:checked').each(function (rowId) {
      // your code 
});

answered Nov 08 '16 at 12:18

tdog

482
3
17

How to create a dynamic checkboxlist group in C# MVC?

2 Answers2