MVC @Razor View for Editing Model with Collection

Question

I am trying to display and edit a 'Permit Application'. If it was a piece of paper the top portion would have personal details to fill in. The bottom portion would be a vertical list of questions with a blank space at the end of each row to write an answer to each question.

So my model is a PermitApplication object which contains with a 'Requestor' object (The applicant) and an array of 'Response' objects which are questions with a string 'Answer' property.

After a lot of thrashing about I am coming to the conclusion maybe what I am trying to does not work under MVC. i.e. Give this sort of model to the view, edit the personal details, fill in the answers to the questions and post the model back. The view displays OK but when the submit button is pressed the PermitApplication object passed back to the controller only has the personnel details filled in. The returned Responses object is null. My MVC skills and understanding is limited so my question is 'What is the correct way to tackle this situation? My View (latest attempt) follows:

@model PermitApply.Models.LclPermitApplication

@using (Html.BeginForm())
{
    <div class="form-group">
    @Html.LabelFor(model => model.Requestor.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Requestor.FirstName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Requestor.FirstName, "", new { @class = "text-danger" })
    </div>
</div>




<h2>Permit Questions</h2>
<table class="table">
    <tr>
        <th>
            Question Id
        </th>
        <th>Question</th>
        <th>QuestionTypeId</th>



    </tr>    


    @foreach (var item in Model.Responses)
    {
        <tr>

            <td>
                @Html.DisplayFor(p => item.QuestionId)
            </td>
            <td>
                @Html.DisplayFor(p => item.Question)
            </td>
            <td>
                @Html.DisplayFor(p => item.QuestionTypeId)
            </td>
            <td>
                <div class="col-md-10">

                    @Html.EditorFor(p => item.Answer, new { id = item.QuestionId })
                    @Html.ValidationMessageFor(p => item.Answer, "", new { @class = "text-danger" })
                </div>
            </td>

        </tr>
    }
</table>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Save" class="btn btn-default" />
    </div>
</div>

}

Answer 1

Try updating the foreach loop to below:

@count = 0;

@foreach (var item in Model.Responses)
{
    <tr>

        <td>
            @Html.DisplayFor(p => item.QuestionId)
        </td>
        <td>
            @Html.DisplayFor(p => item.Question)
        </td>
        <td>
            @Html.DisplayFor(p => item.QuestionTypeId)
        </td>
        <td>
            <div class="col-md-10">

                @Html.EditorFor(p => item.Answer, new {name="Responses["+count+"].Answer", id = item.QuestionId })
                @Html.ValidationMessageFor(p => item.Answer, "", new { @class = "text-danger" })
            </div>
        </td>

    </tr>
count=count+1;

}

Please read MVC model binding to better understand how MVC binds values to send to controllers. Hope this helps.