Passing data to a modal from a table

Question

We want to display a prompt that warns users before deleting. Currently we are trying to use a modal but we cannot access the items ID and we do not know how to pass it to the modal in the cshtml.

This is how we are displaying the items that we want to let the user delete:

@foreach (var role in Model.AllRoles)
{
    <tr>
        <td>@role.Name</td>
        <td>
            <a asp-area="SysAdmin" asp-controller="Role" asp-action="EditRole" asp-route-id="@role.Id" class="btn btn-sm btn-success" style="width: 100%">Edit</a>
        </td>
        <td>
            <button type="submit" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteRoleModal" style="width: 100%">
                Delete
            </button>
        </td>
    </tr>
}

So the delete button displays a modal which currently looks like so:

<div class="modal fade" id="deleteRoleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Role</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Are you sure you want to delete this role?</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" asp-area="SysAdmin" asp-controller="Role" asp-action="DeleteRole">Delete Role</a>
            </div>
        </div>
    </div>
</div>

So when the user clicks delete role they are calling the Action DeleteRole on the Controller Role, which takes an ID. However, as the modal does not know the ID of the object to delete, we cannot pass that to the Action.

So the question really is how can we send the ID from the table to the modal so we can pass that to the Action when the user wants to delete?

Possible duplicate of [Passing data to a bootstrap modal](https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) — freedomn-m, Jan 22 '18 at 09:39
@freedomn-m How can we then call an action from the bootstrap modal? — CBreeze, Jan 22 '18 at 10:19

score 0 · Answer 1 · answered Jan 22 '18 at 10:26

Try this,

@foreach (var role in Model.AllRoles)
{
    <tr>
        <td>@role.Name </td>
        <td>
            <a asp-area="SysAdmin" asp-controller="Role" asp-action="EditRole" asp-route-id="@role.Id" class="btn btn-sm btn-success" style="width: 100%">Edit</a>
        </td>
        <td>
            <button onclick="SetId(@role.Id)" type="submit" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteRoleModal" style="width: 100%">
                Delete
            </button>
        </td>
    </tr>
}

Modal

<div class="modal fade" id="deleteRoleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Role</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Are you sure you want to delete this role?</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <button onclick="DeleteRole" class="btn btn-primary">Delete Role</button>
            </div>
        </div>
    </div>
</div>

Script Tag

<script>

    var selectedId = 0;
    var deleteURL = '@Url.Action("DeleteRole", "Role", new { Area = "SysAdmin" })';
    SetId(id)
    {
        selectedId = id;
    }

    DeleteRole()
    { 

        if (selectedId !== 0)
        {
            deleteURL = deleteURL + "?id=" + selectedId;
            window.open(deleteURL,"_self")
        }
    }

</script>

Passing data to a modal from a table

1 Answers1