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

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:

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

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

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

When debugging, it receives no id whatsoever:

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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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);
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x