如何在ASP.NET ViewModels中填充包含从视图到控制器的字符串列表的对象列表

Question

I am using ASP.NET MVC5 I would like to store list of questions that contain:

1. The questions itself
2. The correct answer
3. List of wrong answers.

I am not sure what are the codes needed to accommodate my needs in the view to pass the required data from the form into the List<Question>jobQuestions in JobPostViewModel.

These are the codes that I have done :

public class JobPostViewModel
{
    public class Question
    {
        public string theQuestion { get; set; }
        public string RightAnswer { get; set; }
        public List<string> WrongAnswers { get; set; }
    }

    public List<Question>jobQuestions { get; set; }
}

I have tried many ways such as:

<div class="form-group">
     <div class="col-md-10">
          @Html.TextBoxFor(model => model.jobQuestions.FirstOrDefault().theQuestion, new { @class = "form-control", })
          @Html.TextBoxFor(model => model.jobQuestions.FirstOrDefault().RightAnswer, new { @class = "form-control", })
          @Html.TextBoxFor(model => model.jobQuestions.FirstOrDefault().WrongAnswers, new { @class = "form-control", })
          @Html.TextBoxFor(model => model.jobQuestions.FirstOrDefault().WrongAnswers, new { @class = "form-control", })
          @Html.TextBoxFor(model => model.jobQuestions.FirstOrDefault().WrongAnswers, new { @class = "form-control", })
</div>

But it does not work as I expected.

I know could do something like :

public class JobPostViewModel
{
    public string question1 { get; set;}
    public string correctAnswer1 { get; set;}
    public List<string>IncorrectAnswers1 { get; set;}
    public string question2 { get; set;}
    public string correctAnswer2 { get; set;}
    public List<string>IncorrectAnswers2 { get; set;}
}

and the view I just need to do:

@using (Html.BeginForm()) 
{
    @Html.TextBoxFor(model => model.question1, new { @class = "form-control", })
    @Html.TextBoxFor(model => model.correctAnswer1 , new { @class = "form-control", })
    @Html.TextBoxFor(model => model.IncorrectAnswers1 , new { @class = "form-control", })
    @Html.TextBoxFor(model => model.IncorrectAnswers1 , new { @class = "form-control", })
    @Html.TextBoxFor(model => model.IncorrectAnswers1 , new { @class = "form-control", })

    @Html.TextBoxFor(model => model.question2, new { @class = "form-control", })
    @Html.TextBoxFor(model => model.correctAnswer2 , new { @class = "form-control", })
    @Html.TextBoxFor(model => model.IncorrectAnswers2 , new { @class = "form-control", })
    @Html.TextBoxFor(model => model.IncorrectAnswers2 , new { @class = "form-control", })
    @Html.TextBoxFor(model => model.IncorrectAnswers2 , new { @class = "form-control", }) 

    <p>
       <input type="submit" value="Save" />
   </p>
}

But it is definitely not a good idea especially If I am going to collect hundred of questions.

Thanks for any suggestion!

Answer 1

Something like this would work, using your existing Question model.

@using (Html.BeginForm()) 
{
    @Html.TextBoxFor(model => model.question, new { @class = "form-control", })
    @Html.TextBoxFor(model => model.correctAnswer , new { @class = "form-control", })

    @for (int i = 0; i < Model.WrongAnswers.Count; i++)
    {
        @Html.TextBoxFor(model => model.WrongAnswers[i], new { @class = "form-control", })
    }