Why isn't my form passing the id to the controller?

Question

I've got an asp.net mvc webpage set up. All of my actions, like: create, edit, etc... have their own views, except delete, because I'm trying to pop up a modal with help from Bootstrap. I pass an id to the modal, through jQuery/JavaScript, and with the asp-action as the form's attribute, it should theoretically work, but well it doesn't.

Index View:

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


}

Delete Action in Controller:

        [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+'');
}

Input getting the id as the value of the name:

When debugging, it receives no id whatsoever:

The javascript-function receives the parameters just fine. I think that the problem lies in, the way, the form passes the id to the controller. It somehow doesn't pass the value of the name-attribute.

Answer 1

This is happening for two reasons. Firstly, the hidden input should have the name matching the argument in the action. In your case id:

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

Secondly, your JS should set the value of the field, not its name:

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