MVC How do I create a form for a model which conta

Question

So I have this simple model:

public class OptOut
    {
        public int optOutID { get; set; }
        public bool hasOptedOut { get; set; }        
        public List<Cohort> list { get; set; }

        public OptOut()
        {
            List<Cohort> list = new List<Cohort>();
            list.Add(new Cohort());
            list.Add(new Cohort());
            list.Add(new Cohort());
            list.Add(new Cohort());
            this.list = list;
        }

    }

Where as you can see one of the properties is a List of Cohort objects. The Cohort object has some simple boolean properties:

public class Cohort
    {
        public bool ukft { get; set; }
        public bool ukpt { get; set; }
        ...etc
    }

I want to create a form which will loop through the list of Cohort objects.

So in my Controller I pass the model to the View:

public ActionResult Page()
        {                        
            return View(new OptOut());
        }

And then in the html I create a form like this:

 @using (Html.BeginForm("OptedOut", "Home"))
        {            var m = Model.list;

            <div id="radios" class="form-group" style="margin-top:25px;">
                @Html.RadioButtonFor(model => Model.hasOptedOut, true) <span style="margin-right:8px;">Yes</span>
                @Html.RadioButtonFor(model => Model.hasOptedOut, false) <span>No</span> <br />

                //here I would normally loop through the list but I'm changing only the first element for testing purposes
                @Html.RadioButtonFor(model => m.ElementAt(0).ukft, true) <span style="margin-right:8px;">Yes</span>
                @Html.RadioButtonFor(model => m.ElementAt(0).ukft, false) <span>No</span> <br />
            </div>

            <div class="form-group">
                <input id="confirm" type="submit" value="Confirm" class="btn btn-success btn-lg"/>
            </div>
        }

So far so good. As you can see, I've added 2 sets of radio buttons - one for the simple hasOptedOut boolean property in the OptOut model and one for the ukft property of the first element in the List.

Now when I select yes (true) in both sets of radio buttons, I should expect to see hasOptedOut = true and the first ukft = true for the Cohort object in the List. So I get the model in the controller after POST:

[HttpPost]
public ActionResult OptedOut(Dlhe.Smart.Models.OptOut optout)
{                
    return View("some_view");
}

And hasOptedOut is indeed true. However, ukft remains false in the List. So I assume it's not so simple for Lists, but how do I fix this?

EDIT:

As suggested, I have tried doing this, with no luck:

@using (Html.BeginForm("OptedOut", "Home"))
        {            var m = Model.list;
            for (int i=0; i<Model.list.Count(); i++) {

                <div id="radios" class="form-group" style="margin-top:25px;">

                    @Html.RadioButtonFor(model => m[i].ukft, true) <span style="margin-right:8px;">Yes</span>
                    @Html.RadioButtonFor(model => m[i].ukft, false) <span>No</span> <br />
                </div>                
            }

                <div class="form-group" style="margin-top:25px;">
                    <input id="confirm" type="submit" value="Confirm" class="btn btn-success btn-lg"/>
                </div>
        }

Answer 1

The easiest way I think is to create an EditorTemplate for your type.

To create an EditorTemplate:

1) Create a new folder in your Views/Shared folder called Editor Templates

2) In that folder create a new, strongly typed, partial view with the name of your type as the name of the file. E.G Cohort.cshtml could look like:

@model Models.Cohort

@Html.RadioButtonFor(model => model.ukft, true) <span style="margin-right:8px;">Yes</span>
@Html.RadioButtonFor(model => model.ukft, false) <span>No</span> <br />

3) In your main view use @Html.EditorFor(model => model.list) and razor will render a partial view created in step 2 for each Cohort in the list.