将 Id 参数传递给 ajax 函数

Posted 2023-02-15

【中文标题】将 Id 参数传递给 ajax 函数

【英文标题】：Pass Id parameter into ajax function

【发布时间】：2022-01-01 04:39:48

【问题描述】：

AJAX 函数没有将 Id 参数传递给我的控制器中的 GET 方法。

我有这张桌子。

 @foreach (var user in Model)
                
                    <tr>
                        <td>@user.FirstName</td>
                        <td>@user.LastName</td>
                        <td>@user.Email</td>
                        <td>@string.Join(" , ", user.Roles.ToList())</td>
                        <td>
                            <a class="btn btn-primary" onclick="manageRolePopup('@Url.Action("Manage","Role",                                     new id=user.UserId ,Context.Request.Scheme)')">Manage Roles</a>

                            <partial name="_RoleManagePopup.cshtml" />
                        </td>
                    </tr>
                

点击时我想在弹出用户的名字和姓氏中显示，所以我在我的 Controller

中有这个

 [HttpGet]
        public async Task<IActionResult> Manage(string userId)
        
            var user = await _userManager.FindByIdAsync(userId);

            ViewBag.FirstName = user.FirstName;
            ViewBag.LastName = user.LastName;

            var model = new ManageRoleViewModel();

            List<string> roleNames = new List<string>();

            foreach(var role in _roleManager.Roles)
            
                model.RoleId = role.Id;
                roleNames.Add(role.Name);
            
            model.UserId = user.Id;
            model.RoleNames = roleNames;

            return View(model);
        

AJAX

manageRolePopup = (url) => 
    $.ajax(
        type: "GET",
        url: url,
        success: function (res) 
            $("#form-modal .modal-body").html(res);
            $("#form-modal").modal("show");
        
    )

查看

<form method="post" asp-controller="Role" asp-action="Manage" asp-route-UserId="@Model.UserId">
    <div class="row">
        <div class="col-3">
            <h4>@ViewBag.FirstName @ViewBag.LastName</h4>

            <div class="form-group">
                <select asp-items="@new SelectList(Model.RoleNames)">
                    <option selected disabled>---Select New Role---</option>
                </select>
            </div>
        </div>
    </div>
</form>

当我像下面一样通过 Id 时，一切都很好。用户不为空，id参数也是。

<a asp-controller="Role" asp-action="Manage" asp-route-UserId="user.UserId"></a>

显然我想做 UPDATE 方法，但现在我只想让它显示。

【参考方案1】：

你必须将 userId 添加到你的 ajax url

manageRolePopup = (userId) => 

 var url = @Url.Action("Manage","Role");

 $.ajax(
        type: "GET",
        url: url+"?UserId="+userId,
        ....

由于您有一个您需要的 UserId 列表，或者将 UserId 数据属性添加到您的 ancore 标签，或者将其作为输入参数推送

<a class="btn btn-primary" onclick="manageRolePopup(@user.UserId)>Manage Roles</a>

但最好使用现代 javascript 语法

<script type="text/javascript">

 $(document).ready(function () 

 $(document).on("click", ".userBtn", (function (e) 
        e.preventDefault();
        e.stopImmediatePropagation();
    
     var userId= this.id;
    var url = @Url.Action("Manage","Role");

 $.ajax(
        type: "GET",
        url: url+"?UserId="+userId,
        ....
     
    ));

 );
</script>

并查看

<a id="@user.UserId" class="userBtn btn btn-primary"> Manage Roles </a>

【讨论】：

谢谢先生。绝妙的答案。它解决了我的问题。我认为我的 onClick 方法第三个参数是“新的 [id=user.UserId] 应该传递给 AJAX URL。你能解释一下为什么它不起作用吗？

@zarpat 我更新了我的答案。

@zarpat 我再次更新了我的答案

再次感谢您，先生。这种现代 javascript 语法肯定更清晰。