How to get data from 2 (or more) independent dropdown asp.net core mvc?

Question

I have 2 independent dropdown list. But I can't receive selected value from each dropdown. How to pass selected Id to a controller? This is my code:

View:

<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>

Controller

It's not working

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

Model

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

Answer 1

You need to change the name attribute of these two dropdownlists :

<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>

You can also use ajax as follow:

    <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>