asp.NET mvc, get model list values from view

As discussed.. here is how i would approach this.

I have a view model to hold the questions and answers and the selected question to which we will be adding answers.

public class CurrentViewModel
{
    public string QuestionSelected { get; set; }
    public List<SelectListItem> Questions { get; set; }
    public List<string> Answers { get; set; }
}

Then in your controller we have an action to return the view, an action to get the answers for the selected question, an action to add a new answer for the selected question and also a save method which just demonstrates the final model content posted.

public class TestController : Controller
    {
        public ActionResult Test()
        {
            var model = new CurrentViewModel()
            {
                Questions = new List<SelectListItem>()
                {
                    new SelectListItem()
                    {
                        Text = "Question 1",
                        Value = "Question 1"
                    },

                    new SelectListItem()
                    {
                        Text = "Question 2",
                        Value = "Question 2"
                    }
                },
                Answers = new List<string>()
            };

            return View("Test", model);
        }

        public PartialViewResult GetAnswers(CurrentViewModel model)
        {
            model.Answers = new List<string>();
            //model.Answers = Get Answers from some service based on QuestionSelected?!
            model.Answers.Add("Answer 1");
            model.Answers.Add("Answer 2"); //Add manuall for example
            return PartialView("_Answers", model);
        }

        public PartialViewResult AddAnswer(CurrentViewModel model)
        {
            model.Answers.Add("Add answer here...");
            return PartialView("_Answers", model);
        }

        public ActionResult SaveQuestionsAndAnswers(CurrentViewModel model)
        {
            if (model.Questions.Count == 0)
            {

            }

            return View("Test", model);
        }

    }

Then we have a main view for showing the questions dropdown and a partial view that will show us the answers.

Main View

@model TestMVC.Models.CurrentViewModel

    @{
        ViewBag.Title = "Test";
    }

    <link href="~/Content/StyleSheets/jquery-ui.css" rel="stylesheet" />
    <script src="~/Content/Scripts/jquery-2.2.3.js"></script>
    <script src="~/Content/Scripts/jquery-ui-1.11.4.js"></script>

    <div id="divBodyContent">
        <div>
            <h3>Q & A</h3>
        </div>

        @using (Html.BeginForm("SaveQuestionsAndAnswers", "Test", FormMethod.Post, new { id = "frmQandA" }))
        {
            @Html.Label("lblQ", "Questions", new { @class = "form-control inline" })
            @Html.DropDownListFor(model => model.QuestionSelected, Model.Questions, "Select--", new { @class = "form-control inline", id="ddQuestions" })

            <div id="divAnswers">
                @Html.Partial("_Answers")
            </div>

        <div style="margin-top: 1%;">
            <button id="btnSave" type="submit" class="btn btn-primary" style="margin-left: 4px; margin-bottom: 10px; width: 7%">save</button>
        </div>

        }
    </div>

    <script>
        $("#ddQuestions").on("change", function() {
            var myData = $('#frmQandA').serialize();

            $.ajax({
                type: "POST",
                url: "@Url.Action("GetAnswers", "Test")",
                data: myData,
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                success: function(data) {
                    $("#divAnswers").html(data);
                }
            })});

    </script>

Partial View

@model TestMVC.Models.CurrentViewModel

<link href="~/Content/StyleSheets/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/Scripts/jquery-2.2.3.js"></script>
<script src="~/Content/Scripts/jquery-ui-1.11.4.js"></script>

<div>
    @for (var counter = 0; counter <= (Model.Answers.Count - 1); counter++)
    {
        @Html.TextBoxFor(model => model.Answers[counter], new {@class = "form-control inline"})
    }

    <div style="margin-top: 1%;">
        <button id="btnAddAnswer" type="button" class="btn btn-primary" style="margin-left: 4px; margin-bottom: 10px; width: 7%">Add</button>
    </div>


</div>

<script>

    $("#btnAddAnswer").on("click", function() {
        var myData = $('#frmQandA').serialize();

        $.ajax({
            type: "POST",
            url: "@Url.Action("AddAnswer", "Test")",
            data: myData,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        success: function (data) {
            $("#divAnswers").html(data);
        }
    })});

</script>

I've tested this locally and it works. In a nutshell, when we need a new answer adding to the model, we add it in server side so we can then bind to the model in the browser. We do this via an Ajax call on the change event of the questions drop down. The partial view iterates through each answer via a counter which generates a unique id and textbox for each answer. Adding a new answer is also achieved via ajax. These can then all be posted back.

Hope that helps.