为什么我的表单没有将 id 传递给控制器​​？

Question

我已经建立了一个 asp.net mvc 网页。我所有的操作，比如：创建、编辑等......都有自己的视图，除了删除，因为我试图在 Bootstrap 的帮助下弹出一个模式。我通过 jQuery/JavaScript 将 id 传递给模态，并使用 asp-action 作为表单的属性，理论上它应该可以工作，但实际上并没有。

索引视图：

@if (Model.Tenants.Any())
{
    <h3>Tenants (@Model.Tenants.Count)</h3>
    <div class="table-responsive">
        <table class="table table-striped table-sm">
            <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Id</th>
                <th>UrlFriendlyName</th>
                <th>MicrosoftGraphTenantId</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            @foreach (var tenant in Model.Tenants.OrderByDescending(x => x.Name))
            {
                <tr>
                    <td>
                        <button class="btn btn-primary" onclick="document.location.href = '@Url.Action("Index", "User", new {id = tenant.Id})'">Show Users</button>
                    </td>
                    <td>
                        @tenant.Name
                    </td>
                    <td>
                        @tenant.Id
                    </td>
                    <td>
                        @tenant.UrlFriendlyName
                    </td>
                    <td>
                        @tenant.MicrosoftGraphTenantId
                    </td>
                    <td>
                        <div class="btn-group-justified pull-right ">
                            <button class="btn btn-success" onclick="document.location.href = '@Url.Action("Edit", "Tenant", new {id = tenant.Id})'">Edit</button>
                            <button type="button" class="btn btn-danger" onclick="deleteTenant('@tenant.Id', '@tenant.Name')" data-toggle="modal" data-target="#deleteModal">Delete</button>
                        </div>
                    </td>
                </tr>
            }
            </tbody>
        </table>
    </div>

    <div class="align-items-sm-end">
        <button onclick="document.location.href='@Url.Action("Create", "Tenant")'" class="btn btn-outline-success">Create new Tenant</button>
    </div>

    <div class="modal fade" id="deleteModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the selected Tenant?</p>
                </div>
                <div class="modal-footer">
                    <form asp-action="Delete">
                        <input type="hidden" id="tenantidinput"/>
                        <button type="submit" class="btn btn-outline-danger">Delete Tenant</button>
                    </form>
                    
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
        
    </div>
    


}

删除控制器中的动作：

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> DeleteAsync(Guid id)
        {
            if (ModelState.IsValid && id != Guid.Empty)
            {
                var tenant = await _context.Tenants.AsQueryable().Where(x => x.Id == id).FirstOrDefaultAsync().ConfigureAwait(false);
                _context.Tenants.Remove(tenant);
                await _context.SaveChangesAsync().ConfigureAwait(false);
                
            }
            return RedirectToAction("Index");

            
        }

Javascript：

function deleteTenant(tenantid, tenantname) {
    $(".modal-title").text("Delete " + tenantname);
    $("#tenantidinput").attr("name", ''+tenantid+'');
}

输入获取id作为名称的值：

调试时，它没有收到任何 id：

javascript-function 接收参数就好了。我认为问题在于，表单将 id 传递给控制器​​的方式。它不知何故没有传递名称属性的值。

Answer 1

发生这种情况有两个原因。首先，隐藏的input 的名称应该与动作中的参数匹配。在你的情况下id：

<input type="hidden" name="id" id="tenantidinput" />

其次，你的 JS 应该设置字段的value，而不是它的name：

function deleteTenant(tenantid, tenantname) {
  $(".modal-title").text("Delete " + tenantname);
  $("#tenantidinput").val(tenantid);
}