ASP.NET CORE Routing with many parameters

Question

There are four dropdown buttons in the application. The options in the drop-down list are links. The code for one of them:

<li><a asp-controller="Aircrafts" asp-action="Compare" 
asp-route-vehicle1="@item.Id">@item.Name</a></li>

@item.Id it's int variable

Controller method taking values:

[HttpGet("compare/{vehicle1}/{vehicle2}/{vehicle3}/{vehicle4}")]
public IActionResult Compare(int vehicle1, int vehicle2, int vehicle3, int vehicle4)
{//код} 

Routing:.

endpoints.MapControllerRoute(
name: "FourParameters",
pattern: "controller=Aircrafts}/{action=Compare}/{vehicle1=0}/{vehicle2=0}/{vehicle3=0}/{vehicle4=0}");

Task: When a user clicks on any link of the dropdown, for example, on the third, it is necessary that an address is created like this: aircrafts/compare/0/0/5/0
and the method in the controller is called, if he clicks on the fourth, then the address should be: aircrafts/compare/0/0/5/8 etc.

But in my implementation, the controller method is called only after clicking on the fourth dropdown. It's a problem.

Answer 1

If you want to keep the parameter values passed before, I suggest you use ajax for passing.

Here is the code:

@model IEnumerable<WebApplication_core.Models.Customer>
@{
    ViewData["Title"] = "Compare";
    Layout = null;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
    $(function () {
        var paramObj = {
            "vehicle1": 0,
            "vehicle2": 0,
            "vehicle3": 0,
            "vehicle4": 0,
        }
        $(".dropdown-menu a").click(function () {
            event.preventDefault();
            var url = "/Aircrafts/compare";
            var vehicle = $(this).attr("vehicle");
            var value = $(this).attr("value");
            paramObj[vehicle] = parseInt(value);
            for (var key in paramObj) {
                url += "/" + paramObj[key];
            }
            $.ajax({
                type: "Get",
                url: url,
                success: function (response) {
                    window.history.pushState("", "", url);
                },
                failure: function (response) {
                    alert(response);
                }
            });
        });
    });
</script>
<h1>Compare</h1>
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown1
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        @foreach (var item in Model)
        {
            <li>
                <a asp-controller="Aircrafts" asp-action="Compare"
                   vehicle="vehicle1" value="@item.Id">@item.Name</a>
            </li>
        }
    </ul>
</div>
<br />
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown2
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        @foreach (var item in Model)
        {
            <li>
                <a asp-controller="Aircrafts" asp-action="Compare"
                   vehicle="vehicle2" value="@item.Id">@item.Name</a>
            </li>
        }
    </ul>
</div>
<br />
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown3
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        @foreach (var item in Model)
        {
            <li>
                <a asp-controller="Aircrafts" asp-action="Compare"
                   vehicle="vehicle3" value="@item.Id">@item.Name</a>
            </li>
        }
    </ul>
</div>
<br />
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown4
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        @foreach (var item in Model)
        {
            <li>
                <a asp-controller="Aircrafts" asp-action="Compare"
                   vehicle="vehicle4" value="@item.Id">@item.Name</a>
            </li>
        }
    </ul>
</div>

Here is the result :