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 for an example — user3559349
– user3559349, Commented Nov 8, 2016 at 2:29
@StephenMuecke Hi i have update my current code. now the problem is how to do the sub-items? — xSea
– xSea, Commented Nov 8, 2016 at 3: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)? — user3559349
– user3559349, Commented Nov 8, 2016 at 3: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
– xSea, Commented Nov 8, 2016 at 3:13

score 4 · Accepted Answer · 2016-11-08 03:46:21Z

4

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).

edited Nov 8, 2016 at 3:46

answered Nov 8, 2016 at 3:34

user3559349

Sign up to request clarification or add additional context in comments.

2 Comments

xSea Over a year ago

Great ! Thanks you!

xSea Over a year ago

Hi, i have added a new requirement i need you help once more :( im bad at loops stackoverflow.com/questions/40606581/…

tdog · Accepted Answer · 2016-11-08 12:18:37Z

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 8, 2016 at 12:18

tdog

4803 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related