通过自动生成的 JavaScript 链接将参数传递给控制器答案

【问题标题】：Passing the parameter via an automatically generated JavaScript link to the controller通过自动生成的 JavaScript 链接将参数传递给控制器
【发布时间】：2021-08-29 12:38:21
【问题描述】：

我在通过链接将参数传递给控制器时遇到问题。我遇到问题的视图是动态显示用户列表，以及搜索它们的可能性。我在js中做了这部分，它工作正常。在 js 中的这个功能中，我生成了一个指向按钮的链接，以便稍后在按下按钮后，您可以将选择保存在数据库中。每个链接都有一个分配的用户 ID 和用户组 ID。我的问题是当我按下按钮时，什么也没有发生。

以下代码表示上述功能。非常感谢您的帮助。

@if(ViewData[Enums.States.UserSelectWindow.ToString()].ToString() == "True")
 {
<script type="text/javascript">
    $("#UserlistCollectionId").css('height', $("#WindowUserSelectId").height() + 'px');

    let users = @Html.Raw(Json.Serialize(UserModel.GetUsers()));

        function Clear() {
            $("#UserlistCollectionId").empty();
        }

        function FillAll(users) {
            Clear();
            for (user of users) {
                $("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-action="AddUserToGroup" asp-controller="Settings" asp-route-groupId=@Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');
            }
        }

        FillAll(users);

        $("#SearchInputId").keyup(function () {
            Clear();
            let searchValue = $("#SearchInputId").val();
            if (searchValue === "")
                FillAll(users);
            else {
                for (user of users) {
                    if (user.name.includes(searchValue)) {
                        $("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-route-groupId=@Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');
                    }
                }
            }
    });
</script>
 }

在上面的代码中，使用JQuery进行自动链接生成如下：

$("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-route-groupId=@Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');

不幸的是，它不起作用。在页面的检查中你可以看到标签“a”没有属性“href”，只是自动将所有代码放在引号中： Screen of the html fragment in the browser

【问题讨论】：

嗨@Adrian，我的回答是否帮助您解决了您的问题？如果可以，请您接受作为答案吗？如果没有，请您跟进让我知道吗？参考：How to accept as answer .谢谢。

标签： javascript html jquery asp.net-core-mvc

【解决方案1】：

首先，你需要阅读the doc about what does asp-route-{value} generate the url：

占据{value} 占位符的任何值都被解释为潜在的路由参数。如果未找到默认路由，则将此路由前缀附加到生成的 href 属性作为请求参数和值
(/home/index?value=aaa)。否则，它在路由模板中被替换。更多解释可以参考文档。

其次，您没有指定控制器和操作名称，因此 url 将根据您的请求 url 生成。也就是说，如果标签助手存在于Home/Privacy.cshtml，则会生成到：href="/home/privacy?value=aa"。

最后，标签助手被解释。换句话说，Razor 必须将它们视为实际标签才能替换它们。所以你在js中做的不会遵循标签助手生成原则，它只是一个js字符串。您需要更改以下网址：

<a class="btn btn-sm btn-success" href="/home/index?groupId=' +@Model.Group.Id+'&userId=' + user.id+'">Wybierz</a>

如果url匹配默认路由模板，url可能如下：

<a class="btn btn-sm btn-success" href="/home/index/' +@Model.Group.Id+'/' + user.id+'">Wybierz</a>

【讨论】：