How do I pass dynamically created sets of Checkboxes to controller and get checked

Question

Hi all, hope you are well. Question, I have a form that creates dynamic sets of checkbox and I am looking for some info on how I can pass the selected values to the controller.

Example: Lets say there are 2 checkbox groups created (a user could create as many as these groups as they want with a click of a button). How do I pass the name which will be generated as myContact[0], myContact[1], etc.. to the controller and get checked values for each sets?

<input type="checkbox" name="myContact[0]" value="921505e0-2da4-ed11-a2fd-0050568dc8ef" checked=""> Jim

<input type="checkbox" name="myContact[0]" value="5f38c4d5-baa4-ed11-a2fd-0050568dc8ef"=""> Bob

---

<input type="checkbox" name="myContact[1]" value="921505e0-2da4-ed11-a2fd-0050568dc8ef" checked=""> Jim

<input type="checkbox" name="myContact[1]" value="5f38c4d5-baa4-ed11-a2fd-0050568dc8ef" checked=""> Bob

---

Could have more with name myContact[2], myContact[3] etc...

Thanks in advance!

Answer 1

Based on the original HTML

<form method="post">
    <div>
        <input type="checkbox" name="myContact[0].Ids" value="921505e0-2da4-ed11-a2fd-0050568dc8ef" checked> Jim
    </div>
    <div>
        <input type="checkbox" name="myContact[0].Ids" value="5f38c4d5-baa4-ed11-a2fd-0050568dc8ef"> Bob
    </div>
    <div>
        <input type="checkbox" name="myContact[1].Ids" value="921505e0-2da4-ed11-a2fd-0050568dc8ef" checked> Jim
    </div>
    <div>
        <input type="checkbox" name="myContact[1].Ids" value="5f38c4d5-baa4-ed11-a2fd-0050568dc8ef" checked> Bob
    </div>

    <div>
        <input type="submit" value="submit" />
    </div>

</form>

Model

public class MyContact
{
    public List<Guid> Ids { get; set; }
}

Test controller

[HttpPost]
public ActionResult Index(List<MyContact> myContact)
{
    return Json(myContact);
}

Answer 2

you should add a binding field. as more than checkbox can be checked in a group. it should be an array. only the checked values will be posted by the browsers. add property

public Guid[] NameIDs {get; set;}

to the MyContact class then bind to it:

<input type="checkbox" name="myContact[0].NameIDs" value="921505e0-2da4-ed11-a2fd-0050568dc8ef" checked=""> Jim