Getting multiple select values from loop in Razor Pages - asp.net-core

Question

I'm looping through a list to populate my questionnaire with selects. I haven't found any tutorial explaining how to extract values from multiple selects in one click. Any ideas?
Here's the view:
<div class="text-center">
<form method="post" asp-page-handler="Answer">
#foreach (var question in Model.QuestionList)
{
<p>#question.Query</p>
<select asp-for="Answer">
<option value="">Select a number</option>
<option value="#question.Option1">#question.Option1</option>
<option value="#question.Option2">#question.Option2</option>
<option value="#question.Option3">#question.Option3</option>
</select>
}
<br>
<br>
<button type="submit">Send</button>
</form>
</div>
Here's the .cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using myquiz.Models;
using myquiz.Services;
namespace myquiz.Pages
{
public class QuizModel : PageModel
{
[ViewData]
[BindProperty]
public string Name { get; set; }
[BindProperty]
public Visitor Visitor { get; set; }
[BindProperty]
public List<Question> QuestionList { get; set; }
public string Answer { get; set; }
public void OnGet()
{
///QuestionList = new List<Question>();
// if (QuestionList is null)
// QuestionList = new List<Question>();
}
public void OnPost()
{
Name = Visitor.Name;
var quizService = new QuizService();
QuestionList = quizService.GetQuestions();
}
public void OnPostAnswer() {
Console.WriteLine("Yay, Answer works");
}
}
}
Here's the model
namespace myquiz.Models
{
public class Question
{
public int Id { get; set; }
public string Query { get; set; }
public string Option1 { get; set; }
public string Option2 { get; set; }
public string Option3 { get; set; }
public string Answer { get; set; }
}
}

Answer 1

Here are two ways to get the select answers:
The first way
All the select lists have the same name Answer,so you could receive an array named Answer in the backend and use BindProperty to bind the values:
public class IndexModel : PageModel
{
[ViewData]
[BindProperty]
public string Name { get; set; }
[BindProperty]
public List<Question1> QuestionList { get; set; }
[BindProperty]
public string[] Answer { get; set; } //modify this...
public void OnPostAnswer()
{
Console.WriteLine("Yay, Answer works");
}
}
View(be the same as yours):
<div class="text-center">
<form method="post" asp-page-handler="Answer">
#foreach (var question in Model.QuestionList)
{
<p>#question.Query</p>
<select asp-for="Answer">
<option value="">Select a number</option>
<option value="#question.Option1">#question.Option1</option>
<option value="#question.Option2">#question.Option2</option>
<option value="#question.Option3">#question.Option3</option>
</select>
}
<br>
<br>
<button type="submit">Send</button>
</form>
</div>
Result:
The second way:
If you want to get the question id with selected answer in QuestionList,you need learn how does model binding system work firstly:
For each property of the complex type, model binding looks through the sources for the name pattern prefix.property_name. If nothing is found, it looks for just property_name without the prefix.For QuestionList is a List,you need give the name like:QuestionList[index].Answer.
<div class="text-center">
<form method="post" asp-page-handler="Answer">
#{
int i = 0;
} //add this...
#foreach (var question in Model.QuestionList)
{
<input hidden asp-for="QuestionList[i].Id" /> //add this..
<p>#question.Query</p>
<select asp-for="QuestionList[i].Answer"> //change asp-for
<option value="">Select a number</option>
<option value="#question.Option1">#question.Option1</option>
<option value="#question.Option2">#question.Option2</option>
<option value="#question.Option3">#question.Option3</option>
</select>
i++; //add this...
}
<br>
<br>
<button type="submit">Send</button>
</form>
</div>
Result:
Update:
Change <select asp-for="Answer"> to:
<select name="Answer">
//..
</select>
Result: