Как получить данные из 2 (или более) независимых выпадающих asp. net core mvc?

Question

У меня есть 2 независимых раскрывающихся списка. Но я не могу получить выбранное значение из каждого раскрывающегося списка. Как передать выбранный идентификатор в контроллер? Это мой код:

Вид:

<form asp-controller="Aircrafts" asp-action="Compare" method="post" class="dropdown">
                    <select id="DropDown1" asp-for="@Model.Id" asp-items="@(new SelectList(@ViewBag.ListOfPlanes, "Id", "Name"))" onchange="this.form.submit();">
                        <option value="" selected disabled>Select vehicle</option>
                    </select>
                </form>
<br/>
<form asp-controller="Aircrafts" asp-action="Compare" method="post" class="dropdown">
                    <select id="DropDown2" asp-for="@Model.Id" asp-items="@(new SelectList(@ViewBag.ListOfPlanes, "Id", "Name"))" onchange="this.form.submit();">
                        <option value="" selected disabled>Select vehicle</option>
                    </select>
                </form>

Контроллер

Не работает

[HttpPost]
public IActionResult Compare(Plane DropDown1, Plane DropDown2) 
{
    return View();
}

Модель

public class Plane
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int MaxSpeed { get; set; }
}

Answer 1

Вам необходимо изменить атрибут имени этих двух выпадающих списков:

<form asp-controller="Aircrafts" asp-action="Compare" method="post" class="dropdown">
<select id="DropDown1" name="DropDown1.Id" asp-for="@Model.Id" asp-items="@(new SelectList(@ViewBag.ListOfPlanes, "Id", "Name"))" onchange="this.form.submit()">
    <option value="" selected disabled>Select vehicle</option>
</select>

 <select id="DropDown2" name="DropDown2.Id" asp-for="@Model.Id" asp-items="@(new SelectList(@ViewBag.ListOfPlanes, "Id", "Name"))" onchange="this.form.submit()">
    <option value="" selected disabled>Select vehicle</option>
</select>

Вы также можете использовать ajax следующим образом:

    <script>
        function ChangeItems() {
            var dropdown1 = {
                Id: $("#DropDown1").val(),
            };
            var dropdown2 = {
                Id: $("#DropDown2").val(),
            };
            $.ajax({
                type: "POST",
                url: $("form").attr('action'),
                data: { DropDown1: dropdown1, DropDown2: dropdown2 },
                success: function (response) {
                },
                failure: function (response) {
                    alert(response);
                }
            });
        } 
</scripts>
<form asp-controller="Aircrafts" asp-action="Compare" method="post" class="dropdown">
    <select id="DropDown1" asp-for="@Model.Id" asp-items="@(new SelectList(@ViewBag.ListOfPlanes, "Id", "Name"))" onchange="ChangeItems()">
        <option value="" selected disabled>Select vehicle</option>
    </select>
    <select id="DropDown2" asp-for="@Model.Id" asp-items="@(new SelectList(@ViewBag.ListOfPlanes, "Id", "Name"))" onchange="ChangeItems()">
        <option value="" selected disabled>Select vehicle</option>
    </select>
</form>

Answer 2

Заключены оба раскрывающихся списка в одну метку формы, например

<form asp-controller="Aircrafts" asp-action="Compare" method="post" class="dropdown">
                    <select id="DropDown1" asp-for="@Model.Id" asp-items="@(new SelectList(@ViewBag.ListOfPlanes, "Id", "Name"))" onchange="this.form.submit();">
                        <option value="" selected disabled>Select vehicle</option>
                    </select>

                    <select id="DropDown2" asp-for="@Model.Id" asp-items="@(new SelectList(@ViewBag.ListOfPlanes, "Id", "Name"))" onchange="this.form.submit();">
                        <option value="" selected disabled>Select vehicle</option>
                    </select>
                </form>

Вариант 2 можно отправить вызов по Ajax