带有许多参数的 ASP.NET CORE 路由

Question

应用程序中有四个下拉按钮。下拉列表中的选项是链接。其中之一的代码：

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

@item.Id 它是 int 变量

控制器方法取值：

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

路由：。

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

任务：当用户点击下拉列表中的任何一个链接时，例如在第三个，需要这样创建一个地址： 飞机/比较/0/0/5/0
并且调用了控制器中的方法，如果他点击第四个，那么地址应该是： 飞机/比较/0/0/5/8等

但在我的实现中，控制器方法只有在点击第四个下拉菜单后才会被调用。这是个问题。

Answer 1

如果你想保留之前传递的参数值，我建议你使用ajax进行传递。

代码如下：

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

结果如下：