Keeping model after form submission

Question

I have the following model used for a quiz, I am trying to submit a form and pass the existing model back to the Action as it has already been initialized in the Index action.

public class QuizModel
{
    private List<string> _Responses;

    public List<string> Responses
    {
        get
        {
            if (_Responses == null)
            {
                _Responses = new List<string>() { "Response A", "Response B", "Response C", "Response D" };
            }
            return _Responses;
        }
    }

    public int? SelectedIndex { get; set; }

    public string Question { get; set; }
}

With the following View:

<div class="title">Question</div>
<span id="question">@Model.Question</span>
@if (!Model.UserHasAnswered)
{
using (Html.BeginForm("Submit", "Quiz", FormMethod.Post))
{
    for (int i = 0; i < Model.Responses.Count; i++)
    {
        <div class="reponse">@Html.RadioButtonFor(m => m.SelectedIndex, i)@Model.Responses[i]</div>
    }
    <input type="submit" value="This is the value" />                              
}
}
else
{
    <div id="explanation">@Model.Explanation</div>
}

And Controller...

//
    // GET: /Quiz/

    public ActionResult Index()
    {
        QuizModel model = new QuizModel()
        {
            Question = "This is the question",
            Explanation = "This is the explanation",
            UserHasAnswered = false
        };

        return PartialView(model);
    }

    //
    // POST: /Quiz/Submit
    [HttpPost]
    public ActionResult Submit(QuizModel model)
    {
        if (ModelState.IsValid)
        {
            int? selected = model.SelectedIndex;

            model.UserHasAnswered = true;
        }

        return View("Index", model);
    }

When the model comes to the Submit action it only contains the SelectedIndex and not Question or Explanation properties. How can I tell my view to pass the original model it received back to the Submit action?

Answer 1

When you first display the index, your Question and Explanation are displayed correctly. Then you submit the form, and Question and Explanation doesn't make it to the Controller Action.

That is because your FORM doesn't have input fields containing the Question and Explanation.

Add this to your form:

@Html.HiddenFor(x => x.Question)
@Html.HiddenFor(x => x.Explanation)

If the Explanation is editable by the user, instead of adding a Hidden for it do this:

@Html.TextAreaFor(x => x.Explanation)

Remember: All the info you need to send to your controller need to be in INPUTS inside of your FORM.

This way, your view will became:

<div class="title">Question</div>
<span id="question">@Model.Question</span>
@if (!Model.UserHasAnswered)
{
using (Html.BeginForm("Submit", "Quiz", FormMethod.Post))
{
    @Html.HiddenFor(x => x.Question)
    @Html.HiddenFor(x => x.Explanation)
    for (int i = 0; i < Model.Responses.Count; i++)
    {
        <div class="reponse">@Html.RadioButtonFor(m => m.SelectedIndex, i)@Model.Responses[i]</div>
    }
    <input type="submit" value="This is the value" />                              
}
}
else
{
    <div id="explanation">@Model.Explanation</div>
}

Answer 2

I believe your index action should be like below in your scenario :

public ActionResult Index(QuizModel model)
{
    if(model == null) 
    {
        model = new QuizModel()
        {
            Question = "This is the question",
            Explanation = "This is the explanation",
            UserHasAnswered = false
        };
    }

    return PartialView(model);
}

Hope this will help !!