MVC model for dynamic survey form

Question

Consider a dynamic survey form that consit of n questions and for each question there can be n answers

<form>
<!-- Question block -->
    <input id="QuestionText" name="QuestionText" placeholder="Text otázky" value="" type="text">
    <table>
        <!-- Answer block -->
        <tr><td><input name="AnswerIsCorrect" type="checkbox"></td>
            <td><input name="AnswerText" type="text"></td>
        </tr>
        <!-- Answer block END -->
        <tr><td><input name="AnswerIsCorrect" type="checkbox"></td>
            <td><input name="AnswerText" type="text"></td>
        </tr>
        <!-- More answers -->
    </table>
    <input id="QuestionComment" type="text">
    <!-- Question block END -->

    <!-- More questions -->
</form>

Is it possible to have MVC parse it on submit to similar structure as:

public  class CreateSurveyModel
{
    public List<QuestionModel> Questions { get; set; }
}
public class QuestionModel
{
    public string QuestionText { get; set; }
    public string QuestionComment { get; set; }
    public List<AnswerModel> Answers { get; set; }
}
public class AnswerModel
{
    public string AnswerText { get; set; }
    public bool IsCorrect { get; set; }
}

If so how?

EDIT (as suggested in the answers):

@using(Html.BeginForm("Send", "Try", FormMethod.Post/*or FormMethod.Get*/))
{
    foreach(var question in Model.Questions)
    {
        <!-- Question block -->

         @Html.TextBox("QuestionText", question.QuestionText)            
         <table>
             @foreach(var answer in question.Answers)
             {
                 <!-- Answer block -->
                 <tr>
                     <td>@Html.CheckBox("AnswerIsCorrect", answer.IsCorrect)</td>
                     <td>@Html.TextBox("AnswerText", answer.AnswerText )</td>
                 </tr>
                 <!-- Answer block END -->
             }
         </table>
         @Html.TextBox("QuestionComment", question.QuestionComment)
         <!-- Question block END -->
    }
    <input type="submit"/>
}

And action:

[HttpPost]
public ActionResult Send(CreateSurveyModel model)
{
    return Index();
}

But model.Questions is null

Solution

Use the following structure in your View:

@using (Html.BeginForm())
{
    for (int i = 0; i < Model.Questions.Count(); i++)
    {
        @Html.TextBoxFor(model => model.Questions[i].QuestionText, new { placeholder = "Text otázky" })
        <table>
            @for (int j = 0; j < Model.Questions[i].Answers.Count(); j++)
            {
                <!-- Answer block -->
                <tr>
                    <td>@Html.CheckBoxFor(model => model.Questions[i].Answers[j].IsCorrect)</td>
                    <td>@Html.TextBoxFor(model => model.Questions[i].Answers[j].AnswerText)</td>
                </tr>
            }
        </table>
        @Html.TextBoxFor(model => model.Questions[i].QuestionComment)
        <!-- Question block END -->
    }
    <input type="submit"/>
}

This code should help you to populate correctly the View and also to pass correctly the Model to the View.

Update

You can test with the following Action methods

public ActionResult Send()
{
    CreateSurveyModel model = new CreateSurveyModel();
    model.Questions = new List<QuestionModel>()
    {
        new QuestionModel()
        {
            QuestionText = "1",
            QuestionComment = "Comment 1",
            Answers = new List<AnswerModel>()
            {
                new AnswerModel()
                {
                    AnswerText = "A1",
                    IsCorrect = false,
                },
                new AnswerModel()
                {
                    AnswerText = "A2",
                    IsCorrect = true,
                },
                new AnswerModel()
                {
                    AnswerText = "A3",
                    IsCorrect = false,
                },
                new AnswerModel()
                {
                    AnswerText = "A4",
                    IsCorrect = true,
                },
            }
        },
        new QuestionModel()
        {
            QuestionText = "2",
            QuestionComment = "Comment 2",
            Answers = new List<AnswerModel>()
            {
                new AnswerModel()
                {
                    AnswerText = "A5",
                    IsCorrect = false,
                },
                new AnswerModel()
                {
                    AnswerText = "A6",
                    IsCorrect = false,
                },
                new AnswerModel()
                {
                    AnswerText = "A7",
                    IsCorrect = false,
                },
                new AnswerModel()
                {
                    AnswerText = "A8",
                    IsCorrect = true,
                },
                new AnswerModel()
                {
                    AnswerText = "A9",
                    IsCorrect = false,
                },
            }
        }
    };

    return View(model);
}

[HttpPost]
public ActionResult Send(CreateSurveyModel model)
{
    return View();
}

Note: Don't forget that you should populate some data to you view.

Comments

[Vojtech B]

Does not seem to work. This is my question in the first place. How would you serialize this form into a post request? - To be more precize the Questions property in the model is null upon the post

[ssimeonov]

What do you mean? Show us you Action method in order to further help you.

[Vojtech B]

So when you click the submit button, the action gets the model with properly serialized data?

[Vojtech B]

Thank You. I did probably something wrong and to be honest I wouldn't expect it to work in the first place...

[Anmol Rathod]

would this CreateSurveyModel model in post event give me the selected answers and its comment...?