ASP.NET MVC Multiple Radiobutton Forms

Question

I am working on an ASP.NET MVC application which allows users to create their own surveys. For the sake of simplicity in answering this question, lets say that they can only create surveys with multiple-choice questions, each of which will be displayed to a survey-taker as a question followed by a list of radiobuttons representing each possible answer. Users can create as many multiple-choice questions in a survey as they want.

So, I have a ViewModel as follows:

public class SurveyViewModel
{
    public int Id { get; set; }
    public IList<Question> Questions { get; set; }
}

public class Question
{
    public int Id { get; set; }
    public string Question { get; set; }
    public IList<Answer> Answers { get; set; }
}

public class Answer
{
    public int Id { get; set; }
    public string LabelText { get; set; }
}

Usually, I would just add a field for each question in the form to the SurveyViewModel . However, in this case I obviously don't know how many questions exist because the user can create however many they want - so I can't create a field to store the user's answer for each question.

So my question is: How can I write the ViewModel and the View (in Razor syntax) so that I can submit a form to a Controller, such that the responses to each of the arbitrary number of multiple-choice questions can be saved?

I have spent a long time banging my head against the wall on this one, so all help is much appreciated! Thank you!

Answer 1

Not sure exactly what you're asking because it seems you have everything you need, or at least most of what you need. In your view, you would just iterate over Questions on your view model, and then for each question, iterate over Answers . The only thing to bear in mind is that you need to use a for loop rather than foreach so you can index the list properties, allowing Razor to generate the right input names for the modelbinder. The one modification you need to make is to add a property like the following to Question :

public int SelectedAnswerId { get; set; }

Then, your view would look something like:

@for (var i = 0; i < Model.Questions.Count(); i++)
{
    <p>@Model.Questions[i].Question</p>

    @for (var j = 0; j < Model.Questions[i].Answers.Count(); j++)
    {
        @Html.RadioButtonFor(m => m.Questions[i].SelectedAnswerId, Model.Questions[i].Answers[j].Id, new { id = "Question" + i.ToString() + "Answer" + j.ToString() })
        <label for="Question@(i)Answer@(j)">@Model.Questions[i].Answers[j].LabelText</label>
    }
}

EDIT : Corrected radio button labels by passing an id for each each radio button and creating a label using that id. Otherwise, you'd end up with a bunch of labels that wouldn't actually activate the appropriate radio button.