View not passing data to controller - asp.net-mvc

Question

I've been looking on SO and google for over a week now and still was unable to find the working answer. Hopefully someone can help me.
Im working on a project with asp.net (Entity Framework + Razor) and I'm trying' to add two models to the views. It is showing perfectly, using editorFor(). Now the problem is some part is not passing the information to the controller.
In this case every exercise got some answers. This is my exercise model:
Table("Exercise")]
public class ExerciseModel
{
[Key]
public int ExerciseId { get; set; }
[Required]
public string Question { get; set; }
[Required]
public List<AnswerModel> Answers { get; set; }
And this the answermodel:
[Table("Answer")]
public class AnswerModel
{
[Key]
public int AnswerId { get; set; }
[Required]
public string Answer { get; set; }
}
The view exists out of two parts, the exercise part (the working one) and the answer part. I want to add more answers into a list in exercisemodel. I've tried different ways. Editor templates, partial views etc.
This is the view:
You can create a new question and add answers on the go using Jquery. What i want to create is that i can post answers into that list in exercisemodel.
#using (Html.BeginForm("CreateQuestion", "Admin", FormMethod.Post))
{
#Html.ValidationSummary(true)
//will be changed
#Html.Partial("_PartialCreateExercise")
//this shows the answers form
<div style="display: none;" id="new">
<div class="editor-field">
#Html.EditorFor(m => m.Answers);
</div>
</div>
<p>
<input name="command" type="button" id="add" value="add new answers" />
</p>
<p>
<input name="command" type="submit" value="Create" />
</p>
}
This works, but when i submit the page the List in exercisemodel (of type AnswerModel) remains empty. And finally the editor template for answers:
#model Academy.Models.AnswerModel
#{
Layout = null;
}
<h2>Answer</h2>
<p>
#Html.LabelFor(model => model.Answer)
#Html.EditorFor(model => model.Answer)
</p>
The jQuery:
$(document).ready(function () {
$("#add").click(function () {
$('#add').after($("#new").html());
$('#new').css("Display", "block");
});
});
It doesn't do much and tried alot in there, so it's becoming messy. But when using the debug mode the List in ExerciseModel is empty and also the AnswerModel.
So again, the problem is that when posting the form, the List in ExerciseModel remains empty. I can't reach the List in exercisemodel for some reason through editor template. (controller not included because it doesn't do a lot right now and the List is always empty)
This has been keeping me busy for a week now, hopefully someone can help me?

Answer 1

I suspect that the culprit lies in your jQuery code, the one that's supposed to dynamically add new answers. You haven't shown it so it is hard to tell what might be wrong with it.
What you should be careful with is the naming convention of the input fields. Phil Haack illustrated in his blog post this convention.
Basically there are 2 approaches to dynamically adding a new element (when #btnadd is clicked):
Send an AJAX call to a controller action that will return a partial view containing en empty template. The naming convention should once again be respected. The difficulty here comes with the index. Since the naming convention allows you to use non-sequential indexes (read Phil Haack blog post once again) the easiest here would be to use Guids as indexes. Steven Sanderson illustrated this concept in his blog post and even showed a custom Html.BeginCollectionItem helper which does exactly that.
Do it purely on the client side. For example you could use a framework such as knockoutjs. Once again Steven Sanderson illustrated this concept in his blog post.
So So basically it's up to you to choose the approach you prefer. But no matter which approach you choose when the form is submitted if you haven't respected the nameing convention of your Answers input fields all you will get in your controller action is null.