How to read multiple choice answers from a dynamic form in razor pages?

Issue

This Content is from Stack Overflow. Question asked by Logany-hi

As a follow up on my previous question related to this issue, the solution provided there works well enough for basic answers to basic questions in my questionnaire.

Background

I’m allowing the user to create custom questionnaires by specifying question details including a question type which determines the UI elements that will be rendered dynamically when their customer fills out the questionnaire.

The proposed solution of binding in a list per learnrazorpages.com works well for questions for which only one response may be given, however, it seems less apt for handling a multiple choice type of question where the user may provide any number of responses.

The following code does not inject my selections on the multiple choice question into the form submission.

<form method="post">
    @for (int i = 0; i <= Model.Questions.Count - 1; i++)
    {
        var question = Model.Questions[i];
        var questionId = Model.Questions[i].Id;
        var questionType = Model.Questions[i].Type;

        <input type="hidden" id="[@i].QuestionId" name="[@i].QuestionId" value="@questionId" />

        @if (questionType == Enums.QuestionType.MultipleChoice)
        {
            var options = Model.Options.Where(x => x.Question.Id == questionId);
            var answers = Model.Answers.WHere(x => x.Question.Id == questionId);

            <div class="mb-3">
                <p class="mb-0 mt-2">@question.Text</p>

                @for (int j = 0; j <= Model.Options.Count() - 1; j++)
                {
                    if (Model.Options[j].Question.Id == questionId)
                    {
                        // Determine based on the answer whether or not to check the checkbox.
                        var option = Model.Options[j];

                        var isChecked = answers.Any(x => x.Value == option.Id.ToString());
                        var _checked = isChecked ? "checked" : "";

                        <div>
                            <input type="hidden" id="[@j].OptionId" name="[@j].OptionId" value="@option.Id" />
                            <input class="form-check-input" type="checkbox" id="[@j].Value" name="[@j].Value" value="@option.Id" @_checked />
                            <label class="form-check-label" for="[@j].Value">@option.Text</label>
                        </div>
                    }
                }
            </div>
        }
</form>

I structured it this way thinking it would simply inject the options list into the method parameter value of my OnPost method, since the viewmodel I built for that method accepts the list as a parameter:

public void OnPost(List<AnswerViewmodel> answers)
{
    // I haven't got any logic here yet to save the answers so this is just for a breakpoint.
    var answered = answers.Where(x => x.Value is not null);
}

public class AnswerViewmodel
{
    public int QuestionId { get; set; }
    public string Value { get; set; }
    public string Comment { get; set; }
    public List<OptionViewmodel> Options { get; set; }
}

public class OptionViewmodel
{
    public int OptionId { get; set; }
    public string Value { get; set; }
}

If the option is selected (checked) then Value will be “true”, otherwise “false”.

However, the Options list is always null in the value.

How can I get my options to post through to the backend with the rest of the form?



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?